@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), url(font/font0.woff) format('woff'), url(font/font0.ttf) format('truetype'), url(font/font0.svg) format('svg');}
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: local('Material Icons'), local('MaterialIcons-Regular'), url(font/font1.woff) format('woff'), url(font/font1.ttf) format('truetype'), url(font/font1.svg) format('svg');}

* {user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    tap-highlight-color: transparent;
    -moz-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;
    outline: none !important;
    touch-action: manipulation;}

html{--dark-primary-color: #00897B;
    --primary-color: #26A69A;
    --light-primary-color: #80CBC4;
    --light-grey: rgb(240,240,240);
     --grey: rgb(200,200,200);
    --dark-grey: rgb(170,170,170);}

body {margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-family: Roboto, Arial;
    cursor: default;
    color: #333;
    background: #f1f1f1;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    height: 100%;
    width: 100%;}

/*Elevation*/

body {--elevation-z1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    --elevation-z2: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
    --elevation-z3: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
    --elevation-z4: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
    --elevation-z5: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
    --elevation-z6: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
    --elevation-z7: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12);
    --elevation-z8: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
    --elevation-z9: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12);
    --elevation-z10: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12);
    --elevation-z11: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12);
    --elevation-z12: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
    --elevation-z13: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
    --elevation-z14: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12);
    --elevation-z15: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12);
    --elevation-z16: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
    --elevation-z17: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12);
    --elevation-z18: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12);
    --elevation-z19: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12);
    --elevation-z20: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12);
    --elevation-z21: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12);
    --elevation-z22: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12);
    --elevation-z23: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12);
    --elevation-z24: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);}

.elevation.z1 {box-shadow: var(--elevation-z1);}
.elevation.z2 {box-shadow: var(--elevation-z2);}
.elevation.z3 {box-shadow: var(--elevation-z3);}
.elevation.z4 {box-shadow: var(--elevation-z4);}
.elevation.z5 {box-shadow: var(--elevation-z5);}
.elevation.z6 {box-shadow: var(--elevation-z6);}
.elevation.z7 {box-shadow: var(--elevation-z7);}
.elevation.z8 {box-shadow: var(--elevation-z8);}
.elevation.z9 {box-shadow: var(--elevation-z9);}
.elevation.z10 {box-shadow: var(--elevation-z10);}
.elevation.z11 {box-shadow: var(--elevation-z11);}
.elevation.z12 {box-shadow: var(--elevation-z12);}
.elevation.z13 {box-shadow: var(--elevation-z13);}
.elevation.z14 {box-shadow: var(--elevation-z14);}
.elevation.z15 {box-shadow: var(--elevation-z15);}
.elevation.z16 {box-shadow: var(--elevation-z16);}
.elevation.z17 {box-shadow: var(--elevation-z17);}
.elevation.z18 {box-shadow: var(--elevation-z18);}
.elevation.z19 {box-shadow: var(--elevation-z19);}
.elevation.z20 {box-shadow: var(--elevation-z20);}
.elevation.z21 {box-shadow: var(--elevation-z21);}
.elevation.z22 {box-shadow: var(--elevation-z22);}
.elevation.z23 {box-shadow: var(--elevation-z23);}
.elevation.z24 {box-shadow: var(--elevation-z24);}

/*Link*/

a {color: var(--primary-color);
    text-decoration: none;}
a:hover {text-decoration: underline;}
.menu a {color: unset !important;
    text-decoration: none !important;}

/*Icon*/

html:not([fonts]) .icon:not(.item) {color: transparent;}

span.icon:not(.item) {display: inline-block;
    font-family: "Material Icons";
    font-size: 24px;
    height: 24px;
    width: 24px;
    text-align: center;
    line-height: 24px;
    margin: 8px;}

/*Loader*/

.loader {display: block;
    position: absolute;
    top: -100px;
    left: calc(50% - 25px);
    width: 45px;
    height: 45px;
    padding: 1px;
    overflow: hidden;
    border-radius: 50px;
    background: #fff;
    box-shadow: var(--elevation-z3);
    transition: top 250ms ease;
    z-index: 3;}
.loader[open] {top: 140px;
    transition: none;}
.loader #loader_spinner {animation: loader_rotator 1.4s linear infinite;}
.loader span {position: absolute;
    z-index: 100;
    left: calc(50% - 10px);
    top: calc(50% - 10px);
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    color: var(--dark-primary-color);}
@keyframes loader_rotator {
0% {transform: rotate(0deg);}
100% {transform: rotate(270deg);}
}
.loader #loader_path {stroke-dasharray: 120;
    stroke-dashoffset: 0;
    transform-origin: center;
    animation: loader_dash 1.4s ease-in-out infinite;
    stroke: var(--primary-color);}
