Difference between revisions of "Template:Peking/mdl/MDLnew"

Revision as of 02:38, 17 October 2017

@charset "UTF-8";

/* SHADOW */ .mdl-shadow--2dp {

   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); }

.mdl-shadow--3dp {

   box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12); }

.mdl-shadow--4dp {

   box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2); }

.mdl-shadow--6dp {

   box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2); }

.mdl-shadow--8dp {

   box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); }

.mdl-shadow--16dp {

   box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2); }

.mdl-shadow--24dp {

   box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2); }

/* card */ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu, .mdl-icon-toggle, .mdl-item, .mdl-radio, .mdl-slider, .mdl-switch, .mdl-tabs__tab {

   -webkit-tap-highlight-color: transparent;
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }

.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;
   min-height: 200px;
   overflow: hidden;
   width: 330px;
   z-index: 1;
   position: relative;
   background: rgb(255,255,255);
   border-radius: 2px;
   box-sizing: border-box; }

.mdl-card__media {

   background-color: rgb(255,64,129);
   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: rgb(0,0,0);
   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 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, 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, 0.54);
   margin: 0; }

.mdl-card__supporting-text {

   color: rgba(0,0,0, 0.54);
   font-size: 1rem;
   line-height: 18px;
   overflow: hidden;
   padding: 16px 16px;
   width: 90%; }

.mdl-card__supporting-text.mdl-card--border {

   border-bottom: 1px solid rgba(0, 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, 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; }

/*BUTTON*/ .mdl-button .mdl-badge[data-badge]:after {

   top: -10px;
   right: -5px; }

.mdl-button {

   background: transparent;
   border: none;
   border-radius: 2px;
   color: rgb(0,0,0);
   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;
   line-height: 1;
   letter-spacing: 0;
   overflow: hidden;
   will-change: box-shadow;
   transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   outline: none;
   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, 0.20); }

.mdl-button:focus:not(:active) {

   background-color: rgba(0,0,0, 0.12); }

.mdl-button:active {

   background-color: rgba(158,158,158, 0.40); }

.mdl-button.mdl-button--colored {

   color: rgb(63,81,181); }

.mdl-button.mdl-button--colored:focus:not(:active) {

   background-color: rgba(0,0,0, 0.12); }

input.mdl-button[type="submit"] {

   -webkit-appearance: none; }

.mdl-button--raised {

   background: rgba(158,158,158, 0.20);
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); }

.mdl-button--raised:active {

   box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
   background-color: rgba(158,158,158, 0.40); }

.mdl-button--raised:focus:not(:active) {

   box-shadow: 0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36);
   background-color: rgba(158,158,158, 0.40); }

.mdl-button--raised.mdl-button--colored {

   background: rgb(63,81,181);
   color: rgb(255,255,255); }

.mdl-button--raised.mdl-button--colored:hover {

   background-color: rgb(63,81,181); }

.mdl-button--raised.mdl-button--colored:active {

   background-color: rgb(63,81,181); }

.mdl-button--raised.mdl-button--colored:focus:not(:active) {

   background-color: rgb(63,81,181); }

.mdl-button--raised.mdl-button--colored .mdl-ripple {

   background: rgb(255,255,255); }

.mdl-button--fab {

   border-radius: 50%;
   font-size: 24px;
   height: 56px;
   margin: auto;
   min-width: 56px;
   width: 56px;
   padding: 0;
   overflow: hidden;
   background: rgba(158,158,158, 0.20);
   box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 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, white, black); }

.mdl-button--fab:active {

   box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
   background-color: rgba(158,158,158, 0.40); }

.mdl-button--fab:focus:not(:active) {

   box-shadow: 0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36);
   background-color: rgba(158,158,158, 0.40); }

.mdl-button--fab.mdl-button--colored {

   background: rgb(255,64,129);
   color: rgb(255,255,255); }

.mdl-button--fab.mdl-button--colored:hover {

   background-color: rgb(255,64,129); }

.mdl-button--fab.mdl-button--colored:focus:not(:active) {

   background-color: rgb(255,64,129); }

.mdl-button--fab.mdl-button--colored:active {

   background-color: rgb(255,64,129); }

.mdl-button--fab.mdl-button--colored .mdl-ripple {

   background: rgb(255,255,255); }

.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: 0px;
   left: 0px; }

.mdl-button--icon .mdl-button__ripple-container {

   border-radius: 50%;
   -webkit-mask-image: -webkit-radial-gradient(circle, white, black); }

.mdl-button__ripple-container {

   display: block;
   height: 100%;
   left: 0px;
   position: absolute;
   top: 0px;
   width: 100%;
   z-index: 0;
   overflow: hidden; }

.mdl-button[disabled] .mdl-button__ripple-container .mdl-ripple, .mdl-button.mdl-button--disabled .mdl-button__ripple-container .mdl-ripple {

   background-color: transparent; }

