html { background: #eee }
body { font-family: 'Roboto', sans-serif; background: #eee; padding: 0; margin: 0; font-weight: 300; color: #1b1b1b; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
input { font-family: 'Roboto', sans-serif !important; font-weight: 300; font-size: 24px !important; }

md-input-container:not(.md-input-invalid) .md-errors-spacer { display: none; }
md-checkbox { margin-bottom: 0px !important; }
md-slider-container > :first-child:not(md-slider) { max-width: unset; }

.p-0 { padding: 0; }
.p-b-0 { padding-bottom: 0; }
.p-l-8 { padding-left: 8px; }
.p-t-0 { padding-top: 0; }

.m-0 { margin: 0; }
.m-h-15 { margin: 0 15px; }
.m-l-10 { margin-left: 10px; }
.m-r-10 { margin-right: 10px; }
.m-t-8 { margin-top: 8px; }

.media-container.audio { width: 100%; max-width: 480px; }
.media-container.video { width: 100%; max-width: 640px; }

.media-container #audio-container { position: relative; width: 100%; height: 40px; background: black; border-radius: 10px; overflow: visible; }
.media-container #video-container { position: relative; width: 100%; height: auto; aspect-ratio: 16 / 9; background: black; border-radius: 10px; overflow: hidden; }

@media (max-width: 360px) {
    .media-container #audio-container { width: 100vw; }
    .media-container #video-container { width: 100vw; height: auto; }
}

.media-container #spectrum-container { height: 40px; padding: 0 15px; display: none; }
.media-container #spectrum-container canvas { width: 100%; height: 100%; }

.image-container { padding: 0 16px; }
.image-container img { border-radius: 10px; max-width: 200px; max-height: 200px; }

outlines { display: none; }
fillers { display: none; }

.container-logs { height: 300px; overflow-y: scroll; border: 1px solid #ccc; font-size: smaller; text-wrap: nowrap; }
.container-logs .message { padding: 4px; }
.container-logs .message.debug { background-color: #ddd; }
.container-logs .message.error { background-color: #f9a9a9; }
.container-logs .message.log { background-color: #fff; }
.container-logs .message.warn { background-color: #fceDb0; }

.block-detected { color: white; background: red; width: 500px; padding: 40px; margin: 10px; font-size: x-large; font-weight: bold; border: 10px solid black; text-align: center; }