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

Line 1,263: Line 1,263:
 
.mdl-button--raised.mdl-button--colored .mdl-ripple {
 
.mdl-button--raised.mdl-button--colored .mdl-ripple {
 
     background: #fff
 
     background: #fff
 +
}
 +
 +
 +
/* progress */
 +
.mdl-progress {
 +
    display: block;
 +
    position: relative;
 +
    height: 4px;
 +
    width: 500px;
 +
    max-width: 100%
 +
}
 +
 +
.mdl-progress > .bar {
 +
    display: block;
 +
    position: absolute;
 +
    top: 0;
 +
    bottom: 0;
 +
    width: 0%;
 +
    transition: width .2s cubic-bezier(.4, 0, .2, 1)
 +
}
 +
 +
.mdl-progress > .progressbar {
 +
    background-color: #3f51b5;
 +
    z-index: 1;
 +
    left: 0
 +
}
 +
 +
.mdl-progress > .bufferbar {
 +
    background-image: linear-gradient(to right, rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)), linear-gradient(to right, #3f51b5, #3f51b5);
 +
    z-index: 0;
 +
    left: 0
 +
}
 +
 +
.mdl-progress > .auxbar {
 +
    right: 0
 +
}
 +
 +
@supports (-webkit-appearance:none) {
 +
    .mdl-progress:not(.mdl-progress--indeterminate):not(.mdl-progress--indeterminate) > .auxbar, .mdl-progress:not(.mdl-progress__indeterminate):not(.mdl-progress__indeterminate) > .auxbar {
 +
        background-image: linear-gradient(to right, rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)), linear-gradient(to right, #3f51b5, #3f51b5);
 +
        -webkit-mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEyIiBoZWlnaHQ9IjQiIHZpZXdQb3J0PSIwIDAgMTIgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxlbGxpcHNlIGN4PSIyIiBjeT0iMiIgcng9IjIiIHJ5PSIyIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4IiBmcm9tPSIyIiB0bz0iLTEwIiBkdXI9IjAuNnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogIDwvZWxsaXBzZT4KICA8ZWxsaXBzZSBjeD0iMTQiIGN5PSIyIiByeD0iMiIgcnk9IjIiIGNsYXNzPSJsb2FkZXIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIGZyb209IjE0IiB0bz0iMiIgZHVyPSIwLjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICA8L2VsbGlwc2U+Cjwvc3ZnPgo=");
 +
        mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEyIiBoZWlnaHQ9IjQiIHZpZXdQb3J0PSIwIDAgMTIgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxlbGxpcHNlIGN4PSIyIiBjeT0iMiIgcng9IjIiIHJ5PSIyIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4IiBmcm9tPSIyIiB0bz0iLTEwIiBkdXI9IjAuNnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogIDwvZWxsaXBzZT4KICA8ZWxsaXBzZSBjeD0iMTQiIGN5PSIyIiByeD0iMiIgcnk9IjIiIGNsYXNzPSJsb2FkZXIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIGZyb209IjE0IiB0bz0iMiIgZHVyPSIwLjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICA8L2VsbGlwc2U+Cjwvc3ZnPgo=")
 +
    }
 +
}
 +
 +
.mdl-progress:not(.mdl-progress--indeterminate) > .auxbar, .mdl-progress:not(.mdl-progress__indeterminate) > .auxbar {
 +
    background-image: linear-gradient(to right, rgba(255, 255, 255, .9), rgba(255, 255, 255, .9)), linear-gradient(to right, #3f51b5, #3f51b5)
 +
}
 +
 +
.mdl-progress.mdl-progress--indeterminate > .bar1, .mdl-progress.mdl-progress__indeterminate > .bar1 {
 +
    -webkit-animation-name: indeterminate1;
 +
    animation-name: indeterminate1
 +
}
 +
 +
.mdl-progress.mdl-progress--indeterminate > .bar1, .mdl-progress.mdl-progress__indeterminate > .bar1, .mdl-progress.mdl-progress--indeterminate > .bar3, .mdl-progress.mdl-progress__indeterminate > .bar3 {
 +
    background-color: #3f51b5;
 +
    -webkit-animation-duration: 2s;
 +
    animation-duration: 2s;
 +
    -webkit-animation-iteration-count: infinite;
 +
    animation-iteration-count: infinite;
 +
    -webkit-animation-timing-function: linear;
 +
    animation-timing-function: linear
 +
}
 +
 +
.mdl-progress.mdl-progress--indeterminate > .bar3, .mdl-progress.mdl-progress__indeterminate > .bar3 {
 +
    background-image: none;
 +
    -webkit-animation-name: indeterminate2;
 +
    animation-name: indeterminate2
 +
}
 +
 +
 +
/*Grid & Cell*/
 +
 +
.mdl-grid {
 +
    display: -webkit-flex;
 +
    display: -ms-flexbox;
 +
    display: flex;
 +
    -webkit-flex-flow: row wrap;
 +
    -ms-flex-flow: row wrap;
 +
    flex-flow: row wrap;
 +
    margin: 0 auto;
 +
    -webkit-align-items: stretch;
 +
    -ms-flex-align: stretch;
 +
    align-items: stretch
 +
}
 +
 +
.mdl-grid.mdl-grid--no-spacing {
 +
    padding: 0
 +
}
 +
 +
.mdl-cell {
 +
    box-sizing: border-box
 +
}
 +
 +
.mdl-cell--top {
 +
    -webkit-align-self: flex-start;
 +
    -ms-flex-item-align: start;
 +
    align-self: flex-start
 +
}
 +
 +
.mdl-cell--middle {
 +
    -webkit-align-self: center;
 +
    -ms-flex-item-align: center;
 +
    -ms-grid-row-align: center;
 +
    align-self: center
 +
}
 +
 +
.mdl-cell--bottom {
 +
    -webkit-align-self: flex-end;
 +
    -ms-flex-item-align: end;
 +
    align-self: flex-end
 +
}
 +
 +
.mdl-cell--stretch {
 +
    -webkit-align-self: stretch;
 +
    -ms-flex-item-align: stretch;
 +
    -ms-grid-row-align: stretch;
 +
    align-self: stretch
 +
}
 +
 +
.mdl-grid.mdl-grid--no-spacing > .mdl-cell {
 +
    margin: 0
 +
}
 +
 +
.mdl-cell--order-1 {
 +
    -webkit-order: 1;
 +
    -ms-flex-order: 1;
 +
    order: 1
 +
}
 +
 +
.mdl-cell--order-2 {
 +
    -webkit-order: 2;
 +
    -ms-flex-order: 2;
 +
    order: 2
 +
}
 +
 +
.mdl-cell--order-3 {
 +
    -webkit-order: 3;
 +
    -ms-flex-order: 3;
 +
    order: 3
 +
}
 +
 +
.mdl-cell--order-4 {
 +
    -webkit-order: 4;
 +
    -ms-flex-order: 4;
 +
    order: 4
 +
}
 +
 +
.mdl-cell--order-5 {
 +
    -webkit-order: 5;
 +
    -ms-flex-order: 5;
 +
    order: 5
 +
}
 +
 +
.mdl-cell--order-6 {
 +
    -webkit-order: 6;
 +
    -ms-flex-order: 6;
 +
    order: 6
 +
}
 +
 +
.mdl-cell--order-7 {
 +
    -webkit-order: 7;
 +
    -ms-flex-order: 7;
 +
    order: 7
 +
}
 +
 +
.mdl-cell--order-8 {
 +
    -webkit-order: 8;
 +
    -ms-flex-order: 8;
 +
    order: 8
 +
}
 +
 +
.mdl-cell--order-9 {
 +
    -webkit-order: 9;
 +
    -ms-flex-order: 9;
 +
    order: 9
 +
}
 +
 +
.mdl-cell--order-10 {
 +
    -webkit-order: 10;
 +
    -ms-flex-order: 10;
 +
    order: 10
 +
}
 +
 +
.mdl-cell--order-11 {
 +
    -webkit-order: 11;
 +
    -ms-flex-order: 11;
 +
    order: 11
 +
}
 +
 +
.mdl-cell--order-12 {
 +
    -webkit-order: 12;
 +
    -ms-flex-order: 12;
 +
    order: 12
 +
}
 +
 +
@media (max-width: 479px) {
 +
    .mdl-grid {
 +
        padding: 8px
 +
    }
 +
 +
    .mdl-cell {
 +
        margin: 8px;
 +
        width: calc(100% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell {
 +
        width: 100%
 +
    }
 +
 +
    .mdl-cell--hide-phone {
 +
        display: none !important
 +
    }
 +
 +
    .mdl-cell--order-1-phone.mdl-cell--order-1-phone {
 +
        -webkit-order: 1;
 +
        -ms-flex-order: 1;
 +
        order: 1
 +
    }
 +
 +
    .mdl-cell--order-2-phone.mdl-cell--order-2-phone {
 +
        -webkit-order: 2;
 +
        -ms-flex-order: 2;
 +
        order: 2
 +
    }
 +
 +
    .mdl-cell--order-3-phone.mdl-cell--order-3-phone {
 +
        -webkit-order: 3;
 +
        -ms-flex-order: 3;
 +
        order: 3
 +
    }
 +
 +
    .mdl-cell--order-4-phone.mdl-cell--order-4-phone {
 +
        -webkit-order: 4;
 +
        -ms-flex-order: 4;
 +
        order: 4
 +
    }
 +
 +
    .mdl-cell--order-5-phone.mdl-cell--order-5-phone {
 +
        -webkit-order: 5;
 +
        -ms-flex-order: 5;
 +
        order: 5
 +
    }
 +
 +
    .mdl-cell--order-6-phone.mdl-cell--order-6-phone {
 +
        -webkit-order: 6;
 +
        -ms-flex-order: 6;
 +
        order: 6
 +
    }
 +
 +
    .mdl-cell--order-7-phone.mdl-cell--order-7-phone {
 +
        -webkit-order: 7;
 +
        -ms-flex-order: 7;
 +
        order: 7
 +
    }
 +
 +
    .mdl-cell--order-8-phone.mdl-cell--order-8-phone {
 +
        -webkit-order: 8;
 +
        -ms-flex-order: 8;
 +
        order: 8
 +
    }
 +
 +
    .mdl-cell--order-9-phone.mdl-cell--order-9-phone {
 +
        -webkit-order: 9;
 +
        -ms-flex-order: 9;
 +
        order: 9
 +
    }
 +
 +
    .mdl-cell--order-10-phone.mdl-cell--order-10-phone {
 +
        -webkit-order: 10;
 +
        -ms-flex-order: 10;
 +
        order: 10
 +
    }
 +
 +
    .mdl-cell--order-11-phone.mdl-cell--order-11-phone {
 +
        -webkit-order: 11;
 +
        -ms-flex-order: 11;
 +
        order: 11
 +
    }
 +
 +
    .mdl-cell--order-12-phone.mdl-cell--order-12-phone {
 +
        -webkit-order: 12;
 +
        -ms-flex-order: 12;
 +
        order: 12
 +
    }
 +
 +
    .mdl-cell--1-col, .mdl-cell--1-col-phone.mdl-cell--1-col-phone {
 +
        width: calc(25% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell--1-col, .mdl-grid--no-spacing > .mdl-cell--1-col-phone.mdl-cell--1-col-phone {
 +
        width: 25%
 +
    }
 +
 +
    .mdl-cell--2-col, .mdl-cell--2-col-phone.mdl-cell--2-col-phone {
 +
        width: calc(50% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell--2-col, .mdl-grid--no-spacing > .mdl-cell--2-col-phone.mdl-cell--2-col-phone {
 +
        width: 50%
 +
    }
 +
 +
    .mdl-cell--3-col, .mdl-cell--3-col-phone.mdl-cell--3-col-phone {
 +
        width: calc(75% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell--3-col, .mdl-grid--no-spacing > .mdl-cell--3-col-phone.mdl-cell--3-col-phone {
 +
        width: 75%
 +
    }
 +
 +
    .mdl-cell--4-col, .mdl-cell--4-col-phone.mdl-cell--4-col-phone {
 +
        width: calc(100% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell--4-col, .mdl-grid--no-spacing > .mdl-cell--4-col-phone.mdl-cell--4-col-phone {
 +
        width: 100%
 +
    }
 +
 +
    .mdl-cell--5-col, .mdl-cell--5-col-phone.mdl-cell--5-col-phone {
 +
        width: calc(100% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell--5-col, .mdl-grid--no-spacing > .mdl-cell--5-col-phone.mdl-cell--5-col-phone {
 +
        width: 100%
 +
    }
 +
 +
    .mdl-cell--6-col, .mdl-cell--6-col-phone.mdl-cell--6-col-phone {
 +
        width: calc(100% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell--6-col, .mdl-grid--no-spacing > .mdl-cell--6-col-phone.mdl-cell--6-col-phone {
 +
        width: 100%
 +
    }
 +
 +
    .mdl-cell--7-col, .mdl-cell--7-col-phone.mdl-cell--7-col-phone {
 +
        width: calc(100% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell--7-col, .mdl-grid--no-spacing > .mdl-cell--7-col-phone.mdl-cell--7-col-phone {
 +
        width: 100%
 +
    }
 +
 +
    .mdl-cell--8-col, .mdl-cell--8-col-phone.mdl-cell--8-col-phone {
 +
        width: calc(100% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell--8-col, .mdl-grid--no-spacing > .mdl-cell--8-col-phone.mdl-cell--8-col-phone {
 +
        width: 100%
 +
    }
 +
 +
    .mdl-cell--9-col, .mdl-cell--9-col-phone.mdl-cell--9-col-phone {
 +
        width: calc(100% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell--9-col, .mdl-grid--no-spacing > .mdl-cell--9-col-phone.mdl-cell--9-col-phone {
 +
        width: 100%
 +
    }
 +
 +
    .mdl-cell--10-col, .mdl-cell--10-col-phone.mdl-cell--10-col-phone {
 +
        width: calc(100% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell--10-col, .mdl-grid--no-spacing > .mdl-cell--10-col-phone.mdl-cell--10-col-phone {
 +
        width: 100%
 +
    }
 +
 +
    .mdl-cell--11-col, .mdl-cell--11-col-phone.mdl-cell--11-col-phone {
 +
        width: calc(100% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell--11-col, .mdl-grid--no-spacing > .mdl-cell--11-col-phone.mdl-cell--11-col-phone {
 +
        width: 100%
 +
    }
 +
 +
    .mdl-cell--12-col, .mdl-cell--12-col-phone.mdl-cell--12-col-phone {
 +
        width: calc(100% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell--12-col, .mdl-grid--no-spacing > .mdl-cell--12-col-phone.mdl-cell--12-col-phone {
 +
        width: 100%
 +
    }
 +
 +
    .mdl-cell--1-offset, .mdl-cell--1-offset-phone.mdl-cell--1-offset-phone {
 +
        margin-left: calc(25% + 8px)
 +
    }
 +
 +
    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset-phone.mdl-cell--1-offset-phone {
 +
        margin-left: 25%
 +
    }
 +
 +
    .mdl-cell--2-offset, .mdl-cell--2-offset-phone.mdl-cell--2-offset-phone {
 +
        margin-left: calc(50% + 8px)
 +
    }
 +
 +
    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset-phone.mdl-cell--2-offset-phone {
 +
        margin-left: 50%
 +
    }
 +
 +
    .mdl-cell--3-offset, .mdl-cell--3-offset-phone.mdl-cell--3-offset-phone {
 +
        margin-left: calc(75% + 8px)
 +
    }
 +
 +
    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset-phone.mdl-cell--3-offset-phone {
 +
        margin-left: 75%
 +
    }
 +
}
 +
 +
@media (min-width: 480px) and (max-width: 839px) {
 +
    .mdl-grid {
 +
        padding: 8px
 +
    }
 +
 +
    .mdl-cell {
 +
        margin: 8px;
 +
        width: calc(50% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell {
 +
        width: 50%
 +
    }
 +
 +
    .mdl-cell--hide-tablet {
 +
        display: none !important
 +
    }
 +
 +
    .mdl-cell--order-1-tablet.mdl-cell--order-1-tablet {
 +
        -webkit-order: 1;
 +
        -ms-flex-order: 1;
 +
        order: 1
 +
    }
 +
 +
    .mdl-cell--order-2-tablet.mdl-cell--order-2-tablet {
 +
        -webkit-order: 2;
 +
        -ms-flex-order: 2;
 +
        order: 2
 +
    }
 +
 +
    .mdl-cell--order-3-tablet.mdl-cell--order-3-tablet {
 +
        -webkit-order: 3;
 +
        -ms-flex-order: 3;
 +
        order: 3
 +
    }
 +
 +
    .mdl-cell--order-4-tablet.mdl-cell--order-4-tablet {
 +
        -webkit-order: 4;
 +
        -ms-flex-order: 4;
 +
        order: 4
 +
    }
 +
 +
    .mdl-cell--order-5-tablet.mdl-cell--order-5-tablet {
 +
        -webkit-order: 5;
 +
        -ms-flex-order: 5;
 +
        order: 5
 +
    }
 +
 +
    .mdl-cell--order-6-tablet.mdl-cell--order-6-tablet {
 +
        -webkit-order: 6;
 +
        -ms-flex-order: 6;
 +
        order: 6
 +
    }
 +
 +
    .mdl-cell--order-7-tablet.mdl-cell--order-7-tablet {
 +
        -webkit-order: 7;
 +
        -ms-flex-order: 7;
 +
        order: 7
 +
    }
 +
 +
    .mdl-cell--order-8-tablet.mdl-cell--order-8-tablet {
 +
        -webkit-order: 8;
 +
        -ms-flex-order: 8;
 +
        order: 8
 +
    }
 +
 +
    .mdl-cell--order-9-tablet.mdl-cell--order-9-tablet {
 +
        -webkit-order: 9;
 +
        -ms-flex-order: 9;
 +
        order: 9
 +
    }
 +
 +
    .mdl-cell--order-10-tablet.mdl-cell--order-10-tablet {
 +
        -webkit-order: 10;
 +
        -ms-flex-order: 10;
 +
        order: 10
 +
    }
 +
 +
    .mdl-cell--order-11-tablet.mdl-cell--order-11-tablet {
 +
        -webkit-order: 11;
 +
        -ms-flex-order: 11;
 +
        order: 11
 +
    }
 +
 +
    .mdl-cell--order-12-tablet.mdl-cell--order-12-tablet {
 +
        -webkit-order: 12;
 +
        -ms-flex-order: 12;
 +
        order: 12
 +
    }
 +
 +
    .mdl-cell--1-col, .mdl-cell--1-col-tablet.mdl-cell--1-col-tablet {
 +
        width: calc(12.5% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell--1-col, .mdl-grid--no-spacing > .mdl-cell--1-col-tablet.mdl-cell--1-col-tablet {
 +
        width: 12.5%
 +
    }
 +
 +
    .mdl-cell--2-col, .mdl-cell--2-col-tablet.mdl-cell--2-col-tablet {
 +
        width: calc(25% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell--2-col, .mdl-grid--no-spacing > .mdl-cell--2-col-tablet.mdl-cell--2-col-tablet {
 +
        width: 25%
 +
    }
 +
 +
    .mdl-cell--3-col, .mdl-cell--3-col-tablet.mdl-cell--3-col-tablet {
 +
        width: calc(37.5% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell--3-col, .mdl-grid--no-spacing > .mdl-cell--3-col-tablet.mdl-cell--3-col-tablet {
 +
        width: 37.5%
 +
    }
 +
 +
    .mdl-cell--4-col, .mdl-cell--4-col-tablet.mdl-cell--4-col-tablet {
 +
        width: calc(50% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell--4-col, .mdl-grid--no-spacing > .mdl-cell--4-col-tablet.mdl-cell--4-col-tablet {
 +
        width: 50%
 +
    }
 +
 +
    .mdl-cell--5-col, .mdl-cell--5-col-tablet.mdl-cell--5-col-tablet {
 +
        width: calc(62.5% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell--5-col, .mdl-grid--no-spacing > .mdl-cell--5-col-tablet.mdl-cell--5-col-tablet {
 +
        width: 62.5%
 +
    }
 +
 +
    .mdl-cell--6-col, .mdl-cell--6-col-tablet.mdl-cell--6-col-tablet {
 +
        width: calc(75% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell--6-col, .mdl-grid--no-spacing > .mdl-cell--6-col-tablet.mdl-cell--6-col-tablet {
 +
        width: 75%
 +
    }
 +
 +
    .mdl-cell--7-col, .mdl-cell--7-col-tablet.mdl-cell--7-col-tablet {
 +
        width: calc(87.5% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell--7-col, .mdl-grid--no-spacing > .mdl-cell--7-col-tablet.mdl-cell--7-col-tablet {
 +
        width: 87.5%
 +
    }
 +
 +
    .mdl-cell--8-col, .mdl-cell--8-col-tablet.mdl-cell--8-col-tablet {
 +
        width: calc(100% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell--8-col, .mdl-grid--no-spacing > .mdl-cell--8-col-tablet.mdl-cell--8-col-tablet {
 +
        width: 100%
 +
    }
 +
 +
    .mdl-cell--9-col, .mdl-cell--9-col-tablet.mdl-cell--9-col-tablet {
 +
        width: calc(100% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell--9-col, .mdl-grid--no-spacing > .mdl-cell--9-col-tablet.mdl-cell--9-col-tablet {
 +
        width: 100%
 +
    }
 +
 +
    .mdl-cell--10-col, .mdl-cell--10-col-tablet.mdl-cell--10-col-tablet {
 +
        width: calc(100% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell--10-col, .mdl-grid--no-spacing > .mdl-cell--10-col-tablet.mdl-cell--10-col-tablet {
 +
        width: 100%
 +
    }
 +
 +
    .mdl-cell--11-col, .mdl-cell--11-col-tablet.mdl-cell--11-col-tablet {
 +
        width: calc(100% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell--11-col, .mdl-grid--no-spacing > .mdl-cell--11-col-tablet.mdl-cell--11-col-tablet {
 +
        width: 100%
 +
    }
 +
 +
    .mdl-cell--12-col, .mdl-cell--12-col-tablet.mdl-cell--12-col-tablet {
 +
        width: calc(100% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell--12-col, .mdl-grid--no-spacing > .mdl-cell--12-col-tablet.mdl-cell--12-col-tablet {
 +
        width: 100%
 +
    }
 +
 +
    .mdl-cell--1-offset, .mdl-cell--1-offset-tablet.mdl-cell--1-offset-tablet {
 +
        margin-left: calc(12.5% + 8px)
 +
    }
 +
 +
    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset-tablet.mdl-cell--1-offset-tablet {
 +
        margin-left: 12.5%
 +
    }
 +
 +
    .mdl-cell--2-offset, .mdl-cell--2-offset-tablet.mdl-cell--2-offset-tablet {
 +
        margin-left: calc(25% + 8px)
 +
    }
 +
 +
    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset-tablet.mdl-cell--2-offset-tablet {
 +
        margin-left: 25%
 +
    }
 +
 +
    .mdl-cell--3-offset, .mdl-cell--3-offset-tablet.mdl-cell--3-offset-tablet {
 +
        margin-left: calc(37.5% + 8px)
 +
    }
 +
 +
    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset-tablet.mdl-cell--3-offset-tablet {
 +
        margin-left: 37.5%
 +
    }
 +
 +
    .mdl-cell--4-offset, .mdl-cell--4-offset-tablet.mdl-cell--4-offset-tablet {
 +
        margin-left: calc(50% + 8px)
 +
    }
 +
 +
    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--4-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--4-offset-tablet.mdl-cell--4-offset-tablet {
 +
        margin-left: 50%
 +
    }
 +
 +
    .mdl-cell--5-offset, .mdl-cell--5-offset-tablet.mdl-cell--5-offset-tablet {
 +
        margin-left: calc(62.5% + 8px)
 +
    }
 +
 +
    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--5-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--5-offset-tablet.mdl-cell--5-offset-tablet {
 +
        margin-left: 62.5%
 +
    }
 +
 +
    .mdl-cell--6-offset, .mdl-cell--6-offset-tablet.mdl-cell--6-offset-tablet {
 +
        margin-left: calc(75% + 8px)
 +
    }
 +
 +
    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--6-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--6-offset-tablet.mdl-cell--6-offset-tablet {
 +
        margin-left: 75%
 +
    }
 +
 +
    .mdl-cell--7-offset, .mdl-cell--7-offset-tablet.mdl-cell--7-offset-tablet {
 +
        margin-left: calc(87.5% + 8px)
 +
    }
 +
 +
    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--7-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--7-offset-tablet.mdl-cell--7-offset-tablet {
 +
        margin-left: 87.5%
 +
    }
 +
}
 +
 +
@media (min-width: 840px) {
 +
    .mdl-grid {
 +
        padding: 8px
 +
    }
 +
 +
    .mdl-cell {
 +
        margin: 8px;
 +
        width: calc(33.3333333333% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell {
 +
        width: 33.3333333333%
 +
    }
 +
 +
    .mdl-cell--hide-desktop {
 +
        display: none !important
 +
    }
 +
 +
    .mdl-cell--order-1-desktop.mdl-cell--order-1-desktop {
 +
        -webkit-order: 1;
 +
        -ms-flex-order: 1;
 +
        order: 1
 +
    }
 +
 +
    .mdl-cell--order-2-desktop.mdl-cell--order-2-desktop {
 +
        -webkit-order: 2;
 +
        -ms-flex-order: 2;
 +
        order: 2
 +
    }
 +
 +
    .mdl-cell--order-3-desktop.mdl-cell--order-3-desktop {
 +
        -webkit-order: 3;
 +
        -ms-flex-order: 3;
 +
        order: 3
 +
    }
 +
 +
    .mdl-cell--order-4-desktop.mdl-cell--order-4-desktop {
 +
        -webkit-order: 4;
 +
        -ms-flex-order: 4;
 +
        order: 4
 +
    }
 +
 +
    .mdl-cell--order-5-desktop.mdl-cell--order-5-desktop {
 +
        -webkit-order: 5;
 +
        -ms-flex-order: 5;
 +
        order: 5
 +
    }
 +
 +
    .mdl-cell--order-6-desktop.mdl-cell--order-6-desktop {
 +
        -webkit-order: 6;
 +
        -ms-flex-order: 6;
 +
        order: 6
 +
    }
 +
 +
    .mdl-cell--order-7-desktop.mdl-cell--order-7-desktop {
 +
        -webkit-order: 7;
 +
        -ms-flex-order: 7;
 +
        order: 7
 +
    }
 +
 +
    .mdl-cell--order-8-desktop.mdl-cell--order-8-desktop {
 +
        -webkit-order: 8;
 +
        -ms-flex-order: 8;
 +
        order: 8
 +
    }
 +
 +
    .mdl-cell--order-9-desktop.mdl-cell--order-9-desktop {
 +
        -webkit-order: 9;
 +
        -ms-flex-order: 9;
 +
        order: 9
 +
    }
 +
 +
    .mdl-cell--order-10-desktop.mdl-cell--order-10-desktop {
 +
        -webkit-order: 10;
 +
        -ms-flex-order: 10;
 +
        order: 10
 +
    }
 +
 +
    .mdl-cell--order-11-desktop.mdl-cell--order-11-desktop {
 +
        -webkit-order: 11;
 +
        -ms-flex-order: 11;
 +
        order: 11
 +
    }
 +
 +
    .mdl-cell--order-12-desktop.mdl-cell--order-12-desktop {
 +
        -webkit-order: 12;
 +
        -ms-flex-order: 12;
 +
        order: 12
 +
    }
 +
 +
    .mdl-cell--1-col, .mdl-cell--1-col-desktop.mdl-cell--1-col-desktop {
 +
        width: calc(8.3333333333% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell--1-col, .mdl-grid--no-spacing > .mdl-cell--1-col-desktop.mdl-cell--1-col-desktop {
 +
        width: 8.3333333333%
 +
    }
 +
 +
    .mdl-cell--2-col, .mdl-cell--2-col-desktop.mdl-cell--2-col-desktop {
 +
        width: calc(16.6666666667% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell--2-col, .mdl-grid--no-spacing > .mdl-cell--2-col-desktop.mdl-cell--2-col-desktop {
 +
        width: 16.6666666667%
 +
    }
 +
 +
    .mdl-cell--3-col, .mdl-cell--3-col-desktop.mdl-cell--3-col-desktop {
 +
        width: calc(25% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell--3-col, .mdl-grid--no-spacing > .mdl-cell--3-col-desktop.mdl-cell--3-col-desktop {
 +
        width: 25%
 +
    }
 +
 +
    .mdl-cell--4-col, .mdl-cell--4-col-desktop.mdl-cell--4-col-desktop {
 +
        width: calc(33.3333333333% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell--4-col, .mdl-grid--no-spacing > .mdl-cell--4-col-desktop.mdl-cell--4-col-desktop {
 +
        width: 33.3333333333%
 +
    }
 +
 +
    .mdl-cell--5-col, .mdl-cell--5-col-desktop.mdl-cell--5-col-desktop {
 +
        width: calc(41.6666666667% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell--5-col, .mdl-grid--no-spacing > .mdl-cell--5-col-desktop.mdl-cell--5-col-desktop {
 +
        width: 41.6666666667%
 +
    }
 +
 +
    .mdl-cell--6-col, .mdl-cell--6-col-desktop.mdl-cell--6-col-desktop {
 +
        width: calc(50% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell--6-col, .mdl-grid--no-spacing > .mdl-cell--6-col-desktop.mdl-cell--6-col-desktop {
 +
        width: 50%
 +
    }
 +
 +
    .mdl-cell--7-col, .mdl-cell--7-col-desktop.mdl-cell--7-col-desktop {
 +
        width: calc(58.3333333333% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell--7-col, .mdl-grid--no-spacing > .mdl-cell--7-col-desktop.mdl-cell--7-col-desktop {
 +
        width: 58.3333333333%
 +
    }
 +
 +
    .mdl-cell--8-col, .mdl-cell--8-col-desktop.mdl-cell--8-col-desktop {
 +
        width: calc(66.6666666667% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell--8-col, .mdl-grid--no-spacing > .mdl-cell--8-col-desktop.mdl-cell--8-col-desktop {
 +
        width: 66.6666666667%
 +
    }
 +
 +
    .mdl-cell--9-col, .mdl-cell--9-col-desktop.mdl-cell--9-col-desktop {
 +
        width: calc(75% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell--9-col, .mdl-grid--no-spacing > .mdl-cell--9-col-desktop.mdl-cell--9-col-desktop {
 +
        width: 75%
 +
    }
 +
 +
    .mdl-cell--10-col, .mdl-cell--10-col-desktop.mdl-cell--10-col-desktop {
 +
        width: calc(83.3333333333% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell--10-col, .mdl-grid--no-spacing > .mdl-cell--10-col-desktop.mdl-cell--10-col-desktop {
 +
        width: 83.3333333333%
 +
    }
 +
 +
    .mdl-cell--11-col, .mdl-cell--11-col-desktop.mdl-cell--11-col-desktop {
 +
        width: calc(91.6666666667% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell--11-col, .mdl-grid--no-spacing > .mdl-cell--11-col-desktop.mdl-cell--11-col-desktop {
 +
        width: 91.6666666667%
 +
    }
 +
 +
    .mdl-cell--12-col, .mdl-cell--12-col-desktop.mdl-cell--12-col-desktop {
 +
        width: calc(100% - 16px)
 +
    }
 +
 +
    .mdl-grid--no-spacing > .mdl-cell--12-col, .mdl-grid--no-spacing > .mdl-cell--12-col-desktop.mdl-cell--12-col-desktop {
 +
        width: 100%
 +
    }
 +
 +
    .mdl-cell--1-offset, .mdl-cell--1-offset-desktop.mdl-cell--1-offset-desktop {
 +
        margin-left: calc(8.3333333333% + 8px)
 +
    }
 +
 +
    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset-desktop.mdl-cell--1-offset-desktop {
 +
        margin-left: 8.3333333333%
 +
    }
 +
 +
    .mdl-cell--2-offset, .mdl-cell--2-offset-desktop.mdl-cell--2-offset-desktop {
 +
        margin-left: calc(16.6666666667% + 8px)
 +
    }
 +
 +
    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset-desktop.mdl-cell--2-offset-desktop {
 +
        margin-left: 16.6666666667%
 +
    }
 +
 +
    .mdl-cell--3-offset, .mdl-cell--3-offset-desktop.mdl-cell--3-offset-desktop {
 +
        margin-left: calc(25% + 8px)
 +
    }
 +
 +
    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset-desktop.mdl-cell--3-offset-desktop {
 +
        margin-left: 25%
 +
    }
 +
 +
    .mdl-cell--4-offset, .mdl-cell--4-offset-desktop.mdl-cell--4-offset-desktop {
 +
        margin-left: calc(33.3333333333% + 8px)
 +
    }
 +
 +
    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--4-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--4-offset-desktop.mdl-cell--4-offset-desktop {
 +
        margin-left: 33.3333333333%
 +
    }
 +
 +
    .mdl-cell--5-offset, .mdl-cell--5-offset-desktop.mdl-cell--5-offset-desktop {
 +
        margin-left: calc(41.6666666667% + 8px)
 +
    }
 +
 +
    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--5-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--5-offset-desktop.mdl-cell--5-offset-desktop {
 +
        margin-left: 41.6666666667%
 +
    }
 +
 +
    .mdl-cell--6-offset, .mdl-cell--6-offset-desktop.mdl-cell--6-offset-desktop {
 +
        margin-left: calc(50% + 8px)
 +
    }
 +
 +
    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--6-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--6-offset-desktop.mdl-cell--6-offset-desktop {
 +
        margin-left: 50%
 +
    }
 +
 +
    .mdl-cell--7-offset, .mdl-cell--7-offset-desktop.mdl-cell--7-offset-desktop {
 +
        margin-left: calc(58.3333333333% + 8px)
 +
    }
 +
 +
    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--7-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--7-offset-desktop.mdl-cell--7-offset-desktop {
 +
        margin-left: 58.3333333333%
 +
    }
 +
 +
    .mdl-cell--8-offset, .mdl-cell--8-offset-desktop.mdl-cell--8-offset-desktop {
 +
        margin-left: calc(66.6666666667% + 8px)
 +
    }
 +
 +
    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--8-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--8-offset-desktop.mdl-cell--8-offset-desktop {
 +
        margin-left: 66.6666666667%
 +
    }
 +
 +
    .mdl-cell--9-offset, .mdl-cell--9-offset-desktop.mdl-cell--9-offset-desktop {
 +
        margin-left: calc(75% + 8px)
 +
    }
 +
 +
    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--9-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--9-offset-desktop.mdl-cell--9-offset-desktop {
 +
        margin-left: 75%
 +
    }
 +
 +
    .mdl-cell--10-offset, .mdl-cell--10-offset-desktop.mdl-cell--10-offset-desktop {
 +
        margin-left: calc(83.3333333333% + 8px)
 +
    }
 +
 +
    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--10-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--10-offset-desktop.mdl-cell--10-offset-desktop {
 +
        margin-left: 83.3333333333%
 +
    }
 +
 +
    .mdl-cell--11-offset, .mdl-cell--11-offset-desktop.mdl-cell--11-offset-desktop {
 +
        margin-left: calc(91.6666666667% + 8px)
 +
    }
 +
 +
    .mdl-grid.mdl-grid--no-spacing > .mdl-cell--11-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--11-offset-desktop.mdl-cell--11-offset-desktop {
 +
        margin-left: 91.6666666667%
 +
    }
 
}
 
}

Revision as of 12:54, 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: #000000;
   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

}


/* progress */ .mdl-progress { 

   display: block;
   position: relative;
   height: 4px;
   width: 500px;
   max-width: 100%

}

.mdl-progress > .bar { 

   display: block;
   position: absolute;
   top: 0;
   bottom: 0;
   width: 0%;
   transition: width .2s cubic-bezier(.4, 0, .2, 1)

}

.mdl-progress > .progressbar { 

   background-color: #3f51b5;
   z-index: 1;
   left: 0

}

.mdl-progress > .bufferbar { 

   background-image: linear-gradient(to right, rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)), linear-gradient(to right, #3f51b5, #3f51b5);
   z-index: 0;
   left: 0

}

.mdl-progress > .auxbar { 

   right: 0

}

@supports (-webkit-appearance:none) { 

   .mdl-progress:not(.mdl-progress--indeterminate):not(.mdl-progress--indeterminate) > .auxbar, .mdl-progress:not(.mdl-progress__indeterminate):not(.mdl-progress__indeterminate) > .auxbar {
       background-image: linear-gradient(to right, rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)), linear-gradient(to right, #3f51b5, #3f51b5);
       -webkit-mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEyIiBoZWlnaHQ9IjQiIHZpZXdQb3J0PSIwIDAgMTIgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxlbGxpcHNlIGN4PSIyIiBjeT0iMiIgcng9IjIiIHJ5PSIyIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4IiBmcm9tPSIyIiB0bz0iLTEwIiBkdXI9IjAuNnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogIDwvZWxsaXBzZT4KICA8ZWxsaXBzZSBjeD0iMTQiIGN5PSIyIiByeD0iMiIgcnk9IjIiIGNsYXNzPSJsb2FkZXIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIGZyb209IjE0IiB0bz0iMiIgZHVyPSIwLjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICA8L2VsbGlwc2U+Cjwvc3ZnPgo=");
       mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEyIiBoZWlnaHQ9IjQiIHZpZXdQb3J0PSIwIDAgMTIgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxlbGxpcHNlIGN4PSIyIiBjeT0iMiIgcng9IjIiIHJ5PSIyIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4IiBmcm9tPSIyIiB0bz0iLTEwIiBkdXI9IjAuNnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogIDwvZWxsaXBzZT4KICA8ZWxsaXBzZSBjeD0iMTQiIGN5PSIyIiByeD0iMiIgcnk9IjIiIGNsYXNzPSJsb2FkZXIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIGZyb209IjE0IiB0bz0iMiIgZHVyPSIwLjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICA8L2VsbGlwc2U+Cjwvc3ZnPgo=")
   }

}

.mdl-progress:not(.mdl-progress--indeterminate) > .auxbar, .mdl-progress:not(.mdl-progress__indeterminate) > .auxbar { 

   background-image: linear-gradient(to right, rgba(255, 255, 255, .9), rgba(255, 255, 255, .9)), linear-gradient(to right, #3f51b5, #3f51b5)

}

.mdl-progress.mdl-progress--indeterminate > .bar1, .mdl-progress.mdl-progress__indeterminate > .bar1 { 

   -webkit-animation-name: indeterminate1;
   animation-name: indeterminate1

}

.mdl-progress.mdl-progress--indeterminate > .bar1, .mdl-progress.mdl-progress__indeterminate > .bar1, .mdl-progress.mdl-progress--indeterminate > .bar3, .mdl-progress.mdl-progress__indeterminate > .bar3 { 

   background-color: #3f51b5;
   -webkit-animation-duration: 2s;
   animation-duration: 2s;
   -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
   -webkit-animation-timing-function: linear;
   animation-timing-function: linear

}

.mdl-progress.mdl-progress--indeterminate > .bar3, .mdl-progress.mdl-progress__indeterminate > .bar3 { 

   background-image: none;
   -webkit-animation-name: indeterminate2;
   animation-name: indeterminate2

}


/*Grid & Cell*/

.mdl-grid { 

   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-flex-flow: row wrap;
   -ms-flex-flow: row wrap;
   flex-flow: row wrap;
   margin: 0 auto;
   -webkit-align-items: stretch;
   -ms-flex-align: stretch;
   align-items: stretch

}

.mdl-grid.mdl-grid--no-spacing { 

   padding: 0

}

.mdl-cell { 

   box-sizing: border-box

}

.mdl-cell--top { 

   -webkit-align-self: flex-start;
   -ms-flex-item-align: start;
   align-self: flex-start

}

.mdl-cell--middle { 

   -webkit-align-self: center;
   -ms-flex-item-align: center;
   -ms-grid-row-align: center;
   align-self: center

}

.mdl-cell--bottom { 

   -webkit-align-self: flex-end;
   -ms-flex-item-align: end;
   align-self: flex-end

}

.mdl-cell--stretch { 

   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   -ms-grid-row-align: stretch;
   align-self: stretch

}

.mdl-grid.mdl-grid--no-spacing > .mdl-cell { 

   margin: 0

}

.mdl-cell--order-1 { 

   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1

}

.mdl-cell--order-2 { 

   -webkit-order: 2;
   -ms-flex-order: 2;
   order: 2

}

.mdl-cell--order-3 { 

   -webkit-order: 3;
   -ms-flex-order: 3;
   order: 3

}

.mdl-cell--order-4 { 

   -webkit-order: 4;
   -ms-flex-order: 4;
   order: 4

}

.mdl-cell--order-5 { 

   -webkit-order: 5;
   -ms-flex-order: 5;
   order: 5

}

.mdl-cell--order-6 { 

   -webkit-order: 6;
   -ms-flex-order: 6;
   order: 6

}

.mdl-cell--order-7 { 

   -webkit-order: 7;
   -ms-flex-order: 7;
   order: 7

}

.mdl-cell--order-8 { 

   -webkit-order: 8;
   -ms-flex-order: 8;
   order: 8

}

.mdl-cell--order-9 { 

   -webkit-order: 9;
   -ms-flex-order: 9;
   order: 9

}

.mdl-cell--order-10 { 

   -webkit-order: 10;
   -ms-flex-order: 10;
   order: 10

}

.mdl-cell--order-11 { 

   -webkit-order: 11;
   -ms-flex-order: 11;
   order: 11

}

.mdl-cell--order-12 { 

   -webkit-order: 12;
   -ms-flex-order: 12;
   order: 12

}

@media (max-width: 479px) { 

   .mdl-grid {
       padding: 8px
   }

   .mdl-cell {
       margin: 8px;
       width: calc(100% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell {
       width: 100%
   }

   .mdl-cell--hide-phone {
       display: none !important
   }

   .mdl-cell--order-1-phone.mdl-cell--order-1-phone {
       -webkit-order: 1;
       -ms-flex-order: 1;
       order: 1
   }

   .mdl-cell--order-2-phone.mdl-cell--order-2-phone {
       -webkit-order: 2;
       -ms-flex-order: 2;
       order: 2
   }

   .mdl-cell--order-3-phone.mdl-cell--order-3-phone {
       -webkit-order: 3;
       -ms-flex-order: 3;
       order: 3
   }

   .mdl-cell--order-4-phone.mdl-cell--order-4-phone {
       -webkit-order: 4;
       -ms-flex-order: 4;
       order: 4
   }

   .mdl-cell--order-5-phone.mdl-cell--order-5-phone {
       -webkit-order: 5;
       -ms-flex-order: 5;
       order: 5
   }

   .mdl-cell--order-6-phone.mdl-cell--order-6-phone {
       -webkit-order: 6;
       -ms-flex-order: 6;
       order: 6
   }

   .mdl-cell--order-7-phone.mdl-cell--order-7-phone {
       -webkit-order: 7;
       -ms-flex-order: 7;
       order: 7
   }

   .mdl-cell--order-8-phone.mdl-cell--order-8-phone {
       -webkit-order: 8;
       -ms-flex-order: 8;
       order: 8
   }

   .mdl-cell--order-9-phone.mdl-cell--order-9-phone {
       -webkit-order: 9;
       -ms-flex-order: 9;
       order: 9
   }

   .mdl-cell--order-10-phone.mdl-cell--order-10-phone {
       -webkit-order: 10;
       -ms-flex-order: 10;
       order: 10
   }

   .mdl-cell--order-11-phone.mdl-cell--order-11-phone {
       -webkit-order: 11;
       -ms-flex-order: 11;
       order: 11
   }

   .mdl-cell--order-12-phone.mdl-cell--order-12-phone {
       -webkit-order: 12;
       -ms-flex-order: 12;
       order: 12
   }

   .mdl-cell--1-col, .mdl-cell--1-col-phone.mdl-cell--1-col-phone {
       width: calc(25% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell--1-col, .mdl-grid--no-spacing > .mdl-cell--1-col-phone.mdl-cell--1-col-phone {
       width: 25%
   }

   .mdl-cell--2-col, .mdl-cell--2-col-phone.mdl-cell--2-col-phone {
       width: calc(50% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell--2-col, .mdl-grid--no-spacing > .mdl-cell--2-col-phone.mdl-cell--2-col-phone {
       width: 50%
   }

   .mdl-cell--3-col, .mdl-cell--3-col-phone.mdl-cell--3-col-phone {
       width: calc(75% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell--3-col, .mdl-grid--no-spacing > .mdl-cell--3-col-phone.mdl-cell--3-col-phone {
       width: 75%
   }

   .mdl-cell--4-col, .mdl-cell--4-col-phone.mdl-cell--4-col-phone {
       width: calc(100% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell--4-col, .mdl-grid--no-spacing > .mdl-cell--4-col-phone.mdl-cell--4-col-phone {
       width: 100%
   }

   .mdl-cell--5-col, .mdl-cell--5-col-phone.mdl-cell--5-col-phone {
       width: calc(100% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell--5-col, .mdl-grid--no-spacing > .mdl-cell--5-col-phone.mdl-cell--5-col-phone {
       width: 100%
   }

   .mdl-cell--6-col, .mdl-cell--6-col-phone.mdl-cell--6-col-phone {
       width: calc(100% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell--6-col, .mdl-grid--no-spacing > .mdl-cell--6-col-phone.mdl-cell--6-col-phone {
       width: 100%
   }

   .mdl-cell--7-col, .mdl-cell--7-col-phone.mdl-cell--7-col-phone {
       width: calc(100% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell--7-col, .mdl-grid--no-spacing > .mdl-cell--7-col-phone.mdl-cell--7-col-phone {
       width: 100%
   }

   .mdl-cell--8-col, .mdl-cell--8-col-phone.mdl-cell--8-col-phone {
       width: calc(100% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell--8-col, .mdl-grid--no-spacing > .mdl-cell--8-col-phone.mdl-cell--8-col-phone {
       width: 100%
   }

   .mdl-cell--9-col, .mdl-cell--9-col-phone.mdl-cell--9-col-phone {
       width: calc(100% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell--9-col, .mdl-grid--no-spacing > .mdl-cell--9-col-phone.mdl-cell--9-col-phone {
       width: 100%
   }

   .mdl-cell--10-col, .mdl-cell--10-col-phone.mdl-cell--10-col-phone {
       width: calc(100% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell--10-col, .mdl-grid--no-spacing > .mdl-cell--10-col-phone.mdl-cell--10-col-phone {
       width: 100%
   }

   .mdl-cell--11-col, .mdl-cell--11-col-phone.mdl-cell--11-col-phone {
       width: calc(100% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell--11-col, .mdl-grid--no-spacing > .mdl-cell--11-col-phone.mdl-cell--11-col-phone {
       width: 100%
   }

   .mdl-cell--12-col, .mdl-cell--12-col-phone.mdl-cell--12-col-phone {
       width: calc(100% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell--12-col, .mdl-grid--no-spacing > .mdl-cell--12-col-phone.mdl-cell--12-col-phone {
       width: 100%
   }

   .mdl-cell--1-offset, .mdl-cell--1-offset-phone.mdl-cell--1-offset-phone {
       margin-left: calc(25% + 8px)
   }

   .mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset-phone.mdl-cell--1-offset-phone {
       margin-left: 25%
   }

   .mdl-cell--2-offset, .mdl-cell--2-offset-phone.mdl-cell--2-offset-phone {
       margin-left: calc(50% + 8px)
   }

   .mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset-phone.mdl-cell--2-offset-phone {
       margin-left: 50%
   }

   .mdl-cell--3-offset, .mdl-cell--3-offset-phone.mdl-cell--3-offset-phone {
       margin-left: calc(75% + 8px)
   }

   .mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset-phone.mdl-cell--3-offset-phone {
       margin-left: 75%
   }

}

@media (min-width: 480px) and (max-width: 839px) { 

   .mdl-grid {
       padding: 8px
   }

   .mdl-cell {
       margin: 8px;
       width: calc(50% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell {
       width: 50%
   }

   .mdl-cell--hide-tablet {
       display: none !important
   }

   .mdl-cell--order-1-tablet.mdl-cell--order-1-tablet {
       -webkit-order: 1;
       -ms-flex-order: 1;
       order: 1
   }

   .mdl-cell--order-2-tablet.mdl-cell--order-2-tablet {
       -webkit-order: 2;
       -ms-flex-order: 2;
       order: 2
   }

   .mdl-cell--order-3-tablet.mdl-cell--order-3-tablet {
       -webkit-order: 3;
       -ms-flex-order: 3;
       order: 3
   }

   .mdl-cell--order-4-tablet.mdl-cell--order-4-tablet {
       -webkit-order: 4;
       -ms-flex-order: 4;
       order: 4
   }

   .mdl-cell--order-5-tablet.mdl-cell--order-5-tablet {
       -webkit-order: 5;
       -ms-flex-order: 5;
       order: 5
   }

   .mdl-cell--order-6-tablet.mdl-cell--order-6-tablet {
       -webkit-order: 6;
       -ms-flex-order: 6;
       order: 6
   }

   .mdl-cell--order-7-tablet.mdl-cell--order-7-tablet {
       -webkit-order: 7;
       -ms-flex-order: 7;
       order: 7
   }

   .mdl-cell--order-8-tablet.mdl-cell--order-8-tablet {
       -webkit-order: 8;
       -ms-flex-order: 8;
       order: 8
   }

   .mdl-cell--order-9-tablet.mdl-cell--order-9-tablet {
       -webkit-order: 9;
       -ms-flex-order: 9;
       order: 9
   }

   .mdl-cell--order-10-tablet.mdl-cell--order-10-tablet {
       -webkit-order: 10;
       -ms-flex-order: 10;
       order: 10
   }

   .mdl-cell--order-11-tablet.mdl-cell--order-11-tablet {
       -webkit-order: 11;
       -ms-flex-order: 11;
       order: 11
   }

   .mdl-cell--order-12-tablet.mdl-cell--order-12-tablet {
       -webkit-order: 12;
       -ms-flex-order: 12;
       order: 12
   }

   .mdl-cell--1-col, .mdl-cell--1-col-tablet.mdl-cell--1-col-tablet {
       width: calc(12.5% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell--1-col, .mdl-grid--no-spacing > .mdl-cell--1-col-tablet.mdl-cell--1-col-tablet {
       width: 12.5%
   }

   .mdl-cell--2-col, .mdl-cell--2-col-tablet.mdl-cell--2-col-tablet {
       width: calc(25% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell--2-col, .mdl-grid--no-spacing > .mdl-cell--2-col-tablet.mdl-cell--2-col-tablet {
       width: 25%
   }

   .mdl-cell--3-col, .mdl-cell--3-col-tablet.mdl-cell--3-col-tablet {
       width: calc(37.5% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell--3-col, .mdl-grid--no-spacing > .mdl-cell--3-col-tablet.mdl-cell--3-col-tablet {
       width: 37.5%
   }

   .mdl-cell--4-col, .mdl-cell--4-col-tablet.mdl-cell--4-col-tablet {
       width: calc(50% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell--4-col, .mdl-grid--no-spacing > .mdl-cell--4-col-tablet.mdl-cell--4-col-tablet {
       width: 50%
   }

   .mdl-cell--5-col, .mdl-cell--5-col-tablet.mdl-cell--5-col-tablet {
       width: calc(62.5% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell--5-col, .mdl-grid--no-spacing > .mdl-cell--5-col-tablet.mdl-cell--5-col-tablet {
       width: 62.5%
   }

   .mdl-cell--6-col, .mdl-cell--6-col-tablet.mdl-cell--6-col-tablet {
       width: calc(75% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell--6-col, .mdl-grid--no-spacing > .mdl-cell--6-col-tablet.mdl-cell--6-col-tablet {
       width: 75%
   }

   .mdl-cell--7-col, .mdl-cell--7-col-tablet.mdl-cell--7-col-tablet {
       width: calc(87.5% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell--7-col, .mdl-grid--no-spacing > .mdl-cell--7-col-tablet.mdl-cell--7-col-tablet {
       width: 87.5%
   }

   .mdl-cell--8-col, .mdl-cell--8-col-tablet.mdl-cell--8-col-tablet {
       width: calc(100% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell--8-col, .mdl-grid--no-spacing > .mdl-cell--8-col-tablet.mdl-cell--8-col-tablet {
       width: 100%
   }

   .mdl-cell--9-col, .mdl-cell--9-col-tablet.mdl-cell--9-col-tablet {
       width: calc(100% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell--9-col, .mdl-grid--no-spacing > .mdl-cell--9-col-tablet.mdl-cell--9-col-tablet {
       width: 100%
   }

   .mdl-cell--10-col, .mdl-cell--10-col-tablet.mdl-cell--10-col-tablet {
       width: calc(100% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell--10-col, .mdl-grid--no-spacing > .mdl-cell--10-col-tablet.mdl-cell--10-col-tablet {
       width: 100%
   }

   .mdl-cell--11-col, .mdl-cell--11-col-tablet.mdl-cell--11-col-tablet {
       width: calc(100% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell--11-col, .mdl-grid--no-spacing > .mdl-cell--11-col-tablet.mdl-cell--11-col-tablet {
       width: 100%
   }

   .mdl-cell--12-col, .mdl-cell--12-col-tablet.mdl-cell--12-col-tablet {
       width: calc(100% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell--12-col, .mdl-grid--no-spacing > .mdl-cell--12-col-tablet.mdl-cell--12-col-tablet {
       width: 100%
   }

   .mdl-cell--1-offset, .mdl-cell--1-offset-tablet.mdl-cell--1-offset-tablet {
       margin-left: calc(12.5% + 8px)
   }

   .mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset-tablet.mdl-cell--1-offset-tablet {
       margin-left: 12.5%
   }

   .mdl-cell--2-offset, .mdl-cell--2-offset-tablet.mdl-cell--2-offset-tablet {
       margin-left: calc(25% + 8px)
   }

   .mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset-tablet.mdl-cell--2-offset-tablet {
       margin-left: 25%
   }

   .mdl-cell--3-offset, .mdl-cell--3-offset-tablet.mdl-cell--3-offset-tablet {
       margin-left: calc(37.5% + 8px)
   }

   .mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset-tablet.mdl-cell--3-offset-tablet {
       margin-left: 37.5%
   }

   .mdl-cell--4-offset, .mdl-cell--4-offset-tablet.mdl-cell--4-offset-tablet {
       margin-left: calc(50% + 8px)
   }

   .mdl-grid.mdl-grid--no-spacing > .mdl-cell--4-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--4-offset-tablet.mdl-cell--4-offset-tablet {
       margin-left: 50%
   }

   .mdl-cell--5-offset, .mdl-cell--5-offset-tablet.mdl-cell--5-offset-tablet {
       margin-left: calc(62.5% + 8px)
   }

   .mdl-grid.mdl-grid--no-spacing > .mdl-cell--5-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--5-offset-tablet.mdl-cell--5-offset-tablet {
       margin-left: 62.5%
   }

   .mdl-cell--6-offset, .mdl-cell--6-offset-tablet.mdl-cell--6-offset-tablet {
       margin-left: calc(75% + 8px)
   }

   .mdl-grid.mdl-grid--no-spacing > .mdl-cell--6-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--6-offset-tablet.mdl-cell--6-offset-tablet {
       margin-left: 75%
   }

   .mdl-cell--7-offset, .mdl-cell--7-offset-tablet.mdl-cell--7-offset-tablet {
       margin-left: calc(87.5% + 8px)
   }

   .mdl-grid.mdl-grid--no-spacing > .mdl-cell--7-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--7-offset-tablet.mdl-cell--7-offset-tablet {
       margin-left: 87.5%
   }

}

@media (min-width: 840px) { 

   .mdl-grid {
       padding: 8px
   }

   .mdl-cell {
       margin: 8px;
       width: calc(33.3333333333% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell {
       width: 33.3333333333%
   }

   .mdl-cell--hide-desktop {
       display: none !important
   }

   .mdl-cell--order-1-desktop.mdl-cell--order-1-desktop {
       -webkit-order: 1;
       -ms-flex-order: 1;
       order: 1
   }

   .mdl-cell--order-2-desktop.mdl-cell--order-2-desktop {
       -webkit-order: 2;
       -ms-flex-order: 2;
       order: 2
   }

   .mdl-cell--order-3-desktop.mdl-cell--order-3-desktop {
       -webkit-order: 3;
       -ms-flex-order: 3;
       order: 3
   }

   .mdl-cell--order-4-desktop.mdl-cell--order-4-desktop {
       -webkit-order: 4;
       -ms-flex-order: 4;
       order: 4
   }

   .mdl-cell--order-5-desktop.mdl-cell--order-5-desktop {
       -webkit-order: 5;
       -ms-flex-order: 5;
       order: 5
   }

   .mdl-cell--order-6-desktop.mdl-cell--order-6-desktop {
       -webkit-order: 6;
       -ms-flex-order: 6;
       order: 6
   }

   .mdl-cell--order-7-desktop.mdl-cell--order-7-desktop {
       -webkit-order: 7;
       -ms-flex-order: 7;
       order: 7
   }

   .mdl-cell--order-8-desktop.mdl-cell--order-8-desktop {
       -webkit-order: 8;
       -ms-flex-order: 8;
       order: 8
   }

   .mdl-cell--order-9-desktop.mdl-cell--order-9-desktop {
       -webkit-order: 9;
       -ms-flex-order: 9;
       order: 9
   }

   .mdl-cell--order-10-desktop.mdl-cell--order-10-desktop {
       -webkit-order: 10;
       -ms-flex-order: 10;
       order: 10
   }

   .mdl-cell--order-11-desktop.mdl-cell--order-11-desktop {
       -webkit-order: 11;
       -ms-flex-order: 11;
       order: 11
   }

   .mdl-cell--order-12-desktop.mdl-cell--order-12-desktop {
       -webkit-order: 12;
       -ms-flex-order: 12;
       order: 12
   }

   .mdl-cell--1-col, .mdl-cell--1-col-desktop.mdl-cell--1-col-desktop {
       width: calc(8.3333333333% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell--1-col, .mdl-grid--no-spacing > .mdl-cell--1-col-desktop.mdl-cell--1-col-desktop {
       width: 8.3333333333%
   }

   .mdl-cell--2-col, .mdl-cell--2-col-desktop.mdl-cell--2-col-desktop {
       width: calc(16.6666666667% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell--2-col, .mdl-grid--no-spacing > .mdl-cell--2-col-desktop.mdl-cell--2-col-desktop {
       width: 16.6666666667%
   }

   .mdl-cell--3-col, .mdl-cell--3-col-desktop.mdl-cell--3-col-desktop {
       width: calc(25% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell--3-col, .mdl-grid--no-spacing > .mdl-cell--3-col-desktop.mdl-cell--3-col-desktop {
       width: 25%
   }

   .mdl-cell--4-col, .mdl-cell--4-col-desktop.mdl-cell--4-col-desktop {
       width: calc(33.3333333333% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell--4-col, .mdl-grid--no-spacing > .mdl-cell--4-col-desktop.mdl-cell--4-col-desktop {
       width: 33.3333333333%
   }

   .mdl-cell--5-col, .mdl-cell--5-col-desktop.mdl-cell--5-col-desktop {
       width: calc(41.6666666667% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell--5-col, .mdl-grid--no-spacing > .mdl-cell--5-col-desktop.mdl-cell--5-col-desktop {
       width: 41.6666666667%
   }

   .mdl-cell--6-col, .mdl-cell--6-col-desktop.mdl-cell--6-col-desktop {
       width: calc(50% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell--6-col, .mdl-grid--no-spacing > .mdl-cell--6-col-desktop.mdl-cell--6-col-desktop {
       width: 50%
   }

   .mdl-cell--7-col, .mdl-cell--7-col-desktop.mdl-cell--7-col-desktop {
       width: calc(58.3333333333% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell--7-col, .mdl-grid--no-spacing > .mdl-cell--7-col-desktop.mdl-cell--7-col-desktop {
       width: 58.3333333333%
   }

   .mdl-cell--8-col, .mdl-cell--8-col-desktop.mdl-cell--8-col-desktop {
       width: calc(66.6666666667% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell--8-col, .mdl-grid--no-spacing > .mdl-cell--8-col-desktop.mdl-cell--8-col-desktop {
       width: 66.6666666667%
   }

   .mdl-cell--9-col, .mdl-cell--9-col-desktop.mdl-cell--9-col-desktop {
       width: calc(75% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell--9-col, .mdl-grid--no-spacing > .mdl-cell--9-col-desktop.mdl-cell--9-col-desktop {
       width: 75%
   }

   .mdl-cell--10-col, .mdl-cell--10-col-desktop.mdl-cell--10-col-desktop {
       width: calc(83.3333333333% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell--10-col, .mdl-grid--no-spacing > .mdl-cell--10-col-desktop.mdl-cell--10-col-desktop {
       width: 83.3333333333%
   }

   .mdl-cell--11-col, .mdl-cell--11-col-desktop.mdl-cell--11-col-desktop {
       width: calc(91.6666666667% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell--11-col, .mdl-grid--no-spacing > .mdl-cell--11-col-desktop.mdl-cell--11-col-desktop {
       width: 91.6666666667%
   }

   .mdl-cell--12-col, .mdl-cell--12-col-desktop.mdl-cell--12-col-desktop {
       width: calc(100% - 16px)
   }

   .mdl-grid--no-spacing > .mdl-cell--12-col, .mdl-grid--no-spacing > .mdl-cell--12-col-desktop.mdl-cell--12-col-desktop {
       width: 100%
   }

   .mdl-cell--1-offset, .mdl-cell--1-offset-desktop.mdl-cell--1-offset-desktop {
       margin-left: calc(8.3333333333% + 8px)
   }

   .mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset-desktop.mdl-cell--1-offset-desktop {
       margin-left: 8.3333333333%
   }

   .mdl-cell--2-offset, .mdl-cell--2-offset-desktop.mdl-cell--2-offset-desktop {
       margin-left: calc(16.6666666667% + 8px)
   }

   .mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset-desktop.mdl-cell--2-offset-desktop {
       margin-left: 16.6666666667%
   }

   .mdl-cell--3-offset, .mdl-cell--3-offset-desktop.mdl-cell--3-offset-desktop {
       margin-left: calc(25% + 8px)
   }

   .mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset-desktop.mdl-cell--3-offset-desktop {
       margin-left: 25%
   }

   .mdl-cell--4-offset, .mdl-cell--4-offset-desktop.mdl-cell--4-offset-desktop {
       margin-left: calc(33.3333333333% + 8px)
   }

   .mdl-grid.mdl-grid--no-spacing > .mdl-cell--4-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--4-offset-desktop.mdl-cell--4-offset-desktop {
       margin-left: 33.3333333333%
   }

   .mdl-cell--5-offset, .mdl-cell--5-offset-desktop.mdl-cell--5-offset-desktop {
       margin-left: calc(41.6666666667% + 8px)
   }

   .mdl-grid.mdl-grid--no-spacing > .mdl-cell--5-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--5-offset-desktop.mdl-cell--5-offset-desktop {
       margin-left: 41.6666666667%
   }

   .mdl-cell--6-offset, .mdl-cell--6-offset-desktop.mdl-cell--6-offset-desktop {
       margin-left: calc(50% + 8px)
   }

   .mdl-grid.mdl-grid--no-spacing > .mdl-cell--6-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--6-offset-desktop.mdl-cell--6-offset-desktop {
       margin-left: 50%
   }

   .mdl-cell--7-offset, .mdl-cell--7-offset-desktop.mdl-cell--7-offset-desktop {
       margin-left: calc(58.3333333333% + 8px)
   }

   .mdl-grid.mdl-grid--no-spacing > .mdl-cell--7-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--7-offset-desktop.mdl-cell--7-offset-desktop {
       margin-left: 58.3333333333%
   }

   .mdl-cell--8-offset, .mdl-cell--8-offset-desktop.mdl-cell--8-offset-desktop {
       margin-left: calc(66.6666666667% + 8px)
   }

   .mdl-grid.mdl-grid--no-spacing > .mdl-cell--8-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--8-offset-desktop.mdl-cell--8-offset-desktop {
       margin-left: 66.6666666667%
   }

   .mdl-cell--9-offset, .mdl-cell--9-offset-desktop.mdl-cell--9-offset-desktop {
       margin-left: calc(75% + 8px)
   }

   .mdl-grid.mdl-grid--no-spacing > .mdl-cell--9-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--9-offset-desktop.mdl-cell--9-offset-desktop {
       margin-left: 75%
   }

   .mdl-cell--10-offset, .mdl-cell--10-offset-desktop.mdl-cell--10-offset-desktop {
       margin-left: calc(83.3333333333% + 8px)
   }

   .mdl-grid.mdl-grid--no-spacing > .mdl-cell--10-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--10-offset-desktop.mdl-cell--10-offset-desktop {
       margin-left: 83.3333333333%
   }

   .mdl-cell--11-offset, .mdl-cell--11-offset-desktop.mdl-cell--11-offset-desktop {
       margin-left: calc(91.6666666667% + 8px)
   }

   .mdl-grid.mdl-grid--no-spacing > .mdl-cell--11-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--11-offset-desktop.mdl-cell--11-offset-desktop {
       margin-left: 91.6666666667%
   }

}