• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/**
2 * Copyright 2015 Google Inc. All Rights Reserved.
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 *      http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
16
17html, body {
18  font-family: 'Roboto', 'Helvetica', sans-serif;
19}
20
21.link {
22    fill: none;
23    stroke: #666;
24    stroke-width: 3px;
25}
26
27.node circle {
28    stroke: #fff;
29    stroke-width: 1.5px;
30}
31
32.node rect {
33    fill: #FFEBCD;
34}
35
36text {
37    font: 10px sans-serif;
38    pointer-events: none;
39}
40
41.status-title {
42    font-size: 14px;
43    color: black;
44}
45
46.status-content {
47    font-size: 13px;
48    color: grey;
49}
50
51.tooltip {
52    border: 2px solid #7d807d;
53    padding: 10px;
54    color: white;
55    border-radius: 4px;
56    background-color: #eebabf;
57    text-underline-color: white;
58}
59
60.tooltip .tooltiptext {
61    color: white;
62}
63
64.load_content {
65    overflow: hidden;
66    position: relative;
67    height: 100%;
68}
69
70.collapsible {
71    background-color: #e7e7e7;
72    color: #2f2e2e;
73    cursor: pointer;
74    padding: 10px;
75    width: 100%;
76    border-radius: 20px;
77    text-align: center;
78    border: solid 2px #e7e7e7;
79    outline: none;
80    font-size: 15px;
81}
82
83.active,
84.collapsible:hover {
85    background-color: #a3a2a2;
86}
87
88
89.content {
90    font-size: 13px;
91    padding: 0 10px;
92    /*display: none;*/
93    overflow: hidden;
94    background-color: #e7e7e7;
95}
96
97.loader_container {
98    margin: auto;
99}
100
101.detailElement {
102    background-color: #F5F5F5;
103}
104
105.detailContentKey {
106    font-size: 14px;
107    background-color: #F5F5F5;
108}
109
110.detailContentValue {
111    font-size: 13px;
112    color: #001849;
113    background-color: #F5F5F5;
114}
115
116.detailContentContainer {
117    text-align: center;
118    background-color: #F5F5F5;
119}
120
121.detailContainer {
122    background-color: #F5F5F5;
123    height: 500px;
124    overflow-y: auto
125}
126
127.demo-avatar {
128  width: 48px;
129  height: 48px;
130  border-radius: 24px;
131}
132.demo-layout .mdl-layout__header .mdl-layout__drawer-button {
133  color: rgba(0, 0, 0, 0.54);
134}
135.mdl-layout__drawer .avatar {
136  margin-bottom: 16px;
137}
138.demo-drawer {
139  border: none;
140}
141/* iOS Safari specific workaround */
142.demo-drawer .mdl-menu__container {
143  z-index: -1;
144}
145.demo-drawer .demo-navigation {
146  z-index: -2;
147}
148/* END iOS Safari specific workaround */
149.demo-drawer .mdl-menu .mdl-menu__item {
150  display: flex;
151  align-items: center;
152}
153.demo-drawer-header {
154/*  box-sizing: border-box;
155  display: flex;
156  flex-direction: column;
157  justify-content: flex-end;*/
158  padding: 0px;
159  height: 65px;
160/*  align-items: center;*/
161  align-content: center;
162}
163.demo-avatar-dropdown {
164  display: flex;
165  position: relative;
166  flex-direction: row;
167  align-items: center;
168  width: 100%;
169}
170
171.demo-navigation {
172  flex-grow: 1;
173}
174.demo-layout .demo-navigation .mdl-navigation__link {
175  display: flex !important;
176  flex-direction: row;
177  align-items: center;
178  color: rgba(255, 255, 255, 0.56);
179  font-weight: 500;
180}
181.demo-layout .demo-navigation .mdl-navigation__link:hover {
182  background-color: #00BCD4;
183  color: #37474F;
184}
185.demo-navigation .mdl-navigation__link .material-icons {
186  font-size: 24px;
187  color: rgba(255, 255, 255, 0.56);
188  margin-right: 24px;
189}
190
191.demo-content {
192  max-width: 1080px;
193}
194
195.demo-charts {
196  align-items: center;
197}
198.demo-chart:nth-child(1) {
199  color: #ACEC00;
200}
201.demo-chart:nth-child(2) {
202  color: #00BBD6;
203}
204.demo-chart:nth-child(3) {
205  color: #BA65C9;
206}
207.demo-chart:nth-child(4) {
208  color: #EF3C79;
209}
210.demo-graphs {
211  padding: 16px 32px;
212  display: flex;
213  flex-direction: column;
214  align-items: stretch;
215}
216/* TODO: Find a proper solution to have the graphs
217 * not float around outside their container in IE10/11.
218 * Using a browserhacks.com solution for now.
219 */
220_:-ms-input-placeholder, :root .demo-graphs {
221  min-height: 664px;
222}
223_:-ms-input-placeholder, :root .demo-graph {
224  max-height: 300px;
225}
226/* TODO end */
227.demo-graph:nth-child(1) {
228  color: #00b9d8;
229}
230.demo-graph:nth-child(2) {
231  color: #d9006e;
232}
233
234.demo-cards {
235  align-items: flex-start;
236  align-content: flex-start;
237}
238.demo-cards .demo-separator {
239  height: 32px;
240}
241.demo-cards .mdl-card__title.mdl-card__title {
242  color: white;
243  font-size: 24px;
244  font-weight: 400;
245}
246.demo-cards ul {
247  padding: 0;
248}
249.demo-cards h3 {
250  font-size: 1em;
251}
252.demo-updates .mdl-card__title {
253  min-height: 200px;
254  background-image: url('images/dog.png');
255  background-position: 90% 100%;
256  background-repeat: no-repeat;
257}
258.demo-cards .mdl-card__actions a {
259  color: #00BCD4;
260  text-decoration: none;
261}
262
263.demo-options h3 {
264  margin: 0;
265}
266.demo-options .mdl-checkbox__box-outline {
267  border-color: rgba(255, 255, 255, 0.89);
268}
269.demo-options ul {
270  margin: 0;
271  list-style-type: none;
272}
273.demo-options li {
274  margin: 4px 0;
275}
276.demo-options .material-icons {
277  color: rgba(255, 255, 255, 0.89);
278}
279.demo-options .mdl-card__actions {
280  height: 64px;
281  display: flex;
282  box-sizing: border-box;
283  align-items: center;
284}
285
286
287
288#loader {
289  position: absolute;
290  left: 50%;
291  top: 300px;
292  z-index: 1;
293  width: 75px;
294  height: 75px;
295  margin: -75px 0 0 -75px;
296  border: 16px solid #13f3f3;
297  border-radius: 50%;
298  border-top: 16px solid #3498db;
299  width: 75px;
300  height: 75px;
301  -webkit-animation: spin 2s linear infinite;
302  animation: spin 2s linear infinite;
303}
304
305@-webkit-keyframes spin {
306  0% { -webkit-transform: rotate(0deg); }
307  100% { -webkit-transform: rotate(360deg); }
308}
309
310@keyframes spin {
311  0% { transform: rotate(0deg); }
312  100% { transform: rotate(360deg); }
313}
314
315/* Add animation to "page content" */
316.animate-bottom {
317  position: relative;
318  -webkit-animation-name: animatebottom;
319  -webkit-animation-duration: 1s;
320  animation-name: animatebottom;
321  animation-duration: 1s
322}
323
324@-webkit-keyframes animatebottom {
325  from { bottom:-100px; opacity:0 }
326  to { bottom:0px; opacity:1 }
327}
328
329@keyframes animatebottom {
330  from{ bottom:-100px; opacity:0 }
331  to{ bottom:0; opacity:1 }
332}
333
334#myDiv {
335  display: none;
336  text-align: center;
337}
338
339$base: #303f9f;
340$accent: #E91E63;
341$error: #DD2C00;
342body{
343    min-width: calc(100vw - 20px);
344    min-height: 100vh;
345}
346.container{
347    margin-top: 150px;
348}
349.drop {
350    display: block;
351    position: absolute;
352    background: #CCC;
353    border-radius: 100%;
354    transform: scale(0);
355    pointer-events: none;
356    width: 100%;
357    height: 100%;
358
359    &.animate {
360        animation: drop 1s ease-out;
361    }
362}
363
364@keyframes drop {
365    100% {
366        opacity: 0;
367        transform: scale(2.5);
368    }
369}
370
371.materialSelect{
372    height: 70px;
373    position: relative;
374    text-align: center;
375    margin-bottom: 10px;
376
377    &.error {
378        .select:not(.isOpen){
379            border: 1px solid $error !important;
380        }
381        .message {
382            display: block;
383        }
384    }
385    &.inline{
386        float: none !important;
387        display: inline-block;
388        z-index: 0;
389        min-width: 100px;
390
391        .select{
392            transform: translate(0, 0);
393            top: 0;
394            left: 0;
395            margin: 0;
396            transition: all 0.2s !important;
397            width: 100%;
398
399            &.isOpen{
400                transform: translate(0, -50%);
401                top: 50%;
402            }
403        }
404    }
405    &:not(.inline){
406        width: 100%;
407
408        .select{
409            width: 100%;
410            margin-left: 50%;
411            transform: translate(-50%, 0);
412        }
413    }
414    .select {
415        position: absolute;
416        margin: 0;
417        padding: 0;
418        top: -1px;
419        user-select: none;
420        width: 250px;
421        text-align: center;
422        margin: 0px auto;
423        z-index: 9999;
424        height: 48px;
425        overflow: hidden;
426        border: 1px solid rgba(0, 0, 0, 0);
427        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
428        background-color: #fff;
429        margin-left: 0;
430        transform: none;
431
432        &:after {
433            border-left: 5px solid transparent;
434            border-right: 5px solid transparent;
435            border-top: 5px solid #bbbbbb;
436            content: '';
437            display: block;
438            height: 0px;
439            position: absolute;
440            pointer-events: none;
441            top: 19px;
442            right: 10px;
443            width: 0px;
444        }
445        li {
446            cursor: pointer;
447            font-size: 15px;
448            list-style: none;
449            line-height: 48px;
450            padding: 0 48px 0 24px;
451            position: relative;
452            overflow: hidden;
453
454            &[data-selected] {
455                height: 48px;
456            }
457            &:not([data-selected]) {
458                height: 0px;
459                opacity: 0;
460            }
461        }
462        &.isOpen {
463            background-color: #fafafa;
464            border-radius: 2px;
465            box-shadow: 1px 2px 3px 1px rgba(0, 0, 0, 0.3);
466            padding-bottom: 16px;
467            top: -96px;
468            height: 250px;
469            z-index: 99999;
470
471            &:after {
472                display: none;
473            }
474            &:before {
475                border-color: transparent !important;
476            }
477            li {
478                height: 48px;
479                opacity: 1;
480
481                &[data-selected] {
482                    color: $accent;
483                }
484                &:hover {
485                    background-color: #eeeeee;
486                }
487                &:active {
488                    background-color: #dbdbdb;
489                }
490            }
491        }
492        &:not(.isOpen) {
493            &:hover {
494                background-color: #f7f7f7;
495                border-top: 1px solid #CDCDCD;
496                border-bottom: 1px solid #CDCDCD;
497            }
498            &:active{
499                box-shadow: 1px 2px 1px 0 rgba(0, 0, 0, 0.3);
500            }
501        }
502        + .select:before {
503            border-left: thin solid #c8c8c8;
504            content: '';
505            height: 32px;
506            left: 0;
507            position: absolute;
508            top: 8px;
509        }
510    }
511    .message{
512        position: absolute;
513        top: 50px;
514        width: 100%;
515        color: $error;
516        display: none;
517    }
518}
519
520@media only screen and (min-width: 1008px){
521    .materialSelect{
522        .select{
523            transition: background 0.2s ease, border 0.2s ease, top 0.2s ease, height 0.2s ease, box-shadow 0.2s ease;
524
525            li{
526                transition: height 0.2s linear, opacity 0.2s ease, margin 0.2s linear;
527            }
528        }
529    }
530}
531
532/* fallback */
533@font-face {
534  font-family: 'Material Icons';
535  font-style: normal;
536  font-weight: 400;
537  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
538}
539
540.material-icons {
541  font-family: 'Material Icons';
542  font-weight: normal;
543  font-style: normal;
544  font-size: 24px;
545  line-height: 1;
546  letter-spacing: normal;
547  text-transform: none;
548  display: inline-block;
549  white-space: nowrap;
550  word-wrap: normal;
551  direction: ltr;
552  -webkit-font-feature-settings: 'liga';
553  -webkit-font-smoothing: antialiased;
554}
555
556/* cyrillic-ext */
557@font-face {
558  font-family: 'Roboto';
559  font-style: normal;
560  font-weight: 100;
561  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v16/ty9dfvLAziwdqQ2dHoyjphTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
562  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
563}
564/* cyrillic */
565@font-face {
566  font-family: 'Roboto';
567  font-style: normal;
568  font-weight: 100;
569  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v16/frNV30OaYdlFRtH2VnZZdhTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
570  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
571}
572/* greek-ext */
573@font-face {
574  font-family: 'Roboto';
575  font-style: normal;
576  font-weight: 100;
577  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v16/gwVJDERN2Amz39wrSoZ7FxTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
578  unicode-range: U+1F00-1FFF;
579}
580/* greek */
581@font-face {
582  font-family: 'Roboto';
583  font-style: normal;
584  font-weight: 100;
585  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v16/aZMswpodYeVhtRvuABJWvBTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
586  unicode-range: U+0370-03FF;
587}
588/* vietnamese */
589@font-face {
590  font-family: 'Roboto';
591  font-style: normal;
592  font-weight: 100;
593  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v16/VvXUGKZXbHtX_S_VCTLpGhTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
594  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
595}
596/* latin-ext */
597@font-face {
598  font-family: 'Roboto';
599  font-style: normal;
600  font-weight: 100;
601  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v16/e7MeVAyvogMqFwwl61PKhBTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
602  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
603}
604/* latin */
605@font-face {
606  font-family: 'Roboto';
607  font-style: normal;
608  font-weight: 100;
609  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v16/2tsd397wLxj96qwHyNIkxPesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
610  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
611}
612/* cyrillic-ext */
613@font-face {
614  font-family: 'Roboto';
615  font-style: normal;
616  font-weight: 300;
617  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/0eC6fl06luXEYWpBSJvXCBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
618  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
619}
620/* cyrillic */
621@font-face {
622  font-family: 'Roboto';
623  font-style: normal;
624  font-weight: 300;
625  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/Fl4y0QdOxyyTHEGMXX8kcRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
626  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
627}
628/* greek-ext */
629@font-face {
630  font-family: 'Roboto';
631  font-style: normal;
632  font-weight: 300;
633  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/-L14Jk06m6pUHB-5mXQQnRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
634  unicode-range: U+1F00-1FFF;
635}
636/* greek */
637@font-face {
638  font-family: 'Roboto';
639  font-style: normal;
640  font-weight: 300;
641  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/I3S1wsgSg9YCurV6PUkTORJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
642  unicode-range: U+0370-03FF;
643}
644/* vietnamese */
645@font-face {
646  font-family: 'Roboto';
647  font-style: normal;
648  font-weight: 300;
649  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/NYDWBdD4gIq26G5XYbHsFBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
650  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
651}
652/* latin-ext */
653@font-face {
654  font-family: 'Roboto';
655  font-style: normal;
656  font-weight: 300;
657  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/Pru33qjShpZSmG3z6VYwnRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
658  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
659}
660/* latin */
661@font-face {
662  font-family: 'Roboto';
663  font-style: normal;
664  font-weight: 300;
665  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/Hgo13k-tfSpn0qi1SFdUfVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
666  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
667}
668/* cyrillic-ext */
669@font-face {
670  font-family: 'Roboto';
671  font-style: normal;
672  font-weight: 400;
673  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/ek4gzZ-GeXAPcSbHtCeQI_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
674  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
675}
676/* cyrillic */
677@font-face {
678  font-family: 'Roboto';
679  font-style: normal;
680  font-weight: 400;
681  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
682  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
683}
684/* greek-ext */
685@font-face {
686  font-family: 'Roboto';
687  font-style: normal;
688  font-weight: 400;
689  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/-2n2p-_Y08sg57CNWQfKNvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
690  unicode-range: U+1F00-1FFF;
691}
692/* greek */
693@font-face {
694  font-family: 'Roboto';
695  font-style: normal;
696  font-weight: 400;
697  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/u0TOpm082MNkS5K0Q4rhqvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
698  unicode-range: U+0370-03FF;
699}
700/* vietnamese */
701@font-face {
702  font-family: 'Roboto';
703  font-style: normal;
704  font-weight: 400;
705  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/NdF9MtnOpLzo-noMoG0miPesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
706  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
707}
708/* latin-ext */
709@font-face {
710  font-family: 'Roboto';
711  font-style: normal;
712  font-weight: 400;
713  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/Fcx7Wwv8OzT71A3E1XOAjvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
714  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
715}
716/* latin */
717@font-face {
718  font-family: 'Roboto';
719  font-style: normal;
720  font-weight: 400;
721  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');
722  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
723}
724/* cyrillic-ext */
725@font-face {
726  font-family: 'Roboto';
727  font-style: normal;
728  font-weight: 500;
729  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v16/ZLqKeelYbATG60EpZBSDyxJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
730  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
731}
732/* cyrillic */
733@font-face {
734  font-family: 'Roboto';
735  font-style: normal;
736  font-weight: 500;
737  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v16/oHi30kwQWvpCWqAhzHcCSBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
738  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
739}
740/* greek-ext */
741@font-face {
742  font-family: 'Roboto';
743  font-style: normal;
744  font-weight: 500;
745  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v16/rGvHdJnr2l75qb0YND9NyBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
746  unicode-range: U+1F00-1FFF;
747}
748/* greek */
749@font-face {
750  font-family: 'Roboto';
751  font-style: normal;
752  font-weight: 500;
753  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v16/mx9Uck6uB63VIKFYnEMXrRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
754  unicode-range: U+0370-03FF;
755}
756/* vietnamese */
757@font-face {
758  font-family: 'Roboto';
759  font-style: normal;
760  font-weight: 500;
761  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v16/mbmhprMH69Zi6eEPBYVFhRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
762  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
763}
764/* latin-ext */
765@font-face {
766  font-family: 'Roboto';
767  font-style: normal;
768  font-weight: 500;
769  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v16/oOeFwZNlrTefzLYmlVV1UBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
770  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
771}
772/* latin */
773@font-face {
774  font-family: 'Roboto';
775  font-style: normal;
776  font-weight: 500;
777  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
778  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
779}
780/* cyrillic-ext */
781@font-face {
782  font-family: 'Roboto';
783  font-style: normal;
784  font-weight: 700;
785  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v16/77FXFjRbGzN4aCrSFhlh3hJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
786  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
787}
788/* cyrillic */
789@font-face {
790  font-family: 'Roboto';
791  font-style: normal;
792  font-weight: 700;
793  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v16/isZ-wbCXNKAbnjo6_TwHThJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
794  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
795}
796/* greek-ext */
797@font-face {
798  font-family: 'Roboto';
799  font-style: normal;
800  font-weight: 700;
801  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v16/UX6i4JxQDm3fVTc1CPuwqhJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
802  unicode-range: U+1F00-1FFF;
803}
804/* greek */
805@font-face {
806  font-family: 'Roboto';
807  font-style: normal;
808  font-weight: 700;
809  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v16/jSN2CGVDbcVyCnfJfjSdfBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
810  unicode-range: U+0370-03FF;
811}
812/* vietnamese */
813@font-face {
814  font-family: 'Roboto';
815  font-style: normal;
816  font-weight: 700;
817  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v16/PwZc-YbIL414wB9rB1IAPRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
818  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
819}
820/* latin-ext */
821@font-face {
822  font-family: 'Roboto';
823  font-style: normal;
824  font-weight: 700;
825  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v16/97uahxiqZRoncBaCEI3aWxJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
826  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
827}
828/* latin */
829@font-face {
830  font-family: 'Roboto';
831  font-style: normal;
832  font-weight: 700;
833  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v16/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
834  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
835}
836/* cyrillic-ext */
837@font-face {
838  font-family: 'Roboto';
839  font-style: normal;
840  font-weight: 900;
841  src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v16/s7gftie1JANC-QmDJvMWZhJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
842  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
843}
844/* cyrillic */
845@font-face {
846  font-family: 'Roboto';
847  font-style: normal;
848  font-weight: 900;
849  src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v16/3Y_xCyt7TNunMGg0Et2pnhJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
850  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
851}
852/* greek-ext */
853@font-face {
854  font-family: 'Roboto';
855  font-style: normal;
856  font-weight: 900;
857  src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v16/WeQRRE07FDkIrr29oHQgHBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
858  unicode-range: U+1F00-1FFF;
859}
860/* greek */
861@font-face {
862  font-family: 'Roboto';
863  font-style: normal;
864  font-weight: 900;
865  src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v16/jyIYROCkJM3gZ4KV00YXOBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
866  unicode-range: U+0370-03FF;
867}
868/* vietnamese */
869@font-face {
870  font-family: 'Roboto';
871  font-style: normal;
872  font-weight: 900;
873  src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v16/phsu-QZXz1JBv0PbFoPmEBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
874  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
875}
876/* latin-ext */
877@font-face {
878  font-family: 'Roboto';
879  font-style: normal;
880  font-weight: 900;
881  src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v16/9_7S_tWeGDh5Pq3u05RVkhJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
882  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
883}
884/* latin */
885@font-face {
886  font-family: 'Roboto';
887  font-style: normal;
888  font-weight: 900;
889  src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v16/mnpfi9pxYH-Go5UiibESIltXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
890  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
891}
892/* cyrillic-ext */
893@font-face {
894  font-family: 'Roboto';
895  font-style: italic;
896  font-weight: 400;
897  src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v16/WxrXJa0C3KdtC7lMafG4dRTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
898  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
899}
900/* cyrillic */
901@font-face {
902  font-family: 'Roboto';
903  font-style: italic;
904  font-weight: 400;
905  src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v16/OpXUqTo0UgQQhGj_SFdLWBTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
906  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
907}
908/* greek-ext */
909@font-face {
910  font-family: 'Roboto';
911  font-style: italic;
912  font-weight: 400;
913  src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v16/1hZf02POANh32k2VkgEoUBTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
914  unicode-range: U+1F00-1FFF;
915}
916/* greek */
917@font-face {
918  font-family: 'Roboto';
919  font-style: italic;
920  font-weight: 400;
921  src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v16/cDKhRaXnQTOVbaoxwdOr9xTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
922  unicode-range: U+0370-03FF;
923}
924/* vietnamese */
925@font-face {
926  font-family: 'Roboto';
927  font-style: italic;
928  font-weight: 400;
929  src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v16/K23cxWVTrIFD6DJsEVi07RTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
930  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
931}
932/* latin-ext */
933@font-face {
934  font-family: 'Roboto';
935  font-style: italic;
936  font-weight: 400;
937  src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v16/vSzulfKSK0LLjjfeaxcREhTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
938  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
939}
940/* latin */
941@font-face {
942  font-family: 'Roboto';
943  font-style: italic;
944  font-weight: 400;
945  src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v16/vPcynSL0qHq_6dX7lKVByfesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
946  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
947}
948/* cyrillic-ext */
949@font-face {
950  font-family: 'Roboto';
951  font-style: italic;
952  font-weight: 700;
953  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v16/t6Nd4cfPRhZP44Q5QAjcCzTOQ_MqJVwkKsUn0wKzc2I.woff2) format('woff2');
954  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
955}
956/* cyrillic */
957@font-face {
958  font-family: 'Roboto';
959  font-style: italic;
960  font-weight: 700;
961  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v16/t6Nd4cfPRhZP44Q5QAjcCzUj_cnvWIuuBMVgbX098Mw.woff2) format('woff2');
962  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
963}
964/* greek-ext */
965@font-face {
966  font-family: 'Roboto';
967  font-style: italic;
968  font-weight: 700;
969  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v16/t6Nd4cfPRhZP44Q5QAjcC0bcKLIaa1LC45dFaAfauRA.woff2) format('woff2');
970  unicode-range: U+1F00-1FFF;
971}
972/* greek */
973@font-face {
974  font-family: 'Roboto';
975  font-style: italic;
976  font-weight: 700;
977  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v16/t6Nd4cfPRhZP44Q5QAjcC2o_sUJ8uO4YLWRInS22T3Y.woff2) format('woff2');
978  unicode-range: U+0370-03FF;
979}
980/* vietnamese */
981@font-face {
982  font-family: 'Roboto';
983  font-style: italic;
984  font-weight: 700;
985  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v16/t6Nd4cfPRhZP44Q5QAjcC76up8jxqWt8HVA3mDhkV_0.woff2) format('woff2');
986  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
987}
988/* latin-ext */
989@font-face {
990  font-family: 'Roboto';
991  font-style: italic;
992  font-weight: 700;
993  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v16/t6Nd4cfPRhZP44Q5QAjcCyYE0-AqJ3nfInTTiDXDjU4.woff2) format('woff2');
994  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
995}
996/* latin */
997@font-face {
998  font-family: 'Roboto';
999  font-style: italic;
1000  font-weight: 700;
1001  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v16/t6Nd4cfPRhZP44Q5QAjcC44P5ICox8Kq3LLUNMylGO4.woff2) format('woff2');
1002  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
1003}
1004
1005.md-dialog-is-showing {
1006    max-height: none;
1007}
1008
1009$gray: #eee;
1010
1011md-content.md-default-theme {
1012  background-color: $gray;
1013}
1014md-card {
1015  background-color: #fff;
1016  h2:first-of-type {
1017    margin-top: 0;
1018  }
1019}
1020md-toolbar {
1021  .md-button.md-default-theme {
1022    border-radius: 99%; // round toolbar buttons
1023  }
1024}
1025h2 {
1026  font-weight: 400;
1027}
1028.md-toolbar-tools-bottom {
1029  font-size: small;
1030  & :last-child {
1031    opacity: 0.8;
1032  }
1033}
1034md-toolbar:not(.md-hue-1),
1035.md-fab {
1036  fill: #fff;
1037}
1038md-sidenav {
1039  fill: #737373;
1040  ng-md-icon {
1041    position: relative;
1042    top: 5px; // adjust for svg viewbox
1043  }
1044}
1045.user-avatar {
1046  border-radius: 99%;
1047}
1048