@keyframes loader_dash {
0% {stroke-dashoffset: 120;
    transform: rotate(0deg);}
50% {stroke-dashoffset: 30;
    transform: rotate(135deg);}
100% {stroke-dashoffset: 120;
    transform: rotate(450deg);}
}

/*Surface*/

.surface, .button, .checkbox, .radio, .switch, .list.menu .item, .tabs .tab {position: relative;
    cursor: pointer;
    overflow: hidden;
    z-index: 1;}
.surface:before, .button:before, .checkbox:before, .radio:before, .switch:before, .list.menu .item:before, .tabs .tab:before {content: "";
    display: block;
    position: absolute;
    width: var(--bg-w);
    height: var(--bg-h);
    left: 50%;
    top: 50%;
    border-radius: var(--bg-w);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    background: var(--bg-c);
    z-index: -1;
    clear: both;
    pointer-events: none;}
.checkbox:after, .radio:after, .switch:after {content: "";
    display: block;
    position: absolute;
    width: var(--bg-w);
    height: var(--bg-h);
    left: 50%;
    top: 50%;
    opacity: 0;
    border-radius: var(--bg-w);
    background: var(--bg-c);
    z-index: -2;
    clear: both;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: opacity 200ms ease;}
.surface.down:before, .button.down:before, .checkbox.down:before, .radio.down:before, .switch.down:before, .list.menu .item.down:before, .tabs .tab.down:before {content: "";
    left: var(--bg-x);
    top: var(--bg-y);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition: transform 350ms ease;}
.checkbox.down:after, .radio.down:after, .switch.down:after {content: "";
    left: var(--bg-x);
    top: var(--bg-y);
    opacity: 0.8;}
.surface.up:before, .button.up:before, .checkbox.up:before, .radio.up:before, .switch.up:before, .list.menu .item.up:before, .tabs .tab.up:before {content: " ";
    left: var(--bg-x);
    top: var(--bg-y);
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
    transition: transform 350ms ease, opacity 350ms ease;}
.checkbox.up:after, .radio.up:after, .switch.up:after {content: " ";
    left: var(--bg-x);
    top: var(--bg-y);
    opacity: 0;}

/*Container*/

.container {display: block;
    position: relative;
    width: 100%;
    height: 100%;
    --appbar-height: 64px;
    --appbar-height-static: 64px;
    overflow: hidden;
    background: #fff;
    transform: translateZ(0);}
.container.appbar_tabs {--appbar-height-static: 112px;}

/*Appbar*/

.appbar {display: block;
    position: absolute;
    width: 100%;
    height: 64px;
    left: 0;
    top: 0;
    z-index: 4;
    background: var(--primary-color);
    transform: translateY(0px);
    transition: box-shadow 200ms ease, transform 100ms ease;}
.container.waterfall.appbar_tabs .appbar {height: 112px;}
.container[shadow] .appbar {box-shadow: var(--elevation-z4);} 

.container.appbar_down.waterfall.appbar_tabs {--appbar-height: 112px;}
.container.appbar_down.waterfall:not(.appbar_tabs) {--appbar-height: 64px;}
.container.appbar_down .appbar {transform: translateY(0px);}
.container.appbar_up {--appbar-height: 48px;}
.container.appbar_up:not(.appbar_tabs) {--appbar-height: 0px;}
.container.appbar_up .appbar {transform: translateY(-64px);}
.container.appbar_up:not(.appbar_tabs) .appbar {transform: translateY(-80px);}

.appbar.action .action {display: block;
    float: left;
    position: relative;
    height: 40px;
    width: 40px;
    margin: 12px;
    cursor: pointer;}
.appbar.action .action span {display: block;
    position: absolute;
    width: 24px;
    height: 2px;
    background: #fff;
    transition: width 250ms ease, left 250ms ease, top 250ms ease, transform 250ms ease;
    transform: rotateZ(0deg) translateZ(0);}
.appbar.action .action.menu span:nth-child(1) {left: 8px;
    top: 12px;}
.appbar.action .action.menu span:nth-child(2) {left: 8px;
    top: 19px;}
.appbar.action .action.menu span:nth-child(3) {left: 8px;
    top: 26px;}
.appbar.action .action.back span:nth-child(1) {left: 8px;
    top: 14px;
    width: 15px;
    transform: rotateZ(-45deg) translateZ(0);}
.appbar.action .action.back span:nth-child(2) {left: 10px;
    top: 19px;
    width: 20px;}
.appbar.action .action.back span:nth-child(3) {left: 8px;
    top: 24px;
    width: 15px;
    transform: rotateZ(45deg) translateZ(0);}
.appbar.action .action.close span:nth-child(1) {left: 8px;
    top: 19px;
    transform: rotateZ(-45deg) translateZ(0);}
.appbar.action .action.close span:nth-child(2) {left: 20px;
    top: 19px;
    width: 0;}
