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

(Created page with "@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); } .md...")
 
Line 324: Line 324:
 
.mdl-textfield--expandable .mdl-button--icon {
 
.mdl-textfield--expandable .mdl-button--icon {
 
     top: 16px; }
 
     top: 16px; }
 +
 +
 +
 +
/* Layout */
 +
.mdl-layout {
 +
    width: 100%;
 +
    height: 100%;
 +
    display: -webkit-flex;
 +
    display: -ms-flexbox;
 +
    display: flex;
 +
    -webkit-flex-direction: column;
 +
    -ms-flex-direction: column;
 +
    flex-direction: column;
 +
    overflow-y: auto;
 +
    overflow-x: hidden;
 +
    position: relative;
 +
    -webkit-overflow-scrolling: touch
 +
}
 +
 +
.mdl-layout.is-small-screen .mdl-layout--large-screen-only {
 +
    display: none
 +
}
 +
 +
.mdl-layout:not(.is-small-screen) .mdl-layout--small-screen-only {
 +
    display: none
 +
}
 +
 +
.mdl-layout__container {
 +
    position: absolute;
 +
    width: 100%;
 +
    height: 100%
 +
}
 +
 +
.mdl-layout__title, .mdl-layout-title {
 +
    display: block;
 +
    position: relative;
 +
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
 +
    font-size: 20px;
 +
    line-height: 1;
 +
    letter-spacing: .02em;
 +
    font-weight: 400;
 +
    box-sizing: border-box
 +
}
 +
 +
.mdl-layout-spacer {
 +
    -webkit-flex-grow: 1;
 +
    -ms-flex-positive: 1;
 +
    flex-grow: 1
 +
}
 +
 +
.mdl-layout__drawer {
 +
    display: -webkit-flex;
 +
    display: -ms-flexbox;
 +
    display: flex;
 +
    -webkit-flex-direction: column;
 +
    -ms-flex-direction: column;
 +
    flex-direction: column;
 +
    -webkit-flex-wrap: nowrap;
 +
    -ms-flex-wrap: nowrap;
 +
    flex-wrap: nowrap;
 +
    width: 240px;
 +
    height: 100%;
 +
    max-height: 100%;
 +
    position: absolute;
 +
    top: 0;
 +
    left: 0;
 +
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
 +
    box-sizing: border-box;
 +
    border-right: 1px solid #e0e0e0;
 +
    background: #fafafa;
 +
    -webkit-transform: translateX(-250px);
 +
    transform: translateX(-250px);
 +
    -webkit-transform-style: preserve-3d;
 +
    transform-style: preserve-3d;
 +
    will-change: transform;
 +
    transition-duration: .2s;
 +
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
 +
    transition-property: transform;
 +
    transition-property: transform, -webkit-transform;
 +
    color: #424242;
 +
    overflow: visible;
 +
    overflow-y: auto;
 +
    z-index: 5
 +
}
 +
 +
.mdl-layout__drawer.is-visible {
 +
    -webkit-transform: translateX(0);
 +
    transform: translateX(0)
 +
}
 +
 +
.mdl-layout__drawer.is-visible ~ .mdl-layout__content.mdl-layout__content {
 +
    overflow: hidden
 +
}
 +
 +
.mdl-layout__drawer > * {
 +
    -webkit-flex-shrink: 0;
 +
    -ms-flex-negative: 0;
 +
    flex-shrink: 0
 +
}
 +
 +
.mdl-layout__drawer > .mdl-layout__title, .mdl-layout__drawer > .mdl-layout-title {
 +
    line-height: 64px;
 +
    padding-left: 40px
 +
}
 +
 +
@media screen and (max-width: 1024px) {
 +
    .mdl-layout__drawer > .mdl-layout__title, .mdl-layout__drawer > .mdl-layout-title {
 +
        line-height: 56px;
 +
        padding-left: 16px
 +
    }
 +
}
 +
 +
.mdl-layout__drawer .mdl-navigation {
 +
    -webkit-flex-direction: column;
 +
    -ms-flex-direction: column;
 +
    flex-direction: column;
 +
    -webkit-align-items: stretch;
 +
    -ms-flex-align: stretch;
 +
    align-items: stretch;
 +
    padding-top: 16px
 +
}
 +
 +
.mdl-layout__drawer .mdl-navigation .mdl-navigation__link {
 +
    display: block;
 +
    -webkit-flex-shrink: 0;
 +
    -ms-flex-negative: 0;
 +
    flex-shrink: 0;
 +
    padding: 16px 40px;
 +
    margin: 0;
 +
    color: #757575
 +
}
 +
 +
@media screen and (max-width: 1024px) {
 +
    .mdl-layout__drawer .mdl-navigation .mdl-navigation__link {
 +
        padding: 16px
 +
    }
 +
}
 +
 +
.mdl-layout__drawer .mdl-navigation .mdl-navigation__link:hover {
 +
    background-color: #e0e0e0
 +
}
 +
 +
