-
Notifications
You must be signed in to change notification settings - Fork 4
Expand file tree
/
Copy pathindex.html
More file actions
8 lines (8 loc) · 307 KB
/
index.html
File metadata and controls
8 lines (8 loc) · 307 KB
1
2
3
4
5
6
7
8
<!DOCTYPE html><html lang=en-us><meta charset=UTF-8><title>Tengwar Feanor Elvish Transcriber</title><meta content="Max Davy" name=author><meta content="Easy tool for transcribing to Elvish and Dwarvish, maps and songs from Tolkien's works, Elvish and Dwarvish font downloads, history of the languages, and more. Free apps for Windows and Android." name=description><meta content=https://tengwartranscriber.github.io/icons/96x96.png property=og:image><meta content="Easy tool for transcribing to Elvish and Dwarvish, maps and songs from Tolkien's works, Elvish and Dwarvish font downloads, history of the languages, and more. Free apps for Windows and Android." property=og:description><meta content="Tengwar Feanor Elvish Transcriber" property=og:title><meta content="Tengwar Feanor Elvish Transcriber" name=twitter:title><meta content=#607d8b name=theme-color><meta content=#607d8b name=msapplication-navbutton-color><meta content=#607d8b name=msapplication-TileColor><meta content=yes name=apple-mobile-web-app-capable><meta content=black-translucent name=apple-mobile-web-app-status-bar-style><meta content=yes name=mobile-web-app-capable><link href=./icons/32x32.png rel=icon sizes=32x32 type=image/png><link href=./icons/96x96.png rel=icon sizes=96x96 type=image/png><link href=./icons/60x60.png rel=apple-touch-icon sizes=60x60><link href=./icons/120x120.png rel=apple-touch-icon sizes=120x120><link href=./icons/76x76.png rel=apple-touch-icon sizes=76x76><link href=./icons/152x152.png rel=apple-touch-icon sizes=152x152><link href=/icons/manifest.json rel=manifest><meta content=./icons/ms.png name=msapplication-TileImage><meta content="width=device-width,initial-scale=1" name=viewport><style>@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, iframe, img, svg, video{ vertical-align: middle} fieldset{ border: 0; margin: 0; padding: 0} textarea{ resize: vertical} .browserupgrade{ margin: .2em 0; background: #ccc; color: #000; padding: .2em 0} .hidden{ display: none !important} .portfolio-max-width>.mdl-cell{ border-radius: 1em !important;} .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:after, .clearfix:before{ content: " "; display: table} .clearfix:after{ clear: both} @media print{ *, :after, :before, :first-letter{ background: 0 0 !important; color: #000 !important; box-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: ""} blockquote, pre{ border: 1px solid #999; page-break-inside: avoid} thead{ display: table-header-group} img, tr{ page-break-inside: avoid} img{ max-width: 100% !important} h2, h3, p{ orphans: 3; widows: 3} h2, h3{ page-break-after: avoid}} .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, a{ -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} body, html{ 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: #40c4ff; 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} blockquote:before{ position: absolute; left: -.5em; content: '“'} blockquote:after{ content: '”'; margin-left: -.05em} mark{ background-color: #f4ff81} dt{ font-weight: 700} address{ font-size: 12px; line-height: 1; font-style: normal} address, ol, ul{ font-weight: 400; letter-spacing: 0} ol, ul{ font-size: 14px; line-height: 24px} .mdl-typography--display-4, .mdl-typography--display-4-color-contrast{ font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 112px; font-weight: 300; line-height: 1; letter-spacing: -.04em} .mdl-typography--display-4-color-contrast{ opacity: .54} .mdl-typography--display-3, .mdl-typography--display-3-color-contrast{ font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 56px; font-weight: 400; line-height: 1.35; letter-spacing: -.02em} .mdl-typography--display-3-color-contrast{ opacity: .54} .mdl-typography--display-2, .mdl-typography--display-2-color-contrast{ font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 45px; font-weight: 400; line-height: 48px} .mdl-typography--display-2-color-contrast{ opacity: .54} .mdl-typography--display-1, .mdl-typography--display-1-color-contrast{ font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 34px; font-weight: 400; line-height: 40px} .mdl-typography--display-1-color-contrast{ opacity: .54} .mdl-typography--headline, .mdl-typography--headline-color-contrast{ font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 32px; -moz-osx-font-smoothing: grayscale} .mdl-typography--headline-color-contrast{ opacity: .87} .mdl-typography--title, .mdl-typography--title-color-contrast{ font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 500; line-height: 1; letter-spacing: .02em} .mdl-typography--title-color-contrast{ opacity: .87} .mdl-typography--subhead, .mdl-typography--subhead-color-contrast{ font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: .04em} .mdl-typography--subhead-color-contrast{ opacity: .87} .mdl-typography--body-2, .mdl-typography--body-2-color-contrast{ font-size: 14px; font-weight: 700; line-height: 24px; letter-spacing: 0} .mdl-typography--body-2-color-contrast{ opacity: .87} .mdl-typography--body-1, .mdl-typography--body-1-color-contrast{ font-size: 14px; font-weight: 400; line-height: 24px; letter-spacing: 0} .mdl-typography--body-1-color-contrast{ opacity: .87} .mdl-typography--body-2-force-preferred-font, .mdl-typography--body-2-force-preferred-font-color-contrast{ font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 24px; letter-spacing: 0} .mdl-typography--body-2-force-preferred-font-color-contrast{ opacity: .87} .mdl-typography--body-1-force-preferred-font, .mdl-typography--body-1-force-preferred-font-color-contrast{ font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 24px; letter-spacing: 0} .mdl-typography--body-1-force-preferred-font-color-contrast{ opacity: .87} .mdl-typography--caption, .mdl-typography--caption-force-preferred-font{ font-size: 12px; font-weight: 400; line-height: 1; letter-spacing: 0} .mdl-typography--caption-force-preferred-font{ font-family: Roboto, Helvetica, Arial, sans-serif} .mdl-typography--caption-color-contrast, .mdl-typography--caption-force-preferred-font-color-contrast{ font-size: 12px; font-weight: 400; line-height: 1; letter-spacing: 0; opacity: .54} .mdl-typography--caption-force-preferred-font-color-contrast, .mdl-typography--menu{ font-family: Roboto, Helvetica, Arial, sans-serif} .mdl-typography--menu{ font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0} .mdl-typography--menu-color-contrast{ opacity: .87} .mdl-typography--button, .mdl-typography--button-color-contrast, .mdl-typography--menu-color-contrast{ font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0} .mdl-typography--button, .mdl-typography--button-color-contrast{ text-transform: uppercase} .mdl-typography--button-color-contrast{ opacity: .87} .mdl-typography--text-left{ text-align: left} .mdl-typography--text-right{ text-align: right} .mdl-typography--text-center{ text-align: center} .mdl-typography--text-justify{ text-align: justify} .mdl-typography--text-nowrap{ white-space: nowrap} .mdl-typography--text-lowercase{ text-transform: lowercase} .mdl-typography--text-uppercase{ text-transform: uppercase} .mdl-typography--text-capitalize{ text-transform: capitalize} .mdl-typography--font-thin{ font-weight: 200 !important} .mdl-typography--font-light{ font-weight: 300 !important} .mdl-typography--font-regular{ font-weight: 400 !important} .mdl-typography--font-medium{ font-weight: 500 !important} .mdl-typography--font-bold{ font-weight: 700 !important} .mdl-typography--font-black{ font-weight: 900 !important} .material-icons{ font-family: 'Material Icons'; font-weight: 400; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; word-wrap: normal; -moz-font-feature-settings: 'liga'; font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased} .mdl-color-text--red{ color: #f44336 !important} .mdl-color--red{ background-color: #f44336 !important} .mdl-color-text--red-50{ color: #ffebee !important} .mdl-color--red-50{ background-color: #ffebee !important} .mdl-color-text--red-100{ color: #ffcdd2 !important} .mdl-color--red-100{ background-color: #ffcdd2 !important} .mdl-color-text--red-200{ color: #ef9a9a !important} .mdl-color--red-200{ background-color: #ef9a9a !important} .mdl-color-text--red-300{ color: #e57373 !important} .mdl-color--red-300{ background-color: #e57373 !important} .mdl-color-text--red-400{ color: #ef5350 !important} .mdl-color--red-400{ background-color: #ef5350 !important} .mdl-color-text--red-500{ color: #f44336 !important} .mdl-color--red-500{ background-color: #f44336 !important} .mdl-color-text--red-600{ color: #e53935 !important} .mdl-color--red-600{ background-color: #e53935 !important} .mdl-color-text--red-700{ color: #d32f2f !important} .mdl-color--red-700{ background-color: #d32f2f !important} .mdl-color-text--red-800{ color: #c62828 !important} .mdl-color--red-800{ background-color: #c62828 !important} .mdl-color-text--red-900{ color: #b71c1c !important} .mdl-color--red-900{ background-color: #b71c1c !important} .mdl-color-text--red-A100{ color: #ff8a80 !important} .mdl-color--red-A100{ background-color: #ff8a80 !important} .mdl-color-text--red-A200{ color: #ff5252 !important} .mdl-color--red-A200{ background-color: #ff5252 !important} .mdl-color-text--red-A400{ color: #ff1744 !important} .mdl-color--red-A400{ background-color: #ff1744 !important} .mdl-color-text--red-A700{ color: #d50000 !important} .mdl-color--red-A700{ background-color: #d50000 !important} .mdl-color-text--pink{ color: #e91e63 !important} .mdl-color--pink{ background-color: #e91e63 !important} .mdl-color-text--pink-50{ color: #fce4ec !important} .mdl-color--pink-50{ background-color: #fce4ec !important} .mdl-color-text--pink-100{ color: #f8bbd0 !important} .mdl-color--pink-100{ background-color: #f8bbd0 !important} .mdl-color-text--pink-200{ color: #f48fb1 !important} .mdl-color--pink-200{ background-color: #f48fb1 !important} .mdl-color-text--pink-300{ color: #f06292 !important} .mdl-color--pink-300{ background-color: #f06292 !important} .mdl-color-text--pink-400{ color: #ec407a !important} .mdl-color--pink-400{ background-color: #ec407a !important} .mdl-color-text--pink-500{ color: #e91e63 !important} .mdl-color--pink-500{ background-color: #e91e63 !important} .mdl-color-text--pink-600{ color: #d81b60 !important} .mdl-color--pink-600{ background-color: #d81b60 !important} .mdl-color-text--pink-700{ color: #c2185b !important} .mdl-color--pink-700{ background-color: #c2185b !important} .mdl-color-text--pink-800{ color: #ad1457 !important} .mdl-color--pink-800{ background-color: #ad1457 !important} .mdl-color-text--pink-900{ color: #880e4f !important} .mdl-color--pink-900{ background-color: #880e4f !important} .mdl-color-text--pink-A100{ color: #ff80ab !important} .mdl-color--pink-A100{ background-color: #ff80ab !important} .mdl-color-text--pink-A200{ color: #ff4081 !important} .mdl-color--pink-A200{ background-color: #ff4081 !important} .mdl-color-text--pink-A400{ color: #f50057 !important} .mdl-color--pink-A400{ background-color: #f50057 !important} .mdl-color-text--pink-A700{ color: #c51162 !important} .mdl-color--pink-A700{ background-color: #c51162 !important} .mdl-color-text--purple{ color: #9c27b0 !important} .mdl-color--purple{ background-color: #9c27b0 !important} .mdl-color-text--purple-50{ color: #f3e5f5 !important} .mdl-color--purple-50{ background-color: #f3e5f5 !important} .mdl-color-text--purple-100{ color: #e1bee7 !important} .mdl-color--purple-100{ background-color: #e1bee7 !important} .mdl-color-text--purple-200{ color: #ce93d8 !important} .mdl-color--purple-200{ background-color: #ce93d8 !important} .mdl-color-text--purple-300{ color: #ba68c8 !important} .mdl-color--purple-300{ background-color: #ba68c8 !important} .mdl-color-text--purple-400{ color: #ab47bc !important} .mdl-color--purple-400{ background-color: #ab47bc !important} .mdl-color-text--purple-500{ color: #9c27b0 !important} .mdl-color--purple-500{ background-color: #9c27b0 !important} .mdl-color-text--purple-600{ color: #8e24aa !important} .mdl-color--purple-600{ background-color: #8e24aa !important} .mdl-color-text--purple-700{ color: #7b1fa2 !important} .mdl-color--purple-700{ background-color: #7b1fa2 !important} .mdl-color-text--purple-800{ color: #6a1b9a !important} .mdl-color--purple-800{ background-color: #6a1b9a !important} .mdl-color-text--purple-900{ color: #4a148c !important} .mdl-color--purple-900{ background-color: #4a148c !important} .mdl-color-text--purple-A100{ color: #ea80fc !important} .mdl-color--purple-A100{ background-color: #ea80fc !important} .mdl-color-text--purple-A200{ color: #e040fb !important} .mdl-color--purple-A200{ background-color: #e040fb !important} .mdl-color-text--purple-A400{ color: #d500f9 !important} .mdl-color--purple-A400{ background-color: #d500f9 !important} .mdl-color-text--purple-A700{ color: #a0f !important} .mdl-color--purple-A700{ background-color: #a0f !important} .mdl-color-text--deep-purple{ color: #673ab7 !important} .mdl-color--deep-purple{ background-color: #673ab7 !important} .mdl-color-text--deep-purple-50{ color: #ede7f6 !important} .mdl-color--deep-purple-50{ background-color: #ede7f6 !important} .mdl-color-text--deep-purple-100{ color: #d1c4e9 !important} .mdl-color--deep-purple-100{ background-color: #d1c4e9 !important} .mdl-color-text--deep-purple-200{ color: #b39ddb !important} .mdl-color--deep-purple-200{ background-color: #b39ddb !important} .mdl-color-text--deep-purple-300{ color: #9575cd !important} .mdl-color--deep-purple-300{ background-color: #9575cd !important} .mdl-color-text--deep-purple-400{ color: #7e57c2 !important} .mdl-color--deep-purple-400{ background-color: #7e57c2 !important} .mdl-color-text--deep-purple-500{ color: #673ab7 !important} .mdl-color--deep-purple-500{ background-color: #673ab7 !important} .mdl-color-text--deep-purple-600{ color: #5e35b1 !important} .mdl-color--deep-purple-600{ background-color: #5e35b1 !important} .mdl-color-text--deep-purple-700{ color: #512da8 !important} .mdl-color--deep-purple-700{ background-color: #512da8 !important} .mdl-color-text--deep-purple-800{ color: #4527a0 !important} .mdl-color--deep-purple-800{ background-color: #4527a0 !important} .mdl-color-text--deep-purple-900{ color: #311b92 !important} .mdl-color--deep-purple-900{ background-color: #311b92 !important} .mdl-color-text--deep-purple-A100{ color: #b388ff !important} .mdl-color--deep-purple-A100{ background-color: #b388ff !important} .mdl-color-text--deep-purple-A200{ color: #7c4dff !important} .mdl-color--deep-purple-A200{ background-color: #7c4dff !important} .mdl-color-text--deep-purple-A400{ color: #651fff !important} .mdl-color--deep-purple-A400{ background-color: #651fff !important} .mdl-color-text--deep-purple-A700{ color: #6200ea !important} .mdl-color--deep-purple-A700{ background-color: #6200ea !important} .mdl-color-text--indigo{ color: #3f51b5 !important} .mdl-color--indigo{ background-color: #3f51b5 !important} .mdl-color-text--indigo-50{ color: #e8eaf6 !important} .mdl-color--indigo-50{ background-color: #e8eaf6 !important} .mdl-color-text--indigo-100{ color: #c5cae9 !important} .mdl-color--indigo-100{ background-color: #c5cae9 !important} .mdl-color-text--indigo-200{ color: #9fa8da !important} .mdl-color--indigo-200{ background-color: #9fa8da !important} .mdl-color-text--indigo-300{ color: #7986cb !important} .mdl-color--indigo-300{ background-color: #7986cb !important} .mdl-color-text--indigo-400{ color: #5c6bc0 !important} .mdl-color--indigo-400{ background-color: #5c6bc0 !important} .mdl-color-text--indigo-500{ color: #3f51b5 !important} .mdl-color--indigo-500{ background-color: #3f51b5 !important} .mdl-color-text--indigo-600{ color: #3949ab !important} .mdl-color--indigo-600{ background-color: #3949ab !important} .mdl-color-text--indigo-700{ color: #303f9f !important} .mdl-color--indigo-700{ background-color: #303f9f !important} .mdl-color-text--indigo-800{ color: #283593 !important} .mdl-color--indigo-800{ background-color: #283593 !important} .mdl-color-text--indigo-900{ color: #1a237e !important} .mdl-color--indigo-900{ background-color: #1a237e !important} .mdl-color-text--indigo-A100{ color: #8c9eff !important} .mdl-color--indigo-A100{ background-color: #8c9eff !important} .mdl-color-text--indigo-A200{ color: #536dfe !important} .mdl-color--indigo-A200{ background-color: #536dfe !important} .mdl-color-text--indigo-A400{ color: #3d5afe !important} .mdl-color--indigo-A400{ background-color: #3d5afe !important} .mdl-color-text--indigo-A700{ color: #304ffe !important} .mdl-color--indigo-A700{ background-color: #304ffe !important} .mdl-color-text--blue{ color: #2196f3 !important} .mdl-color--blue{ background-color: #2196f3 !important} .mdl-color-text--blue-50{ color: #e3f2fd !important} .mdl-color--blue-50{ background-color: #e3f2fd !important} .mdl-color-text--blue-100{ color: #bbdefb !important} .mdl-color--blue-100{ background-color: #bbdefb !important} .mdl-color-text--blue-200{ color: #90caf9 !important} .mdl-color--blue-200{ background-color: #90caf9 !important} .mdl-color-text--blue-300{ color: #64b5f6 !important} .mdl-color--blue-300{ background-color: #64b5f6 !important} .mdl-color-text--blue-400{ color: #42a5f5 !important} .mdl-color--blue-400{ background-color: #42a5f5 !important} .mdl-color-text--blue-500{ color: #2196f3 !important} .mdl-color--blue-500{ background-color: #2196f3 !important} .mdl-color-text--blue-600{ color: #1e88e5 !important} .mdl-color--blue-600{ background-color: #1e88e5 !important} .mdl-color-text--blue-700{ color: #1976d2 !important} .mdl-color--blue-700{ background-color: #1976d2 !important} .mdl-color-text--blue-800{ color: #1565c0 !important} .mdl-color--blue-800{ background-color: #1565c0 !important} .mdl-color-text--blue-900{ color: #0d47a1 !important} .mdl-color--blue-900{ background-color: #0d47a1 !important} .mdl-color-text--blue-A100{ color: #82b1ff !important} .mdl-color--blue-A100{ background-color: #82b1ff !important} .mdl-color-text--blue-A200{ color: #448aff !important} .mdl-color--blue-A200{ background-color: #448aff !important} .mdl-color-text--blue-A400{ color: #2979ff !important} .mdl-color--blue-A400{ background-color: #2979ff !important} .mdl-color-text--blue-A700{ color: #2962ff !important} .mdl-color--blue-A700{ background-color: #2962ff !important} .mdl-color-text--light-blue{ color: #03a9f4 !important} .mdl-color--light-blue{ background-color: #03a9f4 !important} .mdl-color-text--light-blue-50{ color: #e1f5fe !important} .mdl-color--light-blue-50{ background-color: #e1f5fe !important} .mdl-color-text--light-blue-100{ color: #b3e5fc !important} .mdl-color--light-blue-100{ background-color: #b3e5fc !important} .mdl-color-text--light-blue-200{ color: #81d4fa !important} .mdl-color--light-blue-200{ background-color: #81d4fa !important} .mdl-color-text--light-blue-300{ color: #4fc3f7 !important} .mdl-color--light-blue-300{ background-color: #4fc3f7 !important} .mdl-color-text--light-blue-400{ color: #29b6f6 !important} .mdl-color--light-blue-400{ background-color: #29b6f6 !important} .mdl-color-text--light-blue-500{ color: #03a9f4 !important} .mdl-color--light-blue-500{ background-color: #03a9f4 !important} .mdl-color-text--light-blue-600{ color: #039be5 !important} .mdl-color--light-blue-600{ background-color: #039be5 !important} .mdl-color-text--light-blue-700{ color: #0288d1 !important} .mdl-color--light-blue-700{ background-color: #0288d1 !important} .mdl-color-text--light-blue-800{ color: #0277bd !important} .mdl-color--light-blue-800{ background-color: #0277bd !important} .mdl-color-text--light-blue-900{ color: #01579b !important} .mdl-color--light-blue-900{ background-color: #01579b !important} .mdl-color-text--light-blue-A100{ color: #80d8ff !important} .mdl-color--light-blue-A100{ background-color: #80d8ff !important} .mdl-color-text--light-blue-A200{ color: #40c4ff !important} .mdl-color--light-blue-A200{ background-color: #40c4ff !important} .mdl-color-text--light-blue-A400{ color: #00b0ff !important} .mdl-color--light-blue-A400{ background-color: #00b0ff !important} .mdl-color-text--light-blue-A700{ color: #0091ea !important} .mdl-color--light-blue-A700{ background-color: #0091ea !important} .mdl-color-text--cyan{ color: #00bcd4 !important} .mdl-color--cyan{ background-color: #00bcd4 !important} .mdl-color-text--cyan-50{ color: #e0f7fa !important} .mdl-color--cyan-50{ background-color: #e0f7fa !important} .mdl-color-text--cyan-100{ color: #b2ebf2 !important} .mdl-color--cyan-100{ background-color: #b2ebf2 !important} .mdl-color-text--cyan-200{ color: #80deea !important} .mdl-color--cyan-200{ background-color: #80deea !important} .mdl-color-text--cyan-300{ color: #4dd0e1 !important} .mdl-color--cyan-300{ background-color: #4dd0e1 !important} .mdl-color-text--cyan-400{ color: #26c6da !important} .mdl-color--cyan-400{ background-color: #26c6da !important} .mdl-color-text--cyan-500{ color: #00bcd4 !important} .mdl-color--cyan-500{ background-color: #00bcd4 !important} .mdl-color-text--cyan-600{ color: #00acc1 !important} .mdl-color--cyan-600{ background-color: #00acc1 !important} .mdl-color-text--cyan-700{ color: #0097a7 !important} .mdl-color--cyan-700{ background-color: #0097a7 !important} .mdl-color-text--cyan-800{ color: #00838f !important} .mdl-color--cyan-800{ background-color: #00838f !important} .mdl-color-text--cyan-900{ color: #006064 !important} .mdl-color--cyan-900{ background-color: #006064 !important} .mdl-color-text--cyan-A100{ color: #84ffff !important} .mdl-color--cyan-A100{ background-color: #84ffff !important} .mdl-color-text--cyan-A200{ color: #18ffff !important} .mdl-color--cyan-A200{ background-color: #18ffff !important} .mdl-color-text--cyan-A400{ color: #00e5ff !important} .mdl-color--cyan-A400{ background-color: #00e5ff !important} .mdl-color-text--cyan-A700{ color: #00b8d4 !important} .mdl-color--cyan-A700{ background-color: #00b8d4 !important} .mdl-color-text--teal{ color: #009688 !important} .mdl-color--teal{ background-color: #009688 !important} .mdl-color-text--teal-50{ color: #e0f2f1 !important} .mdl-color--teal-50{ background-color: #e0f2f1 !important} .mdl-color-text--teal-100{ color: #b2dfdb !important} .mdl-color--teal-100{ background-color: #b2dfdb !important} .mdl-color-text--teal-200{ color: #80cbc4 !important} .mdl-color--teal-200{ background-color: #80cbc4 !important} .mdl-color-text--teal-300{ color: #4db6ac !important} .mdl-color--teal-300{ background-color: #4db6ac !important} .mdl-color-text--teal-400{ color: #26a69a !important} .mdl-color--teal-400{ background-color: #26a69a !important} .mdl-color-text--teal-500{ color: #009688 !important} .mdl-color--teal-500{ background-color: #009688 !important} .mdl-color-text--teal-600{ color: #00897b !important} .mdl-color--teal-600{ background-color: #00897b !important} .mdl-color-text--teal-700{ color: #00796b !important} .mdl-color--teal-700{ background-color: #00796b !important} .mdl-color-text--teal-800{ color: #00695c !important} .mdl-color--teal-800{ background-color: #00695c !important} .mdl-color-text--teal-900{ color: #004d40 !important} .mdl-color--teal-900{ background-color: #004d40 !important} .mdl-color-text--teal-A100{ color: #a7ffeb !important} .mdl-color--teal-A100{ background-color: #a7ffeb !important} .mdl-color-text--teal-A200{ color: #64ffda !important} .mdl-color--teal-A200{ background-color: #64ffda !important} .mdl-color-text--teal-A400{ color: #1de9b6 !important} .mdl-color--teal-A400{ background-color: #1de9b6 !important} .mdl-color-text--teal-A700{ color: #00bfa5 !important} .mdl-color--teal-A700{ background-color: #00bfa5 !important} .mdl-color-text--green{ color: #4caf50 !important} .mdl-color--green{ background-color: #4caf50 !important} .mdl-color-text--green-50{ color: #e8f5e9 !important} .mdl-color--green-50{ background-color: #e8f5e9 !important} .mdl-color-text--green-100{ color: #c8e6c9 !important} .mdl-color--green-100{ background-color: #c8e6c9 !important} .mdl-color-text--green-200{ color: #a5d6a7 !important} .mdl-color--green-200{ background-color: #a5d6a7 !important} .mdl-color-text--green-300{ color: #81c784 !important} .mdl-color--green-300{ background-color: #81c784 !important} .mdl-color-text--green-400{ color: #66bb6a !important} .mdl-color--green-400{ background-color: #66bb6a !important} .mdl-color-text--green-500{ color: #4caf50 !important} .mdl-color--green-500{ background-color: #4caf50 !important} .mdl-color-text--green-600{ color: #43a047 !important} .mdl-color--green-600{ background-color: #43a047 !important} .mdl-color-text--green-700{ color: #388e3c !important} .mdl-color--green-700{ background-color: #388e3c !important} .mdl-color-text--green-800{ color: #2e7d32 !important} .mdl-color--green-800{ background-color: #2e7d32 !important} .mdl-color-text--green-900{ color: #1b5e20 !important} .mdl-color--green-900{ background-color: #1b5e20 !important} .mdl-color-text--green-A100{ color: #b9f6ca !important} .mdl-color--green-A100{ background-color: #b9f6ca !important} .mdl-color-text--green-A200{ color: #69f0ae !important} .mdl-color--green-A200{ background-color: #69f0ae !important} .mdl-color-text--green-A400{ color: #00e676 !important} .mdl-color--green-A400{ background-color: #00e676 !important} .mdl-color-text--green-A700{ color: #00c853 !important} .mdl-color--green-A700{ background-color: #00c853 !important} .mdl-color-text--light-green{ color: #8bc34a !important} .mdl-color--light-green{ background-color: #8bc34a !important} .mdl-color-text--light-green-50{ color: #f1f8e9 !important} .mdl-color--light-green-50{ background-color: #f1f8e9 !important} .mdl-color-text--light-green-100{ color: #dcedc8 !important} .mdl-color--light-green-100{ background-color: #dcedc8 !important} .mdl-color-text--light-green-200{ color: #c5e1a5 !important} .mdl-color--light-green-200{ background-color: #c5e1a5 !important} .mdl-color-text--light-green-300{ color: #aed581 !important} .mdl-color--light-green-300{ background-color: #aed581 !important} .mdl-color-text--light-green-400{ color: #9ccc65 !important} .mdl-color--light-green-400{ background-color: #9ccc65 !important} .mdl-color-text--light-green-500{ color: #8bc34a !important} .mdl-color--light-green-500{ background-color: #8bc34a !important} .mdl-color-text--light-green-600{ color: #7cb342 !important} .mdl-color--light-green-600{ background-color: #7cb342 !important} .mdl-color-text--light-green-700{ color: #689f38 !important} .mdl-color--light-green-700{ background-color: #689f38 !important} .mdl-color-text--light-green-800{ color: #558b2f !important} .mdl-color--light-green-800{ background-color: #558b2f !important} .mdl-color-text--light-green-900{ color: #33691e !important} .mdl-color--light-green-900{ background-color: #33691e !important} .mdl-color-text--light-green-A100{ color: #ccff90 !important} .mdl-color--light-green-A100{ background-color: #ccff90 !important} .mdl-color-text--light-green-A200{ color: #b2ff59 !important} .mdl-color--light-green-A200{ background-color: #b2ff59 !important} .mdl-color-text--light-green-A400{ color: #76ff03 !important} .mdl-color--light-green-A400{ background-color: #76ff03 !important} .mdl-color-text--light-green-A700{ color: #64dd17 !important} .mdl-color--light-green-A700{ background-color: #64dd17 !important} .mdl-color-text--lime{ color: #cddc39 !important} .mdl-color--lime{ background-color: #cddc39 !important} .mdl-color-text--lime-50{ color: #f9fbe7 !important} .mdl-color--lime-50{ background-color: #f9fbe7 !important} .mdl-color-text--lime-100{ color: #f0f4c3 !important} .mdl-color--lime-100{ background-color: #f0f4c3 !important} .mdl-color-text--lime-200{ color: #e6ee9c !important} .mdl-color--lime-200{ background-color: #e6ee9c !important} .mdl-color-text--lime-300{ color: #dce775 !important} .mdl-color--lime-300{ background-color: #dce775 !important} .mdl-color-text--lime-400{ color: #d4e157 !important} .mdl-color--lime-400{ background-color: #d4e157 !important} .mdl-color-text--lime-500{ color: #cddc39 !important} .mdl-color--lime-500{ background-color: #cddc39 !important} .mdl-color-text--lime-600{ color: #c0ca33 !important} .mdl-color--lime-600{ background-color: #c0ca33 !important} .mdl-color-text--lime-700{ color: #afb42b !important} .mdl-color--lime-700{ background-color: #afb42b !important} .mdl-color-text--lime-800{ color: #9e9d24 !important} .mdl-color--lime-800{ background-color: #9e9d24 !important} .mdl-color-text--lime-900{ color: #827717 !important} .mdl-color--lime-900{ background-color: #827717 !important} .mdl-color-text--lime-A100{ color: #f4ff81 !important} .mdl-color--lime-A100{ background-color: #f4ff81 !important} .mdl-color-text--lime-A200{ color: #eeff41 !important} .mdl-color--lime-A200{ background-color: #eeff41 !important} .mdl-color-text--lime-A400{ color: #c6ff00 !important} .mdl-color--lime-A400{ background-color: #c6ff00 !important} .mdl-color-text--lime-A700{ color: #aeea00 !important} .mdl-color--lime-A700{ background-color: #aeea00 !important} .mdl-color-text--yellow{ color: #ffeb3b !important} .mdl-color--yellow{ background-color: #ffeb3b !important} .mdl-color-text--yellow-50{ color: #fffde7 !important} .mdl-color--yellow-50{ background-color: #fffde7 !important} .mdl-color-text--yellow-100{ color: #fff9c4 !important} .mdl-color--yellow-100{ background-color: #fff9c4 !important} .mdl-color-text--yellow-200{ color: #fff59d !important} .mdl-color--yellow-200{ background-color: #fff59d !important} .mdl-color-text--yellow-300{ color: #fff176 !important} .mdl-color--yellow-300{ background-color: #fff176 !important} .mdl-color-text--yellow-400{ color: #ffee58 !important} .mdl-color--yellow-400{ background-color: #ffee58 !important} .mdl-color-text--yellow-500{ color: #ffeb3b !important} .mdl-color--yellow-500{ background-color: #ffeb3b !important} .mdl-color-text--yellow-600{ color: #fdd835 !important} .mdl-color--yellow-600{ background-color: #fdd835 !important} .mdl-color-text--yellow-700{ color: #fbc02d !important} .mdl-color--yellow-700{ background-color: #fbc02d !important} .mdl-color-text--yellow-800{ color: #f9a825 !important} .mdl-color--yellow-800{ background-color: #f9a825 !important} .mdl-color-text--yellow-900{ color: #f57f17 !important} .mdl-color--yellow-900{ background-color: #f57f17 !important} .mdl-color-text--yellow-A100{ color: #ffff8d !important} .mdl-color--yellow-A100{ background-color: #ffff8d !important} .mdl-color-text--yellow-A200{ color: #ff0 !important} .mdl-color--yellow-A200{ background-color: #ff0 !important} .mdl-color-text--yellow-A400{ color: #ffea00 !important} .mdl-color--yellow-A400{ background-color: #ffea00 !important} .mdl-color-text--yellow-A700{ color: #ffd600 !important} .mdl-color--yellow-A700{ background-color: #ffd600 !important} .mdl-color-text--amber{ color: #ffc107 !important} .mdl-color--amber{ background-color: #ffc107 !important} .mdl-color-text--amber-50{ color: #fff8e1 !important} .mdl-color--amber-50{ background-color: #fff8e1 !important} .mdl-color-text--amber-100{ color: #ffecb3 !important} .mdl-color--amber-100{ background-color: #ffecb3 !important} .mdl-color-text--amber-200{ color: #ffe082 !important} .mdl-color--amber-200{ background-color: #ffe082 !important} .mdl-color-text--amber-300{ color: #ffd54f !important} .mdl-color--amber-300{ background-color: #ffd54f !important} .mdl-color-text--amber-400{ color: #ffca28 !important} .mdl-color--amber-400{ background-color: #ffca28 !important} .mdl-color-text--amber-500{ color: #ffc107 !important} .mdl-color--amber-500{ background-color: #ffc107 !important} .mdl-color-text--amber-600{ color: #ffb300 !important} .mdl-color--amber-600{ background-color: #ffb300 !important} .mdl-color-text--amber-700{ color: #ffa000 !important} .mdl-color--amber-700{ background-color: #ffa000 !important} .mdl-color-text--amber-800{ color: #ff8f00 !important} .mdl-color--amber-800{ background-color: #ff8f00 !important} .mdl-color-text--amber-900{ color: #ff6f00 !important} .mdl-color--amber-900{ background-color: #ff6f00 !important} .mdl-color-text--amber-A100{ color: #ffe57f !important} .mdl-color--amber-A100{ background-color: #ffe57f !important} .mdl-color-text--amber-A200{ color: #ffd740 !important} .mdl-color--amber-A200{ background-color: #ffd740 !important} .mdl-color-text--amber-A400{ color: #ffc400 !important} .mdl-color--amber-A400{ background-color: #ffc400 !important} .mdl-color-text--amber-A700{ color: #ffab00 !important} .mdl-color--amber-A700{ background-color: #ffab00 !important} .mdl-color-text--orange{ color: #ff9800 !important} .mdl-color--orange{ background-color: #ff9800 !important} .mdl-color-text--orange-50{ color: #fff3e0 !important} .mdl-color--orange-50{ background-color: #fff3e0 !important} .mdl-color-text--orange-100{ color: #ffe0b2 !important} .mdl-color--orange-100{ background-color: #ffe0b2 !important} .mdl-color-text--orange-200{ color: #ffcc80 !important} .mdl-color--orange-200{ background-color: #ffcc80 !important} .mdl-color-text--orange-300{ color: #ffb74d !important} .mdl-color--orange-300{ background-color: #ffb74d !important} .mdl-color-text--orange-400{ color: #ffa726 !important} .mdl-color--orange-400{ background-color: #ffa726 !important} .mdl-color-text--orange-500{ color: #ff9800 !important} .mdl-color--orange-500{ background-color: #ff9800 !important} .mdl-color-text--orange-600{ color: #fb8c00 !important} .mdl-color--orange-600{ background-color: #fb8c00 !important} .mdl-color-text--orange-700{ color: #f57c00 !important} .mdl-color--orange-700{ background-color: #f57c00 !important} .mdl-color-text--orange-800{ color: #ef6c00 !important} .mdl-color--orange-800{ background-color: #ef6c00 !important} .mdl-color-text--orange-900{ color: #e65100 !important} .mdl-color--orange-900{ background-color: #e65100 !important} .mdl-color-text--orange-A100{ color: #ffd180 !important} .mdl-color--orange-A100{ background-color: #ffd180 !important} .mdl-color-text--orange-A200{ color: #ffab40 !important} .mdl-color--orange-A200{ background-color: #ffab40 !important} .mdl-color-text--orange-A400{ color: #ff9100 !important} .mdl-color--orange-A400{ background-color: #ff9100 !important} .mdl-color-text--orange-A700{ color: #ff6d00 !important} .mdl-color--orange-A700{ background-color: #ff6d00 !important} .mdl-color-text--deep-orange{ color: #ff5722 !important} .mdl-color--deep-orange{ background-color: #ff5722 !important} .mdl-color-text--deep-orange-50{ color: #fbe9e7 !important} .mdl-color--deep-orange-50{ background-color: #fbe9e7 !important} .mdl-color-text--deep-orange-100{ color: #ffccbc !important} .mdl-color--deep-orange-100{ background-color: #ffccbc !important} .mdl-color-text--deep-orange-200{ color: #ffab91 !important} .mdl-color--deep-orange-200{ background-color: #ffab91 !important} .mdl-color-text--deep-orange-300{ color: #ff8a65 !important} .mdl-color--deep-orange-300{ background-color: #ff8a65 !important} .mdl-color-text--deep-orange-400{ color: #ff7043 !important} .mdl-color--deep-orange-400{ background-color: #ff7043 !important} .mdl-color-text--deep-orange-500{ color: #ff5722 !important} .mdl-color--deep-orange-500{ background-color: #ff5722 !important} .mdl-color-text--deep-orange-600{ color: #f4511e !important} .mdl-color--deep-orange-600{ background-color: #f4511e !important} .mdl-color-text--deep-orange-700{ color: #e64a19 !important} .mdl-color--deep-orange-700{ background-color: #e64a19 !important} .mdl-color-text--deep-orange-800{ color: #d84315 !important} .mdl-color--deep-orange-800{ background-color: #d84315 !important} .mdl-color-text--deep-orange-900{ color: #bf360c !important} .mdl-color--deep-orange-900{ background-color: #bf360c !important} .mdl-color-text--deep-orange-A100{ color: #ff9e80 !important} .mdl-color--deep-orange-A100{ background-color: #ff9e80 !important} .mdl-color-text--deep-orange-A200{ color: #ff6e40 !important} .mdl-color--deep-orange-A200{ background-color: #ff6e40 !important} .mdl-color-text--deep-orange-A400{ color: #ff3d00 !important} .mdl-color--deep-orange-A400{ background-color: #ff3d00 !important} .mdl-color-text--deep-orange-A700{ color: #dd2c00 !important} .mdl-color--deep-orange-A700{ background-color: #dd2c00 !important} .mdl-color-text--brown{ color: #795548 !important} .mdl-color--brown{ background-color: #795548 !important} .mdl-color-text--brown-50{ color: #efebe9 !important} .mdl-color--brown-50{ background-color: #efebe9 !important} .mdl-color-text--brown-100{ color: #d7ccc8 !important} .mdl-color--brown-100{ background-color: #d7ccc8 !important} .mdl-color-text--brown-200{ color: #bcaaa4 !important} .mdl-color--brown-200{ background-color: #bcaaa4 !important} .mdl-color-text--brown-300{ color: #a1887f !important} .mdl-color--brown-300{ background-color: #a1887f !important} .mdl-color-text--brown-400{ color: #8d6e63 !important} .mdl-color--brown-400{ background-color: #8d6e63 !important} .mdl-color-text--brown-500{ color: #795548 !important} .mdl-color--brown-500{ background-color: #795548 !important} .mdl-color-text--brown-600{ color: #6d4c41 !important} .mdl-color--brown-600{ background-color: #6d4c41 !important} .mdl-color-text--brown-700{ color: #5d4037 !important} .mdl-color--brown-700{ background-color: #5d4037 !important} .mdl-color-text--brown-800{ color: #4e342e !important} .mdl-color--brown-800{ background-color: #4e342e !important} .mdl-color-text--brown-900{ color: #3e2723 !important} .mdl-color--brown-900{ background-color: #3e2723 !important} .mdl-color-text--grey{ color: #9e9e9e !important} .mdl-color--grey{ background-color: #9e9e9e !important} .mdl-color-text--grey-50{ color: #fafafa !important} .mdl-color--grey-50{ background-color: #fafafa !important} .mdl-color-text--grey-100{ color: #f5f5f5 !important} .mdl-color--grey-100{ background-color: #f5f5f5 !important} .mdl-color-text--grey-200{ color: #eee !important} .mdl-color--grey-200{ background-color: #eee !important} .mdl-color-text--grey-300{ color: #e0e0e0 !important} .mdl-color--grey-300{ background-color: #e0e0e0 !important} .mdl-color-text--grey-400{ color: #bdbdbd !important} .mdl-color--grey-400{ background-color: #bdbdbd !important} .mdl-color-text--grey-500{ color: #9e9e9e !important} .mdl-color--grey-500{ background-color: #9e9e9e !important} .mdl-color-text--grey-600{ color: #757575 !important} .mdl-color--grey-600{ background-color: #757575 !important} .mdl-color-text--grey-700{ color: #616161 !important} .mdl-color--grey-700{ background-color: #616161 !important} .mdl-color-text--grey-800{ color: #424242 !important} .mdl-color--grey-800{ background-color: #424242 !important} .mdl-color-text--grey-900{ color: #212121 !important} .mdl-color--grey-900{ background-color: #212121 !important} .mdl-color-text--blue-grey{ color: #607d8b !important} .mdl-color--blue-grey{ background-color: #607d8b !important} .mdl-color-text--blue-grey-50{ color: #eceff1 !important} .mdl-color--blue-grey-50{ background-color: #eceff1 !important} .mdl-color-text--blue-grey-100{ color: #cfd8dc !important} .mdl-color--blue-grey-100{ background-color: #cfd8dc !important} .mdl-color-text--blue-grey-200{ color: #b0bec5 !important} .mdl-color--blue-grey-200{ background-color: #b0bec5 !important} .mdl-color-text--blue-grey-300{ color: #90a4ae !important} .mdl-color--blue-grey-300{ background-color: #90a4ae !important} .mdl-color-text--blue-grey-400{ color: #78909c !important} .mdl-color--blue-grey-400{ background-color: #78909c !important} .mdl-color-text--blue-grey-500{ color: #607d8b !important} .mdl-color--blue-grey-500{ background-color: #607d8b !important} .mdl-color-text--blue-grey-600{ color: #546e7a !important} .mdl-color--blue-grey-600{ background-color: #546e7a !important} .mdl-color-text--blue-grey-700{ color: #455a64 !important} .mdl-color--blue-grey-700{ background-color: #455a64 !important} .mdl-color-text--blue-grey-800{ color: #37474f !important} .mdl-color--blue-grey-800{ background-color: #37474f !important} .mdl-color-text--blue-grey-900{ color: #263238 !important} .mdl-color--blue-grey-900{ background-color: #263238 !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--primary{ background-color: #607d8b !important} .mdl-color--primary-contrast{ background-color: #fff !important} .mdl-color--primary-dark{ background-color: #455a64 !important} .mdl-color--accent{ background-color: #40c4ff !important} .mdl-color--accent-contrast{ background-color: #424242 !important} .mdl-color-text--primary{ color: #607d8b !important} .mdl-color-text--primary-contrast{ color: #fff !important} .mdl-color-text--primary-dark{ color: #455a64 !important} .mdl-color-text--accent{ color: #40c4ff !important} .mdl-color-text--accent-contrast{ color: #424242 !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%); transform: translate(-50%, -50%); width: 50px; overflow: hidden} .mdl-ripple.is-animating{ 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); 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), -webkit-transform .3s cubic-bezier(0, 0, .2, 1)} .mdl-ripple.is-visible{ opacity: .3} .mdl-animation--default, .mdl-animation--fast-out-slow-in{ transition-timing-function: cubic-bezier(.4, 0, .2, 1)} .mdl-animation--linear-out-slow-in{ transition-timing-function: cubic-bezier(0, 0, .2, 1)} .mdl-animation--fast-out-linear-in{ 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-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: 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: #40c4ff; color: #424242} .mdl-button .mdl-badge[data-badge]:after{ top: -10px; right: -5px} .mdl-badge.mdl-badge--no-background[data-badge]:after{ color: #40c4ff; background: rgba(66, 66, 66, .2); box-shadow: 0 0 1px gray} .mdl-badge.mdl-badge--overlap{ margin-right: 10px} .mdl-badge.mdl-badge--overlap:after{ right: -10px} .mdl-button{ background: 0 0; border: none; border-radius: 2px; color: #000; position: relative; height: 36px; margin: 0; min-width: 64px; padding: 0 16px; 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; 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: #607d8b} .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: #607d8b; color: #fff} .mdl-button--raised.mdl-button--colored:hover{ background-color: #607d8b} .mdl-button--raised.mdl-button--colored:active{ background-color: #607d8b} .mdl-button--raised.mdl-button--colored:focus:not(:active){ background-color: #607d8b} .mdl-button--raised.mdl-button--colored .mdl-ripple{ background: #fff} .mdl-button--fab{ border-radius: 50% !important; 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); 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: #40c4ff; color: #424242} .mdl-button--fab.mdl-button--colored:hover{ background-color: #40c4ff} .mdl-button--fab.mdl-button--colored:focus:not(:active){ background-color: #40c4ff} .mdl-button--fab.mdl-button--colored:active{ background-color: #40c4ff} .mdl-button--fab.mdl-button--colored .mdl-ripple{ background: #424242} .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); 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.mdl-button--disabled .mdl-button__ripple-container .mdl-ripple, .mdl-button[disabled] .mdl-button__ripple-container .mdl-ripple{ background-color: transparent} .mdl-button--primary.mdl-button--primary{ color: #607d8b} .mdl-button--primary.mdl-button--primary .mdl-ripple{ background: #fff} .mdl-button--primary.mdl-button--primary.mdl-button--fab, .mdl-button--primary.mdl-button--primary.mdl-button--raised{ color: #fff; background-color: #607d8b} .mdl-button--accent.mdl-button--accent{ color: #40c4ff} .mdl-button--accent.mdl-button--accent .mdl-ripple{ background: #424242} .mdl-button--accent.mdl-button--accent.mdl-button--fab, .mdl-button--accent.mdl-button--accent.mdl-button--raised{ color: #424242; background-color: #40c4ff} .mdl-button.mdl-button--disabled.mdl-button--disabled, .mdl-button[disabled][disabled]{ color: rgba(0, 0, 0, .26); cursor: default; background-color: transparent} .mdl-button--fab.mdl-button--disabled.mdl-button--disabled, .mdl-button--fab[disabled][disabled]{ background-color: rgba(0, 0, 0, .12); color: rgba(0, 0, 0, .26)} .mdl-button--raised.mdl-button--disabled.mdl-button--disabled, .mdl-button--raised[disabled][disabled]{ background-color: rgba(0, 0, 0, .12); color: rgba(0, 0, 0, .26); box-shadow: none} .mdl-button--colored.mdl-button--disabled.mdl-button--disabled, .mdl-button--colored[disabled][disabled]{ color: rgba(0, 0, 0, .26)} .mdl-button .material-icons{ vertical-align: middle} .mdl-card{ display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; font-size: 16px; font-weight: 400; overflow: hidden; width: 330px; z-index: 1; position: relative; background: #fff; border-radius: 2px; box-sizing: border-box} .mdl-card__media{ background-color: #40c4ff; 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-align-items: center; -ms-flex-align: center; align-items: center; color: #000; display: block; display: -webkit-flex; display: -ms-flexbox; display: flex; -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; 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-flex; display: -ms-flexbox; display: flex; font-size: 24px; font-weight: 300; line-height: normal; overflow: hidden; -webkit-transform-origin: 149px 48px; transform-origin: 149px 48px; margin: 0} .mdl-card__subtitle-text{ font-size: 14px; color: rgba(0, 0, 0, .54); margin: 0} .mdl-card__supporting-text{ color: rgba(0, 0, 0, .54); font-size: 1rem; line-height: 18px; overflow: hidden; padding: 16px;} .mdl-card__supporting-text.mdl-card--border{ border-bottom: 1px solid rgba(0, 0, 0, .1)} .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-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: none} .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 #607d8b} .mdl-checkbox.is-disabled .mdl-checkbox__box-outline, fieldset[disabled] .mdl-checkbox .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(96, 125, 139, .26); background-color: rgba(96, 125, 139, .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 0; transition-duration: .28s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-property: background} .mdl-checkbox.is-checked .mdl-checkbox__tick-outline{ background: #607d8b url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K)} .mdl-checkbox.is-checked.is-disabled .mdl-checkbox__tick-outline, fieldset[disabled] .mdl-checkbox.is-checked .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, fieldset[disabled] .mdl-checkbox .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: #607d8b} .mdl-checkbox.is-disabled .mdl-checkbox__ripple-container, fieldset[disabled] .mdl-checkbox .mdl-checkbox__ripple-container{ cursor: auto} .mdl-checkbox.is-disabled .mdl-checkbox__ripple-container .mdl-ripple, fieldset[disabled] .mdl-checkbox .mdl-checkbox__ripple-container .mdl-ripple{ background: 0 0} .mdl-chip{ height: 32px; font-family: Roboto, Helvetica, Arial, sans-serif; line-height: 32px; padding: 0 12px; border: 0; border-radius: 16px; background-color: #dedede; display: inline-block; color: rgba(0, 0, 0, .87); margin: 2px 0; font-size: 0; white-space: nowrap} .mdl-chip__text{ font-size: 13px; vertical-align: middle; display: inline-block} .mdl-chip__action{ height: 24px; width: 24px; background: 0 0; opacity: .54; cursor: pointer; padding: 0; margin: 0 0 0 4px; font-size: 13px; text-decoration: none; color: rgba(0, 0, 0, .87); border: none; outline: 0} .mdl-chip__action, .mdl-chip__contact{ display: inline-block; vertical-align: middle; overflow: hidden; text-align: center} .mdl-chip__contact{ height: 32px; width: 32px; border-radius: 16px; margin-right: 8px; font-size: 18px; line-height: 32px} .mdl-chip:focus{ outline: 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)} .mdl-chip:active{ background-color: #d6d6d6} .mdl-chip--deletable{ padding-right: 4px} .mdl-chip--contact{ padding-left: 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; transition-duration: .28s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); 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 12px 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; height: 48px; border-top: 1px solid rgba(0, 0, 0, .12); border-bottom: 1px solid rgba(0, 0, 0, .12); padding: 12px 18px; box-sizing: border-box} .mdl-data-table td, .mdl-data-table td .mdl-data-table__select{ vertical-align: middle} .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__header--sorted-ascending, .mdl-data-table th.mdl-data-table__header--sorted-descending{ color: rgba(0, 0, 0, .87)} .mdl-data-table th.mdl-data-table__header--sorted-ascending:before, .mdl-data-table th.mdl-data-table__header--sorted-descending:before{ font-family: 'Material Icons'; font-weight: 400; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; word-wrap: normal; -moz-font-feature-settings: 'liga'; font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-size: 16px; content: "\e5d8"; margin-right: 5px; vertical-align: sub} .mdl-data-table th.mdl-data-table__header--sorted-ascending:hover, .mdl-data-table th.mdl-data-table__header--sorted-descending:hover{ cursor: pointer} .mdl-data-table th.mdl-data-table__header--sorted-ascending:hover:before, .mdl-data-table th.mdl-data-table__header--sorted-descending:hover:before{ color: rgba(0, 0, 0, .26)} .mdl-data-table th.mdl-data-table__header--sorted-descending:before{ content: "\e5db"} .mdl-data-table__select{ width: 16px} .mdl-data-table__cell--non-numeric.mdl-data-table__cell--non-numeric{ text-align: left} .mdl-dialog{ border: none; box-shadow: 0 9px 46px 8px rgba(0, 0, 0, .14), 0 11px 15px -7px rgba(0, 0, 0, .12), 0 24px 38px 3px rgba(0, 0, 0, .2); width: 280px} .mdl-dialog__title{ padding: 24px 24px 0; margin: 0; font-size: 2.5rem} .mdl-dialog__actions{ padding: 8px 8px 8px 24px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap} .mdl-dialog__actions>*{ margin-right: 8px; height: 36px} .mdl-dialog__actions>:first-child{ margin-right: 0} .mdl-dialog__actions--full-width{ padding: 0 0 8px} .mdl-dialog__actions--full-width>*{ height: 48px; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; padding-right: 16px; margin-right: 0; text-align: right} .mdl-dialog__content{ padding: 20px 24px 24px; color: rgba(0, 0, 0, .54)} .mdl-mega-footer{ padding: 16px 40px; color: #9e9e9e; background-color: #424242} .mdl-mega-footer--bottom-section:after, .mdl-mega-footer--middle-section:after, .mdl-mega-footer--top-section:after, .mdl-mega-footer__bottom-section:after, .mdl-mega-footer__middle-section:after, .mdl-mega-footer__top-section:after{ content: ''; display: block; clear: both} .mdl-mega-footer--left-section, .mdl-mega-footer--right-section, .mdl-mega-footer__left-section, .mdl-mega-footer__right-section{ margin-bottom: 16px} .mdl-mega-footer--right-section a, .mdl-mega-footer__right-section a{ display: block; margin-bottom: 16px; color: inherit; text-decoration: none} @media screen and (min-width:760px){ .mdl-mega-footer--left-section, .mdl-mega-footer__left-section{ float: left} .mdl-mega-footer--right-section, .mdl-mega-footer__right-section{ float: right} .mdl-mega-footer--right-section a, .mdl-mega-footer__right-section a{ display: inline-block; margin-left: 16px; line-height: 36px; vertical-align: middle}} .mdl-mega-footer--social-btn, .mdl-mega-footer__social-btn{ width: 36px; height: 36px; padding: 0; margin: 0; background-color: #9e9e9e; border: none} .mdl-mega-footer--drop-down-section, .mdl-mega-footer__drop-down-section{ display: block; position: relative} @media screen and (min-width:760px){ .mdl-mega-footer--drop-down-section, .mdl-mega-footer__drop-down-section{ width: 33%} .mdl-mega-footer--drop-down-section:nth-child(1), .mdl-mega-footer--drop-down-section:nth-child(2), .mdl-mega-footer__drop-down-section:nth-child(1), .mdl-mega-footer__drop-down-section:nth-child(2){ float: left} .mdl-mega-footer--drop-down-section:nth-child(3), .mdl-mega-footer__drop-down-section:nth-child(3){ float: right} .mdl-mega-footer--drop-down-section:nth-child(3):after, .mdl-mega-footer__drop-down-section:nth-child(3):after{ clear: right} .mdl-mega-footer--drop-down-section:nth-child(4), .mdl-mega-footer__drop-down-section:nth-child(4){ clear: right; float: right} .mdl-mega-footer--middle-section:after, .mdl-mega-footer__middle-section:after{ content: ''; display: block; clear: both} .mdl-mega-footer--bottom-section, .mdl-mega-footer__bottom-section{ padding-top: 0}} @media screen and (min-width:1024px){ .mdl-mega-footer--drop-down-section, .mdl-mega-footer--drop-down-section:nth-child(3), .mdl-mega-footer--drop-down-section:nth-child(4), .mdl-mega-footer__drop-down-section, .mdl-mega-footer__drop-down-section:nth-child(3), .mdl-mega-footer__drop-down-section:nth-child(4){ width: 24%; float: left}} .mdl-mega-footer--heading-checkbox, .mdl-mega-footer__heading-checkbox{ position: absolute; width: 100%; height: 55.8px; padding: 32px; margin: -16px 0 0; cursor: pointer; z-index: 1; opacity: 0} .mdl-mega-footer--heading-checkbox+.mdl-mega-footer--heading:after, .mdl-mega-footer--heading-checkbox+.mdl-mega-footer__heading:after, .mdl-mega-footer__heading-checkbox+.mdl-mega-footer--heading:after, .mdl-mega-footer__heading-checkbox+.mdl-mega-footer__heading:after{ font-family: 'Material Icons'; content: '\E5CE'} .mdl-mega-footer--heading-checkbox:checked+.mdl-mega-footer--heading+.mdl-mega-footer--link-list, .mdl-mega-footer--heading-checkbox:checked+.mdl-mega-footer__heading+.mdl-mega-footer__link-list, .mdl-mega-footer--heading-checkbox:checked~.mdl-mega-footer--link-list, .mdl-mega-footer--heading-checkbox:checked~.mdl-mega-footer__link-list, .mdl-mega-footer__heading-checkbox:checked+.mdl-mega-footer--heading+.mdl-mega-footer--link-list, .mdl-mega-footer__heading-checkbox:checked+.mdl-mega-footer__heading+.mdl-mega-footer__link-list, .mdl-mega-footer__heading-checkbox:checked~.mdl-mega-footer--link-list, .mdl-mega-footer__heading-checkbox:checked~.mdl-mega-footer__link-list{ display: none} .mdl-mega-footer--heading-checkbox:checked+.mdl-mega-footer--heading:after, .mdl-mega-footer--heading-checkbox:checked+.mdl-mega-footer__heading:after, .mdl-mega-footer__heading-checkbox:checked+.mdl-mega-footer--heading:after, .mdl-mega-footer__heading-checkbox:checked+.mdl-mega-footer__heading:after{ font-family: 'Material Icons'; content: '\E5CF'} .mdl-mega-footer--heading, .mdl-mega-footer__heading{ position: relative; width: 100%; padding-right: 39.8px; margin-bottom: 16px; box-sizing: border-box; font-size: 14px; line-height: 23.8px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: #e0e0e0} .mdl-mega-footer--heading:after, .mdl-mega-footer__heading:after{ content: ''; position: absolute; top: 0; right: 0; display: block; width: 23.8px; height: 23.8px; background-size: cover} .mdl-mega-footer--link-list, .mdl-mega-footer__link-list{ list-style: none; padding: 0; margin: 0 0 32px} .mdl-mega-footer--link-list:after, .mdl-mega-footer__link-list:after{ clear: both; display: block; content: ''} .mdl-mega-footer--link-list li, .mdl-mega-footer__link-list li{ font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 20px} .mdl-mega-footer--link-list a, .mdl-mega-footer__link-list a{ color: inherit; text-decoration: none; white-space: nowrap} @media screen and (min-width:760px){ .mdl-mega-footer--heading-checkbox, .mdl-mega-footer__heading-checkbox{ display: none} .mdl-mega-footer--heading-checkbox+.mdl-mega-footer--heading:after, .mdl-mega-footer--heading-checkbox+.mdl-mega-footer__heading:after, .mdl-mega-footer__heading-checkbox+.mdl-mega-footer--heading:after, .mdl-mega-footer__heading-checkbox+.mdl-mega-footer__heading:after{ content: ''} .mdl-mega-footer--heading-checkbox:checked+.mdl-mega-footer--heading+.mdl-mega-footer--link-list, .mdl-mega-footer--heading-checkbox:checked+.mdl-mega-footer__heading+.mdl-mega-footer__link-list, .mdl-mega-footer--heading-checkbox:checked~.mdl-mega-footer--link-list, .mdl-mega-footer--heading-checkbox:checked~.mdl-mega-footer__link-list, .mdl-mega-footer__heading-checkbox:checked+.mdl-mega-footer--heading+.mdl-mega-footer--link-list, .mdl-mega-footer__heading-checkbox:checked+.mdl-mega-footer__heading+.mdl-mega-footer__link-list, .mdl-mega-footer__heading-checkbox:checked~.mdl-mega-footer--link-list, .mdl-mega-footer__heading-checkbox:checked~.mdl-mega-footer__link-list{ display: block} .mdl-mega-footer--heading-checkbox:checked+.mdl-mega-footer--heading:after, .mdl-mega-footer--heading-checkbox:checked+.mdl-mega-footer__heading:after, .mdl-mega-footer__heading-checkbox:checked+.mdl-mega-footer--heading:after, .mdl-mega-footer__heading-checkbox:checked+.mdl-mega-footer__heading:after{ content: ''}} .mdl-mega-footer--bottom-section, .mdl-mega-footer__bottom-section{ padding-top: 16px; margin-bottom: 16px} .mdl-logo{ margin-bottom: 16px; color: #fff} .mdl-mega-footer--bottom-section .mdl-mega-footer--link-list li, .mdl-mega-footer__bottom-section .mdl-mega-footer__link-list li{ float: left; margin-bottom: 0; margin-right: 16px} @media screen and (min-width:760px){ .mdl-logo{ float: left; margin-bottom: 0; margin-right: 16px}} .mdl-mini-footer{ display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -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-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-order: 0; -ms-flex-order: 0; order: 0} .mdl-mini-footer--right-section, .mdl-mini-footer__right-section{ display: inline-block; -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: none} .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: none} .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; 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: #607d8b} .mdl-icon-toggle.is-disabled .mdl-icon-toggle__label{ color: rgba(0, 0, 0, .26); cursor: auto; 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(96, 125, 139, .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 0} .mdl-list{ display: block; padding: 8px 0; list-style: none} .mdl-list__item{ font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; letter-spacing: .04em; line-height: 1; min-height: 48px; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; padding: 16px; cursor: default; color: rgba(0, 0, 0, .87); overflow: hidden} .mdl-list__item, .mdl-list__item .mdl-list__item-primary-content{ box-sizing: border-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center} .mdl-list__item .mdl-list__item-primary-content{ -webkit-order: 0; -ms-flex-order: 0; order: 0; -webkit-flex-grow: 2; -ms-flex-positive: 2; flex-grow: 2; text-decoration: none} .mdl-list__item .mdl-list__item-primary-content .mdl-list__item-icon{ margin-right: 32px} .mdl-list__item .mdl-list__item-primary-content .mdl-list__item-avatar{ margin-right: 16px} .mdl-list__item .mdl-list__item-secondary-content{ display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: column; -ms-flex-flow: column; flex-flow: column; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; margin-left: 16px} .mdl-list__item .mdl-list__item-secondary-content .mdl-list__item-secondary-action label{ display: inline} .mdl-list__item .mdl-list__item-secondary-content .mdl-list__item-secondary-info{ font-size: 12px; font-weight: 400; line-height: 1; letter-spacing: 0; color: rgba(0, 0, 0, .54)} .mdl-list__item .mdl-list__item-secondary-content .mdl-list__item-sub-header{ padding: 0 0 0 16px} .mdl-list__item-icon, .mdl-list__item-icon.material-icons{ height: 24px; width: 24px; font-size: 24px; box-sizing: border-box; color: #757575} .mdl-list__item-avatar, .mdl-list__item-avatar.material-icons{ height: 40px; width: 40px; box-sizing: border-box; border-radius: 50%; background-color: #757575; font-size: 40px; color: #fff} .mdl-list__item--two-line{ height: 72px} .mdl-list__item--two-line .mdl-list__item-primary-content{ height: 36px; line-height: 20px; display: block} .mdl-list__item--two-line .mdl-list__item-primary-content .mdl-list__item-avatar{ float: left} .mdl-list__item--two-line .mdl-list__item-primary-content .mdl-list__item-icon{ float: left; margin-top: 6px} .mdl-list__item--two-line .mdl-list__item-primary-content .mdl-list__item-secondary-content{ height: 36px} .mdl-list__item--two-line .mdl-list__item-primary-content .mdl-list__item-sub-title{ font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 18px; color: rgba(0, 0, 0, .54); display: block; padding: 0} .mdl-list__item--three-line{ height: 88px} .mdl-list__item--three-line .mdl-list__item-primary-content{ height: 52px; line-height: 20px; display: block} .mdl-list__item--three-line .mdl-list__item-primary-content .mdl-list__item-avatar, .mdl-list__item--three-line .mdl-list__item-primary-content .mdl-list__item-icon{ float: left} .mdl-list__item--three-line .mdl-list__item-secondary-content{ height: 52px} .mdl-list__item--three-line .mdl-list__item-text-body{ font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 18px; height: 52px; color: rgba(0, 0, 0, .54); display: block; padding: 0} .mdl-menu__container{ display: block; margin: 0; padding: 0; border: none; position: absolute; overflow: visible; height: 0; width: 0; visibility: hidden; z-index: -1} .mdl-menu__container.is-animating, .mdl-menu__container.is-visible{ z-index: 999; visibility: visible} .mdl-menu__outline{ display: block; background: #fff; margin: 0; padding: 0; border: none; border-radius: 2px; position: absolute; top: 0; left: 0; overflow: hidden; opacity: 0; -webkit-transform: scale(0); transform: scale(0); -webkit-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; transition: 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), -webkit-transform .3s cubic-bezier(.4, 0, .2, 1); z-index: -1} .mdl-menu__container.is-visible .mdl-menu__outline{ opacity: 1; -webkit-transform: scale(1); transform: scale(1); z-index: 999} .mdl-menu__outline.mdl-menu--bottom-right{ -webkit-transform-origin: 100% 0; transform-origin: 100% 0} .mdl-menu__outline.mdl-menu--top-left{ -webkit-transform-origin: 0 100%; transform-origin: 0 100%} .mdl-menu__outline.mdl-menu--top-right{ -webkit-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{ 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: none; 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; 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--full-bleed-divider{ border-bottom: 1px solid rgba(0, 0, 0, .12)} .mdl-menu__item[data-mdl-disabled], .mdl-menu__item[disabled]{ color: #bdbdbd; background-color: transparent; cursor: auto} .mdl-menu__item[data-mdl-disabled]:hover, .mdl-menu__item[disabled]:hover{ background-color: transparent} .mdl-menu__item[data-mdl-disabled]:focus, .mdl-menu__item[disabled]:focus{ background-color: transparent} .mdl-menu__item[data-mdl-disabled] .mdl-ripple, .mdl-menu__item[disabled] .mdl-ripple{ background: 0 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; max-width: 100%} .mdl-progress>.bar{ display: block; position: absolute; top: 0; bottom: 0; width: 0%; transition: width .2s cubic-bezier(.4, 0, .2, 1)} .mdl-progress>.progressbar{ background-color: #607d8b; z-index: 1; left: 0} .mdl-progress>.bufferbar{ background-image: linear-gradient(to right, rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)), linear-gradient(to right, #607d8b, #607d8b); 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, .mdl-progress:not(.mdl-progress__indeterminate):not(.mdl-progress__indeterminate)>.auxbar{ background-image: linear-gradient(to right, rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)), linear-gradient(to right, #607d8b, #607d8b); -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, .mdl-progress:not(.mdl-progress__indeterminate)>.auxbar{ background-image: linear-gradient(to right, rgba(255, 255, 255, .9), rgba(255, 255, 255, .9)), linear-gradient(to right, #607d8b, #607d8b)} .mdl-progress.mdl-progress--indeterminate>.bar1, .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, .mdl-progress.mdl-progress__indeterminate>.bar1, .mdl-progress.mdl-progress__indeterminate>.bar3{ background-color: #607d8b; -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, .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-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; margin: 0; font-size: 14px; font-weight: 400; line-height: 24px; letter-spacing: 0; opacity: .87} .mdl-navigation__link .material-icons{ vertical-align: middle} .mdl-layout{ width: 100%; height: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; overflow-y: auto; overflow-x: hidden; position: relative; -webkit-overflow-scrolling: touch; background-color: #1b1b1b;} .mdl-layout.is-small-screen .mdl-layout--large-screen-only{ display: none} .mdl-layout:not(.is-small-screen) .mdl-layout--small-screen-only{ display: none} .mdl-layout__container{ position: absolute; width: 100%; height: 100%} .mdl-layout-title, .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-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1} .mdl-layout__drawer{ display: -webkit-flex; display: -ms-flexbox; display: flex; -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); transform: translateX(-250px); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; will-change: transform; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-property: transform; transition-property: transform, -webkit-transform; color: #424242; overflow: visible; overflow-y: auto; z-index: 5} .mdl-layout__drawer.is-visible{ -webkit-transform: translateX(0); transform: translateX(0)} .mdl-layout__drawer.is-visible~.mdl-layout__content.mdl-layout__content{ overflow: hidden} .mdl-layout__drawer>*{ -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0} .mdl-layout__drawer>.mdl-layout-title, .mdl-layout__drawer>.mdl-layout__title{ line-height: 64px; padding-left: 40px} @media screen and (max-width:1024px){ .mdl-layout__drawer>.mdl-layout-title, .mdl-layout__drawer>.mdl-layout__title{ line-height: 56px; padding-left: 16px}} .mdl-layout__drawer .mdl-navigation{ -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -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: #e0e0e0; color: #000} @media screen and (min-width:1025px){ .mdl-layout--fixed-drawer>.mdl-layout__drawer{ -webkit-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: 56px; font-family: Helvetica, Arial, sans-serif; margin: 8px 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__drawer-button{ line-height: 54px} .mdl-layout--fixed-drawer>.mdl-layout__drawer-button, .mdl-layout--no-desktop-drawer-button .mdl-layout__drawer-button, .mdl-layout--no-drawer-button .mdl-layout__drawer-button{ display: none}} .mdl-layout__header{ display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -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: none; min-height: 64px; max-height: 1000px; z-index: 3; background-color: #607d8b; 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); transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-property: max-height, box-shadow} @media screen and (max-width:1024px){ .mdl-layout__header{ min-height: 56px}} .mdl-layout--fixed-drawer.is-upgraded:not(.is-small-screen)>.mdl-layout__header{ margin-left: 240px; width: calc(100% - 240px)} @media screen and (min-width:1025px){ .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-flex; display: -ms-flexbox; display: flex}} .mdl-layout__header--transparent.mdl-layout__header--transparent{ background-color: transparent; box-shadow: none} .mdl-layout__header--scroll, .mdl-layout__header--seamed{ 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--waterfall.mdl-layout__header--waterfall-hide-top{ -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end} .mdl-layout__header-row{ display: -webkit-flex; display: -ms-flexbox; display: flex; -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-align-items: center; -ms-flex-align: center; align-items: center; height: 64px; margin: 0; padding: 0 40px 0 80px} .mdl-layout--no-drawer-button .mdl-layout__header-row{ padding-left: 40px} @media screen and (min-width:1025px){ .mdl-layout--no-desktop-drawer-button .mdl-layout__header-row{ padding-left: 40px}} @media screen and (max-width:1024px){ .mdl-layout__header-row{ height: 56px; padding: 0 16px 0 72px} .mdl-layout--no-drawer-button .mdl-layout__header-row{ padding-left: 16px}} .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-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -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; transition-property: background-color; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1)} .mdl-layout__obfuscator.is-visible{ background-color: rgba(0, 0, 0, .5); visibility: visible} @supports (pointer-events:auto){ .mdl-layout__obfuscator{ background-color: rgba(0, 0, 0, .5); opacity: 0; transition-property: opacity; visibility: visible; pointer-events: none} .mdl-layout__obfuscator.is-visible{ pointer-events: auto; opacity: 1}} .mdl-layout__content{ -ms-flex: 0 1 auto; position: relative; display: inline-block; overflow-y: auto; overflow-x: hidden; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; z-index: 1; -webkit-overflow-scrolling: touch} .mdl-layout--fixed-drawer>.mdl-layout__content{ margin-left: 240px} .mdl-layout__container.has-scrolling-header .mdl-layout__content{ overflow: visible} @media screen and (max-width:1024px){ .mdl-layout--fixed-drawer>.mdl-layout__content{ margin-left: 0} .mdl-layout__container.has-scrolling-header .mdl-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-flex; display: -ms-flexbox; display: flex; background-color: #607d8b; overflow-y: hidden; overflow-x: scroll} .mdl-layout__tab-bar::-webkit-scrollbar{ display: none} .mdl-layout--no-drawer-button .mdl-layout__tab-bar{ padding-left: 16px; width: calc(100% - 32px)} @media screen and (min-width:1025px){ .mdl-layout--no-desktop-drawer-button .mdl-layout__tab-bar{ padding-left: 16px; width: calc(100% - 32px)}} @media screen and (max-width:1024px){ .mdl-layout__tab-bar{ width: calc(100% - 60px); padding: 0 0 0 60px} .mdl-layout--no-drawer-button .mdl-layout__tab-bar{ width: calc(100% - 8px); padding-left: 4px}} .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: none; margin: 0; z-index: 2; -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: #607d8b; color: transparent; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none} .mdl-layout--no-desktop-drawer-button .mdl-layout__tab-bar-button, .mdl-layout--no-drawer-button .mdl-layout__tab-bar-button{ width: 16px} .mdl-layout--no-desktop-drawer-button .mdl-layout__tab-bar-button .material-icons, .mdl-layout--no-drawer-button .mdl-layout__tab-bar-button .material-icons{ position: relative; left: -4px} @media screen and (max-width:1024px){ .mdl-layout__tab-bar-button{ 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: none; padding: 0 24px; float: left; position: relative; display: block; -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-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: #40c4ff; -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; 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; vertical-align: middle; box-sizing: border-box; height: 24px; 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: none} .mdl-radio__outer-circle{ position: absolute; top: 4px; 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 #607d8b} .mdl-radio.is-disabled .mdl-radio__outer-circle, .mdl-radio__outer-circle fieldset[disabled] .mdl-radio{ border: 2px solid rgba(0, 0, 0, .26); cursor: auto} .mdl-radio__inner-circle{ position: absolute; z-index: 1; margin: 0; top: 8px; left: 4px; box-sizing: border-box; width: 8px; height: 8px; cursor: pointer; transition-duration: .28s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transform: scale(0, 0); transform: scale(0, 0); border-radius: 50%; background: #607d8b} .mdl-radio.is-checked .mdl-radio__inner-circle{ -webkit-transform: scale(1, 1); transform: scale(1, 1)} .mdl-radio.is-disabled .mdl-radio__inner-circle, fieldset[disabled] .mdl-radio .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, fieldset[disabled] .mdl-radio .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: #607d8b} .mdl-radio.is-disabled .mdl-radio__ripple-container, fieldset[disabled] .mdl-radio .mdl-radio__ripple-container{ cursor: auto} .mdl-radio.is-disabled .mdl-radio__ripple-container .mdl-ripple, fieldset[disabled] .mdl-radio .mdl-radio__ripple-container .mdl-ripple{ background: 0 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 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; outline: 0; padding: 0; color: #607d8b; -webkit-align-self: center; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; z-index: 1; cursor: pointer} .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 0} .mdl-slider.is-upgraded::-moz-range-track{ background: 0 0; border: none} .mdl-slider.is-upgraded::-ms-track{ background: 0 0; color: transparent; height: 2px; width: 100%; border: none} .mdl-slider.is-upgraded::-ms-fill-lower{ padding: 0; background: linear-gradient(to right, transparent, transparent 16px, #607d8b 16px, #607d8b0)} .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: #607d8b; border: none; 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); 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), -webkit-transform .18s 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: #607d8b; border: none} .mdl-slider.is-upgraded:focus:not(:active)::-webkit-slider-thumb{ box-shadow: 0 0 0 10px rgba(96, 125, 139, .26)} .mdl-slider.is-upgraded:focus:not(:active)::-moz-range-thumb{ box-shadow: 0 0 0 10px rgba(96, 125, 139, .26)} .mdl-slider.is-upgraded:active::-webkit-slider-thumb{ background-image: none; background: #607d8b; -webkit-transform: scale(1.5); transform: scale(1.5)} .mdl-slider.is-upgraded:active::-moz-range-thumb{ background-image: none; background: #607d8b; transform: scale(1.5)} .mdl-slider.is-upgraded::-ms-thumb{ width: 32px; height: 32px; border: none; border-radius: 50%; background: #607d8b; transform: scale(.375); transition: transform .18s cubic-bezier(.4, 0, .2, 1), background .28s cubic-bezier(.4, 0, .2, 1); transition: transform .18s cubic-bezier(.4, 0, .2, 1), background .28s cubic-bezier(.4, 0, .2, 1), -webkit-transform .18s cubic-bezier(.4, 0, .2, 1)} .mdl-slider.is-upgraded:focus:not(:active)::-ms-thumb{ background: radial-gradient(circle closest-side, #607d8b 0%, #607d8b37.5%, rgba(96, 125, 139, .26)37.5%, rgba(96, 125, 139, .26)100%); transform: scale(1)} .mdl-slider.is-upgraded:active::-ms-thumb{ background: #607d8b; transform: scale(.5625)} .mdl-slider.is-upgraded.is-lowest-value::-webkit-slider-thumb{ border: 2px solid rgba(0, 0, 0, .26); background: 0 0} .mdl-slider.is-upgraded.is-lowest-value::-moz-range-thumb{ border: 2px solid rgba(0, 0, 0, .26); background: 0 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%); transform: scale(1)} .mdl-slider.is-upgraded.is-lowest-value:active::-ms-thumb{ 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 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::-webkit-slider-thumb, .mdl-slider.is-upgraded:disabled:active::-webkit-slider-thumb, .mdl-slider.is-upgraded:disabled:focus::-webkit-slider-thumb{ -webkit-transform: scale(.667); transform: scale(.667); background: rgba(0, 0, 0, .26)} .mdl-slider.is-upgraded:disabled::-moz-range-thumb, .mdl-slider.is-upgraded:disabled:active::-moz-range-thumb, .mdl-slider.is-upgraded:disabled:focus::-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::-webkit-slider-thumb, .mdl-slider.is-upgraded.is-lowest-value:disabled:active::-webkit-slider-thumb, .mdl-slider.is-upgraded.is-lowest-value:disabled:focus::-webkit-slider-thumb{ border: 3px solid rgba(0, 0, 0, .26); background: 0 0; -webkit-transform: scale(.667); transform: scale(.667)} .mdl-slider.is-upgraded.is-lowest-value:disabled::-moz-range-thumb, .mdl-slider.is-upgraded.is-lowest-value:disabled:active::-moz-range-thumb, .mdl-slider.is-upgraded.is-lowest-value:disabled:focus::-moz-range-thumb{ border: 3px solid rgba(0, 0, 0, .26); background: 0 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::-ms-thumb, .mdl-slider.is-upgraded:disabled:active::-ms-thumb, .mdl-slider.is-upgraded:disabled:focus::-ms-thumb{ transform: scale(.25); background: rgba(0, 0, 0, .26)} .mdl-slider.is-upgraded.is-lowest-value:disabled::-ms-thumb, .mdl-slider.is-upgraded.is-lowest-value:disabled:active::-ms-thumb, .mdl-slider.is-upgraded.is-lowest-value:disabled:focus::-ms-thumb{ 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: none; margin: none; padding: none} .mdl-slider__container{ height: 18px; position: relative; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row} .mdl-slider__background-flex, .mdl-slider__container{ background: 0 0; 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); transform: translate(0, -1px)} .mdl-slider__background-lower{ background: #607d8b} .mdl-slider__background-lower, .mdl-slider__background-upper{ -webkit-flex: 0; -ms-flex: 0; flex: 0; position: relative; border: 0; padding: 0} .mdl-slider__background-upper{ background: rgba(0, 0, 0, .26); transition: left .18s cubic-bezier(.4, 0, .2, 1)} .mdl-snackbar{ position: fixed; bottom: 0; left: 50%; cursor: default; background-color: #323232; z-index: 3; display: block; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; font-family: Roboto, Helvetica, Arial, sans-serif; will-change: transform; -webkit-transform: translate(0, 80px); transform: translate(0, 80px); transition: transform .25s cubic-bezier(.4, 0, 1, 1); transition: transform .25s cubic-bezier(.4, 0, 1, 1), -webkit-transform .25s cubic-bezier(.4, 0, 1, 1); pointer-events: none} @media (max-width:479px){ .mdl-snackbar{ width: 100%; left: 0; min-height: 48px; max-height: 80px}} @media (min-width:480px){ .mdl-snackbar{ min-width: 288px; max-width: 568px; border-radius: 2px; -webkit-transform: translate(-50%, 80px); transform: translate(-50%, 80px)}} .mdl-snackbar--active{ -webkit-transform: translate(0, 0); transform: translate(0, 0); pointer-events: auto; transition: transform .25s cubic-bezier(0, 0, .2, 1); transition: transform .25s cubic-bezier(0, 0, .2, 1), -webkit-transform .25s cubic-bezier(0, 0, .2, 1)} @media (min-width:480px){ .mdl-snackbar--active{ -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0)}} .mdl-snackbar__text{ padding: 14px 12px 14px 24px; vertical-align: middle; color: #fff; float: left} .mdl-snackbar__action{ background: 0 0; border: none; color: #40c4ff; float: right; padding: 14px 24px 14px 12px; font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; text-transform: uppercase; line-height: 1; letter-spacing: 0; overflow: hidden; outline: 0; opacity: 0; pointer-events: none; cursor: pointer; text-decoration: none; text-align: center; -webkit-align-self: center; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center} .mdl-snackbar__action::-moz-focus-inner{ border: 0} .mdl-snackbar__action:not([aria-hidden]){ opacity: 1; pointer-events: auto} .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 1.568s linear infinite; animation: mdl-spinner__container-rotate 1.568s 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: #607d8b} .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: #607d8b} .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: #607d8b} .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: #607d8b} .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{ 25%, from{ opacity: .99} 26%, 89%{ opacity: 0} 100%, 90%{ opacity: .99}} @keyframes mdl-spinner__layer-1-fade-in-out{ 25%, from{ opacity: .99} 26%, 89%{ opacity: 0} 100%, 90%{ opacity: .99}} @-webkit-keyframes mdl-spinner__layer-2-fade-in-out{ 15%, from{ opacity: 0} 25%, 50%{ opacity: .99} 51%{ opacity: 0}} @keyframes mdl-spinner__layer-2-fade-in-out{ 15%, from{ opacity: 0} 25%, 50%{ opacity: .99} 51%{ opacity: 0}} @-webkit-keyframes mdl-spinner__layer-3-fade-in-out{ 40%, from{ opacity: 0} 50%, 75%{ opacity: .99} 76%{ opacity: 0}} @keyframes mdl-spinner__layer-3-fade-in-out{ 40%, from{ opacity: 0} 50%, 75%{ opacity: .99} 76%{ opacity: 0}} @-webkit-keyframes mdl-spinner__layer-4-fade-in-out{ 65%, from{ opacity: 0} 75%, 90%{ opacity: .99} 100%{ opacity: 0}} @keyframes mdl-spinner__layer-4-fade-in-out{ 65%, from{ 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__left{ float: left} .mdl-spinner__circle-clipper.mdl-spinner__right{ float: right} .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); 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); 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: none} .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(96, 125, 139, .5)} .mdl-switch.is-disabled .mdl-switch__track, .mdl-switch__track fieldset[disabled] .mdl-switch{ 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); transition-duration: .28s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-property: left} .mdl-switch.is-checked .mdl-switch__thumb{ background: #607d8b; 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, .mdl-switch__thumb fieldset[disabled] .mdl-switch{ background: #bdbdbd; cursor: auto} .mdl-switch__focus-helper{ position: absolute; top: 50%; left: 50%; -webkit-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(96, 125, 139, .26); background-color: rgba(96, 125, 139, .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, .mdl-switch__label fieldset[disabled] .mdl-switch{ 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); transition-duration: .4s; transition-timing-function: step-end; transition-property: left} .mdl-switch__ripple-container .mdl-ripple{ background: #607d8b} .mdl-switch.is-disabled .mdl-switch__ripple-container, .mdl-switch__ripple-container fieldset[disabled] .mdl-switch{ cursor: auto} .mdl-switch.is-disabled .mdl-switch__ripple-container .mdl-ripple, fieldset[disabled] .mdl-switch .mdl-switch__ripple-container .mdl-ripple{ background: 0 0} .mdl-switch.is-checked .mdl-switch__ripple-container{ left: 2px} .mdl-tabs{ display: block; width: 100%} .mdl-tabs__tab-bar{ display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -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-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: none; padding: 0 24px; float: left; position: relative; display: block; 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: #607d8b; -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; 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: #607d8b} .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--expandable .mdl-button--icon{ top: 16px} .mdl-textfield__input{ border: none; border-bottom: 1px solid rgba(0, 0, 0, .12); display: block; font-size: 16px; font-family: Helvetica, Arial, sans-serif; margin: 0; padding: 4px 0; width: 100%; background: 0 0; text-align: left; color: inherit} .mdl-textfield__input[type=number]{ -moz-appearance: textfield} .mdl-textfield__input[type=number]::-webkit-inner-spin-button, .mdl-textfield__input[type=number]::-webkit-outer-spin-button{ -webkit-appearance: none; margin: 0} .mdl-textfield.is-focused .mdl-textfield__input{ outline: 0} .mdl-textfield.is-invalid .mdl-textfield__input{ border-color: #d50000; box-shadow: none} .mdl-textfield.is-disabled .mdl-textfield__input, fieldset[disabled] .mdl-textfield .mdl-textfield__input{ background-color: transparent; border-bottom: 1px dotted rgba(0, 0, 0, .12); color: rgba(0, 0, 0, .26)} .mdl-textfield textarea.mdl-textfield__input{ display: block} .mdl-textfield__label{ bottom: 0; color: rgba(0, 0, 0, .26); font-size: 16px; left: 0; right: 0; pointer-events: none; position: absolute; display: block; top: 24px; width: 100%; overflow: hidden; white-space: nowrap; text-align: left} .mdl-textfield.has-placeholder .mdl-textfield__label, .mdl-textfield.is-dirty .mdl-textfield__label{ visibility: hidden} .mdl-textfield--floating-label .mdl-textfield__label{ transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1)} .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label{ transition: none} .mdl-textfield.is-disabled.is-disabled .mdl-textfield__label, fieldset[disabled] .mdl-textfield .mdl-textfield__label{ color: rgba(0, 0, 0, .26)} .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label, .mdl-textfield--floating-label.is-dirty .mdl-textfield__label, .mdl-textfield--floating-label.is-focused .mdl-textfield__label{ color: #607d8b; font-size: 12px; top: 4px; visibility: visible} .mdl-textfield--floating-label.has-placeholder .mdl-textfield__expandable-holder .mdl-textfield__label, .mdl-textfield--floating-label.is-dirty .mdl-textfield__expandable-holder .mdl-textfield__label, .mdl-textfield--floating-label.is-focused .mdl-textfield__expandable-holder .mdl-textfield__label{ top: -16px} .mdl-textfield--floating-label.is-invalid .mdl-textfield__label{ color: #d50000; font-size: 12px} .mdl-textfield__label:after{ background-color: #607d8b; bottom: 20px; content: ''; height: 2px; left: 45%; position: absolute; transition-duration: .2s; 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: #d50000} .mdl-textfield__error{ color: #d50000; position: absolute; font-size: 12px; margin-top: 3px; visibility: hidden; display: block} .mdl-textfield.is-invalid .mdl-textfield__error{ visibility: visible} .mdl-textfield__expandable-holder{ display: inline-block; position: relative; margin-left: 32px; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); display: inline-block; max-width: .1px} .mdl-textfield.is-dirty .mdl-textfield__expandable-holder, .mdl-textfield.is-focused .mdl-textfield__expandable-holder{ max-width: 600px} .mdl-textfield__expandable-holder .mdl-textfield__label:after{ bottom: 0} .mdl-tooltip{ -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: top center; transform-origin: top center; 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 .2s cubic-bezier(0, 0, .2, 1) forwards; animation: pulse .2s 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-shadow--24dp{ box-shadow: 0 9px 46px 8px rgba(0, 0, 0, .14), 0 11px 15px -7px rgba(0, 0, 0, .12), 0 24px 38px 3px rgba(0, 0, 0, .2)} .mdl-grid{ 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-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; -ms-grid-row-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; -ms-grid-row-align: stretch; align-self: stretch} .mdl-grid.mdl-grid--no-spacing>.mdl-cell{ margin: 0} .mdl-cell--order-1{ -webkit-order: 1; -ms-flex-order: 1; order: 1} .mdl-cell--order-2{ -webkit-order: 2; -ms-flex-order: 2; order: 2} .mdl-cell--order-3{ -webkit-order: 3; -ms-flex-order: 3; order: 3} .mdl-cell--order-4{ -webkit-order: 4; -ms-flex-order: 4; order: 4} .mdl-cell--order-5{ -webkit-order: 5; -ms-flex-order: 5; order: 5} .mdl-cell--order-6{ -webkit-order: 6; -ms-flex-order: 6; order: 6} .mdl-cell--order-7{ -webkit-order: 7; -ms-flex-order: 7; order: 7} .mdl-cell--order-8{ -webkit-order: 8; -ms-flex-order: 8; order: 8} .mdl-cell--order-9{ -webkit-order: 9; -ms-flex-order: 9; order: 9} .mdl-cell--order-10{ -webkit-order: 10; -ms-flex-order: 10; order: 10} .mdl-cell--order-11{ -webkit-order: 11; -ms-flex-order: 11; order: 11} .mdl-cell--order-12{ -webkit-order: 12; -ms-flex-order: 12; order: 12} @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--order-1-phone.mdl-cell--order-1-phone{ -webkit-order: 1; -ms-flex-order: 1; order: 1} .mdl-cell--order-2-phone.mdl-cell--order-2-phone{ -webkit-order: 2; -ms-flex-order: 2; order: 2} .mdl-cell--order-3-phone.mdl-cell--order-3-phone{ -webkit-order: 3; -ms-flex-order: 3; order: 3} .mdl-cell--order-4-phone.mdl-cell--order-4-phone{ -webkit-order: 4; -ms-flex-order: 4; order: 4} .mdl-cell--order-5-phone.mdl-cell--order-5-phone{ -webkit-order: 5; -ms-flex-order: 5; order: 5} .mdl-cell--order-6-phone.mdl-cell--order-6-phone{ -webkit-order: 6; -ms-flex-order: 6; order: 6} .mdl-cell--order-7-phone.mdl-cell--order-7-phone{ -webkit-order: 7; -ms-flex-order: 7; order: 7} .mdl-cell--order-8-phone.mdl-cell--order-8-phone{ -webkit-order: 8; -ms-flex-order: 8; order: 8} .mdl-cell--order-9-phone.mdl-cell--order-9-phone{ -webkit-order: 9; -ms-flex-order: 9; order: 9} .mdl-cell--order-10-phone.mdl-cell--order-10-phone{ -webkit-order: 10; -ms-flex-order: 10; order: 10} .mdl-cell--order-11-phone.mdl-cell--order-11-phone{ -webkit-order: 11; -ms-flex-order: 11; order: 11} .mdl-cell--order-12-phone.mdl-cell--order-12-phone{ -webkit-order: 12; -ms-flex-order: 12; order: 12} .mdl-cell--1-col, .mdl-cell--1-col-phone.mdl-cell--1-col-phone{ width: calc(25% - 16px)} .mdl-grid--no-spacing>.mdl-cell--1-col, .mdl-grid--no-spacing>.mdl-cell--1-col-phone.mdl-cell--1-col-phone{ width: 25%} .mdl-cell--2-col, .mdl-cell--2-col-phone.mdl-cell--2-col-phone{ width: calc(50% - 16px)} .mdl-grid--no-spacing>.mdl-cell--2-col, .mdl-grid--no-spacing>.mdl-cell--2-col-phone.mdl-cell--2-col-phone{ width: 50%} .mdl-cell--3-col, .mdl-cell--3-col-phone.mdl-cell--3-col-phone{ width: calc(75% - 16px)} .mdl-grid--no-spacing>.mdl-cell--3-col, .mdl-grid--no-spacing>.mdl-cell--3-col-phone.mdl-cell--3-col-phone{ width: 75%} .mdl-cell--4-col, .mdl-cell--4-col-phone.mdl-cell--4-col-phone{ width: calc(100% - 16px)} .mdl-grid--no-spacing>.mdl-cell--4-col, .mdl-grid--no-spacing>.mdl-cell--4-col-phone.mdl-cell--4-col-phone{ width: 100%} .mdl-cell--5-col, .mdl-cell--5-col-phone.mdl-cell--5-col-phone{ width: calc(100% - 16px)} .mdl-grid--no-spacing>.mdl-cell--5-col, .mdl-grid--no-spacing>.mdl-cell--5-col-phone.mdl-cell--5-col-phone{ width: 100%} .mdl-cell--6-col, .mdl-cell--6-col-phone.mdl-cell--6-col-phone{ width: calc(100% - 16px)} .mdl-grid--no-spacing>.mdl-cell--6-col, .mdl-grid--no-spacing>.mdl-cell--6-col-phone.mdl-cell--6-col-phone{ width: 100%} .mdl-cell--7-col, .mdl-cell--7-col-phone.mdl-cell--7-col-phone{ width: calc(100% - 16px)} .mdl-grid--no-spacing>.mdl-cell--7-col, .mdl-grid--no-spacing>.mdl-cell--7-col-phone.mdl-cell--7-col-phone{ width: 100%} .mdl-cell--8-col, .mdl-cell--8-col-phone.mdl-cell--8-col-phone{ width: calc(100% - 16px)} .mdl-grid--no-spacing>.mdl-cell--8-col, .mdl-grid--no-spacing>.mdl-cell--8-col-phone.mdl-cell--8-col-phone{ width: 100%} .mdl-cell--9-col, .mdl-cell--9-col-phone.mdl-cell--9-col-phone{ width: calc(100% - 16px)} .mdl-grid--no-spacing>.mdl-cell--9-col, .mdl-grid--no-spacing>.mdl-cell--9-col-phone.mdl-cell--9-col-phone{ width: 100%} .mdl-cell--10-col, .mdl-cell--10-col-phone.mdl-cell--10-col-phone{ width: calc(100% - 16px)} .mdl-grid--no-spacing>.mdl-cell--10-col, .mdl-grid--no-spacing>.mdl-cell--10-col-phone.mdl-cell--10-col-phone{ width: 100%} .mdl-cell--11-col, .mdl-cell--11-col-phone.mdl-cell--11-col-phone{ width: calc(100% - 16px)} .mdl-grid--no-spacing>.mdl-cell--11-col, .mdl-grid--no-spacing>.mdl-cell--11-col-phone.mdl-cell--11-col-phone{ width: 100%} .mdl-cell--12-col, .mdl-cell--12-col-phone.mdl-cell--12-col-phone{ width: calc(100% - 16px)} .mdl-grid--no-spacing>.mdl-cell--12-col, .mdl-grid--no-spacing>.mdl-cell--12-col-phone.mdl-cell--12-col-phone{ width: 100%} .mdl-cell--1-offset, .mdl-cell--1-offset-phone.mdl-cell--1-offset-phone{ margin-left: calc(25% + 8px)} .mdl-grid.mdl-grid--no-spacing>.mdl-cell--1-offset, .mdl-grid.mdl-grid--no-spacing>.mdl-cell--1-offset-phone.mdl-cell--1-offset-phone{ margin-left: 25%} .mdl-cell--2-offset, .mdl-cell--2-offset-phone.mdl-cell--2-offset-phone{ margin-left: calc(50% + 8px)} .mdl-grid.mdl-grid--no-spacing>.mdl-cell--2-offset, .mdl-grid.mdl-grid--no-spacing>.mdl-cell--2-offset-phone.mdl-cell--2-offset-phone{ margin-left: 50%} .mdl-cell--3-offset, .mdl-cell--3-offset-phone.mdl-cell--3-offset-phone{ margin-left: calc(75% + 8px)} .mdl-grid.mdl-grid--no-spacing>.mdl-cell--3-offset, .mdl-grid.mdl-grid--no-spacing>.mdl-cell--3-offset-phone.mdl-cell--3-offset-phone{ margin-left: 75%}} @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--order-1-tablet.mdl-cell--order-1-tablet{ -webkit-order: 1; -ms-flex-order: 1; order: 1} .mdl-cell--order-2-tablet.mdl-cell--order-2-tablet{ -webkit-order: 2; -ms-flex-order: 2; order: 2} .mdl-cell--order-3-tablet.mdl-cell--order-3-tablet{ -webkit-order: 3; -ms-flex-order: 3; order: 3} .mdl-cell--order-4-tablet.mdl-cell--order-4-tablet{ -webkit-order: 4; -ms-flex-order: 4; order: 4} .mdl-cell--order-5-tablet.mdl-cell--order-5-tablet{ -webkit-order: 5; -ms-flex-order: 5; order: 5} .mdl-cell--order-6-tablet.mdl-cell--order-6-tablet{ -webkit-order: 6; -ms-flex-order: 6; order: 6} .mdl-cell--order-7-tablet.mdl-cell--order-7-tablet{ -webkit-order: 7; -ms-flex-order: 7; order: 7} .mdl-cell--order-8-tablet.mdl-cell--order-8-tablet{ -webkit-order: 8; -ms-flex-order: 8; order: 8} .mdl-cell--order-9-tablet.mdl-cell--order-9-tablet{ -webkit-order: 9; -ms-flex-order: 9; order: 9} .mdl-cell--order-10-tablet.mdl-cell--order-10-tablet{ -webkit-order: 10; -ms-flex-order: 10; order: 10} .mdl-cell--order-11-tablet.mdl-cell--order-11-tablet{ -webkit-order: 11; -ms-flex-order: 11; order: 11} .mdl-cell--order-12-tablet.mdl-cell--order-12-tablet{ -webkit-order: 12; -ms-flex-order: 12; order: 12} .mdl-cell--1-col, .mdl-cell--1-col-tablet.mdl-cell--1-col-tablet{ width: calc(12.5% - 16px)} .mdl-grid--no-spacing>.mdl-cell--1-col, .mdl-grid--no-spacing>.mdl-cell--1-col-tablet.mdl-cell--1-col-tablet{ width: 12.5%} .mdl-cell--2-col, .mdl-cell--2-col-tablet.mdl-cell--2-col-tablet{ width: calc(25% - 16px)} .mdl-grid--no-spacing>.mdl-cell--2-col, .mdl-grid--no-spacing>.mdl-cell--2-col-tablet.mdl-cell--2-col-tablet{ width: 25%} .mdl-cell--3-col, .mdl-cell--3-col-tablet.mdl-cell--3-col-tablet{ width: calc(37.5% - 16px)} .mdl-grid--no-spacing>.mdl-cell--3-col, .mdl-grid--no-spacing>.mdl-cell--3-col-tablet.mdl-cell--3-col-tablet{ width: 37.5%} .mdl-cell--4-col, .mdl-cell--4-col-tablet.mdl-cell--4-col-tablet{ width: calc(50% - 16px)} .mdl-grid--no-spacing>.mdl-cell--4-col, .mdl-grid--no-spacing>.mdl-cell--4-col-tablet.mdl-cell--4-col-tablet{ width: 50%} .mdl-cell--5-col, .mdl-cell--5-col-tablet.mdl-cell--5-col-tablet{ width: calc(62.5% - 16px)} .mdl-grid--no-spacing>.mdl-cell--5-col, .mdl-grid--no-spacing>.mdl-cell--5-col-tablet.mdl-cell--5-col-tablet{ width: 62.5%} .mdl-cell--6-col, .mdl-cell--6-col-tablet.mdl-cell--6-col-tablet{ width: calc(75% - 16px)} .mdl-grid--no-spacing>.mdl-cell--6-col, .mdl-grid--no-spacing>.mdl-cell--6-col-tablet.mdl-cell--6-col-tablet{ width: 75%} .mdl-cell--7-col, .mdl-cell--7-col-tablet.mdl-cell--7-col-tablet{ width: calc(87.5% - 16px)} .mdl-grid--no-spacing>.mdl-cell--7-col, .mdl-grid--no-spacing>.mdl-cell--7-col-tablet.mdl-cell--7-col-tablet{ width: 87.5%} .mdl-cell--8-col, .mdl-cell--8-col-tablet.mdl-cell--8-col-tablet{ width: calc(100% - 16px)} .mdl-grid--no-spacing>.mdl-cell--8-col, .mdl-grid--no-spacing>.mdl-cell--8-col-tablet.mdl-cell--8-col-tablet{ width: 100%} .mdl-cell--9-col, .mdl-cell--9-col-tablet.mdl-cell--9-col-tablet{ width: calc(100% - 16px)} .mdl-grid--no-spacing>.mdl-cell--9-col, .mdl-grid--no-spacing>.mdl-cell--9-col-tablet.mdl-cell--9-col-tablet{ width: 100%} .mdl-cell--10-col, .mdl-cell--10-col-tablet.mdl-cell--10-col-tablet{ width: calc(100% - 16px)} .mdl-grid--no-spacing>.mdl-cell--10-col, .mdl-grid--no-spacing>.mdl-cell--10-col-tablet.mdl-cell--10-col-tablet{ width: 100%} .mdl-cell--11-col, .mdl-cell--11-col-tablet.mdl-cell--11-col-tablet{ width: calc(100% - 16px)} .mdl-grid--no-spacing>.mdl-cell--11-col, .mdl-grid--no-spacing>.mdl-cell--11-col-tablet.mdl-cell--11-col-tablet{ width: 100%} .mdl-cell--12-col, .mdl-cell--12-col-tablet.mdl-cell--12-col-tablet{ width: calc(100% - 16px)} .mdl-grid--no-spacing>.mdl-cell--12-col, .mdl-grid--no-spacing>.mdl-cell--12-col-tablet.mdl-cell--12-col-tablet{ width: 100%} .mdl-cell--1-offset, .mdl-cell--1-offset-tablet.mdl-cell--1-offset-tablet{ margin-left: calc(12.5% + 8px)} .mdl-grid.mdl-grid--no-spacing>.mdl-cell--1-offset, .mdl-grid.mdl-grid--no-spacing>.mdl-cell--1-offset-tablet.mdl-cell--1-offset-tablet{ margin-left: 12.5%} .mdl-cell--2-offset, .mdl-cell--2-offset-tablet.mdl-cell--2-offset-tablet{ margin-left: calc(25% + 8px)} .mdl-grid.mdl-grid--no-spacing>.mdl-cell--2-offset, .mdl-grid.mdl-grid--no-spacing>.mdl-cell--2-offset-tablet.mdl-cell--2-offset-tablet{ margin-left: 25%} .mdl-cell--3-offset, .mdl-cell--3-offset-tablet.mdl-cell--3-offset-tablet{ margin-left: calc(37.5% + 8px)} .mdl-grid.mdl-grid--no-spacing>.mdl-cell--3-offset, .mdl-grid.mdl-grid--no-spacing>.mdl-cell--3-offset-tablet.mdl-cell--3-offset-tablet{ margin-left: 37.5%} .mdl-cell--4-offset, .mdl-cell--4-offset-tablet.mdl-cell--4-offset-tablet{ margin-left: calc(50% + 8px)} .mdl-grid.mdl-grid--no-spacing>.mdl-cell--4-offset, .mdl-grid.mdl-grid--no-spacing>.mdl-cell--4-offset-tablet.mdl-cell--4-offset-tablet{ margin-left: 50%} .mdl-cell--5-offset, .mdl-cell--5-offset-tablet.mdl-cell--5-offset-tablet{ margin-left: calc(62.5% + 8px)} .mdl-grid.mdl-grid--no-spacing>.mdl-cell--5-offset, .mdl-grid.mdl-grid--no-spacing>.mdl-cell--5-offset-tablet.mdl-cell--5-offset-tablet{ margin-left: 62.5%} .mdl-cell--6-offset, .mdl-cell--6-offset-tablet.mdl-cell--6-offset-tablet{ margin-left: calc(75% + 8px)} .mdl-grid.mdl-grid--no-spacing>.mdl-cell--6-offset, .mdl-grid.mdl-grid--no-spacing>.mdl-cell--6-offset-tablet.mdl-cell--6-offset-tablet{ margin-left: 75%} .mdl-cell--7-offset, .mdl-cell--7-offset-tablet.mdl-cell--7-offset-tablet{ margin-left: calc(87.5% + 8px)} .mdl-grid.mdl-grid--no-spacing>.mdl-cell--7-offset, .mdl-grid.mdl-grid--no-spacing>.mdl-cell--7-offset-tablet.mdl-cell--7-offset-tablet{ margin-left: 87.5%}} @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--order-1-desktop.mdl-cell--order-1-desktop{ -webkit-order: 1; -ms-flex-order: 1; order: 1} .mdl-cell--order-2-desktop.mdl-cell--order-2-desktop{ -webkit-order: 2; -ms-flex-order: 2; order: 2} .mdl-cell--order-3-desktop.mdl-cell--order-3-desktop{ -webkit-order: 3; -ms-flex-order: 3; order: 3} .mdl-cell--order-4-desktop.mdl-cell--order-4-desktop{ -webkit-order: 4; -ms-flex-order: 4; order: 4} .mdl-cell--order-5-desktop.mdl-cell--order-5-desktop{ -webkit-order: 5; -ms-flex-order: 5; order: 5} .mdl-cell--order-6-desktop.mdl-cell--order-6-desktop{ -webkit-order: 6; -ms-flex-order: 6; order: 6} .mdl-cell--order-7-desktop.mdl-cell--order-7-desktop{ -webkit-order: 7; -ms-flex-order: 7; order: 7} .mdl-cell--order-8-desktop.mdl-cell--order-8-desktop{ -webkit-order: 8; -ms-flex-order: 8; order: 8} .mdl-cell--order-9-desktop.mdl-cell--order-9-desktop{ -webkit-order: 9; -ms-flex-order: 9; order: 9} .mdl-cell--order-10-desktop.mdl-cell--order-10-desktop{ -webkit-order: 10; -ms-flex-order: 10; order: 10} .mdl-cell--order-11-desktop.mdl-cell--order-11-desktop{ -webkit-order: 11; -ms-flex-order: 11; order: 11} .mdl-cell--order-12-desktop.mdl-cell--order-12-desktop{ -webkit-order: 12; -ms-flex-order: 12; order: 12} .mdl-cell--1-col, .mdl-cell--1-col-desktop.mdl-cell--1-col-desktop{ width: calc(8.3333333333% - 16px)} .mdl-grid--no-spacing>.mdl-cell--1-col, .mdl-grid--no-spacing>.mdl-cell--1-col-desktop.mdl-cell--1-col-desktop{ width: 8.3333333333%} .mdl-cell--2-col, .mdl-cell--2-col-desktop.mdl-cell--2-col-desktop{ width: calc(16.6666666667% - 16px)} .mdl-grid--no-spacing>.mdl-cell--2-col, .mdl-grid--no-spacing>.mdl-cell--2-col-desktop.mdl-cell--2-col-desktop{ width: 16.6666666667%} .mdl-cell--3-col, .mdl-cell--3-col-desktop.mdl-cell--3-col-desktop{ width: calc(25% - 16px)} .mdl-grid--no-spacing>.mdl-cell--3-col, .mdl-grid--no-spacing>.mdl-cell--3-col-desktop.mdl-cell--3-col-desktop{ width: 25%} .mdl-cell--4-col, .mdl-cell--4-col-desktop.mdl-cell--4-col-desktop{ width: calc(33.3333333333% - 16px)} .mdl-grid--no-spacing>.mdl-cell--4-col, .mdl-grid--no-spacing>.mdl-cell--4-col-desktop.mdl-cell--4-col-desktop{ width: 33.3333333333%} .mdl-cell--5-col, .mdl-cell--5-col-desktop.mdl-cell--5-col-desktop{ width: calc(41.6666666667% - 16px)} .mdl-grid--no-spacing>.mdl-cell--5-col, .mdl-grid--no-spacing>.mdl-cell--5-col-desktop.mdl-cell--5-col-desktop{ width: 41.6666666667%} .mdl-cell--6-col, .mdl-cell--6-col-desktop.mdl-cell--6-col-desktop{ width: calc(50% - 16px)} .mdl-grid--no-spacing>.mdl-cell--6-col, .mdl-grid--no-spacing>.mdl-cell--6-col-desktop.mdl-cell--6-col-desktop{ width: 50%} .mdl-cell--7-col, .mdl-cell--7-col-desktop.mdl-cell--7-col-desktop{ width: calc(58.3333333333% - 16px)} .mdl-grid--no-spacing>.mdl-cell--7-col, .mdl-grid--no-spacing>.mdl-cell--7-col-desktop.mdl-cell--7-col-desktop{ width: 58.3333333333%} .mdl-cell--8-col, .mdl-cell--8-col-desktop.mdl-cell--8-col-desktop{ width: calc(66.6666666667% - 16px)} .mdl-grid--no-spacing>.mdl-cell--8-col, .mdl-grid--no-spacing>.mdl-cell--8-col-desktop.mdl-cell--8-col-desktop{ width: 66.6666666667%} .mdl-cell--9-col, .mdl-cell--9-col-desktop.mdl-cell--9-col-desktop{ width: calc(75% - 16px)} .mdl-grid--no-spacing>.mdl-cell--9-col, .mdl-grid--no-spacing>.mdl-cell--9-col-desktop.mdl-cell--9-col-desktop{ width: 75%} .mdl-cell--10-col, .mdl-cell--10-col-desktop.mdl-cell--10-col-desktop{ width: calc(83.3333333333% - 16px)} .mdl-grid--no-spacing>.mdl-cell--10-col, .mdl-grid--no-spacing>.mdl-cell--10-col-desktop.mdl-cell--10-col-desktop{ width: 83.3333333333%} .mdl-cell--11-col, .mdl-cell--11-col-desktop.mdl-cell--11-col-desktop{ width: calc(91.6666666667% - 16px)} .mdl-grid--no-spacing>.mdl-cell--11-col, .mdl-grid--no-spacing>.mdl-cell--11-col-desktop.mdl-cell--11-col-desktop{ width: 91.6666666667%} .mdl-cell--12-col, .mdl-cell--12-col-desktop.mdl-cell--12-col-desktop{ width: calc(100% - 16px)} .mdl-grid--no-spacing>.mdl-cell--12-col, .mdl-grid--no-spacing>.mdl-cell--12-col-desktop.mdl-cell--12-col-desktop{ width: 100%} .mdl-cell--1-offset, .mdl-cell--1-offset-desktop.mdl-cell--1-offset-desktop{ margin-left: calc(8.3333333333% + 8px)} .mdl-grid.mdl-grid--no-spacing>.mdl-cell--1-offset, .mdl-grid.mdl-grid--no-spacing>.mdl-cell--1-offset-desktop.mdl-cell--1-offset-desktop{ margin-left: 8.3333333333%} .mdl-cell--2-offset, .mdl-cell--2-offset-desktop.mdl-cell--2-offset-desktop{ margin-left: calc(16.6666666667% + 8px)} .mdl-grid.mdl-grid--no-spacing>.mdl-cell--2-offset, .mdl-grid.mdl-grid--no-spacing>.mdl-cell--2-offset-desktop.mdl-cell--2-offset-desktop{ margin-left: 16.6666666667%} .mdl-cell--3-offset, .mdl-cell--3-offset-desktop.mdl-cell--3-offset-desktop{ margin-left: calc(25% + 8px)} .mdl-grid.mdl-grid--no-spacing>.mdl-cell--3-offset, .mdl-grid.mdl-grid--no-spacing>.mdl-cell--3-offset-desktop.mdl-cell--3-offset-desktop{ margin-left: 25%} .mdl-cell--4-offset, .mdl-cell--4-offset-desktop.mdl-cell--4-offset-desktop{ margin-left: calc(33.3333333333% + 8px)} .mdl-grid.mdl-grid--no-spacing>.mdl-cell--4-offset, .mdl-grid.mdl-grid--no-spacing>.mdl-cell--4-offset-desktop.mdl-cell--4-offset-desktop{ margin-left: 33.3333333333%} .mdl-cell--5-offset, .mdl-cell--5-offset-desktop.mdl-cell--5-offset-desktop{ margin-left: calc(41.6666666667% + 8px)} .mdl-grid.mdl-grid--no-spacing>.mdl-cell--5-offset, .mdl-grid.mdl-grid--no-spacing>.mdl-cell--5-offset-desktop.mdl-cell--5-offset-desktop{ margin-left: 41.6666666667%} .mdl-cell--6-offset, .mdl-cell--6-offset-desktop.mdl-cell--6-offset-desktop{ margin-left: calc(50% + 8px)} .mdl-grid.mdl-grid--no-spacing>.mdl-cell--6-offset, .mdl-grid.mdl-grid--no-spacing>.mdl-cell--6-offset-desktop.mdl-cell--6-offset-desktop{ margin-left: 50%} .mdl-cell--7-offset, .mdl-cell--7-offset-desktop.mdl-cell--7-offset-desktop{ margin-left: calc(58.3333333333% + 8px)} .mdl-grid.mdl-grid--no-spacing>.mdl-cell--7-offset, .mdl-grid.mdl-grid--no-spacing>.mdl-cell--7-offset-desktop.mdl-cell--7-offset-desktop{ margin-left: 58.3333333333%} .mdl-cell--8-offset, .mdl-cell--8-offset-desktop.mdl-cell--8-offset-desktop{ margin-left: calc(66.6666666667% + 8px)} .mdl-grid.mdl-grid--no-spacing>.mdl-cell--8-offset, .mdl-grid.mdl-grid--no-spacing>.mdl-cell--8-offset-desktop.mdl-cell--8-offset-desktop{ margin-left: 66.6666666667%} .mdl-cell--9-offset, .mdl-cell--9-offset-desktop.mdl-cell--9-offset-desktop{ margin-left: calc(75% + 8px)} .mdl-grid.mdl-grid--no-spacing>.mdl-cell--9-offset, .mdl-grid.mdl-grid--no-spacing>.mdl-cell--9-offset-desktop.mdl-cell--9-offset-desktop{ margin-left: 75%} .mdl-cell--10-offset, .mdl-cell--10-offset-desktop.mdl-cell--10-offset-desktop{ margin-left: calc(83.3333333333% + 8px)} .mdl-grid.mdl-grid--no-spacing>.mdl-cell--10-offset, .mdl-grid.mdl-grid--no-spacing>.mdl-cell--10-offset-desktop.mdl-cell--10-offset-desktop{ margin-left: 83.3333333333%} .mdl-cell--11-offset, .mdl-cell--11-offset-desktop.mdl-cell--11-offset-desktop{ margin-left: calc(91.6666666667% + 8px)} .mdl-grid.mdl-grid--no-spacing>.mdl-cell--11-offset, .mdl-grid.mdl-grid--no-spacing>.mdl-cell--11-offset-desktop.mdl-cell--11-offset-desktop{ margin-left: 91.6666666667%}} 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; 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: none} iframe.heightSet{ overflow: hidden} .demo-wrapper{ margin: 24px} .demo-wrapper iframe{ border: 1px solid rgba(0, 0, 0, .5)}
</style><script>! function(){ "use strict"; function e(e, t){ if (e){ if (t.element_.classList.contains(t.CssClasses_.MDL_JS_RIPPLE_EFFECT)){ var s=document.createElement("span"); s.classList.add(t.CssClasses_.MDL_RIPPLE_CONTAINER), s.classList.add(t.CssClasses_.MDL_JS_RIPPLE_EFFECT); var i=document.createElement("span"); i.classList.add(t.CssClasses_.MDL_RIPPLE), s.appendChild(i), e.appendChild(s)} e.addEventListener("click", function(s){ if ("#"===e.getAttribute("href").charAt(0)){ s.preventDefault(); var i=e.href.split("#")[1], n=t.element_.querySelector("#" + i); t.resetTabState_(), t.resetPanelState_(), e.classList.add(t.CssClasses_.ACTIVE_CLASS), n.classList.add(t.CssClasses_.ACTIVE_CLASS)}})}} function t(e, t, s, i){ function n(){ var n=e.href.split("#")[1], a=i.content_.querySelector("#" + n); i.resetTabState_(t), i.resetPanelState_(s), e.classList.add(i.CssClasses_.IS_ACTIVE), a.classList.add(i.CssClasses_.IS_ACTIVE)} if (i.tabBar_.classList.contains(i.CssClasses_.JS_RIPPLE_EFFECT)){ var a=document.createElement("span"); a.classList.add(i.CssClasses_.RIPPLE_CONTAINER), a.classList.add(i.CssClasses_.JS_RIPPLE_EFFECT); var l=document.createElement("span"); l.classList.add(i.CssClasses_.RIPPLE), a.appendChild(l), e.appendChild(a)} i.tabBar_.classList.contains(i.CssClasses_.TAB_MANUAL_SWITCH) || e.addEventListener("click", function(t){ "#"===e.getAttribute("href").charAt(0) && (t.preventDefault(), n())}), e.show=n} var s={ upgradeDom: function(e, t){}, upgradeElement: function(e, t){}, upgradeElements: function(e){}, upgradeAllRegistered: function(){}, registerUpgradedCallback: function(e, t){}, register: function(e){}, downgradeElements: function(e){}}; (s=function(){ function e(e, t){ for (var s=0; s < o.length; s++) if (o[s].className===e) return void 0 !==t && (o[s]=t), o[s]; return !1} function t(e){ var t=e.getAttribute("data-upgraded"); return null===t ? [""] : t.split(",")} function s(e, s){ return -1 !==t(e).indexOf(s)} function i(e, t, s){ if ("CustomEvent" in window && "function"==typeof window.CustomEvent) return new CustomEvent(e,{ bubbles: t, cancelable: s}); var i=document.createEvent("Events"); return i.initEvent(e, t, s), i} function n(t, s){ if (void 0===t && void 0===s) for (var i=0; i < o.length; i++) n(o[i].className, o[i].cssClass); else{ var l=t; if (void 0===s){ var r=e(l); r && (s=r.cssClass)} for (var _=document.querySelectorAll("." + s), d=0; d < _.length; d++) a(_[d], l)}} function a(n, a){ if (!("object"==typeof n && n instanceof Element)) throw new Error("Invalid argument provided to upgrade MDL element."); var l=i("mdl-componentupgrading", !0, !0); if (n.dispatchEvent(l), !l.defaultPrevented){ var d=t(n), h=[]; if (a) s(n, a) || h.push(e(a)); else{ var c=n.classList; o.forEach(function(e){ c.contains(e.cssClass) && -1===h.indexOf(e) && !s(n, e.className) && h.push(e)})} for (var p, C=0, u=h.length; C < u; C++){ if (!(p=h[C])) throw new Error("Unable to find a registered component for the given class."); d.push(p.className), n.setAttribute("data-upgraded", d.join(",")); var E=new p.classConstructor(n); E[_]=p, r.push(E); for (var m=0, L=p.callbacks.length; m < L; m++) p.callbacks[m](n); p.widget && (n[p.className]=E); var I=i("mdl-componentupgraded", !0, !1); n.dispatchEvent(I)}}} function l(e){ if (e){ var t=r.indexOf(e); r.splice(t, 1); var s=e.element_.getAttribute("data-upgraded").split(","), n=s.indexOf(e[_].classAsString); s.splice(n, 1), e.element_.setAttribute("data-upgraded", s.join(",")); var a=i("mdl-componentdowngraded", !0, !1); e.element_.dispatchEvent(a)}} var o=[], r=[], _="mdlComponentConfigInternal_"; return{ upgradeDom: n, upgradeElement: a, upgradeElements: function e(t){ Array.isArray(t) || (t=t instanceof Element ? [t] : Array.prototype.slice.call(t)); for (var s, i=0, n=t.length; i < n; i++)(s=t[i]) instanceof HTMLElement && (a(s), s.children.length >0 && e(s.children))}, upgradeAllRegistered: function(){ for (var e=0; e < o.length; e++) n(o[e].className)}, registerUpgradedCallback: function(t, s){ var i=e(t); i && i.callbacks.push(s)}, register: function(t){ var s=!0; void 0===t.widget && void 0===t.widget || (s=t.widget || t.widget); var i={ classConstructor: t.constructor || t.constructor, className: t.classAsString || t.classAsString, cssClass: t.cssClass || t.cssClass, widget: s, callbacks: []}; if (o.forEach(function(e){ if (e.cssClass===i.cssClass) throw new Error("The provided cssClass has already been registered: " + e.cssClass); if (e.className===i.className) throw new Error("The provided className has already been registered")}), t.constructor.prototype.hasOwnProperty(_)) throw new Error("MDL component classes must not have " + _ + " defined as a property."); e(t.classAsString, i) || o.push(i)}, downgradeElements: function(e){ var t=function(e){ r.filter(function(t){ return t.element_===e}).forEach(l)}; if (e instanceof Array || e instanceof NodeList) for (var s=0; s < e.length; s++) t(e[s]); else{ if (!(e instanceof Node)) throw new Error("Invalid argument provided to downgrade MDL nodes."); t(e)}}}}()).ComponentConfigPublic, s.ComponentConfig, s.Component, s.upgradeDom=s.upgradeDom, s.upgradeElement=s.upgradeElement, s.upgradeElements=s.upgradeElements, s.upgradeAllRegistered=s.upgradeAllRegistered, s.registerUpgradedCallback=s.registerUpgradedCallback, s.register=s.register, s.downgradeElements=s.downgradeElements, window.componentHandler=s, window.componentHandler=s, window.addEventListener("load", function(){ "classList" in document.createElement("div") && "querySelector" in document && "addEventListener" in window && Array.prototype.forEach ? (document.documentElement.classList.add("mdl-js"), s.upgradeAllRegistered()) : (s.upgradeElement=function(){}, s.register=function(){})}), Date.now || (Date.now=function(){ return (new Date).getTime()}, Date.now=Date.now); for (var i=["webkit", "moz"], n=0; n < i.length && !window.requestAnimationFrame; ++n){ var a=i[n]; window.requestAnimationFrame=window[a + "RequestAnimationFrame"], window.cancelAnimationFrame=window[a + "CancelAnimationFrame"] || window[a + "CancelRequestAnimationFrame"], window.requestAnimationFrame=window.requestAnimationFrame, window.cancelAnimationFrame=window.cancelAnimationFrame} if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) || !window.requestAnimationFrame || !window.cancelAnimationFrame){ var l=0; window.requestAnimationFrame=function(e){ var t=Date.now(), s=Math.max(l + 16, t); return setTimeout(function(){ e(l=s)}, s - t)}, window.cancelAnimationFrame=clearTimeout, window.requestAnimationFrame=window.requestAnimationFrame, window.cancelAnimationFrame=window.cancelAnimationFrame} var o=function(e){ this.element_=e, this.init()}; window.MaterialButton=o, o.prototype.Constant_={}, o.prototype.CssClasses_={ RIPPLE_EFFECT: "mdl-js-ripple-effect", RIPPLE_CONTAINER: "mdl-button__ripple-container", RIPPLE: "mdl-ripple"}, o.prototype.blurHandler_=function(e){ e && this.element_.blur()}, o.prototype.disable=function(){ this.element_.disabled=!0}, o.prototype.disable=o.prototype.disable, o.prototype.enable=function(){ this.element_.disabled=!1}, o.prototype.enable=o.prototype.enable, o.prototype.init=function(){ if (this.element_){ if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)){ var e=document.createElement("span"); e.classList.add(this.CssClasses_.RIPPLE_CONTAINER), this.rippleElement_=document.createElement("span"), this.rippleElement_.classList.add(this.CssClasses_.RIPPLE), e.appendChild(this.rippleElement_), this.boundRippleBlurHandler=this.blurHandler_.bind(this), this.rippleElement_.addEventListener("mouseup", this.boundRippleBlurHandler), this.element_.appendChild(e)} this.boundButtonBlurHandler=this.blurHandler_.bind(this), this.element_.addEventListener("mouseup", this.boundButtonBlurHandler), this.element_.addEventListener("mouseleave", this.boundButtonBlurHandler)}}, s.register({ constructor: o, classAsString: "MaterialButton", cssClass: "mdl-js-button", widget: !0}); var r=function(e){ this.element_=e, this.init()}; window.MaterialCheckbox=r, r.prototype.Constant_={ TINY_TIMEOUT: .001}, r.prototype.CssClasses_={ INPUT: "mdl-checkbox__input", BOX_OUTLINE: "mdl-checkbox__box-outline", FOCUS_HELPER: "mdl-checkbox__focus-helper", TICK_OUTLINE: "mdl-checkbox__tick-outline", RIPPLE_EFFECT: "mdl-js-ripple-effect", RIPPLE_IGNORE_EVENTS: "mdl-js-ripple-effect--ignore-events", RIPPLE_CONTAINER: "mdl-checkbox__ripple-container", RIPPLE_CENTER: "mdl-ripple--center", RIPPLE: "mdl-ripple", IS_FOCUSED: "is-focused", IS_DISABLED: "is-disabled", IS_CHECKED: "is-checked", IS_UPGRADED: "is-upgraded"}, r.prototype.onChange_=function(e){ this.updateClasses_()}, r.prototype.onFocus_=function(e){ this.element_.classList.add(this.CssClasses_.IS_FOCUSED)}, r.prototype.onBlur_=function(e){ this.element_.classList.remove(this.CssClasses_.IS_FOCUSED)}, r.prototype.onMouseUp_=function(e){ this.blur_()}, r.prototype.updateClasses_=function(){ this.checkDisabled(), this.checkToggleState()}, r.prototype.blur_=function(){ window.setTimeout(function(){ this.inputElement_.blur()}.bind(this), this.Constant_.TINY_TIMEOUT)}, r.prototype.checkToggleState=function(){ this.inputElement_.checked ? this.element_.classList.add(this.CssClasses_.IS_CHECKED) : this.element_.classList.remove(this.CssClasses_.IS_CHECKED)}, r.prototype.checkToggleState=r.prototype.checkToggleState, r.prototype.checkDisabled=function(){ this.inputElement_.disabled ? this.element_.classList.add(this.CssClasses_.IS_DISABLED) : this.element_.classList.remove(this.CssClasses_.IS_DISABLED)}, r.prototype.checkDisabled=r.prototype.checkDisabled, r.prototype.disable=function(){ this.inputElement_.disabled=!0, this.updateClasses_()}, r.prototype.disable=r.prototype.disable, r.prototype.enable=function(){ this.inputElement_.disabled=!1, this.updateClasses_()}, r.prototype.enable=r.prototype.enable, r.prototype.check=function(){ this.inputElement_.checked=!0, this.updateClasses_()}, r.prototype.check=r.prototype.check, r.prototype.uncheck=function(){ this.inputElement_.checked=!1, this.updateClasses_()}, r.prototype.uncheck=r.prototype.uncheck, r.prototype.init=function(){ if (this.element_){ this.inputElement_=this.element_.querySelector("." + this.CssClasses_.INPUT); var e=document.createElement("span"); e.classList.add(this.CssClasses_.BOX_OUTLINE); var t=document.createElement("span"); t.classList.add(this.CssClasses_.FOCUS_HELPER); var s=document.createElement("span"); if (s.classList.add(this.CssClasses_.TICK_OUTLINE), e.appendChild(s), this.element_.appendChild(t), this.element_.appendChild(e), this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)){ this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS), this.rippleContainerElement_=document.createElement("span"), this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CONTAINER), this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_EFFECT), this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CENTER), this.boundRippleMouseUp=this.onMouseUp_.bind(this), this.rippleContainerElement_.addEventListener("mouseup", this.boundRippleMouseUp); var i=document.createElement("span"); i.classList.add(this.CssClasses_.RIPPLE), this.rippleContainerElement_.appendChild(i), this.element_.appendChild(this.rippleContainerElement_)} this.boundInputOnChange=this.onChange_.bind(this), this.boundInputOnFocus=this.onFocus_.bind(this), this.boundInputOnBlur=this.onBlur_.bind(this), this.boundElementMouseUp=this.onMouseUp_.bind(this), this.inputElement_.addEventListener("change", this.boundInputOnChange), this.inputElement_.addEventListener("focus", this.boundInputOnFocus), this.inputElement_.addEventListener("blur", this.boundInputOnBlur), this.element_.addEventListener("mouseup", this.boundElementMouseUp), this.updateClasses_(), this.element_.classList.add(this.CssClasses_.IS_UPGRADED)}}, s.register({ constructor: r, classAsString: "MaterialCheckbox", cssClass: "mdl-js-checkbox", widget: !0}); var _=function(e){ this.element_=e, this.init()}; window.MaterialIconToggle=_, _.prototype.Constant_={ TINY_TIMEOUT: .001}, _.prototype.CssClasses_={ INPUT: "mdl-icon-toggle__input", JS_RIPPLE_EFFECT: "mdl-js-ripple-effect", RIPPLE_IGNORE_EVENTS: "mdl-js-ripple-effect--ignore-events", RIPPLE_CONTAINER: "mdl-icon-toggle__ripple-container", RIPPLE_CENTER: "mdl-ripple--center", RIPPLE: "mdl-ripple", IS_FOCUSED: "is-focused", IS_DISABLED: "is-disabled", IS_CHECKED: "is-checked"}, _.prototype.onChange_=function(e){ this.updateClasses_()}, _.prototype.onFocus_=function(e){ this.element_.classList.add(this.CssClasses_.IS_FOCUSED)}, _.prototype.onBlur_=function(e){ this.element_.classList.remove(this.CssClasses_.IS_FOCUSED)}, _.prototype.onMouseUp_=function(e){ this.blur_()}, _.prototype.updateClasses_=function(){ this.checkDisabled(), this.checkToggleState()}, _.prototype.blur_=function(){ window.setTimeout(function(){ this.inputElement_.blur()}.bind(this), this.Constant_.TINY_TIMEOUT)}, _.prototype.checkToggleState=function(){ this.inputElement_.checked ? this.element_.classList.add(this.CssClasses_.IS_CHECKED) : this.element_.classList.remove(this.CssClasses_.IS_CHECKED)}, _.prototype.checkToggleState=_.prototype.checkToggleState, _.prototype.checkDisabled=function(){ this.inputElement_.disabled ? this.element_.classList.add(this.CssClasses_.IS_DISABLED) : this.element_.classList.remove(this.CssClasses_.IS_DISABLED)}, _.prototype.checkDisabled=_.prototype.checkDisabled, _.prototype.disable=function(){ this.inputElement_.disabled=!0, this.updateClasses_()}, _.prototype.disable=_.prototype.disable, _.prototype.enable=function(){ this.inputElement_.disabled=!1, this.updateClasses_()}, _.prototype.enable=_.prototype.enable, _.prototype.check=function(){ this.inputElement_.checked=!0, this.updateClasses_()}, _.prototype.check=_.prototype.check, _.prototype.uncheck=function(){ this.inputElement_.checked=!1, this.updateClasses_()}, _.prototype.uncheck=_.prototype.uncheck, _.prototype.init=function(){ if (this.element_){ if (this.inputElement_=this.element_.querySelector("." + this.CssClasses_.INPUT), this.element_.classList.contains(this.CssClasses_.JS_RIPPLE_EFFECT)){ this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS), this.rippleContainerElement_=document.createElement("span"), this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CONTAINER), this.rippleContainerElement_.classList.add(this.CssClasses_.JS_RIPPLE_EFFECT), this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CENTER), this.boundRippleMouseUp=this.onMouseUp_.bind(this), this.rippleContainerElement_.addEventListener("mouseup", this.boundRippleMouseUp); var e=document.createElement("span"); e.classList.add(this.CssClasses_.RIPPLE), this.rippleContainerElement_.appendChild(e), this.element_.appendChild(this.rippleContainerElement_)} this.boundInputOnChange=this.onChange_.bind(this), this.boundInputOnFocus=this.onFocus_.bind(this), this.boundInputOnBlur=this.onBlur_.bind(this), this.boundElementOnMouseUp=this.onMouseUp_.bind(this), this.inputElement_.addEventListener("change", this.boundInputOnChange), this.inputElement_.addEventListener("focus", this.boundInputOnFocus), this.inputElement_.addEventListener("blur", this.boundInputOnBlur), this.element_.addEventListener("mouseup", this.boundElementOnMouseUp), this.updateClasses_(), this.element_.classList.add("is-upgraded")}}, s.register({ constructor: _, classAsString: "MaterialIconToggle", cssClass: "mdl-js-icon-toggle", widget: !0}); var d=function(e){ this.element_=e, this.init()}; window.MaterialMenu=d, d.prototype.Constant_={ TRANSITION_DURATION_SECONDS: .3, TRANSITION_DURATION_FRACTION: .8, CLOSE_TIMEOUT: 150}, d.prototype.Keycodes_={ ENTER: 13, ESCAPE: 27, SPACE: 32, UP_ARROW: 38, DOWN_ARROW: 40}, d.prototype.CssClasses_={ CONTAINER: "mdl-menu__container", OUTLINE: "mdl-menu__outline", ITEM: "mdl-menu__item", ITEM_RIPPLE_CONTAINER: "mdl-menu__item-ripple-container", RIPPLE_EFFECT: "mdl-js-ripple-effect", RIPPLE_IGNORE_EVENTS: "mdl-js-ripple-effect--ignore-events", RIPPLE: "mdl-ripple", IS_UPGRADED: "is-upgraded", IS_VISIBLE: "is-visible", IS_ANIMATING: "is-animating", BOTTOM_LEFT: "mdl-menu--bottom-left", BOTTOM_RIGHT: "mdl-menu--bottom-right", TOP_LEFT: "mdl-menu--top-left", TOP_RIGHT: "mdl-menu--top-right", UNALIGNED: "mdl-menu--unaligned"}, d.prototype.init=function(){ if (this.element_){ var e=document.createElement("div"); e.classList.add(this.CssClasses_.CONTAINER), this.element_.parentElement.insertBefore(e, this.element_), this.element_.parentElement.removeChild(this.element_), e.appendChild(this.element_), this.container_=e; var t=document.createElement("div"); t.classList.add(this.CssClasses_.OUTLINE), this.outline_=t, e.insertBefore(t, this.element_); var s=this.element_.getAttribute("for") || this.element_.getAttribute("data-mdl-for"), i=null; s && ((i=document.getElementById(s)) && (this.forElement_=i, i.addEventListener("click", this.handleForClick_.bind(this)), i.addEventListener("keydown", this.handleForKeyboardEvent_.bind(this)))); var n=this.element_.querySelectorAll("." + this.CssClasses_.ITEM); this.boundItemKeydown_=this.handleItemKeyboardEvent_.bind(this), this.boundItemClick_=this.handleItemClick_.bind(this); for (var a=0; a < n.length; a++) n[a].addEventListener("click", this.boundItemClick_), n[a].tabIndex="-1", n[a].addEventListener("keydown", this.boundItemKeydown_); if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) for (this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS), a=0; a < n.length; a++){ var l=n[a], o=document.createElement("span"); o.classList.add(this.CssClasses_.ITEM_RIPPLE_CONTAINER); var r=document.createElement("span"); r.classList.add(this.CssClasses_.RIPPLE), o.appendChild(r), l.appendChild(o), l.classList.add(this.CssClasses_.RIPPLE_EFFECT)} this.element_.classList.contains(this.CssClasses_.BOTTOM_LEFT) && this.outline_.classList.add(this.CssClasses_.BOTTOM_LEFT), this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT) && this.outline_.classList.add(this.CssClasses_.BOTTOM_RIGHT), this.element_.classList.contains(this.CssClasses_.TOP_LEFT) && this.outline_.classList.add(this.CssClasses_.TOP_LEFT), this.element_.classList.contains(this.CssClasses_.TOP_RIGHT) && this.outline_.classList.add(this.CssClasses_.TOP_RIGHT), this.element_.classList.contains(this.CssClasses_.UNALIGNED) && this.outline_.classList.add(this.CssClasses_.UNALIGNED), e.classList.add(this.CssClasses_.IS_UPGRADED)}}, d.prototype.handleForClick_=function(e){ if (this.element_ && this.forElement_){ var t=this.forElement_.getBoundingClientRect(), s=this.forElement_.parentElement.getBoundingClientRect(); this.element_.classList.contains(this.CssClasses_.UNALIGNED) || (this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT) ? (this.container_.style.right=s.right - t.right + "px", this.container_.style.top=this.forElement_.offsetTop + this.forElement_.offsetHeight + "px") : this.element_.classList.contains(this.CssClasses_.TOP_LEFT) ? (this.container_.style.left=this.forElement_.offsetLeft + "px", this.container_.style.bottom=s.bottom - t.top + "px") : this.element_.classList.contains(this.CssClasses_.TOP_RIGHT) ? (this.container_.style.right=s.right - t.right + "px", this.container_.style.bottom=s.bottom - t.top + "px") : (this.container_.style.left=this.forElement_.offsetLeft + "px", this.container_.style.top=this.forElement_.offsetTop + this.forElement_.offsetHeight + "px"))} this.toggle(e)}, d.prototype.handleForKeyboardEvent_=function(e){ if (this.element_ && this.container_ && this.forElement_){ var t=this.element_.querySelectorAll("." + this.CssClasses_.ITEM + ":not([disabled])"); t && t.length >0 && this.container_.classList.contains(this.CssClasses_.IS_VISIBLE) && (e.keyCode===this.Keycodes_.UP_ARROW ? (e.preventDefault(), t[t.length - 1].focus()) : e.keyCode===this.Keycodes_.DOWN_ARROW && (e.preventDefault(), t[0].focus()))}}, d.prototype.handleItemKeyboardEvent_=function(e){ if (this.element_ && this.container_){ var t=this.element_.querySelectorAll("." + this.CssClasses_.ITEM + ":not([disabled])"); if (t && t.length >0 && this.container_.classList.contains(this.CssClasses_.IS_VISIBLE)){ var s=Array.prototype.slice.call(t).indexOf(e.target); if (e.keyCode===this.Keycodes_.UP_ARROW) e.preventDefault(), s >0 ? t[s - 1].focus() : t[t.length - 1].focus(); else if (e.keyCode===this.Keycodes_.DOWN_ARROW) e.preventDefault(), t.length >s + 1 ? t[s + 1].focus() : t[0].focus(); else if (e.keyCode===this.Keycodes_.SPACE || e.keyCode===this.Keycodes_.ENTER){ e.preventDefault(); var i=new MouseEvent("mousedown"); e.target.dispatchEvent(i), i=new MouseEvent("mouseup"), e.target.dispatchEvent(i), e.target.click()} else e.keyCode===this.Keycodes_.ESCAPE && (e.preventDefault(), this.hide())}}}, d.prototype.handleItemClick_=function(e){ e.target.hasAttribute("disabled") ? e.stopPropagation() : (this.closing_=!0, window.setTimeout(function(e){ this.hide(), this.closing_=!1}.bind(this), this.Constant_.CLOSE_TIMEOUT))}, d.prototype.applyClip_=function(e, t){ this.element_.classList.contains(this.CssClasses_.UNALIGNED) ? this.element_.style.clip="" : this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT) ? this.element_.style.clip="rect(0 " + t + "px 0 " + t + "px)" : this.element_.classList.contains(this.CssClasses_.TOP_LEFT) ? this.element_.style.clip="rect(" + e + "px 0 " + e + "px 0)" : this.element_.classList.contains(this.CssClasses_.TOP_RIGHT) ? this.element_.style.clip="rect(" + e + "px " + t + "px " + e + "px " + t + "px)" : this.element_.style.clip=""}, d.prototype.removeAnimationEndListener_=function(e){ e.target.classList.remove(d.prototype.CssClasses_.IS_ANIMATING)}, d.prototype.addAnimationEndListener_=function(){ this.element_.addEventListener("transitionend", this.removeAnimationEndListener_), this.element_.addEventListener("webkitTransitionEnd", this.removeAnimationEndListener_)}, d.prototype.show=function(e){ if (this.element_ && this.container_ && this.outline_){ var t=this.element_.getBoundingClientRect().height, s=this.element_.getBoundingClientRect().width; this.container_.style.width=s + "px", this.container_.style.height=t + "px", this.outline_.style.width=s + "px", this.outline_.style.height=t + "px"; for (var i=this.Constant_.TRANSITION_DURATION_SECONDS * this.Constant_.TRANSITION_DURATION_FRACTION, n=this.element_.querySelectorAll("." + this.CssClasses_.ITEM), a=0; a < n.length; a++){ var l; l=this.element_.classList.contains(this.CssClasses_.TOP_LEFT) || this.element_.classList.contains(this.CssClasses_.TOP_RIGHT) ? (t - n[a].offsetTop - n[a].offsetHeight) / t * i + "s" : n[a].offsetTop / t * i + "s", n[a].style.transitionDelay=l} this.applyClip_(t, s), window.requestAnimationFrame(function(){ this.element_.classList.add(this.CssClasses_.IS_ANIMATING), this.element_.style.clip="rect(0 " + s + "px " + t + "px 0)", this.container_.classList.add(this.CssClasses_.IS_VISIBLE)}.bind(this)), this.addAnimationEndListener_(); var o=function(t){ t===e || this.closing_ || t.target.parentNode===this.element_ || (document.removeEventListener("click", o), this.hide())}.bind(this); document.addEventListener("click", o)}}, d.prototype.show=d.prototype.show, d.prototype.hide=function(){ if (this.element_ && this.container_ && this.outline_){ for (var e=this.element_.querySelectorAll("." + this.CssClasses_.ITEM), t=0; t < e.length; t++) e[t].style.removeProperty("transition-delay"); var s=this.element_.getBoundingClientRect(), i=s.height, n=s.width; this.element_.classList.add(this.CssClasses_.IS_ANIMATING), this.applyClip_(i, n), this.container_.classList.remove(this.CssClasses_.IS_VISIBLE), this.addAnimationEndListener_()}}, d.prototype.hide=d.prototype.hide, d.prototype.toggle=function(e){ this.container_.classList.contains(this.CssClasses_.IS_VISIBLE) ? this.hide() : this.show(e)}, d.prototype.toggle=d.prototype.toggle, s.register({ constructor: d, classAsString: "MaterialMenu", cssClass: "mdl-js-menu", widget: !0}); var h=function(e){ this.element_=e, this.init()}; window.MaterialProgress=h, h.prototype.Constant_={}, h.prototype.CssClasses_={ INDETERMINATE_CLASS: "mdl-progress__indeterminate"}, h.prototype.setProgress=function(e){ this.element_.classList.contains(this.CssClasses_.INDETERMINATE_CLASS) || (this.progressbar_.style.width=e + "%")}, h.prototype.setProgress=h.prototype.setProgress, h.prototype.setBuffer=function(e){ this.bufferbar_.style.width=e + "%", this.auxbar_.style.width=100 - e + "%"}, h.prototype.setBuffer=h.prototype.setBuffer, h.prototype.init=function(){ if (this.element_){ var e=document.createElement("div"); e.className="progressbar bar bar1", this.element_.appendChild(e), this.progressbar_=e, (e=document.createElement("div")).className="bufferbar bar bar2", this.element_.appendChild(e), this.bufferbar_=e, (e=document.createElement("div")).className="auxbar bar bar3", this.element_.appendChild(e), this.auxbar_=e, this.progressbar_.style.width="0%", this.bufferbar_.style.width="100%", this.auxbar_.style.width="0%", this.element_.classList.add("is-upgraded")}}, s.register({ constructor: h, classAsString: "MaterialProgress", cssClass: "mdl-js-progress", widget: !0}); var c=function(e){ this.element_=e, this.init()}; window.MaterialRadio=c, c.prototype.Constant_={ TINY_TIMEOUT: .001}, c.prototype.CssClasses_={ IS_FOCUSED: "is-focused", IS_DISABLED: "is-disabled", IS_CHECKED: "is-checked", IS_UPGRADED: "is-upgraded", JS_RADIO: "mdl-js-radio", RADIO_BTN: "mdl-radio__button", RADIO_OUTER_CIRCLE: "mdl-radio__outer-circle", RADIO_INNER_CIRCLE: "mdl-radio__inner-circle", RIPPLE_EFFECT: "mdl-js-ripple-effect", RIPPLE_IGNORE_EVENTS: "mdl-js-ripple-effect--ignore-events", RIPPLE_CONTAINER: "mdl-radio__ripple-container", RIPPLE_CENTER: "mdl-ripple--center", RIPPLE: "mdl-ripple"}, c.prototype.onChange_=function(e){ for (var t=document.getElementsByClassName(this.CssClasses_.JS_RADIO), s=0; s < t.length; s++){ t[s].querySelector("." + this.CssClasses_.RADIO_BTN).getAttribute("name")===this.btnElement_.getAttribute("name") && void 0 !==t[s].MaterialRadio && t[s].MaterialRadio.updateClasses_()}}, c.prototype.onFocus_=function(e){ this.element_.classList.add(this.CssClasses_.IS_FOCUSED)}, c.prototype.onBlur_=function(e){ this.element_.classList.remove(this.CssClasses_.IS_FOCUSED)}, c.prototype.onMouseup_=function(e){ this.blur_()}, c.prototype.updateClasses_=function(){ this.checkDisabled(), this.checkToggleState()}, c.prototype.blur_=function(){ window.setTimeout(function(){ this.btnElement_.blur()}.bind(this), this.Constant_.TINY_TIMEOUT)}, c.prototype.checkDisabled=function(){ this.btnElement_.disabled ? this.element_.classList.add(this.CssClasses_.IS_DISABLED) : this.element_.classList.remove(this.CssClasses_.IS_DISABLED)}, c.prototype.checkDisabled=c.prototype.checkDisabled, c.prototype.checkToggleState=function(){ this.btnElement_.checked ? this.element_.classList.add(this.CssClasses_.IS_CHECKED) : this.element_.classList.remove(this.CssClasses_.IS_CHECKED)}, c.prototype.checkToggleState=c.prototype.checkToggleState, c.prototype.disable=function(){ this.btnElement_.disabled=!0, this.updateClasses_()}, c.prototype.disable=c.prototype.disable, c.prototype.enable=function(){ this.btnElement_.disabled=!1, this.updateClasses_()}, c.prototype.enable=c.prototype.enable, c.prototype.check=function(){ this.btnElement_.checked=!0, this.onChange_(null)}, c.prototype.check=c.prototype.check, c.prototype.uncheck=function(){ this.btnElement_.checked=!1, this.onChange_(null)}, c.prototype.uncheck=c.prototype.uncheck, c.prototype.init=function(){ if (this.element_){ this.btnElement_=this.element_.querySelector("." + this.CssClasses_.RADIO_BTN), this.boundChangeHandler_=this.onChange_.bind(this), this.boundFocusHandler_=this.onChange_.bind(this), this.boundBlurHandler_=this.onBlur_.bind(this), this.boundMouseUpHandler_=this.onMouseup_.bind(this); var e=document.createElement("span"); e.classList.add(this.CssClasses_.RADIO_OUTER_CIRCLE); var t, s=document.createElement("span"); if (s.classList.add(this.CssClasses_.RADIO_INNER_CIRCLE), this.element_.appendChild(e), this.element_.appendChild(s), this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)){ this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS), (t=document.createElement("span")).classList.add(this.CssClasses_.RIPPLE_CONTAINER), t.classList.add(this.CssClasses_.RIPPLE_EFFECT), t.classList.add(this.CssClasses_.RIPPLE_CENTER), t.addEventListener("mouseup", this.boundMouseUpHandler_); var i=document.createElement("span"); i.classList.add(this.CssClasses_.RIPPLE), t.appendChild(i), this.element_.appendChild(t)} this.btnElement_.addEventListener("change", this.boundChangeHandler_), this.btnElement_.addEventListener("focus", this.boundFocusHandler_), this.btnElement_.addEventListener("blur", this.boundBlurHandler_), this.element_.addEventListener("mouseup", this.boundMouseUpHandler_), this.updateClasses_(), this.element_.classList.add(this.CssClasses_.IS_UPGRADED)}}, s.register({ constructor: c, classAsString: "MaterialRadio", cssClass: "mdl-js-radio", widget: !0}); var p=function(e){ this.element_=e, this.isIE_=window.navigator.msPointerEnabled, this.init()}; window.MaterialSlider=p, p.prototype.Constant_={}, p.prototype.CssClasses_={ IE_CONTAINER: "mdl-slider__ie-container", SLIDER_CONTAINER: "mdl-slider__container", BACKGROUND_FLEX: "mdl-slider__background-flex", BACKGROUND_LOWER: "mdl-slider__background-lower", BACKGROUND_UPPER: "mdl-slider__background-upper", IS_LOWEST_VALUE: "is-lowest-value", IS_UPGRADED: "is-upgraded"}, p.prototype.onInput_=function(e){ this.updateValueStyles_()}, p.prototype.onChange_=function(e){ this.updateValueStyles_()}, p.prototype.onMouseUp_=function(e){ e.target.blur()}, p.prototype.onContainerMouseDown_=function(e){ if (e.target===this.element_.parentElement){ e.preventDefault(); var t=new MouseEvent("mousedown",{ target: e.target, buttons: e.buttons, clientX: e.clientX, clientY: this.element_.getBoundingClientRect().y}); this.element_.dispatchEvent(t)}}, p.prototype.updateValueStyles_=function(){ var e=(this.element_.value - this.element_.min) / (this.element_.max - this.element_.min); 0===e ? this.element_.classList.add(this.CssClasses_.IS_LOWEST_VALUE) : this.element_.classList.remove(this.CssClasses_.IS_LOWEST_VALUE), this.isIE_ || (this.backgroundLower_.style.flex=e, this.backgroundLower_.style.webkitFlex=e, this.backgroundUpper_.style.flex=1 - e, this.backgroundUpper_.style.webkitFlex=1 - e)}, p.prototype.disable=function(){ this.element_.disabled=!0}, p.prototype.disable=p.prototype.disable, p.prototype.enable=function(){ this.element_.disabled=!1}, p.prototype.enable=p.prototype.enable, p.prototype.change=function(e){ void 0 !==e && (this.element_.value=e), this.updateValueStyles_()}, p.prototype.change=p.prototype.change, p.prototype.init=function(){ if (this.element_){ if (this.isIE_){ var e=document.createElement("div"); e.classList.add(this.CssClasses_.IE_CONTAINER), this.element_.parentElement.insertBefore(e, this.element_), this.element_.parentElement.removeChild(this.element_), e.appendChild(this.element_)} else{ var t=document.createElement("div"); t.classList.add(this.CssClasses_.SLIDER_CONTAINER), this.element_.parentElement.insertBefore(t, this.element_), this.element_.parentElement.removeChild(this.element_), t.appendChild(this.element_); var s=document.createElement("div"); s.classList.add(this.CssClasses_.BACKGROUND_FLEX), t.appendChild(s), this.backgroundLower_=document.createElement("div"), this.backgroundLower_.classList.add(this.CssClasses_.BACKGROUND_LOWER), s.appendChild(this.backgroundLower_), this.backgroundUpper_=document.createElement("div"), this.backgroundUpper_.classList.add(this.CssClasses_.BACKGROUND_UPPER), s.appendChild(this.backgroundUpper_)} this.boundInputHandler=this.onInput_.bind(this), this.boundChangeHandler=this.onChange_.bind(this), this.boundMouseUpHandler=this.onMouseUp_.bind(this), this.boundContainerMouseDownHandler=this.onContainerMouseDown_.bind(this), this.element_.addEventListener("input", this.boundInputHandler), this.element_.addEventListener("change", this.boundChangeHandler), this.element_.addEventListener("mouseup", this.boundMouseUpHandler), this.element_.parentElement.addEventListener("mousedown", this.boundContainerMouseDownHandler), this.updateValueStyles_(), this.element_.classList.add(this.CssClasses_.IS_UPGRADED)}}, s.register({ constructor: p, classAsString: "MaterialSlider", cssClass: "mdl-js-slider", widget: !0}); var C=function(e){ if (this.element_=e, this.textElement_=this.element_.querySelector("." + this.cssClasses_.MESSAGE), this.actionElement_=this.element_.querySelector("." + this.cssClasses_.ACTION), !this.textElement_) throw new Error("There must be a message element for a snackbar."); if (!this.actionElement_) throw new Error("There must be an action element for a snackbar."); this.active=!1, this.actionHandler_=void 0, this.message_=void 0, this.actionText_=void 0, this.queuedNotifications_=[], this.setActionHidden_(!0)}; window.MaterialSnackbar=C, C.prototype.Constant_={ ANIMATION_LENGTH: 250}, C.prototype.cssClasses_={ SNACKBAR: "mdl-snackbar", MESSAGE: "mdl-snackbar__text", ACTION: "mdl-snackbar__action", ACTIVE: "mdl-snackbar--active"}, C.prototype.displaySnackbar_=function(){ this.element_.setAttribute("aria-hidden", "true"), this.actionHandler_ && (this.actionElement_.textContent=this.actionText_, this.actionElement_.addEventListener("click", this.actionHandler_), this.setActionHidden_(!1)), this.textElement_.textContent=this.message_, this.element_.classList.add(this.cssClasses_.ACTIVE), this.element_.setAttribute("aria-hidden", "false"), setTimeout(this.cleanup_.bind(this), this.timeout_)}, C.prototype.showSnackbar=function(e){ if (void 0===e) throw new Error("Please provide a data object with at least a message to display."); if (void 0===e.message) throw new Error("Please provide a message to be displayed."); if (e.actionHandler && !e.actionText) throw new Error("Please provide action text with the handler."); this.active ? this.queuedNotifications_.push(e) : (this.active=!0, this.message_=e.message, e.timeout ? this.timeout_=e.timeout : this.timeout_=2750, e.actionHandler && (this.actionHandler_=e.actionHandler), e.actionText && (this.actionText_=e.actionText), this.displaySnackbar_())}, C.prototype.showSnackbar=C.prototype.showSnackbar, C.prototype.checkQueue_=function(){ this.queuedNotifications_.length >0 && this.showSnackbar(this.queuedNotifications_.shift())}, C.prototype.cleanup_=function(){ this.element_.classList.remove(this.cssClasses_.ACTIVE), setTimeout(function(){ this.element_.setAttribute("aria-hidden", "true"), this.textElement_.textContent="", Boolean(this.actionElement_.getAttribute("aria-hidden")) || (this.setActionHidden_(!0), this.actionElement_.textContent="", this.actionElement_.removeEventListener("click", this.actionHandler_)), this.actionHandler_=void 0, this.message_=void 0, this.actionText_=void 0, this.active=!1, this.checkQueue_()}.bind(this), this.Constant_.ANIMATION_LENGTH)}, C.prototype.setActionHidden_=function(e){ e ? this.actionElement_.setAttribute("aria-hidden", "true") : this.actionElement_.removeAttribute("aria-hidden")}, s.register({ constructor: C, classAsString: "MaterialSnackbar", cssClass: "mdl-js-snackbar", widget: !0}); var u=function(e){ this.element_=e, this.init()}; window.MaterialSpinner=u, u.prototype.Constant_={ MDL_SPINNER_LAYER_COUNT: 4}, u.prototype.CssClasses_={ MDL_SPINNER_LAYER: "mdl-spinner__layer", MDL_SPINNER_CIRCLE_CLIPPER: "mdl-spinner__circle-clipper", MDL_SPINNER_CIRCLE: "mdl-spinner__circle", MDL_SPINNER_GAP_PATCH: "mdl-spinner__gap-patch", MDL_SPINNER_LEFT: "mdl-spinner__left", MDL_SPINNER_RIGHT: "mdl-spinner__right"}, u.prototype.createLayer=function(e){ var t=document.createElement("div"); t.classList.add(this.CssClasses_.MDL_SPINNER_LAYER), t.classList.add(this.CssClasses_.MDL_SPINNER_LAYER + "-" + e); var s=document.createElement("div"); s.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER), s.classList.add(this.CssClasses_.MDL_SPINNER_LEFT); var i=document.createElement("div"); i.classList.add(this.CssClasses_.MDL_SPINNER_GAP_PATCH); var n=document.createElement("div"); n.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER), n.classList.add(this.CssClasses_.MDL_SPINNER_RIGHT); for (var a=[s, i, n], l=0; l < a.length; l++){ var o=document.createElement("div"); o.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE), a[l].appendChild(o)} t.appendChild(s), t.appendChild(i), t.appendChild(n), this.element_.appendChild(t)}, u.prototype.createLayer=u.prototype.createLayer, u.prototype.stop=function(){ this.element_.classList.remove("is-active")}, u.prototype.stop=u.prototype.stop, u.prototype.start=function(){ this.element_.classList.add("is-active")}, u.prototype.start=u.prototype.start, u.prototype.init=function(){ if (this.element_){ for (var e=1; e <=this.Constant_.MDL_SPINNER_LAYER_COUNT; e++) this.createLayer(e); this.element_.classList.add("is-upgraded")}}, s.register({ constructor: u, classAsString: "MaterialSpinner", cssClass: "mdl-js-spinner", widget: !0}); var E=function(e){ this.element_=e, this.init()}; window.MaterialSwitch=E, E.prototype.Constant_={ TINY_TIMEOUT: .001}, E.prototype.CssClasses_={ INPUT: "mdl-switch__input", TRACK: "mdl-switch__track", THUMB: "mdl-switch__thumb", FOCUS_HELPER: "mdl-switch__focus-helper", RIPPLE_EFFECT: "mdl-js-ripple-effect", RIPPLE_IGNORE_EVENTS: "mdl-js-ripple-effect--ignore-events", RIPPLE_CONTAINER: "mdl-switch__ripple-container", RIPPLE_CENTER: "mdl-ripple--center", RIPPLE: "mdl-ripple", IS_FOCUSED: "is-focused", IS_DISABLED: "is-disabled", IS_CHECKED: "is-checked"}, E.prototype.onChange_=function(e){ this.updateClasses_()}, E.prototype.onFocus_=function(e){ this.element_.classList.add(this.CssClasses_.IS_FOCUSED)}, E.prototype.onBlur_=function(e){ this.element_.classList.remove(this.CssClasses_.IS_FOCUSED)}, E.prototype.onMouseUp_=function(e){ this.blur_()}, E.prototype.updateClasses_=function(){ this.checkDisabled(), this.checkToggleState()}, E.prototype.blur_=function(){ window.setTimeout(function(){ this.inputElement_.blur()}.bind(this), this.Constant_.TINY_TIMEOUT)}, E.prototype.checkDisabled=function(){ this.inputElement_.disabled ? this.element_.classList.add(this.CssClasses_.IS_DISABLED) : this.element_.classList.remove(this.CssClasses_.IS_DISABLED)}, E.prototype.checkDisabled=E.prototype.checkDisabled, E.prototype.checkToggleState=function(){ this.inputElement_.checked ? this.element_.classList.add(this.CssClasses_.IS_CHECKED) : this.element_.classList.remove(this.CssClasses_.IS_CHECKED)}, E.prototype.checkToggleState=E.prototype.checkToggleState, E.prototype.disable=function(){ this.inputElement_.disabled=!0, this.updateClasses_()}, E.prototype.disable=E.prototype.disable, E.prototype.enable=function(){ this.inputElement_.disabled=!1, this.updateClasses_()}, E.prototype.enable=E.prototype.enable, E.prototype.on=function(){ this.inputElement_.checked=!0, this.updateClasses_()}, E.prototype.on=E.prototype.on, E.prototype.off=function(){ this.inputElement_.checked=!1, this.updateClasses_()}, E.prototype.off=E.prototype.off, E.prototype.init=function(){ if (this.element_){ this.inputElement_=this.element_.querySelector("." + this.CssClasses_.INPUT); var e=document.createElement("div"); e.classList.add(this.CssClasses_.TRACK); var t=document.createElement("div"); t.classList.add(this.CssClasses_.THUMB); var s=document.createElement("span"); if (s.classList.add(this.CssClasses_.FOCUS_HELPER), t.appendChild(s), this.element_.appendChild(e), this.element_.appendChild(t), this.boundMouseUpHandler=this.onMouseUp_.bind(this), this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)){ this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS), this.rippleContainerElement_=document.createElement("span"), this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CONTAINER), this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_EFFECT), this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CENTER), this.rippleContainerElement_.addEventListener("mouseup", this.boundMouseUpHandler); var i=document.createElement("span"); i.classList.add(this.CssClasses_.RIPPLE), this.rippleContainerElement_.appendChild(i), this.element_.appendChild(this.rippleContainerElement_)} this.boundChangeHandler=this.onChange_.bind(this), this.boundFocusHandler=this.onFocus_.bind(this), this.boundBlurHandler=this.onBlur_.bind(this), this.inputElement_.addEventListener("change", this.boundChangeHandler), this.inputElement_.addEventListener("focus", this.boundFocusHandler), this.inputElement_.addEventListener("blur", this.boundBlurHandler), this.element_.addEventListener("mouseup", this.boundMouseUpHandler), this.updateClasses_(), this.element_.classList.add("is-upgraded")}}, s.register({ constructor: E, classAsString: "MaterialSwitch", cssClass: "mdl-js-switch", widget: !0}); var m=function(e){ this.element_=e, this.init()}; window.MaterialTabs=m, m.prototype.Constant_={}, m.prototype.CssClasses_={ TAB_CLASS: "mdl-tabs__tab", PANEL_CLASS: "mdl-tabs__panel", ACTIVE_CLASS: "is-active", UPGRADED_CLASS: "is-upgraded", MDL_JS_RIPPLE_EFFECT: "mdl-js-ripple-effect", MDL_RIPPLE_CONTAINER: "mdl-tabs__ripple-container", MDL_RIPPLE: "mdl-ripple", MDL_JS_RIPPLE_EFFECT_IGNORE_EVENTS: "mdl-js-ripple-effect--ignore-events"}, m.prototype.initTabs_=function(){ this.element_.classList.contains(this.CssClasses_.MDL_JS_RIPPLE_EFFECT) && this.element_.classList.add(this.CssClasses_.MDL_JS_RIPPLE_EFFECT_IGNORE_EVENTS), this.tabs_=this.element_.querySelectorAll("." + this.CssClasses_.TAB_CLASS), this.panels_=this.element_.querySelectorAll("." + this.CssClasses_.PANEL_CLASS); for (var t=0; t < this.tabs_.length; t++) new e(this.tabs_[t], this); this.element_.classList.add(this.CssClasses_.UPGRADED_CLASS)}, m.prototype.resetTabState_=function(){ for (var e=0; e < this.tabs_.length; e++) this.tabs_[e].classList.remove(this.CssClasses_.ACTIVE_CLASS)}, m.prototype.resetPanelState_=function(){ for (var e=0; e < this.panels_.length; e++) this.panels_[e].classList.remove(this.CssClasses_.ACTIVE_CLASS)}, m.prototype.init=function(){ this.element_ && this.initTabs_()}, s.register({ constructor: m, classAsString: "MaterialTabs", cssClass: "mdl-js-tabs"}); var L=function(e){ this.element_=e, this.maxRows=this.Constant_.NO_MAX_ROWS, this.init()}; window.MaterialTextfield=L, L.prototype.Constant_={ NO_MAX_ROWS: -1, MAX_ROWS_ATTRIBUTE: "maxrows"}, L.prototype.CssClasses_={ LABEL: "mdl-textfield__label", INPUT: "mdl-textfield__input", IS_DIRTY: "is-dirty", IS_FOCUSED: "is-focused", IS_DISABLED: "is-disabled", IS_INVALID: "is-invalid", IS_UPGRADED: "is-upgraded", HAS_PLACEHOLDER: "has-placeholder"}, L.prototype.onKeyDown_=function(e){ var t=e.target.value.split("\n").length; 13===e.keyCode && t >=this.maxRows && e.preventDefault()}, L.prototype.onFocus_=function(e){ this.element_.classList.add(this.CssClasses_.IS_FOCUSED)}, L.prototype.onBlur_=function(e){ this.element_.classList.remove(this.CssClasses_.IS_FOCUSED)}, L.prototype.onReset_=function(e){ this.updateClasses_()}, L.prototype.updateClasses_=function(){ this.checkDisabled(), this.checkValidity(), this.checkDirty(), this.checkFocus()}, L.prototype.checkDisabled=function(){ this.input_.disabled ? this.element_.classList.add(this.CssClasses_.IS_DISABLED) : this.element_.classList.remove(this.CssClasses_.IS_DISABLED)}, L.prototype.checkDisabled=L.prototype.checkDisabled, L.prototype.checkFocus=function(){ Boolean(this.element_.querySelector(":focus")) ? this.element_.classList.add(this.CssClasses_.IS_FOCUSED) : this.element_.classList.remove(this.CssClasses_.IS_FOCUSED)}, L.prototype.checkFocus=L.prototype.checkFocus, L.prototype.checkValidity=function(){ this.input_.validity && (this.input_.validity.valid ? this.element_.classList.remove(this.CssClasses_.IS_INVALID) : this.element_.classList.add(this.CssClasses_.IS_INVALID))}, L.prototype.checkValidity=L.prototype.checkValidity, L.prototype.checkDirty=function(){ this.input_.value && this.input_.value.length >0 ? this.element_.classList.add(this.CssClasses_.IS_DIRTY) : this.element_.classList.remove(this.CssClasses_.IS_DIRTY)}, L.prototype.checkDirty=L.prototype.checkDirty, L.prototype.disable=function(){ this.input_.disabled=!0, this.updateClasses_()}, L.prototype.disable=L.prototype.disable, L.prototype.enable=function(){ this.input_.disabled=!1, this.updateClasses_()}, L.prototype.enable=L.prototype.enable, L.prototype.change=function(e){ this.input_.value=e || "", this.updateClasses_()}, L.prototype.change=L.prototype.change, L.prototype.init=function(){ if (this.element_ && (this.label_=this.element_.querySelector("." + this.CssClasses_.LABEL), this.input_=this.element_.querySelector("." + this.CssClasses_.INPUT), this.input_)){ this.input_.hasAttribute(this.Constant_.MAX_ROWS_ATTRIBUTE) && (this.maxRows=parseInt(this.input_.getAttribute(this.Constant_.MAX_ROWS_ATTRIBUTE), 10), isNaN(this.maxRows) && (this.maxRows=this.Constant_.NO_MAX_ROWS)), this.input_.hasAttribute("placeholder") && this.element_.classList.add(this.CssClasses_.HAS_PLACEHOLDER), this.boundUpdateClassesHandler=this.updateClasses_.bind(this), this.boundFocusHandler=this.onFocus_.bind(this), this.boundBlurHandler=this.onBlur_.bind(this), this.boundResetHandler=this.onReset_.bind(this), this.input_.addEventListener("input", this.boundUpdateClassesHandler), this.input_.addEventListener("focus", this.boundFocusHandler), this.input_.addEventListener("blur", this.boundBlurHandler), this.input_.addEventListener("reset", this.boundResetHandler), this.maxRows !==this.Constant_.NO_MAX_ROWS && (this.boundKeyDownHandler=this.onKeyDown_.bind(this), this.input_.addEventListener("keydown", this.boundKeyDownHandler)); var e=this.element_.classList.contains(this.CssClasses_.IS_INVALID); this.updateClasses_(), this.element_.classList.add(this.CssClasses_.IS_UPGRADED), e && this.element_.classList.add(this.CssClasses_.IS_INVALID), this.input_.hasAttribute("autofocus") && (this.element_.focus(), this.checkFocus())}}, s.register({ constructor: L, classAsString: "MaterialTextfield", cssClass: "mdl-js-textfield", widget: !0}); var I=function(e){ this.element_=e, this.init()}; window.MaterialTooltip=I, I.prototype.Constant_={}, I.prototype.CssClasses_={ IS_ACTIVE: "is-active", BOTTOM: "mdl-tooltip--bottom", LEFT: "mdl-tooltip--left", RIGHT: "mdl-tooltip--right", TOP: "mdl-tooltip--top"}, I.prototype.handleMouseEnter_=function(e){ var t=e.target.getBoundingClientRect(), s=t.left + t.width / 2, i=t.top + t.height / 2, n=this.element_.offsetWidth / 2 * -1, a=this.element_.offsetHeight / 2 * -1; this.element_.classList.contains(this.CssClasses_.LEFT) || this.element_.classList.contains(this.CssClasses_.RIGHT) ? (s=t.width / 2, i + a < 0 ? (this.element_.style.top="0", this.element_.style.marginTop="0") : (this.element_.style.top=i + "px", this.element_.style.marginTop=a + "px")) : s + n < 0 ? (this.element_.style.left="0", this.element_.style.marginLeft="0") : (this.element_.style.left=s + "px", this.element_.style.marginLeft=n + "px"), this.element_.classList.contains(this.CssClasses_.TOP) ? this.element_.style.top=t.top - this.element_.offsetHeight - 10 + "px" : this.element_.classList.contains(this.CssClasses_.RIGHT) ? this.element_.style.left=t.left + t.width + 10 + "px" : this.element_.classList.contains(this.CssClasses_.LEFT) ? this.element_.style.left=t.left - this.element_.offsetWidth - 10 + "px" : this.element_.style.top=t.top + t.height + 10 + "px", this.element_.classList.add(this.CssClasses_.IS_ACTIVE)}, I.prototype.hideTooltip_=function(){ this.element_.classList.remove(this.CssClasses_.IS_ACTIVE)}, I.prototype.init=function(){ if (this.element_){ var e=this.element_.getAttribute("for") || this.element_.getAttribute("data-mdl-for"); e && (this.forElement_=document.getElementById(e)), this.forElement_ && (this.forElement_.hasAttribute("tabindex") || this.forElement_.setAttribute("tabindex", "0"), this.boundMouseEnterHandler=this.handleMouseEnter_.bind(this), this.boundMouseLeaveAndScrollHandler=this.hideTooltip_.bind(this), this.forElement_.addEventListener("mouseenter", this.boundMouseEnterHandler, !1), this.forElement_.addEventListener("touchend", this.boundMouseEnterHandler, !1), this.forElement_.addEventListener("mouseleave", this.boundMouseLeaveAndScrollHandler, !1), window.addEventListener("scroll", this.boundMouseLeaveAndScrollHandler, !0), window.addEventListener("touchstart", this.boundMouseLeaveAndScrollHandler))}}, s.register({ constructor: I, classAsString: "MaterialTooltip", cssClass: "mdl-tooltip"}); var f=function(e){ this.element_=e, this.init()}; window.MaterialLayout=f, f.prototype.Constant_={ MAX_WIDTH: "(max-width: 1024px)", TAB_SCROLL_PIXELS: 100, RESIZE_TIMEOUT: 100, MENU_ICON: "", CHEVRON_LEFT: "chevron_left", CHEVRON_RIGHT: "chevron_right"}, f.prototype.Keycodes_={ ENTER: 13, ESCAPE: 27, SPACE: 32}, f.prototype.Mode_={ STANDARD: 0, SEAMED: 1, WATERFALL: 2, SCROLL: 3}, f.prototype.CssClasses_={ CONTAINER: "mdl-layout__container", HEADER: "mdl-layout__header", DRAWER: "mdl-layout__drawer", CONTENT: "mdl-layout__content", DRAWER_BTN: "mdl-layout__drawer-button", ICON: "material-icons", JS_RIPPLE_EFFECT: "mdl-js-ripple-effect", RIPPLE_CONTAINER: "mdl-layout__tab-ripple-container", RIPPLE: "mdl-ripple", RIPPLE_IGNORE_EVENTS: "mdl-js-ripple-effect--ignore-events", HEADER_SEAMED: "mdl-layout__header--seamed", HEADER_WATERFALL: "mdl-layout__header--waterfall", HEADER_SCROLL: "mdl-layout__header--scroll", FIXED_HEADER: "mdl-layout--fixed-header", OBFUSCATOR: "mdl-layout__obfuscator", TAB_BAR: "mdl-layout__tab-bar", TAB_CONTAINER: "mdl-layout__tab-bar-container", TAB: "mdl-layout__tab", TAB_BAR_BUTTON: "mdl-layout__tab-bar-button", TAB_BAR_LEFT_BUTTON: "mdl-layout__tab-bar-left-button", TAB_BAR_RIGHT_BUTTON: "mdl-layout__tab-bar-right-button", TAB_MANUAL_SWITCH: "mdl-layout__tab-manual-switch", PANEL: "mdl-layout__tab-panel", HAS_DRAWER: "has-drawer", HAS_TABS: "has-tabs", HAS_SCROLLING_HEADER: "has-scrolling-header", CASTING_SHADOW: "is-casting-shadow", IS_COMPACT: "is-compact", IS_SMALL_SCREEN: "is-small-screen", IS_DRAWER_OPEN: "is-visible", IS_ACTIVE: "is-active", IS_UPGRADED: "is-upgraded", IS_ANIMATING: "is-animating", ON_LARGE_SCREEN: "mdl-layout--large-screen-only", ON_SMALL_SCREEN: "mdl-layout--small-screen-only"}, f.prototype.contentScrollHandler_=function(){ if (!this.header_.classList.contains(this.CssClasses_.IS_ANIMATING)){ var e=!this.element_.classList.contains(this.CssClasses_.IS_SMALL_SCREEN) || this.element_.classList.contains(this.CssClasses_.FIXED_HEADER); this.content_.scrollTop >0 && !this.header_.classList.contains(this.CssClasses_.IS_COMPACT) ? (this.header_.classList.add(this.CssClasses_.CASTING_SHADOW), this.header_.classList.add(this.CssClasses_.IS_COMPACT), e && this.header_.classList.add(this.CssClasses_.IS_ANIMATING)) : this.content_.scrollTop <=0 && this.header_.classList.contains(this.CssClasses_.IS_COMPACT) && (this.header_.classList.remove(this.CssClasses_.CASTING_SHADOW), this.header_.classList.remove(this.CssClasses_.IS_COMPACT), e && this.header_.classList.add(this.CssClasses_.IS_ANIMATING))}}, f.prototype.keyboardEventHandler_=function(e){ e.keyCode===this.Keycodes_.ESCAPE && this.drawer_.classList.contains(this.CssClasses_.IS_DRAWER_OPEN) && this.toggleDrawer()}, f.prototype.screenSizeHandler_=function(){ this.screenSizeMediaQuery_.matches ? this.element_.classList.add(this.CssClasses_.IS_SMALL_SCREEN) : (this.element_.classList.remove(this.CssClasses_.IS_SMALL_SCREEN), this.drawer_ && (this.drawer_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN), this.obfuscator_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN)))}, f.prototype.drawerToggleHandler_=function(e){ if (e && "keydown"===e.type){ if (e.keyCode !==this.Keycodes_.SPACE && e.keyCode !==this.Keycodes_.ENTER) return; e.preventDefault()} this.toggleDrawer()}, f.prototype.headerTransitionEndHandler_=function(){ this.header_.classList.remove(this.CssClasses_.IS_ANIMATING)}, f.prototype.headerClickHandler_=function(){ this.header_.classList.contains(this.CssClasses_.IS_COMPACT) && (this.header_.classList.remove(this.CssClasses_.IS_COMPACT), this.header_.classList.add(this.CssClasses_.IS_ANIMATING))}, f.prototype.resetTabState_=function(e){ for (var t=0; t < e.length; t++) e[t].classList.remove(this.CssClasses_.IS_ACTIVE)}, f.prototype.resetPanelState_=function(e){ for (var t=0; t < e.length; t++) e[t].classList.remove(this.CssClasses_.IS_ACTIVE)}, f.prototype.toggleDrawer=function(){ var e=this.element_.querySelector("." + this.CssClasses_.DRAWER_BTN); this.drawer_.classList.toggle(this.CssClasses_.IS_DRAWER_OPEN), this.obfuscator_.classList.toggle(this.CssClasses_.IS_DRAWER_OPEN), this.drawer_.classList.contains(this.CssClasses_.IS_DRAWER_OPEN) ? (this.drawer_.setAttribute("aria-hidden", "false"), e.setAttribute("aria-expanded", "true")) : (this.drawer_.setAttribute("aria-hidden", "true"), e.setAttribute("aria-expanded", "false"))}, f.prototype.toggleDrawer=f.prototype.toggleDrawer, f.prototype.init=function(){ if (this.element_){ var e=document.createElement("div"); e.classList.add(this.CssClasses_.CONTAINER); var s=this.element_.querySelector(":focus"); this.element_.parentElement.insertBefore(e, this.element_), this.element_.parentElement.removeChild(this.element_), e.appendChild(this.element_), s && s.focus(); for (var i=this.element_.childNodes, n=i.length, a=0; a < n; a++){ var l=i[a]; l.classList && l.classList.contains(this.CssClasses_.HEADER) && (this.header_=l), l.classList && l.classList.contains(this.CssClasses_.DRAWER) && (this.drawer_=l), l.classList && l.classList.contains(this.CssClasses_.CONTENT) && (this.content_=l)} window.addEventListener("pageshow", function(e){ e.persisted && (this.element_.style.overflowY="hidden", requestAnimationFrame(function(){ this.element_.style.overflowY=""}.bind(this)))}.bind(this), !1), this.header_ && (this.tabBar_=this.header_.querySelector("." + this.CssClasses_.TAB_BAR)); var o=this.Mode_.STANDARD; if (this.header_ && (this.header_.classList.contains(this.CssClasses_.HEADER_SEAMED) ? o=this.Mode_.SEAMED : this.header_.classList.contains(this.CssClasses_.HEADER_WATERFALL) ? (o=this.Mode_.WATERFALL, this.header_.addEventListener("transitionend", this.headerTransitionEndHandler_.bind(this)), this.header_.addEventListener("click", this.headerClickHandler_.bind(this))) : this.header_.classList.contains(this.CssClasses_.HEADER_SCROLL) && (o=this.Mode_.SCROLL, e.classList.add(this.CssClasses_.HAS_SCROLLING_HEADER)), o===this.Mode_.STANDARD ? (this.header_.classList.add(this.CssClasses_.CASTING_SHADOW), this.tabBar_ && this.tabBar_.classList.add(this.CssClasses_.CASTING_SHADOW)) : o===this.Mode_.SEAMED || o===this.Mode_.SCROLL ? (this.header_.classList.remove(this.CssClasses_.CASTING_SHADOW), this.tabBar_ && this.tabBar_.classList.remove(this.CssClasses_.CASTING_SHADOW)) : o===this.Mode_.WATERFALL && (this.content_.addEventListener("scroll", this.contentScrollHandler_.bind(this)), this.contentScrollHandler_())), this.drawer_){ var r=this.element_.querySelector("." + this.CssClasses_.DRAWER_BTN); if (!r){ (r=document.createElement("div")).setAttribute("aria-expanded", "false"), r.setAttribute("role", "button"), r.setAttribute("tabindex", "0"), r.classList.add(this.CssClasses_.DRAWER_BTN); var _=document.createElement("i"); _.classList.add(this.CssClasses_.ICON), _.innerHTML=this.Constant_.MENU_ICON, r.appendChild(_)} this.drawer_.classList.contains(this.CssClasses_.ON_LARGE_SCREEN) ? r.classList.add(this.CssClasses_.ON_LARGE_SCREEN) : this.drawer_.classList.contains(this.CssClasses_.ON_SMALL_SCREEN) && r.classList.add(this.CssClasses_.ON_SMALL_SCREEN), r.addEventListener("click", this.drawerToggleHandler_.bind(this)), r.addEventListener("keydown", this.drawerToggleHandler_.bind(this)), this.element_.classList.add(this.CssClasses_.HAS_DRAWER), this.element_.classList.contains(this.CssClasses_.FIXED_HEADER) ? this.header_.insertBefore(r, this.header_.firstChild) : this.element_.insertBefore(r, this.content_); var d=document.createElement("div"); d.classList.add(this.CssClasses_.OBFUSCATOR), this.element_.appendChild(d), d.addEventListener("click", this.drawerToggleHandler_.bind(this)), this.obfuscator_=d, this.drawer_.addEventListener("keydown", this.keyboardEventHandler_.bind(this)), this.drawer_.setAttribute("aria-hidden", "true")} if (this.screenSizeMediaQuery_=window.matchMedia(this.Constant_.MAX_WIDTH), this.screenSizeMediaQuery_.addListener(this.screenSizeHandler_.bind(this)), this.screenSizeHandler_(), this.header_ && this.tabBar_){ this.element_.classList.add(this.CssClasses_.HAS_TABS); var h=document.createElement("div"); h.classList.add(this.CssClasses_.TAB_CONTAINER), this.header_.insertBefore(h, this.tabBar_), this.header_.removeChild(this.tabBar_); var c=document.createElement("div"); c.classList.add(this.CssClasses_.TAB_BAR_BUTTON), c.classList.add(this.CssClasses_.TAB_BAR_LEFT_BUTTON); var p=document.createElement("i"); p.classList.add(this.CssClasses_.ICON), p.textContent=this.Constant_.CHEVRON_LEFT, c.appendChild(p), c.addEventListener("click", function(){ this.tabBar_.scrollLeft -=this.Constant_.TAB_SCROLL_PIXELS}.bind(this)); var C=document.createElement("div"); C.classList.add(this.CssClasses_.TAB_BAR_BUTTON), C.classList.add(this.CssClasses_.TAB_BAR_RIGHT_BUTTON); var u=document.createElement("i"); u.classList.add(this.CssClasses_.ICON), u.textContent=this.Constant_.CHEVRON_RIGHT, C.appendChild(u), C.addEventListener("click", function(){ this.tabBar_.scrollLeft +=this.Constant_.TAB_SCROLL_PIXELS}.bind(this)), h.appendChild(c), h.appendChild(this.tabBar_), h.appendChild(C); var E=function(){ this.tabBar_.scrollLeft >0 ? c.classList.add(this.CssClasses_.IS_ACTIVE) : c.classList.remove(this.CssClasses_.IS_ACTIVE), this.tabBar_.scrollLeft < this.tabBar_.scrollWidth - this.tabBar_.offsetWidth ? C.classList.add(this.CssClasses_.IS_ACTIVE) : C.classList.remove(this.CssClasses_.IS_ACTIVE)}.bind(this); this.tabBar_.addEventListener("scroll", E), E(); var m=function(){ this.resizeTimeoutId_ && clearTimeout(this.resizeTimeoutId_), this.resizeTimeoutId_=setTimeout(function(){ E(), this.resizeTimeoutId_=null}.bind(this), this.Constant_.RESIZE_TIMEOUT)}.bind(this); window.addEventListener("resize", m), this.tabBar_.classList.contains(this.CssClasses_.JS_RIPPLE_EFFECT) && this.tabBar_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS); for (var L=this.tabBar_.querySelectorAll("." + this.CssClasses_.TAB), I=this.content_.querySelectorAll("." + this.CssClasses_.PANEL), f=0; f < L.length; f++) new t(L[f], L, I, this)} this.element_.classList.add(this.CssClasses_.IS_UPGRADED)}}, window.MaterialLayoutTab=t, s.register({ constructor: f, classAsString: "MaterialLayout", cssClass: "mdl-js-layout"}); var b=function(e){ this.element_=e, this.init()}; window.MaterialDataTable=b, b.prototype.Constant_={}, b.prototype.CssClasses_={ DATA_TABLE: "mdl-data-table", SELECTABLE: "mdl-data-table--selectable", SELECT_ELEMENT: "mdl-data-table__select", IS_SELECTED: "is-selected", IS_UPGRADED: "is-upgraded"}, b.prototype.selectRow_=function(e, t, s){ return t ? function(){ e.checked ? t.classList.add(this.CssClasses_.IS_SELECTED) : t.classList.remove(this.CssClasses_.IS_SELECTED)}.bind(this) : s ? function(){ var t; if (e.checked) for (t=0; t < s.length; t++) s[t].querySelector("td").querySelector(".mdl-checkbox").MaterialCheckbox.check(), s[t].classList.add(this.CssClasses_.IS_SELECTED); else for (t=0; t < s.length; t++) s[t].querySelector("td").querySelector(".mdl-checkbox").MaterialCheckbox.uncheck(), s[t].classList.remove(this.CssClasses_.IS_SELECTED)}.bind(this) : void 0}, b.prototype.createCheckbox_=function(e, t){ var i=document.createElement("label"), n=["mdl-checkbox", "mdl-js-checkbox", "mdl-js-ripple-effect", this.CssClasses_.SELECT_ELEMENT]; i.className=n.join(" "); var a=document.createElement("input"); return a.type="checkbox", a.classList.add("mdl-checkbox__input"), e ? (a.checked=e.classList.contains(this.CssClasses_.IS_SELECTED), a.addEventListener("change", this.selectRow_(a, e))) : t && a.addEventListener("change", this.selectRow_(a, null, t)), i.appendChild(a), s.upgradeElement(i, "MaterialCheckbox"), i}, b.prototype.init=function(){ if (this.element_){ var e=this.element_.querySelector("th"), t=Array.prototype.slice.call(this.element_.querySelectorAll("tbody tr")), s=Array.prototype.slice.call(this.element_.querySelectorAll("tfoot tr")), i=t.concat(s); if (this.element_.classList.contains(this.CssClasses_.SELECTABLE)){ var n=document.createElement("th"), a=this.createCheckbox_(null, i); n.appendChild(a), e.parentElement.insertBefore(n, e); for (var l=0; l < i.length; l++){ var o=i[l].querySelector("td"); if (o){ var r=document.createElement("td"); if ("TBODY"===i[l].parentNode.nodeName.toUpperCase()){ var _=this.createCheckbox_(i[l]); r.appendChild(_)} i[l].insertBefore(r, o)}} this.element_.classList.add(this.CssClasses_.IS_UPGRADED)}}}, s.register({ constructor: b, classAsString: "MaterialDataTable", cssClass: "mdl-js-data-table"}); var S=function(e){ this.element_=e, this.init()}; window.MaterialRipple=S, S.prototype.Constant_={ INITIAL_SCALE: "scale(0.0001, 0.0001)", INITIAL_SIZE: "1px", INITIAL_OPACITY: "0.4", FINAL_OPACITY: "0", FINAL_SCALE: ""}, S.prototype.CssClasses_={ RIPPLE_CENTER: "mdl-ripple--center", RIPPLE_EFFECT_IGNORE_EVENTS: "mdl-js-ripple-effect--ignore-events", RIPPLE: "mdl-ripple", IS_ANIMATING: "is-animating", IS_VISIBLE: "is-visible"}, S.prototype.downHandler_=function(e){ if (!this.rippleElement_.style.width && !this.rippleElement_.style.height){ var t=this.element_.getBoundingClientRect(); this.boundHeight=t.height, this.boundWidth=t.width, this.rippleSize_=2 * Math.sqrt(t.width * t.width + t.height * t.height) + 2, this.rippleElement_.style.width=this.rippleSize_ + "px", this.rippleElement_.style.height=this.rippleSize_ + "px"} if (this.rippleElement_.classList.add(this.CssClasses_.IS_VISIBLE), "mousedown"===e.type && this.ignoringMouseDown_) this.ignoringMouseDown_=!1; else{ if ("touchstart"===e.type && (this.ignoringMouseDown_=!0), this.getFrameCount() >0) return; this.setFrameCount(1); var s, i, n=e.currentTarget.getBoundingClientRect(); if (0===e.clientX && 0===e.clientY) s=Math.round(n.width / 2), i=Math.round(n.height / 2); else{ var a=void 0 !==e.clientX ? e.clientX : e.touches[0].clientX, l=void 0 !==e.clientY ? e.clientY : e.touches[0].clientY; s=Math.round(a - n.left), i=Math.round(l - n.top)} this.setRippleXY(s, i), this.setRippleStyles(!0), window.requestAnimationFrame(this.animFrameHandler.bind(this))}}, S.prototype.upHandler_=function(e){ e && 2 !==e.detail && window.setTimeout(function(){ this.rippleElement_.classList.remove(this.CssClasses_.IS_VISIBLE)}.bind(this), 0)}, S.prototype.init=function(){ if (this.element_){ var e=this.element_.classList.contains(this.CssClasses_.RIPPLE_CENTER); this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT_IGNORE_EVENTS) || (this.rippleElement_=this.element_.querySelector("." + this.CssClasses_.RIPPLE), this.frameCount_=0, this.rippleSize_=0, this.x_=0, this.y_=0, this.ignoringMouseDown_=!1, this.boundDownHandler=this.downHandler_.bind(this), this.element_.addEventListener("mousedown", this.boundDownHandler), this.element_.addEventListener("touchstart", this.boundDownHandler), this.boundUpHandler=this.upHandler_.bind(this), this.element_.addEventListener("mouseup", this.boundUpHandler), this.element_.addEventListener("mouseleave", this.boundUpHandler), this.element_.addEventListener("touchend", this.boundUpHandler), this.element_.addEventListener("blur", this.boundUpHandler), this.getFrameCount=function(){ return this.frameCount_}, this.setFrameCount=function(e){ this.frameCount_=e}, this.getRippleElement=function(){ return this.rippleElement_}, this.setRippleXY=function(e, t){ this.x_=e, this.y_=t}, this.setRippleStyles=function(t){ if (null !==this.rippleElement_){ var s, i, n="translate(" + this.x_ + "px, " + this.y_ + "px)"; t ? (i=this.Constant_.INITIAL_SCALE, this.Constant_.INITIAL_SIZE) : (i=this.Constant_.FINAL_SCALE, this.rippleSize_ + "px", e && (n="translate(" + this.boundWidth / 2 + "px, " + this.boundHeight / 2 + "px)")), s="translate(-50%, -50%) " + n + i, this.rippleElement_.style.webkitTransform=s, this.rippleElement_.style.msTransform=s, this.rippleElement_.style.transform=s, t ? this.rippleElement_.classList.remove(this.CssClasses_.IS_ANIMATING) : this.rippleElement_.classList.add(this.CssClasses_.IS_ANIMATING)}}, this.animFrameHandler=function(){ this.frameCount_-- >0 ? window.requestAnimationFrame(this.animFrameHandler.bind(this)) : this.setRippleStyles(!1)})}}, s.register({ constructor: S, classAsString: "MaterialRipple", cssClass: "mdl-js-ripple-effect", widget: !1})}()
</script><style>@font-face{ font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(googleicons.woff2) format('woff2'), url(googleicons.ttf) format('truetype')} .material-icons{ font-family: 'Material Icons'; font-weight: 400; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased}
</style><script defer src=./html2canvas.js></script><style>@font-face{ font-family: 'Tengwar Feanor Regular'; src: url(tengwarfeanorregular.ttf) format('truetype')} @font-face{ font-family: 'Dwarvish Regular'; src: url(dwarvishregular.ttf) format('truetype')} body{ overflow: hidden} .demo-card-wide{ margin-top: 2rem; margin-bottom: 2rem; width: 100%; background-color: #f0f8ff} .elvishfont{ font-family: 'Tengwar Feanor Regular'; text-rendering: optimizeLegibility; font-feature-settings: "kern"; -moz-font-feature-settings: "kern=1"; -ms-font-feature-settings: "kern"; -webkit-font-feature-settings: "kern"; -o-font-feature-settings: "kern"} .dwarvishfont{ font-family: 'Dwarvish Regular'} .mdl-js-textfield, .mdl-textfield, mdl-textfield__input{ width: 100%} .fab{ position: fixed; bottom: 20px; right: 30px; z-index: 8} .fab2{ position: fixed; bottom: 20px; right: 100px; z-index: 8} .imagecard{ background-position: center; background-repeat: no-repeat; background-size: contain; display: inline-block; height: auto} @media only screen and (max-width:800px){ .imagecard{ margin: .5rem; width: calc(100% - 1rem)} .page-content{ padding-left: 1rem; padding-right: 1rem} .toplevel{ margin-left: 1rem; margin-right: 1rem; width: calc(100% - 2rem)}} @media only screen and (min-width:800px){ .imagecard{ margin: 1rem; width: calc(50% - 4rem)} .page-content{ padding-left: 15%; padding-right: 15%} .toplevel{ margin-left: 15%; margin-right: 15%; width: 70%}} .inline{ display: inline-block} .mdl-chip{ margin-right: 10px} .mdl-button{ margin-right: 10px; border-radius: 0.5em;} canvas{ max-width: 90%; max-height: 90%} .mdl-layout__tab-bar{ height: auto} .mdl-radio{ margin-right: 12px} .goog-te-gadget-icon, iframe.goog-te-banner-frame{ display: none} .mdl-layout__container{ position: fixed; top: 0}
</style><script>function onLoad(){ storageEnabled=0, videosLoaded=0, imagesLoaded=0, backgroundsLoaded=0, ElvishInput=document.getElementById("ElvishInput"), ElvishOutput=document.getElementById("ElvishOutput"), DwarvishInput=document.getElementById("DwarvishInput"), DwarvishOutput=document.getElementById("DwarvishOutput"), "undefined" !=typeof Storage && (storageEnabled=1), "serviceWorker" in navigator && navigator.serviceWorker.register("service-worker.js"), detectBrowser(), getHash(), document.onmouseover=function(){ window.innerDocClick=!0}, document.onmouseleave=function(){ window.innerDocClick=!1}, window.onhashchange=function(){ window.innerDocClick || getHash()}} function detectBrowser(){ var e=document.getElementById("browserWarning"), t=document.getElementById("installBanner"), a=window.chrome, n=window.navigator.vendor, l=window.navigator.userAgent.indexOf("OPR") >-1, o=window.navigator.userAgent.indexOf("Edge") >-1, i=window.navigator.userAgent.indexOf("Firefox") >0, r=/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; window.navigator.standalone || window.matchMedia("(display-mode: standalone)").matches || (i ? e.style.display="none" : null !=a && "Google Inc."===n && 0==l && 0==o ? e.style.display="none" : r ? (t.style.display="block", e.style.display="block") : e.style.display="block")} function loadVideos(){ for (var e=document.getElementsByTagName("iframe"), t=0; t < e.length; t++) e[t].getAttribute("data-src") && e[t].setAttribute("src", e[t].getAttribute("data-src")); videosLoaded=1} function loadImages(){ for (var e=document.getElementsByTagName("img"), t=0; t < e.length; t++) e[t].getAttribute("data-src") && e[t].setAttribute("src", e[t].getAttribute("data-src")); imagesLoaded=1} function loadBackgrounds(){ for (var e=document.querySelectorAll("a[data-src]"), t=0; t < e.length; t++) e[t].setAttribute("style", "background-image: url({url})".replace("{url}", e[t].getAttribute("data-src"))); backgroundsLoaded=1} function saveElvishImage(){ document.getElementById("elvishSpinner").style.display="block", document.getElementById("saveElvish").innerHTML="Saving...", document.getElementById("saveElvish").disabled="true"; try{ var e=document.getElementById("div"); e.parentElement.removeChild(e)} catch (e){} html2canvas(ElvishOutput,{ onrendered: function(e){ (t=document.createElement("a")).style.cssText="display:none;", t.innerHTML="Download image", e.style.cssText="width:100%;height:auto;display:none;", t.download="ElvishTranscription.png", t.target="_blank", t.id="div", e.id="canvas", document.body.appendChild(e), document.getElementById("saveElvish").parentNode.insertBefore(t, document.getElementById("saveElvish").nextElementSibling); e=document.getElementById("canvas"); var t=document.getElementById("div"), a=e.toDataURL(); console.log(a), t.onclick=function(){ setTimeout(function(){ var e=document.getElementById("div"); e.parentElement.removeChild(e)}, "20")}, t.href=a, t.style.display="inline", document.body.removeChild(e), document.getElementById("elvishSpinner").style.display="none", document.getElementById("saveElvish").innerHTML="Save as Image", document.getElementById("saveElvish").disabled=""}})} function saveDwarvishImage(){ document.getElementById("dwarvishSpinner").style.display="block", document.getElementById("saveDwarvish").innerHTML="Saving...", document.getElementById("saveDwarvish").disabled="true"; try{ var e=document.getElementById("div"); e.parentElement.removeChild(e)} catch (e){} html2canvas(DwarvishOutput,{ onrendered: function(e){ (t=document.createElement("a")).style.cssText="display:none;", t.innerHTML="Download image", e.style.cssText="width:100%;height:auto;display:none;", t.download="DwarvishTranscription.png", t.target="_blank", t.id="div", e.id="canvas", document.body.appendChild(e), document.getElementById("saveDwarvish").parentNode.insertBefore(t, document.getElementById("saveDwarvish").nextElementSibling); e=document.getElementById("canvas"); var t=document.getElementById("div"), a=e.toDataURL(); console.log(a), t.onclick=function(){ setTimeout(function(){ var e=document.getElementById("div"); e.parentElement.removeChild(e)}, "20")}, t.href=a, t.style.display="inline", document.body.removeChild(e), document.getElementById("dwarvishSpinner").style.display="none", document.getElementById("saveDwarvish").innerHTML="Save as Image", document.getElementById("saveDwarvish").disabled=""}})} function transcribeElvish(){ ElvishOutput.value=" " + ElvishInput.value, ElvishOutput.value=ElvishOutput.value.replace(/\n/g, "\n ").replace(/ a/g, " A").replace(/ e/g, " E").replace(/ i/g, " I").replace(/ o/g, " O").replace(/ u/g, " U").replace(/aa/g, "aA").replace(/ae/g, "aE").replace(/ai/g, "aI").replace(/ao/g, "aO").replace(/au/g, "aU").replace(/ea/g, "eA").replace(/ee/g, "eE").replace(/ei/g, "eI").replace(/eo/g, "eO").replace(/eu/g, "eU").replace(/ia/g, "iA").replace(/ie/g, "iE").replace(/ii/g, "iI").replace(/io/g, "iO").replace(/iu/g, "iU").replace(/oa/g, "oA").replace(/oe/g, "oE").replace(/oi/g, "oI").replace(/oo/g, "eO").replace(/ou/g, "oU").replace(/ua/g, "uA").replace(/ue/g, "uE").replace(/ui/g, "uI").replace(/uo/g, "uO").replace(/uu/g, "uU").replace(/ck/g, "c").replace(/Aa/g, "AA").replace(/Ae/g, "AE").replace(/Ai/g, "AI").replace(/Ao/g, "AO").replace(/Au/g, "AU").replace(/Ea/g, "EA").replace(/Ee/g, "EE").replace(/Ei/g, "EI").replace(/Eo/g, "EO").replace(/Eu/g, "EU").replace(/Ia/g, "IA").replace(/Ie/g, "IE").replace(/Ii/g, "II").replace(/Io/g, "IO").replace(/Iu/g, "IU").replace(/Oa/g, "OA").replace(/Oe/g, "OE").replace(/Oi/g, "OI").replace(/Oo/g, "OO").replace(/Ou/g, "OU").replace(/Ua/g, "UA").replace(/Ue/g, "UE").replace(/Ui/g, "UI").replace(/Uo/g, "UO").replace(/Uu/g, "UU"), "" !==ElvishInput.value ? (document.getElementById("elvishLabel").style.display="none", document.getElementById("elvishLabel1").style.display="none") : (document.getElementById("elvishLabel").style.display="block", document.getElementById("elvishLabel1").style.display="block"), 1==storageEnabled && (localStorage.text=ElvishInput.value)} function transcribeDwarvish(){ DwarvishOutput.value=DwarvishInput.value, "" !==DwarvishInput.value ? (document.getElementById("dwarvishLabel").style.display="none", document.getElementById("dwarvishLabel1").style.display="none") : (document.getElementById("dwarvishLabel").style.display="block", document.getElementById("dwarvishLabel1").style.display="none"), 1==storageEnabled && (localStorage.text=DwarvishInput.value)} function getHash(){ if (window.location.hash){ if (document.getElementById(window.location.hash.split("?")[0].replace("#", "")).className.includes("tab-panel")){ switchToTab(window.location.hash.split("?")[0].replace("#", ""));} else if (document.getElementById(window.location.hash.split("?")[0].replace("#", "")).parentNode.parentNode.parentNode.className.includes("tab-panel")){ switchToTab(document.getElementById(window.location.hash.split("?")[0].replace("#", "")).parentNode.parentNode.parentNode.id);} else if (document.getElementById(window.location.hash.split("?")[0].replace("#", "")).parentNode.parentNode.className.includes("tab-panel")){ switchToTab(document.getElementById(window.location.hash.split("?")[0].replace("#", "")).parentNode.parentNode.id);} else if (document.getElementById(window.location.hash.split("?")[0].replace("#", "")).parentNode.parentNode.parentNode.parentNode.className.includes("tab-panel")){ switchToTab(document.getElementById(window.location.hash.split("?")[0].replace("#", "")).parentNode.parentNode.parentNode.parentNode.id);} else if (document.getElementById(window.location.hash.split("?")[0].replace("#", "")).parentNode.parentNode.parentNode.parentNode.parentNode.className.includes("tab-panel")){ switchToTab(document.getElementById(window.location.hash.split("?")[0].replace("#", "")).parentNode.parentNode.parentNode.parentNode.parentNode.id);} else if (document.getElementById(window.location.hash.split("?")[0].replace("#", "")).parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.className.includes("tab-panel")){ switchToTab(document.getElementById(window.location.hash.split("?")[0].replace("#", "")).parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.id);} else{ switchToTab("ElvishTranscriber");}}} function setHash(e){ window.location.hash="#" + e} function switchToTab(e){ if ("Songs"==e && 0==videosLoaded){ loadVideos()} else if (("Maps"==e || "Apps"==e) && 0==imagesLoaded){ loadImages()} else if ("Apps"==e && 0==backgroundsLoaded){ loadBackgrounds()} else if ("ElvishTranscriber"==e && 1==storageEnabled && localStorage.text){ (ElvishInput.value=localStorage.text, transcribeElvish())} else if ("DwarvishTranscriber"==e && 1==storageEnabled && localStorage.text){ (DwarvishInput.value=localStorage.text, transcribeDwarvish())} else{} for (var t=0, a=(n=document.getElementsByClassName("mdl-layout__tab")).length; t < a; t++){ (l=n[t]).href.includes(e) ? l.className="mdl-layout__tab is-active" : l.className="mdl-layout__tab"} var n; for (t=0, a=(n=document.getElementsByClassName("mdl-layout__tab-panel")).length; t < a; t++){ var l; (l=n[t]).id==e ? l.className="mdl-layout__tab-panel is-active" : l.className="mdl-layout__tab-panel"} window.location.hash="#" + e, document.title="Tengwar Feanor: " + e.replace(/([A-Z]+)/g, " $1").trim()} function setCookie(e, t, a){ var n=new Date; n.setTime(n.getTime() + 24 * a * 60 * 60 * 1e3); var l="expires=" + n.toGMTString(); document.cookie=e + "=" + t + ";" + l + ";path=/"} function getCookie(e){ for (var t=e + "=", a=decodeURIComponent(document.cookie).split(";"), n=0; n < a.length; n++){ for (var l=a[n]; " "==l.charAt(0);) l=l.substring(1); if (0==l.indexOf(t)) return l.substring(t.length, l.length)} return ""} function getURLParameter(e, t){ t || (t=window.location.href), e=e.replace(/[\[\]]/g, "\\$&"); var a=new RegExp("[?&]" + e + "(=([^&#]*)|&|#|$)").exec(t); return a ? a[2] ? decodeURIComponent(a[2].replace(/\+/g, " ")) : "" : null} function googleTranslateElementInit(){ new google.translate.TranslateElement({ pageLanguage: "en", includedLanguages: "af,ar,de,en,es,fr,hu,it,ja,no,ro,ru,tr,zh-CN", layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: !1}, "google_translate_element"), document.getElementById("google_translate_element").firstChild.firstChild.className="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent inline", document.getElementById("google_translate_element").style.cssText="float: right;clear: both;margin-left: auto;"} function loadGoogleTranslate(){ var e=document.createElement("script"); e.type="text/javascript", e.async=!0, e.src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit", (document.getElementsByTagName("head")[0] || document.getElementsByTagName("body")[0]).appendChild(e)}
</script><script type=application/ld+json>{ "@context": "http://schema.org", "@type": "WebSite", "name": "Tengwar Feanor", "alternateName": "Tengwar Transcriber", "url": "https://tengwartranscriber.github.io/"}
</script><script type=application/ld+json>{ "@context": "http://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "item":{ "@id": "https://tengwartranscriber.github.io/", "name": "Tengwar Feanor", "image": "https://tengwartranscriber.github.io/icons/ms.png"}},{ "@type": "ListItem", "position": 2, "item":{ "@id": "https://tengwartranscriber.github.io/#ElvishTranscriber", "name": "Home", "image": "https://tengwartranscriber.github.io/icons/ms.png"}}}]}
</script><body onload=onLoad()><div class="mdl-js-layout mdl-layout mdl-layout--fixed-header"><header class=mdl-layout__header><div class=mdl-layout__header-row><span class=mdl-layout-title>Tengwar Feanor</span><button class="mdl-js-ripple-effect mdl-button mdl-js-button mdl-button--accent mdl-button--raised inline" onclick=loadGoogleTranslate(),this.remove() style=float:right;clear:both;margin-left:auto>Translate</button><div id=google_translate_element></div></div><div class="mdl-js-ripple-effect mdl-layout__tab-bar"><a href=#ElvishTranscriber class="mdl-layout__tab is-active" id=mnu1 onclick='switchToTab("ElvishTranscriber")'>Elvish Transcriber</a><div class=mdl-tooltip for=mnu1>Transcribe Latin characters<br>to Elvish characters</div><a href=#DwarvishTranscriber class=mdl-layout__tab id=mnu2 onclick='switchToTab("DwarvishTranscriber")'>Dwarvish Transcriber</a><div class=mdl-tooltip for=mnu2>Transcribe Latin characters<br>to Dwarvish runes</div><a href=#AboutElvish class=mdl-layout__tab id=mnu3 onclick='switchToTab("AboutElvish")'>About Elvish</a><div class=mdl-tooltip for=mnu3>Learn about the Tengwar</div><a href=#AboutDwarvish class=mdl-layout__tab id=mnu4 onclick='switchToTab("AboutDwarvish")'>About Dwarvish</a><div class=mdl-tooltip for=mnu4>Learn about the Angerthas Erebor</div><a href=#Songs class=mdl-layout__tab id=mnu5 onclick='switchToTab("Songs")'>Songs</a><div class=mdl-tooltip for=mnu5>Songs and poems from<br>Tolkien's works</div><a href=#Maps class=mdl-layout__tab id=mnu6 onclick='switchToTab("Maps")'>Maps</a><div class=mdl-tooltip for=mnu6>Middle-Earth maps from<br>Lord of the Rings and the Hobbit</div><a href=#Fonts class=mdl-layout__tab id=mnu7 onclick='switchToTab("Fonts")'>Fonts</a><div class=mdl-tooltip for=mnu7>Download the Elvish<br>and Dwarvish fonts</div><a href=#Apps class=mdl-layout__tab id=mnu8 onclick='switchToTab("Apps")'>Apps</a><div class=mdl-tooltip for=mnu8>Get the free Tengwar Feanor<br>apps for Windows and Android</div><div class=mdl-tooltip for=mnu9>About this application</div><a id=mnu11 class=mdl-layout__tab style=visibility:hidden>About</a></div></header><main class="mdl-layout__content"><div class=mdl-shadow--2dp style=width:100%;display:none;margin:0;background-color:#607d8b id=installBanner><div class=mdl-card__title style=padding-bottom:0;color:#fff><h2 class=mdl-card__title-text>Add Tengwar Feanor to your homescreen</h2></div><div class=mdl-card__supporting-text style=margin:0;padding:0;color:#fff><ol style=margin:0><li>Tap the <i class=material-icons>open_in_new</i>Share item in the toolbar <li>Tap the <i class=material-icons>add</i>Add to Homescreen item in the popup</ol><br></div><div class="mdl-card--border mdl-card__actions"><a class="mdl-js-ripple-effect mdl-button mdl-js-button mdl-button--accent mdl-button--raised" onclick='document.getElementById("installBanner").style.display="none"'>Dismiss</a></div></div><div class="mdl-shadow--2dp mdl-card demo-card-wide toplevel" style=display:none id=browserWarning><div class=mdl-card__title><h2 class=mdl-card__title-text>This page would work better in Chrome or Firefox</h2></div><div class=mdl-card__supporting-text>If you already have one of them installed, please use it to view this website to experience full functionality.<br>If not, you can download one of them, or use the free app for Windows and Android.<br>Don't like any of those options? Click Dismiss. </div><div class="mdl-card--border mdl-card__actions"><a href=https://www.google.com/chrome/browser/ target=_blank class="mdl-js-ripple-effect mdl-button mdl-js-button mdl-button--colored">Get Chrome</a><a href=https://www.mozilla.org/en-US/firefox/ target=_blank class="mdl-js-ripple-effect mdl-button mdl-js-button mdl-button--colored">Get Firefox</a><a target=_blank class="mdl-js-ripple-effect mdl-button mdl-js-button mdl-button--colored" onclick='switchToTab("Apps")'>Get App</a><a class="mdl-js-ripple-effect mdl-button mdl-js-button mdl-button--colored" style=position:absolute;right:10px onclick='document.getElementById("browserWarning").style.display="none"'>Dismiss</a></div></div><section class="mdl-layout__tab-panel is-active" id=ElvishTranscriber><div class=page-content><h1 style=color:#ffffff00;height:1px;margin:0;padding:0>Elvish Transcriber</h1><a href=tengwarfeanorregular.ttf class="mdl-js-ripple-effect mdl-button mdl-js-button mdl-button--colored mdl-button--fab fab" id=elvishDownload onclick='switchToTab("Fonts")'><i class=material-icons>file_download</i></a><div class="mdl-tooltip mdl-tooltip--left" for=elvishDownload>Download the Elvish font</div><div class="mdl-grid portfolio-max-width portfolio-contact"><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp"><div class="mdl-card__supporting-text"><div class="mdl-js-textfield mdl-textfield field"><textarea class=mdl-textfield__input id=ElvishInput rows=5 type=text oninput=transcribeElvish()></textarea><label class=mdl-textfield__label for=ElvishInput id=elvishLabel1>Text Entered here will be tranScribed</label><div class=mdl-tooltip for=ElvishInput>Enter text here to<br>transcribe to Elvish</div></div><div class="mdl-js-textfield mdl-textfield field"><textarea class="elvishfont mdl-textfield__input" id=ElvishOutput rows=5 type=text readonly></textarea><label class="elvishfont mdl-textfield__label" for=ElvishOutput id=elvishLabel>Text Entered Above will Appear here</label><div class=mdl-tooltip for=ElvishOutput>Transcription of text entered<br>above will appear here</div></div></div><div class="mdl-card__actions"><button class="mdl-js-ripple-effect mdl-button mdl-js-button mdl-button--accent mdl-button--raised inline" onclick=saveElvishImage() id=saveElvish>Save as Image</button><span class="inline is-active mdl-js-spinner mdl-spinner" id=elvishSpinner style=display:none></span></div></div><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp"><div class="mdl-card__title"><h2 class="mdl-card__title-text">About Transcription</h2></div><div class="mdl-card__supporting-text"><p>Unlike Latin characters, the Feanorian letters always make the same sound. For example, there is a Tengwa for the ‘SH’ sound. Since it would be impossible for this transcriber to determine which sound a letter makes (short of having a complete Tengwar/English dictionary), it uses the most common sound of each letter. If you are using Chrome, Opera, or Firefox, the transcriber does in fact transcribe ch, sh, ng, etc. to their proper tengwa. If you are using another browser, the transcriber will use the separate tengwa for c and h, etc. To make the transcribing most accurate, spell everything phonetically. Use a capital ‘S’ when s sounds as it does in ‘Charges.’</p></div></div><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp"><div class="mdl-card__title"><h2 class="mdl-card__title-text">Browser Compatability</h2></div><div class="mdl-card__supporting-text"><p>Tengwar Transcriber works best in Chrome, Opera or Firefox. Safari, Edge, and Internet Explorer do not support all features. </p></div></div><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp"><div class="mdl-card__title"><h2 class="mdl-card__title-text">About Elvish</h2></div><div class="mdl-card__supporting-text"><p>According to J. R. R. Tolkien's legendarium, the lettering system known as the Feanorian letters or "Elvish" was brought to Middle-earth by the exiled Noldor. The consonantal signs are called Tengwar (singular Tengwa) and the vowel sounds are represented by tehtar (singular tehta), which are placed over the previous consonant or a carrier, which looks like an ‘i’ without a dot.<br>The Feanorian letters were designed to be adapted to represent different languages, so there were different methods, or modes, for writing in Quenya, Sindarin, Westron, Black Speech, etc. There is no mode for representing English; the one designed for use here is substantially similar to that used by other transcribers. Full article <a href=#AboutElvish onclick='switchToTab("AboutElvish")'>here</a>. More complete information can be found in appendix E of The Lord of the Rings. <a href=https://en.wikipedia.org/wiki/Tengwar target=_blank>Wikipedia</a>and <a href=http://lotr.wikia.com/wiki/Tengwar target=_blank>Lord of the Rings Wikia</a>also have good articles.</p></div></div><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp" style=background-color:#f0f8ff><div class=mdl-card__title><h2 class=mdl-card__title-text>Credits</h2></div><div class=mdl-card__supporting-text>Page created and maintained by <a href=https://max.davy.engineer/ target=_blank>Max Davy</a><br>Site theme created with <a href=https://getmdl.io/ target=_blank>Material Design Lite</a><br>Site hosted on <a href=https://pages.github.com target=_blank>Github Pages</a><br><a href=http://creativecommons.org/licenses/by-sa/3.0/us/ rel=license><img alt="Creative Commons License" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAAfCAYAAABjyArgAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAdnJLH8AAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAABh9JREFUaN7tWltPG0cU9nOlIN55KFKRApWoSKu06kuClP4A+gPSUvU1alFbVYpEFYpIq6hVkUVF00rgRnkrFwPGgC/YBtv4srbXhpBXIvGQviF+wYm+s55ldlnbu951WjmMdOT1zOwZ+5sz37ns+oiox+fz0ZV4L0T4qH8JRzdpO75FkcQOxfdilEgnaC+bonQ+TQfFLOVLOSqUC6RUilRSFSpVS5qoCilqkYrlAs/B3Ew+zfcm0wnWFUlEWDfWCO1s0Pr2Gq2Fg7S6uUIroWWW5Y0lWlr/p2tEAvoC3GgyQrv7cUplkpTO7TNYhXKeAazUylQ9Uqn2rEqHx4d09FwTXNee1XgMcxRV4XtwL3SksknWCd1mkIPhVR1kANylIPuM4GZTbIE5JcfWCtAA6szDGbrzyR261nPt0lFAH8ZmfprhuZXDCm8KLDpTyLA17+7vGkDe2Fmnta2gBnJopaUV35+8T0NDQ5fWRh/G3ILRCf06wKAFGVwAU6oqbJX+OT/19fXZ5h3M9f/u53tBIbDmrA5yXKeLzUiINrY1kJtZ8dzjORocGtT1j46O0sTEBAuuRT/mYK5TEDqpXwcYPAlauAC3xJY49umYAbze3l4aHx+nqakpSiaTLLhGH8bkubg3k0tTuaaBDEsGXWicvENbsbCRKiysOPB0kXp6ejR9Y2N0cnJC5oY+jGEO5joBodP6dYDh0MCXoAVYrhlcgAcgz87OqFkLBAIGoLHrABkbho3DGnB8sVSUdna3NaqwsGLxA4VlYQPlJnlpw9piTbsAWOk/PT2lfC7Hgms3+nWAcXzhlMC5ONoyuCMjI5Y726hhE3CPbMnQCU7GGhdUIVnx1hoFN1cNNAHeE5b1/Pi4JcBowtLscKaV/qdPntA7b/cbJBqJtKXfAHCaqSHPDg2cK4PbymrtgAxOhuNjqsinKZnRrJi5OKpxsaAJAbBwOE42F3OFY2r15836YbEA9PZHH9OXn39B33/7nQ6yf3bWsX4DwGy9apGpQTg0HHVVVandBpAFXUAndCOEE1Yc39OsWI4oZJoQDsfccJzFxpmpA004Jjt/Xug/Pz+nwPxfDOZvP/+i61pcWOC+G8PvOdZvABj8WK6VORQTPx6c67YJ3oIghMMJEVycqIdtMk2YAYYnNzeLbMnQcI9dgIV+ADwwMMBgDg4OGvhYWPG/L1860m8AGBmaeqRyLCusV6YGRAvgH+weRAbfPDZbP06iCSuGbnAxMr5LNBEJadGExMOvE2C0cDhMw8PD/H+sAH5x8qJ9gOHccIRFEiEfPSxoFe8CzGAwaDkm3y+ONHQj4wMVZeshWywV42gCPCzCtf+CItDgzODkCvm83re8tKQD7IoiUE84PK7pP1y2QuGs+vv7meQBOK5x/MWYiDQAuBizogmk1SUDD8cM4ZoMcDMn18h63Tg5wbeQmR+nWd69fp2/P57/w52TQ+yLuoL44fIxacbJdvhaPgFYAzHxQfGgJcByGGUX4HbDNNEAqjlM++rePeZoV2Ha/xFgp4mG4Ea3iYZSVJgaIHL83Y5+xxQBx4fQDdcAVaYI85hbiuiqVLmZk2vmyOw4ObHzmpOr8lp2nJwMglyMwWZCP/TKyUy7xZ5O6r8UpokUGaGV+Zg3CtMAsug3j6HBouUwrSCFadFk4zCtq8qVItGQ02RzPOtlorFfTzRQuhSJRqOCT1cU3LMF61TZSR3A61S5qwCWiz2Lfy94X+yZ87NuFHuwlihZyoV3c7GnqwCGTD6Y1MuVdz+7awDZSdEHVm9ZrqwUafrh9Jv4dPniy8Q3X3MYVW2j4I4xzJEL7jc/vMnUgDgbG/iGPr43dvzwYJKTAYAsW3I7j4wAbrlaovk/592+X2CZZJjndGINt3p9Vp0Msqo99AQnO37oOSceeiquwTWDZ3XtBbh21/QEYEEX8mN7gNbqsT2eXPBje7wfUSl6RgutypVertGozuE5wJD3P7hBwY0gh3CIk1X9xZOa9OJJjfvkF0/WQkG6dfuWl68gdYwaGq3VcQuWBWA9+vURxVNx6dWpuuDVqUqRxzDHS2BflwW34viOA3wlLoSI3roConNvV74C8NfodpNElTgAAAAASUVORK5CYII=" style=border-width:0></a>Work obtained from <a href=https://en.wikipedia.org/wiki/Tengwar>Wikipedia</a>and licensed under a <a href=http://creativecommons.org/licenses/by-sa/3.0/us/>Creative Commons Attribution-ShareAlike 3.0 United States License</a><br>Fonts created with <a href=https://birdfont.org/ target=_blank>Birdfont</a>, a free font editor by Johan Mattsson<br>Elvish glyphs originally from <a href=http://www.dafont.com/tengwar-annatar.font target=_blank>Tengwar Annatar</a>by Johan Winge</div></div></div></div></section><section class=mdl-layout__tab-panel id=DwarvishTranscriber><div class=page-content><h1 style=color:#ffffff00;height:1px;margin:0;padding:0>Dwarvish Transcriber</h1><a href=dwarvishregular.ttf class="mdl-js-ripple-effect mdl-button mdl-js-button mdl-button--colored mdl-button--fab fab" id=dwarvishDownload onclick='switchToTab("Fonts")'><i class=material-icons>file_download</i></a><div class="mdl-tooltip mdl-tooltip--left" for=dwarvishDownload>Download the Dwarvish font</div><div class="mdl-grid portfolio-max-width portfolio-contact"><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp"><div class="mdl-card__supporting-text"><div class="mdl-js-textfield mdl-textfield field"><textarea class=mdl-textfield__input id=DwarvishInput rows=5 type=text oninput=transcribeDwarvish()></textarea><label class=mdl-textfield__label for=DwarvishInput id=dwarvishLabel1>Text entered here will be transcribed</label><div class=mdl-tooltip for=DwarvishInput>Enter text here to<br>transcribe to Dwarvish</div></div><div class="mdl-js-textfield mdl-textfield field"><textarea class="mdl-textfield__input dwarvishfont" id=DwarvishOutput rows=5 type=text readonly></textarea><label class="mdl-textfield__label dwarvishfont" for=DwarvishOutput id=dwarvishLabel>Transcribed text will appear here</label><div class=mdl-tooltip for=DwarvishOutput>Transcription of text entered<br>above will appear here</div></div></div><div class="mdl-card__actions"><button class="mdl-js-ripple-effect mdl-button mdl-js-button mdl-button--accent mdl-button--raised inline" onclick=saveDwarvishImage() id=saveDwarvish>Save as Image</button><span class="inline is-active mdl-js-spinner mdl-spinner" id=dwarvishSpinner style=display:none></span></div></div><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp"><div class="mdl-card__title"><h2 class="mdl-card__title-text">About Dwarvish Runes</h2></div><div class="mdl-card__supporting-text"><p>Dwarf Runes were a runic script used by the <a href=http://lotr.wikia.com/wiki/Dwarves>Dwarves</a>, and was their main writing system. This Dwarven writing system utilizes runes and glyphs when written. Dwarf Runes were first created by the elven loremaster <a href=http://lotr.wikia.com/wiki/Daeron>Daeron</a>of Doriath and were called <a href=http://lotr.wikia.com/wiki/Cirth>Cirth</a>or Certar Daeron. Daeron was inspired by the <a href=http://lotr.wikia.com/wiki/Tengwar>Tengwar</a>script of <a href=http://lotr.wikia.com/wiki/F%C3%ABanor>Fëanor</a>and wanted to create a new script for his <a href=http://lotr.wikia.com/wiki/Sindar>Sindar kin</a>. The dwarves learned the runes from the elves and adapted them for their own language, <a href=http://lotr.wikia.com/wiki/Khuzdul>Khuzdûl</a>. The letters are thin and angular for they were designed for cutting or scratching on wood, stone, or metal. By the Third Age only the dwarves made regular use of them. The Cirth alphabet originally had nineteen characters which was sufficient for the <a href=http://lotr.wikia.com/wiki/Sindarin>Sindarin</a>language. More were later added by the <a href=http://lotr.wikia.com/wiki/Noldor>Noldor</a>of <a href=http://lotr.wikia.com/wiki/Eregion>Eregion</a>to make it easier to express certain subtle sounds in their language. This full expansion of the script is generally called Angerthas Daeron or Angerthas Eregion. After the destruction of Eregion the elves generally ceased to use Cirth at all. Dwarves made their own variations of the script called Angerthas Moria and Angerthas Erebor.<br>Some dwarves knew a secret way of writing runes called <a href=http://lotr.wikia.com/wiki/Moon_letters>Moon letters</a>. These runes were written with a silver pen and could only be seen under the light of the moon. With the more advanced forms of Moon letters it had to be a moon of the same shape and season as the day when the runes were written.<br>The runes of the dwarves were adopted by Tolkien from the Anglo-Saxon and Scandinavian rune scripts. The runes that this transcriber uses are the Angerthas Erebor (as seen on Thror’s map in the hobbit). Full article <a href=#AboutDwarvish onclick='switchToTab("AboutDwarvish")'>here</a>.</p></div></div><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp" style=background-color:#f0f8ff><div class=mdl-card__title><h2 class=mdl-card__title-text>Credits</h2></div><div class=mdl-card__supporting-text>Page created and maintained by <a href=https://max.davy.engineer/ target=_blank>Max Davy</a><br>Site theme created with <a href=https://getmdl.io/ target=_blank>Material Design Lite</a><br>Site hosted on <a href=https://pages.github.com target=_blank>Github Pages</a><br><a href=http://creativecommons.org/licenses/by-sa/3.0/us/ rel=license><img alt="Creative Commons License" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAAfCAYAAABjyArgAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAdnJLH8AAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAABh9JREFUaN7tWltPG0cU9nOlIN55KFKRApWoSKu06kuClP4A+gPSUvU1alFbVYpEFYpIq6hVkUVF00rgRnkrFwPGgC/YBtv4srbXhpBXIvGQviF+wYm+s55ldlnbu951WjmMdOT1zOwZ+5sz37ns+oiox+fz0ZV4L0T4qH8JRzdpO75FkcQOxfdilEgnaC+bonQ+TQfFLOVLOSqUC6RUilRSFSpVS5qoCilqkYrlAs/B3Ew+zfcm0wnWFUlEWDfWCO1s0Pr2Gq2Fg7S6uUIroWWW5Y0lWlr/p2tEAvoC3GgyQrv7cUplkpTO7TNYhXKeAazUylQ9Uqn2rEqHx4d09FwTXNee1XgMcxRV4XtwL3SksknWCd1mkIPhVR1kANylIPuM4GZTbIE5JcfWCtAA6szDGbrzyR261nPt0lFAH8ZmfprhuZXDCm8KLDpTyLA17+7vGkDe2Fmnta2gBnJopaUV35+8T0NDQ5fWRh/G3ILRCf06wKAFGVwAU6oqbJX+OT/19fXZ5h3M9f/u53tBIbDmrA5yXKeLzUiINrY1kJtZ8dzjORocGtT1j46O0sTEBAuuRT/mYK5TEDqpXwcYPAlauAC3xJY49umYAbze3l4aHx+nqakpSiaTLLhGH8bkubg3k0tTuaaBDEsGXWicvENbsbCRKiysOPB0kXp6ejR9Y2N0cnJC5oY+jGEO5joBodP6dYDh0MCXoAVYrhlcgAcgz87OqFkLBAIGoLHrABkbho3DGnB8sVSUdna3NaqwsGLxA4VlYQPlJnlpw9piTbsAWOk/PT2lfC7Hgms3+nWAcXzhlMC5ONoyuCMjI5Y726hhE3CPbMnQCU7GGhdUIVnx1hoFN1cNNAHeE5b1/Pi4JcBowtLscKaV/qdPntA7b/cbJBqJtKXfAHCaqSHPDg2cK4PbymrtgAxOhuNjqsinKZnRrJi5OKpxsaAJAbBwOE42F3OFY2r15836YbEA9PZHH9OXn39B33/7nQ6yf3bWsX4DwGy9apGpQTg0HHVVVandBpAFXUAndCOEE1Yc39OsWI4oZJoQDsfccJzFxpmpA004Jjt/Xug/Pz+nwPxfDOZvP/+i61pcWOC+G8PvOdZvABj8WK6VORQTPx6c67YJ3oIghMMJEVycqIdtMk2YAYYnNzeLbMnQcI9dgIV+ADwwMMBgDg4OGvhYWPG/L1860m8AGBmaeqRyLCusV6YGRAvgH+weRAbfPDZbP06iCSuGbnAxMr5LNBEJadGExMOvE2C0cDhMw8PD/H+sAH5x8qJ9gOHccIRFEiEfPSxoFe8CzGAwaDkm3y+ONHQj4wMVZeshWywV42gCPCzCtf+CItDgzODkCvm83re8tKQD7IoiUE84PK7pP1y2QuGs+vv7meQBOK5x/MWYiDQAuBizogmk1SUDD8cM4ZoMcDMn18h63Tg5wbeQmR+nWd69fp2/P57/w52TQ+yLuoL44fIxacbJdvhaPgFYAzHxQfGgJcByGGUX4HbDNNEAqjlM++rePeZoV2Ha/xFgp4mG4Ea3iYZSVJgaIHL83Y5+xxQBx4fQDdcAVaYI85hbiuiqVLmZk2vmyOw4ObHzmpOr8lp2nJwMglyMwWZCP/TKyUy7xZ5O6r8UpokUGaGV+Zg3CtMAsug3j6HBouUwrSCFadFk4zCtq8qVItGQ02RzPOtlorFfTzRQuhSJRqOCT1cU3LMF61TZSR3A61S5qwCWiz2Lfy94X+yZ87NuFHuwlihZyoV3c7GnqwCGTD6Y1MuVdz+7awDZSdEHVm9ZrqwUafrh9Jv4dPniy8Q3X3MYVW2j4I4xzJEL7jc/vMnUgDgbG/iGPr43dvzwYJKTAYAsW3I7j4wAbrlaovk/592+X2CZZJjndGINt3p9Vp0Msqo99AQnO37oOSceeiquwTWDZ3XtBbh21/QEYEEX8mN7gNbqsT2eXPBje7wfUSl6RgutypVertGozuE5wJD3P7hBwY0gh3CIk1X9xZOa9OJJjfvkF0/WQkG6dfuWl68gdYwaGq3VcQuWBWA9+vURxVNx6dWpuuDVqUqRxzDHS2BflwW34viOA3wlLoSI3roConNvV74C8NfodpNElTgAAAAASUVORK5CYII=" style=border-width:0></a>Work obtained from <a href=https://en.wikipedia.org/wiki/Tengwar>Wikipedia</a>and licensed under a <a href=http://creativecommons.org/licenses/by-sa/3.0/us/>Creative Commons Attribution-ShareAlike 3.0 United States License</a><br>Fonts created with <a href=https://birdfont.org/ target=_blank>Birdfont</a>, a free font editor by Johan Mattsson </div></div></div></section><section class=mdl-layout__tab-panel id=AboutElvish><div class=page-content><h1 style=color:#ffffff00;height:1px;margin:0;padding:0>About Elvish</h1><a href=https://www.wikiwand.com/en/Tengwar target=_blank class="mdl-js-ripple-effect mdl-button mdl-js-button mdl-button--colored mdl-button--fab fab" id=elvishArticle><i class=material-icons>open_in_new</i></a><div class="mdl-tooltip mdl-tooltip--left" for=elvishArticle>Open Wikipedia Article</div><p></p><a href=#ElvishSummary class=mdl-chip type=button style="margin-left:16px"><span class=mdl-chip__text>Summary</span></a><a href=#ElvishHistory class=mdl-chip type=button><span class=mdl-chip__text>History and Terminology</span></a><a href=#Linguistics class=mdl-chip type=button><span class=mdl-chip__text>Linguistics</span></a><a href=#Tehtar class=mdl-chip type=button><span class=mdl-chip__text>Tehtar</span></a><a href=#Modes class=mdl-chip type=button><span class=mdl-chip__text>Modes</span></a><div class="mdl-grid portfolio-max-width portfolio-contact"><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp"><div class=mdl-card__title><h2 class=mdl-card__title-text><a id=ElvishSummary></a>Summary</h2></div><div class=mdl-card__supporting-text><p>The Tengwar are an artificial script created by J. R. R. Tolkien. Within the fictional context of Tolkien’s legendarium, the tengwar were invented by the Elf Fëanor, and used first to write the Elven tongues Quenya and Telerin. Later a great number of languages of Middle-earth were written using the tengwar, including Sindarin.</p></div></div><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp"><div class=mdl-card__title><h2 class=mdl-card__title-text><a id=ElvishHistory></a>History and Terminology</h2></div><div class=mdl-card__supporting-text><p>According to The War of the Jewels (Appendix D to Quendi and Eldar), Fëanor, when he created his script, introduced a change in terminology. He called a letter, i.e. a written representation of a spoken phoneme (tengwë) a tengwa. Previously, any letter or symbol had been called a sarat (from *sar “incise”). The alphabet of Rúmil of Valinor, on which Fëanor supposedly based his own work, was known as sarati. It later became known as “Tengwar of Rúmil”.<br>The plural of tengwa was tengwar, and this is the name by which Fëanor’s system became known. Since, however, in commonly used modes, an individual tengwa was equivalent to a consonant, the term tengwar in popular use became equivalent to “consonant sign”, and the vowel signs were known as ómatehtar. By loan-translation, the tengwar became known as tîw (singular têw) in Sindarin, when they were introduced to Beleriand. The letters of the earlier alphabet native to Sindarin were called cirth (singular certh, probably from *kirte “cutting”, and thus semantically analogous to Quenya sarat). This term was loaned into exilic Quenya as certa, plural certar.</p></div></div><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp"><div class=mdl-card__title><h2 class=mdl-card__title-text><a id=Linguistics></a>Linguistics</h2></div><div class=mdl-card__supporting-text><p>The most notable characteristic of the tengwar script is that the shapes of the letters correspond to the distinctive features of the sounds they represent. The Quenya consonant system has 5 places of articulation: labial, dental, palatal, velar, and glottal. The velars distinguish between plain and labialized (that is, articulated with rounded lips, or followed by a [w] sound). Each point of articulation, and the corresponding tengwa series, has a name in the classical Quenya mode. Dental sounds are called Tincotéma and are represented with the tengwar in column I. Labial sounds are called Parmatéma, and represented by the column II tengwar; velar sounds are called Calmatéma, represented by column III; and labialized velar sounds are called Quessetéma, represented by the tengwar of column IV. Palatal sounds are called Tyelpetéma and have no tengwa series of their own, but are represented by column III letters with an added diacritic for following [j].<br>Similarly shaped letters reflect not only similar places of articulation, but also similar manners of articulation. In the classical Quenya mode, row 1 represents voiceless stops, row 2 voiced prenasalized stops, row 3 voiceless fricatives, row 4 voiceless prenasalized stops, row 5 nasal stops, and row 6 approximants.</p><p>Most letters are constructed by a combination of two basic shapes: a vertical stem (either long or short) and either one or two rounded bows (which may or may not be underscored, and may be on the left or right of the stem). <br>These principal letters are divided into four series (“témar”) that correspond to the main places of articulation and into six grades (“tyeller”) that correspond to the main manners of articulation. Both vary among modes. <br>Each series is headed by the basic signs composed of a vertical stem descending below the line, and a single bow. These basic signs represent the voiceless stop consonants for that series. For the classical Quenya mode, they are /t/, /p/, /k/ and /kʷ/, and the series are named tincotéma, parmatéma, calmatéma, and quessetéma, respectively; téma means “series” in Quenya.<br>In rows of the general use, there are the following correspondences between letter shapes and manners of articulation:</p><ul><li>Doubling the bow turns the voiceless consonant into a voiced one.</li><li>Raising the stem above the line turns it into the corresponding fricative.</li><li>Shortening it (so it is only the height of the bow) creates the corresponding nasal. In most modes, the signs with shortened stem and single bow do not correspond to the voiceless nasals, but to the approximants.</li></ul><p>In addition to these variations of the tengwar shapes, there is yet another variation, the use of stems that are extended both above and below the line. This shape may correspond to other consonant variations required. Except for some English abbreviations, it is not used in any of the better known tengwar modes, but it occurs in a Qenya mode where the tengwa Parma with extended stem is used for /pt/ and the tengwa Calma with extended stem is used for /kt/. The tengwar with raised stems sometimes occur in glyph variants that look like extended stems, as seen in the inscription of the One Ring.</p></div></div><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp"><div class=mdl-card__title><h2 class=mdl-card__title-text><a id=Tehtar></a>Tehtar</h2></div><div class=mdl-card__supporting-text><p>A tehta (Quenya “marking”) is a diacritic placed above or below the tengwa. They can represent vowels, consonant doubling, or nasal sound.<br>As Tolkien explained in the ROTK appendix, the tehtar for vowels resemble Latin diacritics: circumflex (î) /a/, acute (í) /e/, dot (i) /i/, left curl (ı̔ ) /o/, and right curl (ı̓ ) /u/. (Some languages without /o/, such as the Black Speech, use left curl ı̔ for /u/; other languages reverse the signs for /e/ and /i/.) A vowel occurring alone is drawn on the vowel carrier, which resembles dotless i (ı) for a short vowel or dotless j (ȷ) for a long vowel.</p></div></div><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp"><div class=mdl-card__title><h2 class=mdl-card__title-text><a id=Modes></a>Modes</h2></div><div class=mdl-card__supporting-text><p>Just as with any alphabetic writing system, every specific language written in tengwar requires a specific orthography, depending on the phonology of that language. These tengwar orthographies are usually called modes. Some modes follow pronunciation, while others follow traditional orthography.<br>In some modes, called ómatehtar (or vowel tehtar) modes, the vowels are represented with diacritics called tehtar (Quenya for ‘signs’; corresponding singular: tehta, ‘sign’). These ómatehtar modes can be loosely considered abjads rather than true alphabets. In some ómatehtar modes, the consonant signs feature an inherent vowel. These ómatehtar modes can be considered alphasyllabaries. <br>Ómatehtar modes can vary in that the vowel stroke can be placed either on top of the consonant preceding it, as in Quenya (which this transcriber uses), or on the consonant following, as in Sindarin, English, and the notorious Black Speech inscription on the One Ring. The other main difference is in the fourth tyellë below, where those letters with raised stems and doubled bows can be either voiced fricatives, as in Sindarin (general mode at right), or nasalized stops, as in Quenya (classical mode).</p><p>In the full writing modes, the consonants and the vowels are represented by Tengwar. Only one such mode is well known. It is called the “mode of Beleriand” and one can read it on the Doors of Durin.</p></div></div><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp" style=background-color:#f0f8ff><div class=mdl-card__title><h2 class=mdl-card__title-text>Credits</h2></div><div class=mdl-card__supporting-text>Page created and maintained by <a href=https://max.davy.engineer/ target=_blank>Max Davy</a><br>Site theme created with <a href=https://getmdl.io/ target=_blank>Material Design Lite</a><br>Site hosted on <a href=https://pages.github.com target=_blank>Github Pages</a><br><a href=http://creativecommons.org/licenses/by-sa/3.0/us/ rel=license><img alt="Creative Commons License" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAAfCAYAAABjyArgAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAdnJLH8AAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAABh9JREFUaN7tWltPG0cU9nOlIN55KFKRApWoSKu06kuClP4A+gPSUvU1alFbVYpEFYpIq6hVkUVF00rgRnkrFwPGgC/YBtv4srbXhpBXIvGQviF+wYm+s55ldlnbu951WjmMdOT1zOwZ+5sz37ns+oiox+fz0ZV4L0T4qH8JRzdpO75FkcQOxfdilEgnaC+bonQ+TQfFLOVLOSqUC6RUilRSFSpVS5qoCilqkYrlAs/B3Ew+zfcm0wnWFUlEWDfWCO1s0Pr2Gq2Fg7S6uUIroWWW5Y0lWlr/p2tEAvoC3GgyQrv7cUplkpTO7TNYhXKeAazUylQ9Uqn2rEqHx4d09FwTXNee1XgMcxRV4XtwL3SksknWCd1mkIPhVR1kANylIPuM4GZTbIE5JcfWCtAA6szDGbrzyR261nPt0lFAH8ZmfprhuZXDCm8KLDpTyLA17+7vGkDe2Fmnta2gBnJopaUV35+8T0NDQ5fWRh/G3ILRCf06wKAFGVwAU6oqbJX+OT/19fXZ5h3M9f/u53tBIbDmrA5yXKeLzUiINrY1kJtZ8dzjORocGtT1j46O0sTEBAuuRT/mYK5TEDqpXwcYPAlauAC3xJY49umYAbze3l4aHx+nqakpSiaTLLhGH8bkubg3k0tTuaaBDEsGXWicvENbsbCRKiysOPB0kXp6ejR9Y2N0cnJC5oY+jGEO5joBodP6dYDh0MCXoAVYrhlcgAcgz87OqFkLBAIGoLHrABkbho3DGnB8sVSUdna3NaqwsGLxA4VlYQPlJnlpw9piTbsAWOk/PT2lfC7Hgms3+nWAcXzhlMC5ONoyuCMjI5Y726hhE3CPbMnQCU7GGhdUIVnx1hoFN1cNNAHeE5b1/Pi4JcBowtLscKaV/qdPntA7b/cbJBqJtKXfAHCaqSHPDg2cK4PbymrtgAxOhuNjqsinKZnRrJi5OKpxsaAJAbBwOE42F3OFY2r15836YbEA9PZHH9OXn39B33/7nQ6yf3bWsX4DwGy9apGpQTg0HHVVVandBpAFXUAndCOEE1Yc39OsWI4oZJoQDsfccJzFxpmpA004Jjt/Xug/Pz+nwPxfDOZvP/+i61pcWOC+G8PvOdZvABj8WK6VORQTPx6c67YJ3oIghMMJEVycqIdtMk2YAYYnNzeLbMnQcI9dgIV+ADwwMMBgDg4OGvhYWPG/L1860m8AGBmaeqRyLCusV6YGRAvgH+weRAbfPDZbP06iCSuGbnAxMr5LNBEJadGExMOvE2C0cDhMw8PD/H+sAH5x8qJ9gOHccIRFEiEfPSxoFe8CzGAwaDkm3y+ONHQj4wMVZeshWywV42gCPCzCtf+CItDgzODkCvm83re8tKQD7IoiUE84PK7pP1y2QuGs+vv7meQBOK5x/MWYiDQAuBizogmk1SUDD8cM4ZoMcDMn18h63Tg5wbeQmR+nWd69fp2/P57/w52TQ+yLuoL44fIxacbJdvhaPgFYAzHxQfGgJcByGGUX4HbDNNEAqjlM++rePeZoV2Ha/xFgp4mG4Ea3iYZSVJgaIHL83Y5+xxQBx4fQDdcAVaYI85hbiuiqVLmZk2vmyOw4ObHzmpOr8lp2nJwMglyMwWZCP/TKyUy7xZ5O6r8UpokUGaGV+Zg3CtMAsug3j6HBouUwrSCFadFk4zCtq8qVItGQ02RzPOtlorFfTzRQuhSJRqOCT1cU3LMF61TZSR3A61S5qwCWiz2Lfy94X+yZ87NuFHuwlihZyoV3c7GnqwCGTD6Y1MuVdz+7awDZSdEHVm9ZrqwUafrh9Jv4dPniy8Q3X3MYVW2j4I4xzJEL7jc/vMnUgDgbG/iGPr43dvzwYJKTAYAsW3I7j4wAbrlaovk/592+X2CZZJjndGINt3p9Vp0Msqo99AQnO37oOSceeiquwTWDZ3XtBbh21/QEYEEX8mN7gNbqsT2eXPBje7wfUSl6RgutypVertGozuE5wJD3P7hBwY0gh3CIk1X9xZOa9OJJjfvkF0/WQkG6dfuWl68gdYwaGq3VcQuWBWA9+vURxVNx6dWpuuDVqUqRxzDHS2BflwW34viOA3wlLoSI3roConNvV74C8NfodpNElTgAAAAASUVORK5CYII=" style=border-width:0></a>Work obtained from <a href=https://en.wikipedia.org/>Wikipedia</a>and licensed under a <a href=http://creativecommons.org/licenses/by-sa/3.0/us/>Creative Commons Attribution-ShareAlike 3.0 United States License</a></div></div></div></section><section class=mdl-layout__tab-panel id=AboutDwarvish><div class=page-content><h1 style=color:#ffffff00;height:1px;margin:0;padding:0>About Dwarvish</h1><a href=https://www.wikiwand.com/en/Cirth target=_blank class="mdl-js-ripple-effect mdl-button mdl-js-button mdl-button--colored mdl-button--fab fab" id=dwarvishArticle><i class=material-icons>open_in_new</i></a><div class="mdl-tooltip mdl-tooltip--left" for=dwarvishArticle>Open Wikipedia Article</div><p></p><a href=#DwarvishSummary class=mdl-chip type=button style="margin-left:16px"><span class=mdl-chip__text>Summary</span></a><a href=#DwarvishOrigin class=mdl-chip type=button><span class=mdl-chip__text>Origin</span></a><a href=#AngerthasMoria class=mdl-chip type=button><span class=mdl-chip__text>Angerthas Moria</span></a><a href=#AngerthasErebor class=mdl-chip type=button><span class=mdl-chip__text>Angerthas Erebor</span></a><div class="mdl-grid portfolio-max-width portfolio-contact"><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp"><div class=mdl-card__title><h2 class=mdl-card__title-text><a id=DwarvishSummary></a>Summary</h2></div><div class=mdl-card__supporting-text><p>The Cirth ([ˈkirθ]; plural of certh [ˈkɛrθ], in Sindarin meaning runes) are a semi-artificial script, with letters shaped on those of actual runic alphabets, invented by J. R. R. Tolkien for the constructed languages he devised and used in his works. Cirth is written with a capital letter when referring to the writing system; the runes themselves can be called cirth.<br>In the fictional history of Middle-earth, the original Certhas Daeron was created by the elf Daeron, and was later expanded into what was known as the Angerthas Daeron. Although the Cirth were later largely replaced by the Tengwar, they were adopted by Dwarves to write down their Khuzdul language, Angerthas Moria and Angerthas Erebor (used in this transcriber), because their straight lines were better suited to carving than the curved strokes of the Tengwar. Cirth was also adapted, in its oldest and simplest form, by various peoples including Men and even Orcs.</p></div></div><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp"><div class=mdl-card__title><h2 class=mdl-card__title-text><a id=DwarvishOrigin></a>Origin</h2></div><div class=mdl-card__supporting-text><p>During the Chaining of Melkor, the Sindar of Beleriand began developing an alphabet for their language. Its letters were entirely made for carving on wood, stone or metal, hence their angular forms and straight lines. These letters were named cirth (sing. certh). The corresponding Quenya words are certar ([ˈkɛrtɑr]) and certa ([ˈkɛrtɑ]). The assignment of values was unsystematic. The form of a certh consisted of a stem and a branch. The attachment of the branch was, if on one side only, usually made on the right side. The reverse was not infrequent, but had no phonetic significance. Two basic principles were followed:</p><ul><li>adding a stroke to a branch added voice;</li><li>placing the branch on both sides of the stem added voice and nasality.</li></ul><p>The elf Daeron, minstrel of king Thingol of Doriath reorganised the cirth and added new ones, being somehow inspired by Fëanor’s Tengwar (therefore this mustn’t have occurred before the return of the Noldor) and made the extension of the cirth known as Certhas Daeron (where “Certhas” means “runic alphabet”), used for inscribing names in Menegroth. The Dwarves working for Thingol liked them and adopted them, making them known also in the East.<br>Daeron’s alphabet was originally used by the Grey Elves (Sindar) in Beleriand. Later the Noldor in Eregion adopted the Cirth, added several more runes to the system and created the Angerthas Daeron (where “Angerthas” means “long rune-rows”) sometimes also referred to as Angerthas Eregion. These additional letters were used to represent sounds not found in Sindarin, but present in the tongues of other peoples. The Angerthas Daeron was used primarily for carved inscriptions. For most other forms of written communication the Tengwar were used.</p></div></div><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp"><div class=mdl-card__title><h2 class=mdl-card__title-text><a id=AngerthasMoria></a>Angerthas Moria</h2></div><div class=mdl-card__supporting-text><p>Dwarves first came to know the runes of the Noldor during the beginning of the Second Age. They modified them to suit the specific needs of their language, Khuzdul. The Dwarves spread their revised alphabet to Moria, where it came to be known as Angerthas Moria. The Dwarves developed both carved and pen-written forms of the runes. Travelling for trading, they spread their alphabet throughout Middle-earth: as a result, variations of Angerthas Moria were employed by other races for their languages.<br>These are the runes most often used in <em>The Lord of the Rings</em>.</p></div></div><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp"><div class=mdl-card__title><h2 class=mdl-card__title-text><a id=AngerthasErebor></a>Angerthas Erebor</h2></div><div class=mdl-card__supporting-text><p>According to Tolkien’s legendarium, after the Second Age, the Cirth were obsoleted by the Tengwar among the western races and remained in use only by Dwarves and Men. The Dwarves developed even pen-written cursive forms, since they used them exclusively in any form of writing communication, even in paper. At the beginning of the Third Age, the Dwarves were driven out of Moria. Some migrated to the Grey Mountains, some to the Iron Hills and Thráin I came to Erebor. There he founded his Dwarf-kingdom. There the Angerthas Moria was modified further and some new cirth were added, but some reverted to their Elvish usage, thus creating the Angerthas Erebor variation. This mode was used in Westron by Dwarves and is the mode used in <em>The Hobbit</em>and this transcriber.</p></div></div><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp" style=background-color:#f0f8ff><div class=mdl-card__title><h2 class=mdl-card__title-text>Credits</h2></div><div class=mdl-card__supporting-text>Page created and maintained by <a href=https://max.davy.engineer/ target=_blank>Max Davy</a><br>Site theme created with <a href=https://getmdl.io/ target=_blank>Material Design Lite</a><br>Site hosted on <a href=https://pages.github.com target=_blank>Github Pages</a><br><a href=http://creativecommons.org/licenses/by-sa/3.0/us/ rel=license><img alt="Creative Commons License" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAAfCAYAAABjyArgAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAdnJLH8AAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAABh9JREFUaN7tWltPG0cU9nOlIN55KFKRApWoSKu06kuClP4A+gPSUvU1alFbVYpEFYpIq6hVkUVF00rgRnkrFwPGgC/YBtv4srbXhpBXIvGQviF+wYm+s55ldlnbu951WjmMdOT1zOwZ+5sz37ns+oiox+fz0ZV4L0T4qH8JRzdpO75FkcQOxfdilEgnaC+bonQ+TQfFLOVLOSqUC6RUilRSFSpVS5qoCilqkYrlAs/B3Ew+zfcm0wnWFUlEWDfWCO1s0Pr2Gq2Fg7S6uUIroWWW5Y0lWlr/p2tEAvoC3GgyQrv7cUplkpTO7TNYhXKeAazUylQ9Uqn2rEqHx4d09FwTXNee1XgMcxRV4XtwL3SksknWCd1mkIPhVR1kANylIPuM4GZTbIE5JcfWCtAA6szDGbrzyR261nPt0lFAH8ZmfprhuZXDCm8KLDpTyLA17+7vGkDe2Fmnta2gBnJopaUV35+8T0NDQ5fWRh/G3ILRCf06wKAFGVwAU6oqbJX+OT/19fXZ5h3M9f/u53tBIbDmrA5yXKeLzUiINrY1kJtZ8dzjORocGtT1j46O0sTEBAuuRT/mYK5TEDqpXwcYPAlauAC3xJY49umYAbze3l4aHx+nqakpSiaTLLhGH8bkubg3k0tTuaaBDEsGXWicvENbsbCRKiysOPB0kXp6ejR9Y2N0cnJC5oY+jGEO5joBodP6dYDh0MCXoAVYrhlcgAcgz87OqFkLBAIGoLHrABkbho3DGnB8sVSUdna3NaqwsGLxA4VlYQPlJnlpw9piTbsAWOk/PT2lfC7Hgms3+nWAcXzhlMC5ONoyuCMjI5Y726hhE3CPbMnQCU7GGhdUIVnx1hoFN1cNNAHeE5b1/Pi4JcBowtLscKaV/qdPntA7b/cbJBqJtKXfAHCaqSHPDg2cK4PbymrtgAxOhuNjqsinKZnRrJi5OKpxsaAJAbBwOE42F3OFY2r15836YbEA9PZHH9OXn39B33/7nQ6yf3bWsX4DwGy9apGpQTg0HHVVVandBpAFXUAndCOEE1Yc39OsWI4oZJoQDsfccJzFxpmpA004Jjt/Xug/Pz+nwPxfDOZvP/+i61pcWOC+G8PvOdZvABj8WK6VORQTPx6c67YJ3oIghMMJEVycqIdtMk2YAYYnNzeLbMnQcI9dgIV+ADwwMMBgDg4OGvhYWPG/L1860m8AGBmaeqRyLCusV6YGRAvgH+weRAbfPDZbP06iCSuGbnAxMr5LNBEJadGExMOvE2C0cDhMw8PD/H+sAH5x8qJ9gOHccIRFEiEfPSxoFe8CzGAwaDkm3y+ONHQj4wMVZeshWywV42gCPCzCtf+CItDgzODkCvm83re8tKQD7IoiUE84PK7pP1y2QuGs+vv7meQBOK5x/MWYiDQAuBizogmk1SUDD8cM4ZoMcDMn18h63Tg5wbeQmR+nWd69fp2/P57/w52TQ+yLuoL44fIxacbJdvhaPgFYAzHxQfGgJcByGGUX4HbDNNEAqjlM++rePeZoV2Ha/xFgp4mG4Ea3iYZSVJgaIHL83Y5+xxQBx4fQDdcAVaYI85hbiuiqVLmZk2vmyOw4ObHzmpOr8lp2nJwMglyMwWZCP/TKyUy7xZ5O6r8UpokUGaGV+Zg3CtMAsug3j6HBouUwrSCFadFk4zCtq8qVItGQ02RzPOtlorFfTzRQuhSJRqOCT1cU3LMF61TZSR3A61S5qwCWiz2Lfy94X+yZ87NuFHuwlihZyoV3c7GnqwCGTD6Y1MuVdz+7awDZSdEHVm9ZrqwUafrh9Jv4dPniy8Q3X3MYVW2j4I4xzJEL7jc/vMnUgDgbG/iGPr43dvzwYJKTAYAsW3I7j4wAbrlaovk/592+X2CZZJjndGINt3p9Vp0Msqo99AQnO37oOSceeiquwTWDZ3XtBbh21/QEYEEX8mN7gNbqsT2eXPBje7wfUSl6RgutypVertGozuE5wJD3P7hBwY0gh3CIk1X9xZOa9OJJjfvkF0/WQkG6dfuWl68gdYwaGq3VcQuWBWA9+vURxVNx6dWpuuDVqUqRxzDHS2BflwW34viOA3wlLoSI3roConNvV74C8NfodpNElTgAAAAASUVORK5CYII=" style=border-width:0></a>Work obtained from <a href=https://en.wikipedia.org/>Wikipedia</a>and licensed under a <a href=http://creativecommons.org/licenses/by-sa/3.0/us/>Creative Commons Attribution-ShareAlike 3.0 United States License</a></div></div></div></section><section class=mdl-layout__tab-panel id=Songs><div class=page-content><h1 style=color:#ffffff00;height:1px;margin:0;padding:0>Tolkien Songs</h1><p></p><a href=#Durin class=mdl-chip type=button style="margin-left:16px"><span class=mdl-chip__text>Song of Durin</span></a><a href=#Mountain class=mdl-chip type=button><span class=mdl-chip__text>Song of the Lonely Mountain</span></a><a href=#Boromir class=mdl-chip type=button><span class=mdl-chip__text>Lament for Boromir</span></a><a href=#Elbereth class=mdl-chip type=button><span class=mdl-chip__text>Song to Elbereth</span></a><a href=#Road class=mdl-chip type=button><span class=mdl-chip__text>Roads Go Ever On</span></a><a href=#Ent class=mdl-chip type=button><span class=mdl-chip__text>The Ent and Entwife</span></a><a href=#Gandalf class=mdl-chip type=button><span class=mdl-chip__text>Lament for Gandalf</span></a><div class="mdl-grid portfolio-max-width portfolio-contact"><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp"><div class=mdl-card__supporting-text><p style="margin:0px">Songs and Poems on this page from J.R.R. Tolkien's works are protected by "fair use" under <a href=https://www.law.cornell.edu/uscode/text/17/107 target=_blank>Title 17 § 107</a>of the United States Code.</p></div></div><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp"><div class=mdl-card__title><h2 class=mdl-card__title-text id="Durin">Song of Durin</h2></div><div class=mdl-card__supporting-text><p>An excellent arrangement by <a href=https://www.youtube.com/channel/UCC8prZi7q1vnP0A3XX4EWxQ target=_blank>Clamavi De Profundis</a></p><iframe allow="autoplay; encrypted-media" allowfullscreen data-src="https://www.youtube-nocookie.com/embed/uxfoa23skHg?rel=0&showinfo=0" frameborder=0 height=315px src="" style=width:560px;height:315px title="Song of Durin - Clamavi de Profundis (video)" width=560px>Your browser didn't allow us to play this video<br>You can see it at <a href="https://www.youtube.com/watch?v=uxfoa23skHg"target=_blank>https://youtu.be/uxfoa23skHg</a></iframe><p>The world was young, the mountains green,<br>No stain yet on the Moon was seen,<br>No words were laid on stream or stone<br>When Durin woke and walked alone.<br>He named the nameless hills and dells;<br>He drank from yet untasted wells; <br>He stooped and looked in Mirrormere,<br>And saw a crown of stars appear,<br>As gems upon a silver thread,<br>Above the shadows of his head.<br><br>The world was fair, the mountains tall,<br>In Elder Days before the fall<br>Of mighty kings in Nargothrond<br>And Gondolin, who now beyond<br>The Western Seas have passed away:<br>The world was fair in Durin's Day.<br><br>A king he was on carven throne<br>In many-pillared halls of stone<br>With golden roof and silver floor,<br>And runes of power upon the door.<br>The light of sun and star and moon<br>In shining lamps of crystal hewn<br>Undimmed by cloud or shade of night<br>There shone for ever fair and bright.<br><br>There hammer on the anvil smote<br>There chisel clove, and graver wrote;<br>There forged was blade, and bound was hilt;<br>The delver mined, the mason built.<br>There beryl, pearl, and opal pale, <br>And metal wrought like fishes' mail, <br>Buckler and corslet, axe and sword,<br>And shining spears were laid in hoard.<br><br>Unwearied then were Durin's folk;<br>Beneath the mountains music woke:<br>The harpers harped, the minstrels sang,<br>And at the gates the trumpets rang.<br><br>The world is grey, the mountains old,<br>The forge's fire is ashen-cold;<br>No harp is wrung, no hammer falls:<br>The darkness dwells in Durin's halls;<br>The shadow lies upon his tomb<br>In Moria, in Khazad-dûm.<br>But still the sunken stars appear<br>In dark and windless Mirrormere;<br>There lies his crown in water deep,<br>Till Durin wakes again from sleep.<br></p></div></div><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp"><div class=mdl-card__title><h2 class=mdl-card__title-text id="Durin">Song of Durin</h2></div><div class=mdl-card__supporting-text><p>Another excellent arrangement by <a href=https://www.youtube.com/channel/UCC8prZi7q1vnP0A3XX4EWxQ target=_blank>Clamavi De Profundis</a><br>Note that the first and last verses of <a href=#Durin>Song of Durin</a>are inserted after verse 9</p><iframe allow="autoplay; encrypted-media" allowfullscreen data-src="https://www.youtube-nocookie.com/embed/LY0lLcz3Qis?rel=0&showinfo=0" frameborder=0 height=315px src="" style=width:560px;height:315px title="Song of the Lonely Mountain - Clamavi de Profundis (video)" width=560px>Your browser didn't allow us to play this video.<br>You can see it at <a href="https://www.youtube.com/watch?v=LY0lLcz3Qis"target=_blank>https://youtu.be/LY0lLcz3Qis</a></iframe><p>Far over the misty mountains cold<br>To dungeons deep and caverns old<br>We must away ere break of day<br>To seek the pale enchanted gold.<br><br>The dwarves of yore made mighty spells,<br>While hammers fell like ringing bells <br>In places deep, where dark things sleep,<br>In hollow halls beneath the fells.<br><br>For ancient king and elvish lord<br>There many a gleaming golden hoard<br>They shaped and wrought, and light they caught<br>To hide in gems on hilt of sword.<br><br>On silver necklaces they strung<br>The flowering stars, on crowns they hung<br>The dragon-fire, in twisted wire<br>They meshed the light of moon and sun.<br><br>Far over the misty mountains cold <br>To dungeons deep and caverns old<br>We must away, ere break of day,<br>To claim our long-forgotten gold.<br><br>Goblets they carved there for themselves<br>And harps of gold; where no man delves<br>There lay they long, and many a song<br>Was sung unheard by men or elves.<br><br>The pines were roaring on the height,<br>The winds were moaning in the night.<br>The fire was red, it flaming spread;<br>The trees like torches blazed with light. <br><br>The bells were ringing in the dale<br>And men they looked up with faces pale;<br>The dragon’s ire more fierce than fire<br>Laid low their towers and houses frail.<br><br>The mountain smoked beneath the moon;<br>The dwarves they heard the tramp of doom.<br>They fled their hall to dying fall<br>Beneath his feet, beneath the moon.<br><br>Far over the misty mountains grim<br>To dungeons deep and caverns dim<br>We must away, ere break of day,<br>To win our harps and gold from him!<br><br>The wind was on the withered heath,<br>but in the forest stirred no leaf:<br>there shadows lay be night or day,<br>and dark things silent crept beneath. <br>The wind came down from mountains cold,<br>and like a tide it roared and rolled;<br>the branches groaned, the forest moaned,<br>and leaves were laid upon the mould.<br><br>The wind went on from West to East;<br>all movement in the forest ceased,<br>but shrill and harsh across the marsh<br>its whistling voices were released.<br><br>The grasses hissed, their tassels bent,<br>the reeds were rattling--on it went<br>o'er shaken pool under heavens cool<br>where racing clouds were torn and rent.<br><br>It passed the Lonely Mountain bare<br>and swept above the dragon's lair:<br>there black and dark lay boulders stark<br>and flying smoke was in the air. <br><br>It left the world and took its flight<br>over the wide seas of the night.<br>The moon set sail upon the gale,<br>and stars were fanned to leaping light.<br><br>Under the Mountain dark and tall<br>The King has come unto his hall!<br>His foe is dead, the Worm of Dread,<br>And ever so his foes shall fall.<br>The sword is sharp, the spear is long,<br>The arrow swift, the Gate is strong;<br>The heart is bold that looks on gold; <br>The dwarves no more shall suffer wrong.<br><br>The dwarves of yore made mighty spells,<br>While hammers fell like ringing bells<br>In places deep, where dark things sleep,<br>In hollow halls beneath the fells.<br><br>On silver necklaces they strung<br>The light of stars, on crowns they hung<br>The dragon-fire, from twisted wire<br>The melody of harps they wrung.<br><br>The mountain throne once more is freed!<br>O! wandering folk, the summons heed! <br>Come haste! Come haste! across the waste!<br>The king of friend and kin has need.<br><br>Now call we over the mountains cold,<br>‘Come back unto the caverns old’!<br>Here at the Gates the king awaits,<br>His hands are rich with gems and gold.<br><br>The king is come unto his hall<br>Under the Mountain dark and tall.<br>The Worm of Dread is slain and dead,<br>And ever so our foes shall fall!</p></div></div><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp"><div class=mdl-card__title><h2 class=mdl-card__title-text id=Boromir>Lament for Boromir</h2></div><div class=mdl-card__supporting-text><p>Yet another excellent arrangement by <a href=https://www.youtube.com/channel/UCC8prZi7q1vnP0A3XX4EWxQ target=_blank>Clamavi De Profundis</a></p><iframe allow="autoplay; encrypted-media" allowfullscreen data-src="https://www.youtube-nocookie.com/embed/2F9ADVDSZLw?rel=0&showinfo=0" frameborder=0 height=315px src="" style=width:560px;height:315px title="Song of Durin - Clamavi de Profundis (video)" width=560px>Your browser didn't allow us to play this video<br>You can see it at <a href="https://www.youtube.com/watch?v=2F9ADVDSZLw"target=_blank>https://youtu.be/2F9ADVDSZLw</a></iframe><p>Aragorn:<br>Through Rohan over fen and field where the long grass grows<br>The West Wind comes walking, and about the walls it goes.<br>‘What news from the West, O wandering wind, do you bring to me tonight?<br>Have you seen Boromir the Tall by moon or by starlight?<br>‘I saw him ride over seven streams, over waters wide and grey,<br>I saw him walk in empty lands until he passed away<br>Into the shadows of the North, I saw him then no more.<br>The North Wind may have heard the horn of the son of Denethor,<br>‘O Boromir! From the high walls westward I looked afar,<br>But you came not from the empty lands where no men are.’<br><br>Legolas:<br>From the mouths of the Sea the South Wind flies, from the sandhills and the stones,<br>The wailing of the gulls it bears, and at the gate it moans.<br>‘What news from the South, O sighing wind, do you bring to me at eve? <br>Where now is Boromir the Fair? He tarries and I grieve.<br>‘Ask not of me where he doth dwell – so many bones there lie,<br>On the white shores and the dark shores under the stormy sky,<br>So many have passed down Anduin to find the flowing Sea.<br>Ask of the North Wind news of them the North Wind sends to me!’<br>‘O Boromir! Beyond the gate the seaward road runs south,<br>But you came not with the wailing gulls from the grey sea’s mouth’.<br><br>Aragorn:<br>From the Gate of the Kings the North Wind rides, and past the roaring falls,<br>And clear and cold about the tower its loud horn calls.<br>‘What news from the North, O mighty wind, do you bring to me today?<br>What news of Boromir the bold? For he is long away.’<br>‘Beneath Amon Hen I heard his cry. There many foes he fought,<br>His cloven shield, his broken sword, they to the water brought. <br>His head so proud, his face so fair, his limbs they laid to rest,<br>And Rauros, golden Rauros-falls, bore him upon its breast.<br>‘O Boromir! The Tower of Guard shall ever northward gaze,<br>To Rauros, golden Rauros-falls, until the end of days.<br></p></div></div><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp"><div class=mdl-card__title><h2 class=mdl-card__title-text id=Elbereth>Hymn to Elbereth</h2></div><div class=mdl-card__supporting-text><p>Snow-white! Snow-white! O Lady clear!<br>O Queen beyond the Western Seas!<br>O light to us that wander here<br>Amid the world of woven trees!<br><br>Gilthoniel! O Elbereth!<br>Clear are thy eyes and bright thy breath!<br>Snow-white! Snow-white! We sing to thee<br>In a far land beyond the sea.<br><br>O Stars that in the Sunless Year<br>With shining hand by her were sown,<br>In windy fields now bright and clear<br>We see you silver blossom blown! <br><br>O Elbereth! Gilthoniel!<br>We still remember, we who dwell<br>In this far land beneath the trees,<br>Thy starlight on the Western Seas.</p></div></div><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp"><div class=mdl-card__title><h2 class=mdl-card__title-text id=Road>Roads Go Ever On</h2></div><div class=mdl-card__supporting-text><p><a href=https://www.youtube.com/channel/UCC8prZi7q1vnP0A3XX4EWxQ target=_blank>Clamavi De Profundis</a>did this one too!</p><iframe allow="autoplay; encrypted-media" allowfullscreen data-src="https://www.youtube-nocookie.com/embed/9B6dsfGazyI?rel=0&showinfo=0" frameborder=0 height=315px src="" style=width:560px;height:315px title="Roads Go Ever On - Clamavi de Profundis (video)" width=560px>Your browser didn't allow us to play this video<br>You can see it at <a href="https://www.youtube.com/watch?v=9B6dsfGazyI"target=_blank>https://youtu.be/9B6dsfGazyI</a></iframe><p>Roads go ever ever on,<br>Over rock and under tree,<br>By caves where never sun has shone,<br>By streams that never find the sea;<br>Over snow by winter sown,<br>And through the merry flowers of June,<br>Over grass and over stone, <br>And under mountains in the moon.<br><br>Roads go ever ever on<br>Under cloud and under star,<br>Yet feet that wandering have gone<br>Turn at last to home afar.<br>Eyes that fire and sword have seen <br>And horror in the halls of stone<br>Look at last on meadows green<br>And trees and hills they long have known.<br><br>The Road goes ever on and on<br>Out from the door where it began.<br>Now far ahead the Road has gone, <br>Let others follow it who can!<br>Let them a journey new begin,<br>But I at last with weary feet<br>Will turn towards the lighted inn,<br>My evening-rest and sleep to meet.</p></div></div><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp"><div class=mdl-card__title><h2 class=mdl-card__title-text id=Ent>The Ent and Entwife</h2></div><div class=mdl-card__supporting-text><p><a href=https://www.youtube.com/channel/UCC8prZi7q1vnP0A3XX4EWxQ target=_blank>Clamavi De Profundis</a>is awesome.</p><iframe allow="autoplay; encrypted-media" allowfullscreen data-src="https://www.youtube-nocookie.com/embed/NNL8zG0hsB0?rel=0&showinfo=0" frameborder=0 height=315px src="" style=width:560px;height:315px title="The Ent and Entwife - Clamavi de Profundis (video)" width=560px>Your browser didn't allow us to play this video<br>You can see it at <a href="https://www.youtube.com/watch?v=NNL8zG0hsB0"target=_blank>https://youtu.be/NNL8zG0hsB0</a></iframe><p><em>Ent:</em><br>When Spring unfolds the beechen leaf, and sap is in the bough;<br>When light is on the wild-wood stream, and wind is on the brow;<br>When stride is long, and breath is deep, and keen the mountain-air,<br>Come back to me! Come back to me, and say my land is fair!<br><em>Entwife:</em><br>When Spring is come to garth and field, and corn is in the blade;<br>When blossom like a shining snow is on the orchard laid;<br>When shower and Sun upon the Earth with fragrance fill the air,<br>I'll linger here, and will not come, because my land is fair.<br><em>Ent:</em><br>When Summer lies upon the world, and in a noon of gold<br>Beneath the roof of sleeping leaves the dreams of trees unfold;<br>When woodland halls are green and cool, and wind is in the West,<br>Come back to me! Come back to me, and say my land is best!<br><em>Entwife:</em><br>When Summer warms the hanging fruit and burns the berry brown; <br>When Straw is gold, and ear is white, and harvest comes to town;<br>When honey spills, and apple swells, though wind be in the West,<br>I'll linger here beneath the Sun, because my land is best!<br><em>Ent:</em><br>When Winter comes, the winter wild that hill and wood shall slay;<br>When trees shall fall and starless night devour the sunless day;<br>When wind is in the deadly East, then in the bitter rain<br>I'll look for thee, and call to thee; I'll come to thee again! <br><em>Entwife:</em><br>When Winter comes, and singing ends; when darkness falls at last;<br>When broken is the barren bough, and light and labour past;<br>I'll look for thee, and wait for thee, until we meet again: <br>Together we will take the road beneath the bitter rain!<br><em>Both:</em><br>Together we will take the road that leads into the West,<br>And far away will find a land where both our hearts may rest.</p></div></div><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp"><div class=mdl-card__title><h2 class=mdl-card__title-text id=Gandalf>Lament for Gandalf</h2></div><div class=mdl-card__supporting-text><p>When evening in the Shire was grey<br>his footsteps on the Hill were heard;<br>before the dawn he went away<br>on journey long without a word.<br><br>From Wilderland to Western shore,<br>from northern waste to southern hill, <br>through dragon-lair and hidden door<br>and darkling woods he walked at will.<br><br>With Dwarf and Hobbit, Elves and Men,<br>with mortal and immortal folk,<br>with bird on bough and beast in den,<br>in their own secret tongues he spoke.<br><br>A deadly sword, a healing hand,<br>a back that bent beneath its load;<br>a trumpet-voice, a burning brand,<br>a weary pilgrim on the road. <br><br>A lord of wisdom throned he sat,<br>swift in anger, quick to laugh;<br>an old man in a battered hat<br>who leaned upon a thorny staff.<br><br>He stood upon the bridge alone<br>and Fire and Shadow both defied; <br>his staff was broken on the stone,<br>in Khazad-dûm his wisdom died.</p></div></div><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp" style=background-color:#f0f8ff><div class=mdl-card__title><h2 class=mdl-card__title-text>Credits</h2></div><div class=mdl-card__supporting-text>Page created and maintained by <a href=https://max.davy.engineer/ target=_blank>Max Davy</a><br>Site theme created with <a href=https://getmdl.io/ target=_blank>Material Design Lite</a><br>Site hosted on <a href=https://pages.github.com target=_blank>Github Pages</a><br>Poems and songs written by J.R.R. Tolkien</div></div></div></div></section><section class=mdl-layout__tab-panel id=Maps><div class=page-content><h1 style=color:#ffffff00;height:1px;margin:0;padding:0>Middle-Earth Maps</h1><p></p><a href=#map1 class=mdl-chip type=button style="margin-left:16px"><span class=mdl-chip__text>The Wilderland</span></a><a href=#map2 class=mdl-chip type=button><span class=mdl-chip__text>Thror's Map</span></a><a href=#map3 class=mdl-chip type=button><span class=mdl-chip__text>Middle-Earth</span></a><div class="mdl-grid portfolio-max-width portfolio-contact"><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp"><div class=mdl-card__supporting-text><p style="margin:0px">Maps on this page from <a href=http://www.isbnsearch.org/isbn/0618002219 target=_blank><i>The Hobbit</i></a>and <a href=http://www.isbnsearch.org/isbn/0618129014 target=_blank><i>The Lord of the Rings</i></a>are protected by "fair use" under <a href=https://www.law.cornell.edu/uscode/text/17/107 target=_blank>Title 17 § 107</a>of the United States Code.</p></div></div><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp"><div class=mdl-card__title><h2 class=mdl-card__title-text>The Wilderland</h2></div><div class="mdl-card__media"><a href=./maps/Wilderland.jpg target=_blank class=imageLink><img alt="The Wilderland. Click to open in new tab." src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCABQAGQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9/KKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD/9k=" class="article-image" data-src=./maps/Wilderland.jpg height=auto id=map1 width=100%></a><div class=mdl-tooltip for=map1>The Wilderland Map<br>Click to view in new tab</div></div></div><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp"><div class=mdl-card__title><h2 class=mdl-card__title-text>Thror's Map</h2></div><div class="mdl-card__media"><a href="./maps/Thror's Map.jpg" target=_blank class=imageLink><img alt="Thror's Map. Click to open in new tab." src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCABMAGQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9/KKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD/9k=" class="article-image" data-src="./maps/Thror's Map.jpg" height=auto id=map2 width=100%></a><div class=mdl-tooltip for=map2>Thror's Map<br>Click to view in new tab</div></div></div><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp"><div class=mdl-card__title><h2 class=mdl-card__title-text>Middle-Earth</h2></div><div class="mdl-card__media"><a href=./maps/MiddleEarth.jpg target=_blank class=imageLink><img alt="Middle-Earth. Click to open in new tab." src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCABIAGQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9/KKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD/9k=" class="article-image" data-src=./maps/MiddleEarth.jpg height=auto id=map3 width=100%></a><div class=mdl-tooltip for=map3>Middle Earth Map<br>Click to view in new tab</div></div></div><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp" style=background-color:#f0f8ff><div class=mdl-card__title><h2 class=mdl-card__title-text>Credits</h2></div><div class=mdl-card__supporting-text>Page created and maintained by <a href=https://max.davy.engineer/ target=_blank>Max Davy</a><br>Site theme created with <a href=https://getmdl.io/ target=_blank>Material Design Lite</a><br>Site hosted on <a href=https://pages.github.com target=_blank>Github Pages</a><br>Maps by J.R.R. Tolkien from The Hobbit and Lord of the Rings</div></div></div></div></section><section class=mdl-layout__tab-panel id=Fonts><div class=page-content><h1 style=color:#ffffff00;height:1px;margin:0;padding:0>Elvish and Dwarvish Fonts</h1><a href=dwarvishregular.ttf class="mdl-js-ripple-effect mdl-button mdl-js-button mdl-button--colored mdl-button--fab fab" id=dwarvishFont><i class=dwarvishfont style=position:relative;top:12px>D</i></a><div class="mdl-tooltip mdl-tooltip--left" for=dwarvishFont>Download Dwarvish font</div><a href=tengwarfeanorregular.ttf class="mdl-js-ripple-effect mdl-button mdl-js-button mdl-button--colored mdl-button--fab fab2" id=elvishFont><i class=elvishfont style=position:relative;top:5px>D</i></a><div class="mdl-tooltip mdl-tooltip--left" for=elvishFont>Download Elvish font</div><div class="mdl-grid portfolio-max-width portfolio-contact"><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp"><div class=mdl-card__title><h2 class=mdl-card__title-text>Installation Instructions</h2></div><div class=mdl-card__supporting-text style="padding-top:0px; padding-bottom:0px;"><p>Download the desired TTF font file using the links below, then skip to the section for your operating system.</p></div><div class="mdl-card__actions"><a href=dwarvishregular.ttf class="mdl-js-ripple-effect mdl-button mdl-js-button mdl-button--accent inline" id=dwarvishFontLink>Dwarvish Font</a><a href=tengwarfeanorregular.ttf class="mdl-js-ripple-effect mdl-button mdl-js-button mdl-button--accent inline" id=elvishFontLink>Elvish Font</a></div></div><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp"><div class=mdl-card__title><h2 class=mdl-card__title-text>Windows</h2></div><div class=mdl-card__supporting-text style="padding-top:0px"><ol><li>Right-click the downloaded font file</li><li>Select “Install”</li></ol></div></div><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp"><div class=mdl-card__title><h2 class=mdl-card__title-text>Mac OS</h2></div><div class=mdl-card__supporting-text style="padding-top:0px"><ol><li>Double-click the downloaded font file to preview it</li><li>Click Install Font in the preview window to install it</li></ol></div></div><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp"><div class=mdl-card__title><h2 class=mdl-card__title-text>Linux</h2></div><div class=mdl-card__supporting-text style="padding-top:0px"><p>Different Linux distributions come with different desktop environments, and those different desktop environments contain different applications for this.</p><ol><li>Double-click the downloaded font file to preview it</li><li>On Ubuntu or other GNOME-based distributions, GNOME Font Viewer will open</li><li>Click the Install button to install the font for your user account</li></ol></div></div><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp" style=background-color:#f0f8ff><div class=mdl-card__title><h2 class=mdl-card__title-text>Credits</h2></div><div class=mdl-card__supporting-text>Page created and maintained by <a href=https://max.davy.engineer/ target=_blank>Max Davy</a><br>Site theme created with <a href=https://getmdl.io/ target=_blank>Material Design Lite</a><br>Site hosted on <a href=https://pages.github.com target=_blank>Github Pages</a><br>Fonts created with <a href=https://birdfont.org/ target=_blank>Birdfont</a>, a free font editor by Johan Mattsson<br>Elvish glyphs originally from <a href=http://www.dafont.com/tengwar-annatar.font target=_blank>Tengwar Annatar</a>by Johan Winge</div></div></div></div></section><section class=mdl-layout__tab-panel id=Apps><div class=page-content><script type=application/ld+json>{ "@context": "http://schema.org/", "@type": "Product", "name": "Tengwar Feanor Elvish Transcriber", "image": "https://tengwartranscriber.github.io/images/ElvishTranscriberDesktop.png", "logo": "https://tengwartranscriber.github.io/icons/ms.png", "description": "Easy tool for transcribing to Elvish and Dwarvish, maps and songs from Tolkien's works, Elvish and Dwarvish font downloads, history of the languages, and more.", "mpn": "925223", "brand":{ "@type": "Thing", "name": "Max Davy"}, "aggregateRating":{ "@type": "AggregateRating", "ratingValue": "4.5", "reviewCount": "3"}, "offers":{ "@type": "Offer", "price": "0.00", "priceCurrency": "USD"}} </script><script type=application/ld+json>{ "@context": "http://schema.org", "@type": "SoftwareApplication", "name": "Tengwar Feanor Elvish Transcriber", "operatingSystem": "ANDROID", "applicationCategory": "http://schema.org/SoftwareApplication", "screenshot": "https://tengwartranscriber.github.io/images/ElvishTranscriber.png", "image": "https://tengwartranscriber.github.io/icons/ms.png", "description": "Easy tool for transcribing to Elvish and Dwarvish, maps and songs from Tolkien's works, Elvish and Dwarvish font downloads, history of the languages, and more.", "aggregateRating":{ "@type": "AggregateRating", "ratingValue": "4.5", "ratingCount": "3"}, "offers":{ "@type": "Offer", "price": "0.00", "priceCurrency": "USD"}} </script><script type=application/ld+json>{ "@context": "http://schema.org", "@type": "SoftwareApplication", "name": "Tengwar Feanor Elvish Transcriber", "operatingSystem": "Windows", "applicationCategory": "http://schema.org/SoftwareApplication", "screenshot": "https://tengwartranscriber.github.io/images/ElvishTranscriberDesktop.png", "image": "https://tengwartranscriber.github.io/icons/ms.png", "description": "Easy tool for transcribing to Elvish and Dwarvish, maps and songs from Tolkien's works, Elvish and Dwarvish font downloads, history of the languages, and more.", "aggregateRating":{ "@type": "AggregateRating", "ratingValue": "4.5", "ratingCount": "3"}, "offers":{ "@type": "Offer", "price": "0.00", "priceCurrency": "USD"}} </script><h1 style=color:#ffffff00;height:1px;margin:0;padding:0>Tengwar Transcriber Apps</h1><a id=windowsApp class="mdl-js-ripple-effect mdl-button mdl-js-button mdl-button--colored mdl-button--fab fab" onclick='window.open("https://drive.google.com/file/d/0B_psIC-BvyqBcC1tUVdzNUNOMk0/view?usp=sharing","_blank","width=650,height=350,status=no,toolbar-no,menubar=no,")'><i class=material-icons>desktop_windows</i></a><div class="mdl-tooltip mdl-tooltip--left" for=windowsApp>Download free Windows app</div><a id=androidApp class="mdl-js-ripple-effect mdl-button mdl-js-button mdl-button--colored mdl-button--fab fab2" onclick='window.open("https://drive.google.com/file/d/0B_psIC-BvyqBQWpQRksxSjQxd0U/view?usp=sharing","_blank","width=500,height=200,status=no,toolbar-no,menubar=no,")'><i class=material-icons>android</i></a><div class="mdl-tooltip mdl-tooltip--left" for=androidApp>Download free Android app</div><p></p><a href=#WindowsApp class=mdl-chip type=button style="margin-left:16px"><span class=mdl-chip__text>Windows</span></a><a href=#AndroidApp class=mdl-chip type=button><span class=mdl-chip__text>Android</span></a><div class="mdl-grid portfolio-max-width portfolio-contact"><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp"><div class=mdl-card__title><h2 class=mdl-card__title-text id=WindowsApp>Windows App</h2></div><div class=mdl-card__supporting-text style="padding-top:0px; padding-bottom:0px;"><p>Features:</p><ul><li>Elvish Transcriber</li><li>Dwarvish Transcriber</li><li>Articles on Elvish and Dwarvish</li><li>Middle-Earth Maps (including save to file system)</li><li>Save transcription as image</li><li>Works offline</li><li>Portable installation (no installers)</li><li>Automated Font Install</li><li>Persistent transcription: your transcription is still there after you close the app</li></ul><p>Installation Instructions:</p><ol><li>Download zip file (links above and at bottom right)</li><li>Unzip the downloaded file</li><li>Launch "Tengwar Transcriber.exe"</li><li>You can put "Tengwar Transcriber.exe" (the application) and "Tengwartranscriber.exe.config" (the application settings) anywhere, as long as they are both in the same directory</li><li>You can create a shortcut to the file if you want (right-click file, click Create Shortcut)</li></ol></div><div class="mdl-card__actions"><a id=windowsLink class="mdl-js-ripple-effect mdl-button mdl-js-button mdl-button--accent" onclick='window.open("https://drive.google.com/file/d/0B_psIC-BvyqBcC1tUVdzNUNOMk0/view?usp=sharing","_blank","width=650,height=350,status=no,toolbar-no,menubar=no,")'>Download Windows App</a></div><div class=mdl-card__supporting-text style="padding-top:0px; padding-bottom:0px;"><p>Screenshots:</p></div><div class="mdl-grid portfolio-max-width portfolio-contact"><div class="mdl-cell mdl-cell--4-col mdl-card mdl-shadow--4dp"><div class="mdl-card__media"><a href=images/ElvishTranscriberDesktop.png target=_blank class="mdl-card__media" title="Elvish Transcriber"><img alt="Screenshot 1" class="article-image" data-src=./images/ElvishTranscriberDesktop.png height=auto width=100%></a></div></div><div class="mdl-cell mdl-cell--4-col mdl-card mdl-shadow--4dp"><div class="mdl-card__media"><a href=images/DwarvishTranscriberDesktop.png target=_blank class="mdl-card__media" title="Dwarvish Transcriber"><img alt="Screenshot 2" class="article-image" data-src=./images/DwarvishTranscriberDesktop.png height=auto width=100%></a></div></div><div class="mdl-cell mdl-cell--4-col mdl-card mdl-shadow--4dp"><div class="mdl-card__media"><a href=images/AboutElvishDesktop.png target=_blank class="mdl-card__media" title="About Elvish"><img alt="Screenshot 3" class="article-image" data-src=./images/AboutElvishDesktop.png height=auto width=100%></a></div></div><div class="mdl-cell mdl-cell--4-col mdl-card mdl-shadow--4dp"><div class="mdl-card__media"><a href=images/AboutDwarvishDesktop.png target=_blank class="mdl-card__media" title="About Dwarvish"><img alt="Screenshot 4" class="article-image" data-src=./images/AboutDwarvishDesktop.png height=auto width=100%></a></div></div><div class="mdl-cell mdl-cell--4-col mdl-card mdl-shadow--4dp"><div class="mdl-card__media"><a href=images/MapsDesktop.png target=_blank class="mdl-card__media" title="Maps"><img alt="Screenshot 5" class="article-image" data-src=./images/MapsDesktop.png height=auto width=100%></a></div></div><div class="mdl-cell mdl-cell--4-col mdl-card mdl-shadow--4dp"><div class="mdl-card__media"><a href=images/SaveImageDesktop.png target=_blank class="mdl-card__media" title="Save Image"><img alt="Screenshot 6" class="article-image" data-src=./images/SaveImageDesktop.png height=auto width=100%></a></div></div><div class="mdl-cell mdl-cell--4-col mdl-card mdl-shadow--4dp"><div class="mdl-card__media"><a href=images/AboutScreenDesktop.png target=_blank class="mdl-card__media" title="About"><img alt="Screenshot 7" class="article-image" data-src=./images/AboutScreenDesktop.png height=auto width=100%></a></div></div><div class="mdl-cell mdl-cell--4-col mdl-card mdl-shadow--4dp"><div class="mdl-card__media"><a href=images/FontsDesktop.png target=_blank class="mdl-card__media" title="Fonts"><img alt="Screenshot 8" class="article-image" data-src=./images/FontsDesktop.png height=auto width=100%></a></div></div></div></div><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp"><div class=mdl-card__title><h2 class=mdl-card__title-text id=AndroidApp>Android App (Beta)</h2></div><div class=mdl-card__supporting-text style="padding-top:0px; padding-bottom:0px;"><p>Features:</p><ul><li>Elvish Transcriber</li><li>Dwarvish Transcriber</li><li>Articles on Elvish and Dwarvish</li><li>Save transcription as image</li><li>Works offline</li><li>Persistent transcription: your transcription is still there after you close the app</li></ul><p>Installation Instructions:</p><ol><li>Download apk file (links above and at bottom right)</li><li>Transfer the file to your Android device</li><li>Go to Settings>Developer on your Android device and allow installation of apps from unauthenticated sources</li><li>Find the apk file on your phone and launch it</li><li>The application should now be installed!</li></ol></div><div class="mdl-card__actions"><a id=androidLink class="mdl-js-ripple-effect mdl-button mdl-js-button mdl-button--accent" onclick='window.open("https://drive.google.com/file/d/0B_psIC-BvyqBQWpQRksxSjQxd0U/view?usp=sharing","_blank","width=500,height=200,status=no,toolbar-no,menubar=no,")'>Download Android App</a></div><div class=mdl-card__supporting-text style="padding-top:0px; padding-bottom:0px;"><p>Screenshots:</p></div><div class="mdl-grid portfolio-max-width portfolio-contact"><div class="mdl-cell mdl-cell--3-col mdl-card mdl-shadow--4dp"><div class="mdl-card__media"><a href=images/ElvishTranscriber.png target=_blank class="mdl-card__media" title="Elvish Transcriber"><img alt="Screenshot 1" class="article-image" data-src=./images/ElvishTranscriber.png height=auto width=100%></a></div></div><div class="mdl-cell mdl-cell--3-col mdl-card mdl-shadow--4dp"><div class="mdl-card__media"><a href=images/DwarvishTranscriber.png target=_blank class="mdl-card__media" title="Dwarvish Transcriber"><img alt="Screenshot 2" class="article-image" data-src=./images/DwarvishTranscriber.png height=auto width=100%></a></div></div><div class="mdl-cell mdl-cell--3-col mdl-card mdl-shadow--4dp"><div class="mdl-card__media"><a href=images/AboutElvish.png target=_blank class="mdl-card__media" title="About Elvish"><img alt="Screenshot 3" class="article-image" data-src=./images/AboutElvish.png height=auto width=100%></a></div></div><div class="mdl-cell mdl-cell--3-col mdl-card mdl-shadow--4dp"><div class="mdl-card__media"><a href=images/AboutDwarvish.png target=_blank class="mdl-card__media" title="About Dwarvish"><img alt="Screenshot 4" class="article-image" data-src=./images/AboutDwarvish.png height=auto width=100%></a></div></div><div class="mdl-cell mdl-cell--3-col mdl-card mdl-shadow--4dp"><div class="mdl-card__media"><a href=images/Website.png target=_blank class="mdl-card__media" title="Website"><img alt="Screenshot 5" class="article-image" data-src=./images/Website.png height=auto width=100%></a></div></div><div class="mdl-cell mdl-cell--3-col mdl-card mdl-shadow--4dp"><div class="mdl-card__media"><a href=images/SaveImage.png target=_blank class="mdl-card__media" title="Save Image"><img alt="Screenshot 6" class="article-image" data-src=./images/SaveImage.png height=auto width=100%></a></div></div><div class="mdl-cell mdl-cell--3-col mdl-card mdl-shadow--4dp"><div class="mdl-card__media"><a href=images/SavedImage.png target=_blank class="mdl-card__media" title="Saved Image"><img alt="Screenshot 7" class="article-image" data-src=./images/SavedImage.png height=auto width=100%></a></div></div><div class="mdl-cell mdl-cell--3-col mdl-card mdl-shadow--4dp"><div class="mdl-card__media"><a href=images/AboutScreen.png target=_blank class="mdl-card__media" title="About"><img alt="Screenshot 8" class="article-image" data-src=./images/AboutScreen.png height=auto width=100%></a></div></div><div class="mdl-cell mdl-cell--3-col mdl-card mdl-shadow--4dp"><div class="mdl-card__media"><a href=images/Keyboard.png target=_blank class="mdl-card__media" title="Keyboard"><img alt="Screenshot 9" class="article-image" data-src=./images/Keyboard.png height=auto width=100%></a></div></div></div></div><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp" style=background-color:#f0f8ff><div class=mdl-card__title><h2 class=mdl-card__title-text>Credits</h2></div><div class=mdl-card__supporting-text>Page created and maintained by <a href=https://max.davy.engineer/ target=_blank>Max Davy</a><br>Site theme created with <a href=https://getmdl.io/ target=_blank>Material Design Lite</a><br>Site hosted on <a href=https://pages.github.com target=_blank>Github Pages</a><br>Android App created with <a href=https://thunkable.com/ target=_blank>Thunkable</a><br>Windows App created with <a href=https://www.visualstudio.com/ target=_blank>Visual Studio 2017</a></div></div></div></div></section><section class=mdl-layout__tab-panel id=AboutSite><div class=page-content><h1 style=color:#ffffff00;height:1px;margin:0;padding:0>About</h1><br><p></p><a href=#AboutFeatures class=mdl-chip type=button><span class=mdl-chip__text>Features</span></a><a href=#BehindTheScenes class=mdl-chip type=button><span class=mdl-chip__text>Behind the Scenes</span></a><a href=#AboutMe class=mdl-chip type=button><span class=mdl-chip__text>About Me</span></a><div class="mdl-grid portfolio-max-width portfolio-contact"><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp"><div class=mdl-card__title><h2 class=mdl-card__title-text>Features</h2></div><div class=mdl-card__supporting-text style="padding-top:0px; padding-bottom:0px;"><ul><li>Transcribe English to Elvish, including proper digraphs such as <font class=elvishfont>sh</font>' for 'sh', ' <font class=elvishfont>ng</font>' for 'ng'</li><li>Transcribe English to Dwarvish</li><li>Export transcriptions as PNG</li><li>Android and Windows apps for offline use</li><li>Site works offline on supported devices</li><li>Font downloads</li><li>Middle-earth maps</li></ul></div></div><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp"><div class=mdl-card__title><h2 class=mdl-card__title-text id=BehindTheScenes>Behind the Scenes</h2></div><div class=mdl-card__supporting-text style="padding-top:0px; padding-bottom:0px;"><ul><li>Fonts created using <a href=https://birdfont.org target=_blank>Birdfont</a>, a free font editor by Johan Mattsson</li><li>Elvish font based on <a href=http://www.dafont.com/tengwar-annatar.font target=_blank>Tengwar Annatar</a>font by Johan Winge</li><li>Theme based on <a href=https://getmdl.io target=_blank>Material Design Lite</a></li><li>Language support using <a href=https://translate.google.com/ target=_blank>Google Translate</a></li><li>Featured songs by <a href=https://m.youtube.com/channel/UCC8prZi7q1vnP0A3XX4EWxQ target=_blank>Clamavi de Profundis</a></li><li>Offline usage using service worker</li><li>Single page app framework designed by me</li></ul></div></div><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp"><div class=mdl-card__title><h2 class=mdl-card__title-text id=AboutMe>About Me</h2></div><div class=mdl-card__supporting-text style="padding-top:0px; padding-bottom:0px;"><p>I'm a mechanical engineer and software developer studying at <a href="https://www.benedictine.edu" target="_blank">Benedictine College</a>. I have worked as a software developer for <a href="https://www.tallac.com/" target="_blank">Tallac Networks</a>and an engineering intern for the college. I was the <a href="https://www.asme.org/" target="_blank">American Society of Mechanical Engineers</a>Chapter Secretary for Benedictine College from 2019-2020. I am a member of the <a href="https://www.nar.org/" target="_blank">National Association of Rocketry</a>and worked with a group of students and professors to build and launch a high power rocket at Benedictine with the ultimate goal of starting a rocketry program. Aside from many carpentry, electronics, engineering, and/or coding projects, my hobbies include sailing and photography. I am also a member of the college's Schola Corvorum choir.</p></p></div></div><div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp" style=background-color:#f0f8ff><div class=mdl-card__title><h2 class=mdl-card__title-text>Credits</h2></div><div class=mdl-card__supporting-text>Page created and maintained by <a href=https://max.davy.engineer/ target=_blank>Max Davy</a><br>Site theme created with <a href=https://getmdl.io/ target=_blank>Material Design Lite</a><br>Site hosted on <a href=https://pages.github.com target=_blank>Github Pages</a></div></div></div></div></section></main></div></div>