@viewport {
    zoom: 1.0;
    width: extend-to-zoom;
}

body {
    font-family: sans-serif;
    font-size: 22px;
    width:100vw;
    height:100vh;
    margin:0px;
    width:100vw;
    height:100vh;
    overflow:auto;

    /* prevent select on various browsers */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

a:link {
    color: black;
    text-decoration: none;
}

a:visited {
    color: black;
    text-decoration: none;
}

a:hover, .click-choose:hover {
    cursor: pointer;
    color: #c00000;
}

.click-set {
    padding-top: 2px;
    padding-left: 2px;
    padding-right: 2px;
}

.click-set:hover {
    cursor: pointer;
    color: #c0c0c0;
}

.alert {
    color: #c00000;
    border: 1px;
    border-style: solid;
    border-color: black;
}

a:active {
    color: #c0c0c0;
    text-decoration: none;
}

.sources-outer {
    display: inline-block;
    text-align: center;
}

.choices, .info {
    display: inline-block;
    text-align: left;
    padding-left: 0.1666em;
}

.browse {
    padding-top: 0.1666em;
}

.blinking, .blinking:hover {
    color: #c0c0c0;
    fill: #c0c0c0;
    stroke: #c0c0c0;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;

    $(background_spec)
}

img {
    padding: 0;
    margin: 0 auto;
    margin-top: 8px;
    max-height: 100%;
    max-width: 100%;
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.info-line {
    display: block;
    white-space: nowrap;
}

.info-line.audio {
    font-size: 16px;
}

.info-unit {
    display: inline-block;
}

.tracklist {
    max-height: 0px;
    transition: max-height 0.3s;
    overflow: hidden;
    font-size: 18px;
    margin-left: 10px;
    display: block;
    margin-bottom: 4px;
}

.itnumber {
    width: 1em;
    display: inline-block;
    text-align: right;
    padding-right: 0.5em
}

.trackdisp:hover {
    cursor: pointer;
}

.trackdisp {
    transform: rotate(0);
    transition: all 0.3s;
}

.track {
    display: block;
}

.recording-menus {
    padding-top: 16px;
    display: block;
    font-size: 16px;
}

.recording-menu {
    display: inline;
    font-size: 16px;
}

.notif-icon {
    vertical-align: text-top;
}

.notif-line {
    min-height: 28px;
}

#time-limit {
    width: 2.5em;
}

dialog {
    background-color: #f0f0a0;
    font-size: 16px;
    text-align: center;
    white-space: normal;
}

.dialog-button {
    font-size: 16px;
}

.dialog-message {
    padding-bottom: 10px;
    text-align: left;
    word-break: break-word;
}

.dialog-content {
    padding-bottom: 10px;
}

.hidden {
    display: none;
}

#recs {
    white-space: nowrap;
}

dialog {
    position: relative;
}