.mdl-layout__drawer .mdl-navigation .mdl-navigation__link--current {
 +
    background-color: #e0e0e0;
 +
    color: #000
 +
}
 +
 +
@media screen and (min-width: 1025px) {
 +
    .mdl-layout--fixed-drawer > .mdl-layout__drawer {
 +
        -webkit-transform: translateX(0);
 +
        transform: translateX(0)
 +
    }
 +
}
 +
 +
.mdl-layout__drawer-button {
 +
    display: block;
 +
    position: absolute;
 +
    height: 48px;
 +
    width: 48px;
 +
    border: 0;
 +
    -webkit-flex-shrink: 0;
 +
    -ms-flex-negative: 0;
 +
    flex-shrink: 0;
 +
    overflow: hidden;
 +
    text-align: center;
 +
    cursor: pointer;
 +
    font-size: 26px;
 +
    line-height: 56px;
 +
    font-family: Helvetica, Arial, sans-serif;
 +
    margin: 8px 12px;
 +
    top: 0;
 +
    left: 0;
 +
    color: #fff;
 +
    z-index: 4
 +
}
 +
 +
.mdl-layout__header .mdl-layout__drawer-button {
 +
    position: absolute;
 +
    color: #fff;
 +
    background-color: inherit
 +
}
 +
 +
@media screen and (max-width: 1024px) {
 +
    .mdl-layout__header .mdl-layout__drawer-button {
 +
        margin: 4px
 +
    }
 +
}
 +
 +
@media screen and (max-width: 1024px) {
 +
    .mdl-layout__drawer-button {
 +
        margin: 4px;
 +
        color: rgba(0, 0, 0, .5)
 +
    }
 +
}
 +
 +
@media screen and (min-width: 1025px) {
 +
    .mdl-layout__drawer-button {
 +
        line-height: 54px
 +
    }
 +
 +
    .mdl-layout--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: #3f51b5;
 +
    color: #fff;
 +
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
 +
    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: #fff;
 +
    line-height: 64px;
 +
    padding: 0 24px
 +
}
 +
 +
@media screen and (max-width: 1024px) {
 +
    .mdl-layout__header-row .mdl-navigation__link {
 +
        line-height: 56px;
 +
        padding: 0 16px
 +
    }
 +
}
 +
 +
.mdl-layout__obfuscator {
 +
    background-color: transparent;
 +
    position: absolute;
 +
    top: 0;
 +
    left: 0;
 +
    height: 100%;
 +
    width: 100%;
 +
    z-index: 4;
 +
    visibility: hidden;
 +
    transition-property: background-color;
 +
    transition-duration: .2s;
 +
    transition-timing-function: cubic-bezier(.4, 0, .2, 1)
 +
}
 +
 +
.mdl-layout__obfuscator.is-visible {
 +
    background-color: rgba(0, 0, 0, .5);
 +
    visibility: visible
 +
}
 +
 +
@supports (pointer-events:auto) {
 +
    .mdl-layout__obfuscator {
 +
        background-color: rgba(0, 0, 0, .5);
 +
        opacity: 0;
 +
        transition-property: opacity;
 +
        visibility: visible;
 +
        pointer-events: none
 +
    }
 +
 +
    .mdl-layout__obfuscator.is-visible {
 +
        pointer-events: auto;
 +
        opacity: 1
 +
    }
 +
}
 +
 +
.mdl-layout__content {
 +
    -ms-flex: 0 1 auto;
 +
    position: relative;
 +
    display: inline-block;
 +
    overflow-y: auto;
 +
    overflow-x: hidden;
 +
    -webkit-flex-grow: 1;
 +
    -ms-flex-positive: 1;
 +
    flex-grow: 1;
 +
    z-index: 1;
 +
    -webkit-overflow-scrolling: touch
 +
}
 +
 +
.mdl-layout--fixed-drawer > .mdl-layout__content {
 +
    margin-left: 240px
 +
}
 +
 +
.mdl-layout__container.has-scrolling-header .mdl-layout__content {
 +
    overflow: visible
 +
}
 +
 +
@media screen and (max-width: 1024px) {
 +
    .mdl-layout--fixed-drawer > .mdl-layout__content {
 +
        margin-left: 0
 +
    }
 +
 +
    .mdl-layout__container.has-scrolling-header .mdl-layout__content {
 +
        overflow-y: auto;
 +
        overflow-x: hidden
 +
    }
 +
}
 +
 +
.mdl-layout__tab-bar {
 +
    height: 96px;
 +
    margin: 0;
 +
    width: calc(100% - 112px);
 +
    padding: 0 0 0 56px;
 +
    display: -webkit-flex;
 +
    display: -ms-flexbox;
 +
    display: flex;
 +
    background-color: #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
 +
}

Revision as of 13:50, 15 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;
   -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: 400;
   box-sizing: border-box

}

.mdl-layout-spacer { 

   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
   flex-grow: 1

}

