third_party/ot-br-posix/repo/src/web/web-service/frontend/res/css/styles.css

   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
  17 html, 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
  36 text {
  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;
 342 body{
 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
1011 md-content.md-default-theme {
1012   background-color: $gray;
1013 }
1014 md-card {
1015   background-color: #fff;
1016   h2:first-of-type {
1017     margin-top: 0;
1018   }
1019 }
1020 md-toolbar {
1021   .md-button.md-default-theme {
1022     border-radius: 99%; // round toolbar buttons
1023   }
1024 }
1025 h2 {
1026   font-weight: 400;
1027 }
1028 .md-toolbar-tools-bottom {
1029   font-size: small;
1030   & :last-child {
1031     opacity: 0.8;
1032   }
1033 }
1034 md-toolbar:not(.md-hue-1),
1035 .md-fab {
1036   fill: #fff;
1037 }
1038 md-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 }