.appbar.action .action.close span:nth-child(3) {left: 8px;
    top: 19px;
    transform: rotateZ(45deg) translateZ(0);}
.appbar .title {display: block;
    float: left;
    height: 64px;
    line-height: 64px;
    font-size: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 0 0 16px;
    width: calc(100% - 84px);
    color: #fff;}
.appbar.action .title {padding: 0;}

.container.appbar_tabs .appbar .tabs {display: block;
    color: #fff;
    clear: both;}
.container.appbar_tabs .appbar .tabs:after {background: #fff;}

.appbar .nav {display: block;
    height: 64px;
    float: right;}
.appbar .nav > div {display: inline-block;
    height: 40px;
    width: 40px;
    margin: 12px;
    cursor: pointer;}
.appbar .nav > div:after {color: #fff;}

/*Drawer*/

.drawer {display: block;
    position: absolute;
    width: 300px;
    height: calc(100% - var(--appbar-height));
    left: -330px;
    top: 0;
    overflow: hidden;
    max-width: 100%;
    background: #fff;
    box-shadow: -20px 0 40px 20px rgba(0,0,0,0.4);
    z-index: 2;
    transform: translateY(var(--appbar-height));
    transition: transform 200ms ease, height 200ms ease, left 400ms ease;}
.drawer:after {content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    box-shadow: 0 0 0 0 rgba(0,0,0,0.6) inset;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transition: box-shadow 200ms ease;}
.container:not([shadow]) .drawer:after {box-shadow: 0 10px 10px -10px rgba(0,0,0,0.6) inset;}
.drawer[open] {left: 0;}
.drawer > .menu {box-shadow: none !important;
    width: 100%;
    margin: 0;
    height: 100%;
    overflow: auto;}

/*Main*/

.main {display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    padding-top: var(--appbar-height-static);
    left: 0;
    top: 0;
    z-index: 1;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;}

/*Card*/

.card {display: block;
	margin: 8px;
    border-radius: 2px;
    background: #fff;
    box-shadow: var(--elevation-z2);}
.card:before {clear: both;}
.card:after {clear: both;}
.card > .media {display: block;
    width: 100%;
    overflow: hidden;
    margin: 0;
    max-height: 300px;}
.card > .media img {width: 100%;
    transform: translateZ(0);}
.card > .text {display: block;
    margin: 16px;
    clear: both;
    float: left;
    width: calc(100% - 32px);}
.card > .text:last-child {margin-bottom: 24px;}
.card > .text.primary {font-size: 24px;
    margin-top: 24px;
    margin-right: 100%;
    font-weight: normal;
    display: inline-block !important;
    width: auto;
    padding-right: 16px;
    white-space: nowrap;}
.card > .text.sub {margin-top: 12px;
    color: rgba(51,51,51,0.7);
    font-size: 16px;
    font-weight: normal;
    display: inline-block;
    margin-right: 100%;
    width: auto;
    padding-right: 16px;
    white-space: nowrap;}
.card > .text.primary + .text.sub {margin-top: -4px;}
.card > .actions {display: block;
    text-align: right;}
.card > .actions .button {margin-left: 0;}

/*Tile*/

.tile {display: inline-block;
    float: left;
    clear: both;
    width: 100%;
    background: #fff;
    box-shadow: var(--elevation-z2);
    overflow: visible;
    margin: 0 0 8px 0;}
.tile:last-of-type {margin: 0;}
.tile.flat {box-shadow: none;}
.tile:before {clear: both;}
.tile:after {clear: both;}
.tile > .media {display: block;
    width: 100%;
    overflow: hidden;
    margin: 0;
    max-height: 300px;}
.tile > .media img {width: 100%;
    transform: translateZ(0);}
.tile > .media.top img {transform: translateZ(0);}
.tile > .media.bottom img {transform: translateY(-100%) translateZ(0);}
.tile > .text {display: block;
    margin: 16px;
    clear: both;
    float: left;
    width: calc(100% - 32px);}
.tile > .text:last-child {margin-bottom: 24px;}
.tile > .text.primary {font-size: 24px;
    margin-top: 24px;
    font-weight: normal;}
.tile > .text.sub {margin-top: 12px;
    color: rgba(51,51,51,0.7);
    font-size: 16px;
    font-weight: normal;}
.tile > .text.primary + .text.sub {margin-top: -4px;}
.tile > .actions {display: block;
    text-align: right;}
.tile > .actions .button {margin-left: 0;}

/*Dialog*/

.dialog {display: block;
    position: fixed;
    border-radius: 2px;

    overflow: hidden;
    max-width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    box-shadow: var(--elevation-z24);
    z-index: 100000;
    white-space: nowrap;}
.dialog.full {width: 100%;
    height: 100%;
    transform: none;
    left: 0;
    top: 0;
    border-radius: 0;}
.dialog > .title {display: block;
    margin: 24px 24px 20px;
    font-size: 24px;
    min-height: 25px;
    line-height: 25px;}
.dialog.full > .title {height: 64px;
    background: var(--primary-color);
    color: #fff;
    margin: 0;
    padding: 0 16px;
    line-height: 64px;
    box-shadow: var(--elevation-z4);}
.dialog > .content {display: block;
    margin: 0 24px 24px;
    white-space: pre-line;}
.dialog.full > .content {height: calc(100% - 180px);
    padding: 24px;
    margin: 0;
    overflow: auto;}
.dialog > .actions {display: block;
    text-align: right;
    overflow: hidden;
    min-height: 36px;
    margin: 8px;}
.dialog > .actions button {margin-left: 0;
    margin-right: 0;}
.dialog > .actions button:first-child {margin-left: 8px;}
.dialog > .actions button:last-child {margin-right: 8px;}

/*Input*/

.input {display: inline-block;
    margin: 8px;
    height: 48px;
    width: 200px;
    position: relative;
    overflow: hidden;}
.input input {display: block;
    position: absolute;
    z-index: 1;
    bottom: 0;
    width: 190px;
    padding: 5px;
    height: 24px;
    line-height: 24px;
    font: unset;
    border: none;
    background: transparent;
    box-shadow: 0 -1px 0 var(--grey) inset;
    transition: box-shadow 250ms ease;}
.input[disabled] input {box-shadow: none;
    border-bottom: 1px dotted var(--grey);}
.input.error[disabled] input {box-shadow: none;
    border-bottom: 1px dotted #f00;}
.input:before {content: attr(data-placeholder);
    display: block;
    position: absolute;
    color: rgba(0,0,0,0.4);
    top: 26px;
    left: 5px;
    height: 12px;
    line-height: 12px;
    z-index: 10;
    pointer-events: none;
    transition: top 250ms ease, font-size 250ms ease, color 250ms ease;
    clear: both;}
.input.label:before {content: attr(data-placeholder);
    top: 5px;
    color: rgba(0,0,0,0.6);
    font-size: 12px;}
.input.focus input {box-shadow: 0 -1px var(--primary-color) inset;}
.input:after {content: " ";
    display: block;
    position: absolute;
    bottom: 1px;
    height: 1px;
    left: var(--ln-x);
    width: 0px;
    z-index: 100;
    background: var(--grey);
    clear: both;}
.input.focus:after {width: 100%;
    left: 0;
    background: var(--primary-color);
    transition: width 250ms ease, left 250ms ease, background 250ms ease;}
.input.blur:after {transition: width 250ms ease, left 250ms ease, background 250ms ease;}
.input.error:before {color: #f00;}
.input.error:not([disabled]) input {box-shadow: 0 -1px #f00 inset;}
.input.error.focus:after {background: #f00;}

.input.multi {height: auto;
    width: auto;
    border-radius: 2px;
    padding: 2px;
    border: 1px solid var(--dark-grey);
    box-shadow: 0 0 0 0 var(--dark-grey) inset;
    transition: border 250ms ease, box-shadow 250ms ease;}
.input.multi:before {left: 7px;}
.input.multi.label:before {top: 7px;}
.input.multi:after {display: none;}
.input.multi.focus {border: 1px solid var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color) inset;}
.input.multi.focus:before {top: 7px;}
.input.multi.focus:after {}
.input.multi textarea {display: block;
    margin: 20px 0 0 0;
    min-width: 190px;
    padding: 5px;
    height: 20px;
    min-height: 50px;
    line-height: 18px;
    font: unset;
    border: none;
    background: transparent;}
.input.multi.error {border: 1px solid #f00;}
.input.multi.error.focus {box-shadow: 0 0 0 1px #f00 inset;}
.input.multi[disabled] {border: 1px dotted var(--dark-grey);}
.input.multi.error[disabled] {border: 1px dotted #f00;}

.input.chips {}

/*Checkbox*/

.checkbox {display: inline-block;
    position: relative;
    width: 18px;
    height: 18px;
    margin: 8px;
    overflow: visible;}
.checkbox[disabled] {cursor: default;}
.checkbox.down:before {content: "";
    left: 50%;
    top: 50%;}
.checkbox.up:before {content: " ";
    left: 50%;
    top: 50%;}
.checkbox.down:after {content: "";
    left: 50%;
    top: 50%;}
.checkbox.up:after {content: " ";
    left: 50%;
    top: 50%;}
.checkbox input {display: block;
    position: absolute;
    margin: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    pointer-events: none;}
.checkbox input ~ span {display: block;
    position: absolute;
    z-index: 2;
    pointer-events: none;}
.checkbox input ~ span:after {content: "done";
    display: block;
    width: 14px;
    height: 14px;
    font-family: 'Material Icons';
    font-size: 16px;
    font-weight: bold;
    line-height: 14px;
    text-indent: -1px;
    color: transparent;
    background: rgba(255,255,255,0.5);
    border: 2px solid var(--primary-color);
    border-radius: 2px;
    transition: background 250ms ease;}
html[touch] .checkbox input ~ span:after {line-height: 16px;}
@-moz-document url-prefix() {
.checkbox input ~ span:after {line-height: 14px;
    font-size: 15px;}
}
.checkbox[disabled] input ~ span:after {border: 2px solid var(--grey);}
.checkbox input:checked ~ span:after {background: var(--primary-color);
    color: #fff;}
.checkbox[disabled] input:checked ~ span:after {background: var(--grey);}

/*Radio*/

.radio {display: inline-block;
    position: relative;
    width: 18px;
    height: 18px;
    margin: 8px;
    border-radius: 18px;
    overflow: visible;}
.radio[disabled] {cursor: default;}
.radio.down:before {content: "";
    left: 50%;
    top: 50%;}
.radio.up:before {content: " ";
    left: 50%;
    top: 50%;}
.radio.down:after {content: "";
    left: 50%;
    top: 50%;}
.radio.up:after {content: " ";
    left: 50%;
    top: 50%;}
.radio input {display: block;
    position: absolute;
    margin: 0;
    width: 100%;
    height: 100%;
    border-radius: 18px;
    opacity: 0;
    z-index: 1;
    pointer-events: none;}
.radio input ~ span {display: block;
    position: absolute;
    z-index: 2;
    pointer-events: none;}
.radio input ~ span:after {content: "";
    display: block;
    width: 14px;
    height: 14px;
    background: rgba(255,255,255,0.5);
    border: 2px solid var(--primary-color);
    border-radius: 18px;
    transition: background 250ms ease;}
@-moz-document url-prefix() {
.radio input ~ span:after {line-height: 16px;
    font-size: 15px;}
}
.radio[disabled] input ~ span:after {border: 2px solid var(--grey);}
.radio input:checked ~ span:after {background: var(--primary-color);
    box-shadow: 0 0 0 2px #fff inset;}
.radio[disabled] input:checked ~ span:after {background: var(--grey);}

/*Switch*/

.switch {display: inline-block;
    position: relative;
    width: 34px;
    height: 12px;
    margin: 11px 8px;
    cursor: pointer;
    overflow: visible;}
.switch[disabled] {cursor: default;}
.switch.down:before {content: "";
    left: 50%;
    top: 50%;}
.switch.up:before {content: " ";
    left: 50%;
    top: 50%;}
.switch.down:after {content: "";
    left: 50%;
    top: 50%;}
.switch.up:after {content: " ";
    left: 50%;
    top: 50%;}
.switch input {display: block;
    position: absolute;
    margin: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    pointer-events: none;}
.switch input ~ span {display: block;
    position: relative;
    pointer-events: none;
    width: 100%;
    height: 12px;
    border-radius: 20px;
    background: var(--dark-grey);
    z-index: 0;
    transition: background 250ms ease;}
.switch input ~ span:after {content: "";
    display: block;
    position: absolute;
    left: -1px;
    top: -4px;
    width: 18px;
    height: 18px;
    border-radius: 20px;
    background: #f1f1f1;
    transition: background 250ms ease, left 250ms ease;
    box-shadow: var(--elevation-z1);}
.switch input:checked ~ span {background: var(--light-primary-color);}
.switch input:checked ~ span:after {left: 16px;
    background: var(--primary-color);}
.switch[disabled] input ~ span:after {box-shadow: none;
    top: -3px;}
.switch[disabled] input:not(:checked) ~ span:after {background: var(--grey);}

.checkbox:not([disabled]) + label, .radio:not([disabled]) + label, .switch:not([disabled]) + label {cursor: pointer;}

/*Button*/

.button {display: inline-block;
    margin: 8px;
    min-width: 88px;
    height: 36px;
    padding: 0 16px;
    line-height: 36px;
    font: unset;
    text-align: center;
    text-transform: uppercase;
    border: none;
    border-radius: 2px;
    overflow: hidden;
    background: var(--light-grey);
    box-shadow: var(--elevation-z2);
    -webkit-appearance: none;
    cursor: pointer;
    transition: box-shadow 250ms ease;}
.button[disabled] {box-shadow: none !important;
    cursor: default;
    color: var(--dark-grey);}
.button:hover {box-shadow:  var(--elevation-z4);}
.button:active {box-shadow:  var(--elevation-z8);}
.button:after {clear: both;}
.button.flat {box-shadow: none !important;
    background: transparent !important;}
.button.primary {background: var(--primary-color);
    color: #fff;}
.button.primary.flat {background: transparent;
    color: var(--primary-color);}

/*Select*/

.select {display: inline-block;
    margin: 8px;
    height: 34px;
    position: relative;}
.select[disabled] select {color: var(--dark-grey);}
.select:after {content: "arrow_drop_down";
    display: block;
    width: 15px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    font-family: "Material Icons";
    font-size: 19px;
    line-height: 36px;
    text-align: left;
    text-indent: -2px;
    pointer-events: none;}
.select select {display: block;
    height: 100%;
    margin: 0;
    padding: 0 20px 0 5px;
    border: none;
    font: unset;
    box-shadow: 0 -1px 0 var(--grey) inset;
    cursor: pointer;
    transition: box-shadow 250ms ease;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: #fff;}
.select[disabled] select {cursor: default;}
.select select:focus {box-shadow: 0 -2px 0 var(--primary-color) inset;}
.select select option:checked {display: none;}

/*Slider*/

.slider {display: inline-block;
    margin: 8px;
    --value: 50%;
    height: 34px;
    width: 200px;
    position: relative;}
.slider input {display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    -webkit-appearance: none;
    appearance: none;
    z-index: 1000;
    opacity: 0;
    cursor: pointer;}
.slider[disabled] input {cursor: default;}
.slider > div:first-of-type {display: block;
    position: absolute;
    left: 0;
    top: calc(50% - 2px);
    height: 4px;
    width: var(--value);
    background: var(--primary-color);
    z-index: 10;
    pointer-events: none;}
.slider[active] > div:first-of-type {transition: unset;}
.slider[disabled] > div:first-of-type {background: var(--dark-grey);}
.slider span {display: block;
    position: absolute;
    left: var(--value);
    top: calc(50% - 7px);
    margin-left: -7px;
    height: 14px;
    width: 14px;
    border-radius: 16px;
    background: var(--primary-color);
    z-index: 100;
    pointer-events: none;
    transition: height 250ms linear, width 250ms linear, top 250ms linear;}
.slider[disabled] > span {background: var(--dark-grey);}
.slider span > div {display: block;
    position: absolute;
    bottom: 25px;
    left: -2px;
    width: 22px;
    height: 22px;
    border-radius: 20px 20px 20px 0;
    color: #fff;
    font-size: 13px;
    background: var(--primary-color);
    transform: rotate(-44deg) scale(0) translate(-44px, 44px);
    box-shadow: -3px 3px 10px rgba(0,0,0,0.1);
    transition: transform 100ms ease;}
.slider[active] > span {height: 18px;
    width: 18px;
    top: calc(50% - 9px);
    margin-left: -9px;}
html[touch] .slider span > div {bottom: 40px;
    left: -6px;
    height: 30px;
    width: 30px;
    border-radius: 30px 30px 30px 0;
    transform: rotate(-44deg) scale(0) translate(-60px, 60px);}
.slider span > div > div {display: block;
    transform: rotate(45deg);
    text-align: center;
    text-indent: -2px;
    line-height: 24px;}
html[touch] .slider span > div > div {line-height: 32px;
    font-size: 15px;}
.slider[active] span > div {transform: rotate(-44deg) scale(1) translate(0, 0) !important;}
.slider > div:last-child {display: block;
    position: absolute;
    right: 0;
    top: calc(50% - 2px);
    height: 4px;
    width: 200px;
    background: var(--light-grey);
    z-index: 1;
    pointer-events: none;}

/*Progress*/

.progress {display: inline-block;
    margin: 15.5px 8px;
    height: 3px;
    width: 200px;
    position: relative;
    overflow: hidden;
    --value: 50%;
    background: var(--light-grey);}
.progress:after {content: "";
    display: block;
    height: 3px;
    width: var(--value);
    position: absolute;
    background: var(--primary-color);
    left: 0;}
.progress.indeterminate:before {content: "";
    display: block;
    height: 3px;
    width: 100px;
    position: absolute;
    background: var(--primary-color);
    left: 0;
    animation: progress1 1.8s infinite linear;}
.progress.indeterminate:after {width: 100px;
    left: 0;
    animation: progress2 1.8s infinite linear;}
@keyframes progress1 {
0% {width: 50px;
    left: -50px;}
25% {width: 100px;}
50% {width: 100px;
    left: 100%;}
100% {width: 100px;
    left: 100%;}
}
@keyframes progress2 {
0% {width: 100px;
    left: -100px;}
50% {width: 100px;
    left: -100px;}
100% {width: 50px;
    left: 100%;}
}

/*List*/

.list {display: inline-block;
    margin: 8px;
    background: #fff;}
.list.full {margin: 0;
    display: block;}

.list > .header {display: block;
    height: 40px;
    line-height: 40px;
    padding: 0 0 0 16px;
    color: var(--dark-primary-color);}
.list > .divider {display: block;
    height: 1px;
    background: var(--light-grey);
    width: calc(100% - 72px);
    margin: 0 0 0 72px;}
.list > .item {display: block;
    height: 56px;
    position: relative;
    text-align: left;}
.list > .item > div {display: inline-block;
    pointer-events: none;}

.list > .item.icon > div, .list > .item.secondary > div {max-width: calc(100% - 40px);}
.list > .item.icon.secondary > div {max-width: calc(100% - 80px);}
.list > .item > .icon {display: inline-block;
    margin: 8px 0 8px 16px;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    font-family: "Material Icons";
    font-size: 24px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    float: left;
    clear: both;
    pointer-events: none;
    color: var(--dark-primary-color);}
.list > .item > .icon.round {background: var(--light-grey);}

.list > .item > div > .text, .list > .item > .text {display: inline-block;
    margin: 20px 16px 0 16px;
    max-width: calc(100% - 32px);
    height: 16px;
    line-height: 16px;
    overflow: hidden;
    float: left;
    pointer-events: none;}
.list > .item > div > .subtext, .list > .item > .subtext {display: inline-block;
    margin: 0 16px 20px 16px;
    max-width: calc(100% - 32px);
    height: 16px;
    line-height: 16px;
    overflow: hidden;
    color: rgba(51,51,51,0.7);
    float: left;
    clear: both;
    pointer-events: none;}
.list > .item > .secondary {display: inline-block;
    margin: 8px 16px 8px 0;
    width: 40px;
    height: 40px;
    overflow: visible !important;
    cursor: pointer;
    float: right;}
.list > .item > .secondary:not(.drop_menu) {font-family: "Material Icons";
    font-size: 24px;
    text-align: center;
    line-height: 40px;}

.list > .item > .secondary.down:before {content: "";
    left: 50% !important;
    top: 50% !important;}
.list > .item > .secondary.up:before {content: " ";
    left: 50% !important;
    top: 50% !important;}
.list > .item > .secondary.down:after {content: "";
    left: 50% !important;
    top: 50% !important;}
.list > .item > .secondary.up:after {content: " ";
    left: 50% !important;
    top: 50% !important;}

.list > .item.subtext {height: 72px;}
.list > .item.icon.subtext {height: 72px;}
.list > .item.icon.subtext > .icon {margin: 16px 0 16px 16px;}
.list > .item.subtext.secondary {height: 72px;}
.list > .item.subtext.secondary > .secondary {margin: 16px 16px 16px 0;}
.list > .item.icon.subtext.secondary {height: 72px;}
.list > .item.icon.subtext.secondary > .icon {margin: 16px 0 16px 16px;}
.list > .item.icon.subtext.secondary > .secondary {margin: 16px 16px 16px 0;}

/*Menu*/

.list.menu {box-shadow: var(--elevation-z8);
    border-radius: 2px;}
.list.full.menu {box-shadow: none;}
.list.menu > .item {background: #fff;
    transition: background 200ms ease;}
.list.menu > .item[disabled] {color: var(--dark-grey);
    cursor: default;}

.list.menu > label.item > .secondary {pointer-events: none;}
.list.menu > .item > .secondary > .switch {margin: 0px 0px 5px -1px;}
.list.menu > .item > .secondary > .checkbox, .list.menu > .item > .secondary > .radio {margin: 0px 0px 3px -1px;}

html:not([touch]) .list.menu > .item:not([disabled]):hover {background: var(--light-grey);}
html:not([touch]) .list.menu > .item:not([disabled]):hover > .icon.round {transition: background 200ms ease;
    background: transparent;}
html[touch] .list.menu > .item:not([disabled]):active {background: var(--light-grey);}
html[touch] .list.menu > .item:not([disabled]):active > .icon.round {transition: background 200ms ease;
    background: transparent;}

/*Dropdown Menu*/

.drop_menu {display: inline-block;
    width: 40px;
    height: 40px;
    overflow: visible !important;
    cursor: pointer;}
.drop_menu:after {content: "";
    display: block;
    width: 40px;
    height: 40px;
    font-family: "Material Icons";
    font-size: 24px;
    line-height: 40px;
    text-align: center;}
.drop_menu.vert:after {content: "more_vert";}
.drop_menu.horiz:after {content: "more_horiz";}
.drop_menu > .menu {position: absolute;
    right: 52px;
    top: 52px;
    margin: 0;
    z-index: 10;
    width: auto;
    height: auto;
    opacity: 0;
    transition: clip-path 200ms ease, opacity 250ms ease;
    pointer-events: none;}
.drop_menu[rendered] > .menu {width: var(--width);
    height: var(--height);
    overflow: hidden;}
.drop_menu[state=opening] > .menu {opacity: 1;
    -webkit-clip-path: circle(150% at 100% 0);
    clip-path: circle(150% at 100% 0);
    pointer-events: all;
    transition: clip-path 200ms ease-out, opacity 250ms ease;}
.drop_menu[state=open] > .menu {opacity: 1;
    -webkit-clip-path: none;
    clip-path: none;
    pointer-events: all;
    transition: clip-path 200ms ease-out, opacity 250ms ease;}
.drop_menu[state=close] > .menu {opacity: 0.5;
    -webkit-clip-path: circle(0% at 100% 0);
    clip-path: circle(0% at 100% 0);
    transition: clip-path 200ms ease-in, opacity 250ms ease;}

/*Snacks*/

#snackbar {display: block;
    position: fixed;
    width: 100%;
    height: auto;
    bottom: 0;
    right: 0;
    left: 0;
    pointer-events: none;
    z-index: 10000;}
#snackbar .snack {display: inline-block;
    --int: 0;
    position: absolute;
    height: 48px;
    width: 288px;
    max-width: 100%;
    background: rgb(50,50,50);
    color: #fff;
    left: 24px;
    border-radius: 2px;
    bottom: 24px;
    box-shadow: var(--elevation-z6);
    pointer-events: all;
    transition: bottom 250ms ease;
    transform: translate3d(0, 0, 0);}
#snackbar .snack .text {display: inline-block;
    height: 100%;
    line-height: 48px;
    padding: 0 16px;}
#snackbar .snack .action {display: inline-block;
    float: right;
    height: 100%;
    line-height: 48px;
    padding: 0 16px;
    text-transform: uppercase;
    color: var(--primary-color);
    cursor: pointer;}
#snackbar .snack[down] {bottom: -50px !important;}
html[touch] #snackbar .snack {box-shadow: none;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);}

/*Tabs*/

.tabs {display: flex;
    position: relative;
    overflow-y: hidden;
    overflow-x: auto;
    height: 48px;}
.tabs:after {content: "";
    display: block;
    position: absolute;
    z-index: 2;
    background: var(--primary-color);
    height: 2px;
    width: var(--width);
    bottom: 0;
    left: var(--left);
    transition: left 250ms ease, width 250ms ease;
    transform: translate3d(0, 0, 0);}
.tabs .tab {display: table-cell;
    width: 136px;
    height: 100%;
    line-height: 48px;
    padding: 0 12px;
    text-align: center;
    transition: background 250ms ease;}
.tabs.tabs_1 .tab {max-width: 100%;}
.tabs.tabs_2 .tab {max-width: 50%;}
.tabs.tabs_3 .tab {max-width: 33.333333%;}
.tabs.tabs_4 .tab {max-width: 25%;}
.tabs.tabs_5 .tab {max-width: 20%;}
.tabs.tabs_6 .tab {max-width: 16.666666%;}
.tabs.tabs_7 .tab {max-width: 14.285714%;}
.tabs.tabs_8 .tab {max-width: 12.5%;}
.tabs.tabs_9 .tab {max-width: 11.111111%;}
.tabs.tabs_10 .tab {max-width: 10%;}
.tabs .tab.down {background: rgba(100,100,100,0.04);}
.tabs.anim:after {will-change: left, width, trandform;}

.slide {display: block;
    overflow: hidden;
    position: relative;}
.slide > div {display: table;
    position: relative;
    width: 100%;
    left: 0;
    transition: left 250ms ease;}
.slide.slide_2 > div {width: 200%;}
.slide.slide_3 > div {width: 300%;}
.slide.slide_4 > div {width: 400%;}
.slide.slide_5 > div {width: 500%;}
.slide.slide_6 > div {width: 600%;}
.slide.slide_7 > div {width: 700%;}
.slide.slide_8 > div {width: 800%;}
.slide.slide_9 > div {width: 900%;}
.slide.slide_10 > div {width: 1000%;}
.slide > div > section {clear: none;
    width: 100%;}
.slide.slide_2 > div > section {width: 50%;}
.slide.slide_3 > div > section {width: 33.333333%;}
.slide.slide_4 > div > section {width: 25%;}
.slide.slide_5 > div > section {width: 20%;}
.slide.slide_6 > div > section {width: 16.666666%;}
.slide.slide_7 > div > section {width: 14.285714%;}
.slide.slide_8 > div > section {width: 12.5%;}
.slide.slide_9 > div > section {width: 11.111111%;}
.slide.slide_10 > div > section {width: 10%;}
.slide[active="1"] > div {left: 0;}
.slide[active="2"] > div {left: -100%;}
.slide[active="3"] > div {left: -200%;}
.slide[active="4"] > div {left: -300%;}
.slide[active="5"] > div {left: -400%;}
.slide[active="6"] > div {left: -500%;}
.slide[active="7"] > div {left: -600%;}
.slide[active="8"] > div {left: -700%;}
.slide[active="9"] > div {left: -800%;}
.slide[active="10"] > div {left: -900%;}

/*MOBILE*/

@media (max-width: 500px) {
#index_hero {transform:translate(-50%,-50%) scale(0.8) !important;}
}