.mdl-button--primary.mdl-button--primary {

   color: rgb(63,81,181); }

.mdl-button--primary.mdl-button--primary .mdl-ripple {

   background: rgb(255,255,255); }

.mdl-button--primary.mdl-button--primary.mdl-button--raised, .mdl-button--primary.mdl-button--primary.mdl-button--fab {

   color: rgb(255,255,255);
   background-color: rgb(63,81,181); }

.mdl-button--accent.mdl-button--accent {

   color: rgb(255,64,129); }

.mdl-button--accent.mdl-button--accent .mdl-ripple {

   background: rgb(255,255,255); }

.mdl-button--accent.mdl-button--accent.mdl-button--raised, .mdl-button--accent.mdl-button--accent.mdl-button--fab {

   color: rgb(255,255,255);
   background-color: rgb(255,64,129); }

.mdl-button[disabled][disabled], .mdl-button.mdl-button--disabled.mdl-button--disabled {

   color: rgba(0,0,0, 0.26);
   cursor: default;
   background-color: transparent; }

.mdl-button--fab[disabled][disabled], .mdl-button--fab.mdl-button--disabled.mdl-button--disabled {

   background-color: rgba(0,0,0, 0.12);
   color: rgba(0,0,0, 0.26); }

.mdl-button--raised[disabled][disabled], .mdl-button--raised.mdl-button--disabled.mdl-button--disabled {

   background-color: rgba(0,0,0, 0.12);
   color: rgba(0,0,0, 0.26);
   box-shadow: none; }

.mdl-button--colored[disabled][disabled], .mdl-button--colored.mdl-button--disabled.mdl-button--disabled {

   color: rgba(0,0,0, 0.26); }

.mdl-button .material-icons {

   vertical-align: middle; }

.mdl-textfield--expandable .mdl-button--icon {

   top: 16px; }

/* Layout */ .mdl-layout {

   width: 100%;
   height: 100%;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-flex-direction: column;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   overflow-y: auto;
   overflow-x: hidden;
   position: relative;
   -webkit-overflow-scrolling: touch

}

.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: normal;
   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--no-desktop-drawer-button .mdl-layout__drawer-button, .mdl-layout--fixed-drawer > .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: #ffffff;
   color: #717171;
   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--seamed, .mdl-layout__header--scroll {

   box-shadow: none

}

.mdl-layout__header--waterfall {

   box-shadow: none;
   overflow: hidden

}

.mdl-layout__header--waterfall.is-casting-shadow {

   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)

}

.mdl-layout__header--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: #717171;
   line-height: 64px;
   padding: 0 24px;

}

.mdl-layout__header-row .mdl-navigation__link:hover {

   display: block;
   color: #717171;
   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: #3f51b5;
   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: #3f51b5;
   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: #ff4081;
   -webkit-animation: border-expand .2s cubic-bezier(.4, 0, .4, 1) .01s alternate forwards;
   animation: border-expand .2s cubic-bezier(.4, 0, .4, 1) .01s alternate forwards;
   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

}

/* navigation */

.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: 300;
   line-height: 24px;
   letter-spacing: 0;
   opacity: .87

}

.mdl-navigation__link .material-icons {

   vertical-align: middle

}

/* Text Field */ .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: none

}

.mdl-textfield.is-invalid .mdl-textfield__input {

   border-color: #d50000;
   box-shadow: none

}

fieldset[disabled] .mdl-textfield .mdl-textfield__input, .mdl-textfield.is-disabled .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.is-dirty .mdl-textfield__label, .mdl-textfield.has-placeholder .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

}

fieldset[disabled] .mdl-textfield .mdl-textfield__label, .mdl-textfield.is-disabled.is-disabled .mdl-textfield__label {

   color: rgba(0, 0, 0, .26)

}

.mdl-textfield--floating-label.is-focused .mdl-textfield__label, .mdl-textfield--floating-label.is-dirty .mdl-textfield__label, .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label {

   color: #3f51b5;
   font-size: 12px;
   top: 4px;
   visibility: visible

}

.mdl-textfield--floating-label.is-focused .mdl-textfield__expandable-holder .mdl-textfield__label, .mdl-textfield--floating-label.is-dirty .mdl-textfield__expandable-holder .mdl-textfield__label, .mdl-textfield--floating-label.has-placeholder .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: #3f51b5;
   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-focused .mdl-textfield__expandable-holder, .mdl-textfield.is-dirty .mdl-textfield__expandable-holder {

   max-width: 600px

}

.mdl-textfield__expandable-holder .mdl-textfield__label:after {

   bottom: 0

}

/* ripple */

.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-button--raised.mdl-button--colored .mdl-ripple {

   background: #fff

}