.mdl-layout__drawer { 

   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
   width: 240px;
   height: 100%;
   max-height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
   box-sizing: border-box;
   border-right: 1px solid #e0e0e0;
   background: #fafafa;
   -webkit-transform: translateX(-250px);
   transform: translateX(-250px);
   -webkit-transform-style: preserve-3d;
   transform-style: preserve-3d;
   will-change: transform;
   transition-duration: .2s;
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
   transition-property: transform;
   transition-property: transform, -webkit-transform;
   color: #424242;
   overflow: visible;
   overflow-y: auto;
   z-index: 5

}

.mdl-layout__drawer.is-visible { 

   -webkit-transform: translateX(0);
   transform: translateX(0)

}

.mdl-layout__drawer.is-visible ~ .mdl-layout__content.mdl-layout__content { 

   overflow: hidden

}

.mdl-layout__drawer > * { 

   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0

}

.mdl-layout__drawer > .mdl-layout__title, .mdl-layout__drawer > .mdl-layout-title { 

   line-height: 64px;
   padding-left: 40px

}

@media screen and (max-width: 1024px) { 

   .mdl-layout__drawer > .mdl-layout__title, .mdl-layout__drawer > .mdl-layout-title {
       line-height: 56px;
       padding-left: 16px
   }

}

.mdl-layout__drawer .mdl-navigation { 

   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   -webkit-align-items: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
   padding-top: 16px

}

.mdl-layout__drawer .mdl-navigation .mdl-navigation__link { 

   display: block;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
   padding: 16px 40px;
   margin: 0;
   color: #757575

}

@media screen and (max-width: 1024px) { 

   .mdl-layout__drawer .mdl-navigation .mdl-navigation__link {
       padding: 16px
   }

}

.mdl-layout__drawer .mdl-navigation .mdl-navigation__link:hover { 

   background-color: #e0e0e0

}

.mdl-layout__drawer .mdl-navigation .mdl-navigation__link--current { 

   background-color: #e0e0e0;
   color: #000

}

@media screen and (min-width: 1025px) { 

   .mdl-layout--fixed-drawer > .mdl-layout__drawer {
       -webkit-transform: translateX(0);
       transform: translateX(0)
   }

}

.mdl-layout__drawer-button { 

   display: block;
   position: absolute;
   height: 48px;
   width: 48px;
   border: 0;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
   overflow: hidden;
   text-align: center;
   cursor: pointer;
   font-size: 26px;
   line-height: 56px;
   font-family: Helvetica, Arial, sans-serif;
   margin: 8px 12px;
   top: 0;
   left: 0;
   color: #fff;
   z-index: 4

}

.mdl-layout__header .mdl-layout__drawer-button { 

   position: absolute;
   color: #fff;
   background-color: inherit

}

@media screen and (max-width: 1024px) { 

   .mdl-layout__header .mdl-layout__drawer-button {
       margin: 4px
   }

}

@media screen and (max-width: 1024px) { 

   .mdl-layout__drawer-button {
       margin: 4px;
       color: rgba(0, 0, 0, .5)
   }

}

@media screen and (min-width: 1025px) { 

   .mdl-layout__drawer-button {
       line-height: 54px
   }

   .mdl-layout--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: #3f51b5;
   color: #fff;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
   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: #fff;
   line-height: 64px;
   padding: 0 24px

}

@media screen and (max-width: 1024px) { 

   .mdl-layout__header-row .mdl-navigation__link {
       line-height: 56px;
       padding: 0 16px
   }

}

.mdl-layout__obfuscator { 

   background-color: transparent;
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   z-index: 4;
   visibility: hidden;
   transition-property: background-color;
   transition-duration: .2s;
   transition-timing-function: cubic-bezier(.4, 0, .2, 1)

}

.mdl-layout__obfuscator.is-visible { 

   background-color: rgba(0, 0, 0, .5);
   visibility: visible

}

@supports (pointer-events:auto) { 

   .mdl-layout__obfuscator {
       background-color: rgba(0, 0, 0, .5);
       opacity: 0;
       transition-property: opacity;
       visibility: visible;
       pointer-events: none
   }

   .mdl-layout__obfuscator.is-visible {
       pointer-events: auto;
       opacity: 1
   }

}

.mdl-layout__content { 

   -ms-flex: 0 1 auto;
   position: relative;
   display: inline-block;
   overflow-y: auto;
   overflow-x: hidden;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
   z-index: 1;
   -webkit-overflow-scrolling: touch

}

.mdl-layout--fixed-drawer > .mdl-layout__content { 

   margin-left: 240px

}

.mdl-layout__container.has-scrolling-header .mdl-layout__content { 

   overflow: visible

}

@media screen and (max-width: 1024px) { 

   .mdl-layout--fixed-drawer > .mdl-layout__content {
       margin-left: 0
   }

   .mdl-layout__container.has-scrolling-header .mdl-layout__content {
       overflow-y: auto;
       overflow-x: hidden
   }

}

.mdl-layout__tab-bar { 

   height: 96px;
   margin: 0;
   width: calc(100% - 112px);
   padding: 0 0 0 56px;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   background-color: #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

}