@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/material.icons.ttf) format('truetype');
    font-display: swap;
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
}

@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/source_sans_pro.regular.ttf) format('truetype');
    font-display: swap;
}

body {
    background-color: #424242;
    background-image: url("../images/teletio.svg");
    background-repeat: no-repeat;
    background-position: 50% 4%;
    background-size: 500%
}

main {margin: auto;}

.source-sans-pro {
    font-family: "Source Sans Pro", "Helvetica", "Arial", sans-serif !important;
    font-size: 15px;
    }
.large {font-size: 16px;}

.mdl-layout__header-row {padding-left: 16px;}
.mdl-layout-title {font-family: "Source Sans Pro", "Roboto", "Helvetica", "Arial", sans-serif !important;}

.mdl-menu {background-color: #eee;}

.mdl-card {
    background-color: #eee;
    display: none;
}
.mdl-card__supporting-text .material-icons {vertical-align: -4px;}
.mdl-card__supporting-text:not(:first-child) {padding-top: 0;}    // Instead of 16px; e.g. Privacy paragraphs.

.mdl-list {margin: 0;}
.mdl-list .material-icons {vertical-align: middle;}

.material-icons.outcome {
    vertical-align: middle;
    font-size: 256px;
}
h4, h5 {margin-top: 0;}

.mdl-textfield__input {font-family: monospace;}

.selectfield-block {display: block;}
.selectfield-block > span {
    position: relative;
    top: 2px;
}

.switch-block {
    display: block;
    padding: 16px 0;
}
.mdl-ripple {background: #000; opacity: 0.001;}    // iOS workaround