@font-face {
    font-family: 'Exo';
    src: url('fonts/exo.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Noto Serif';
    font-style: normal;
    font-weight: 700;
    src: url('./fonts/noto-serif.woff2') format('woff2');
}

html, body.login {
    height: 100%;
    margin: 0;
    scroll-padding-top: 4rem;
}

body, input, textarea, select, button {
    font-family: Exo, sans-serif;
}
h1, h2, h3, h4 {
    font-family: 'Noto Serif', serif;
    margin-bottom: 0.5rem;
}
h1 {
    margin-top: 0;
}
h4 {
    margin-top: 0.5rem;
}
button, input, select, textarea {
    font-size: 16px;
    padding: .5rem;
    border: 1px solid black;
}
#content, .container {
    max-width: 1200px;
    margin:0 auto;
}
.container {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;
}
input {
    display: block;
}

button {
    color: #000;
}

button:disabled,
button[disabled] {
    border-style: dotted;
    cursor: wait;
}

button.delete {
    cursor: no-drop;
}

a {
    color:#000;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: 0 1rem;
    width: calc(100% - 2rem);
}
ul.row {
    flex-flow: column;
}
ul.shortlist {
    padding: 0;
    margin: 0 0 1em 0;
    list-style: none;
}
ul.shortlist > li {
    margin: .5em 0;
    padding: .2em;
    display: flex;
    flex-wrap: wrap;
}
ul.shortlist > li > a {
    color:#000;
}
.shortstatus {
    margin-left: auto;
}
.shortstatus button{
    padding: .2em;
}

.starttime, .meettime, .location, .status, .stat, .name, .public, .notes, .elegant, .stimmlage {
    flex-flow: row;
    width: 100%;
}
.stimmlage > ul {
    margin:0;
    padding-left:1.5rem;
}
.stimmlage > div {
    margin-top:.5rem;
}
.notes {
    font-family: 'Noto Serif', serif;
    margin: .5em 0;
    font-weight:bold;
}

.red, .status-1 {
    background-color: #faa;
}
.red:active,.red:hover,.red:focus,.status-1:active,.status-1:hover,.status-1:focus {
    background-color: #e99;
}
.green, .status1 {
    background-color: #afa;
}
.green:active,.green:hover,.green:focus,.status1:active,.status1:hover,.status1:focus {
    background-color: #9e9;
}
.blue, .status2 {
    background-color: #aaf;
}
.blue:active,.blue:hover,.blue:focus,.status2:active,.status2:hover,.status2:focus {
    background-color: #99e;
}
.yellow, .btn-edit.status1 {
    background-color: #ffa;
}
.yellow:active,.yellow:hover,.yellow:focus, .btn-edit.status1:active, .btn-edit.status1:hover, .btn-edit.status1:focus {
    background-color: #ff6;
}
.gray {
    background-color: #eee;
}
.gray:hover {
    background-color: #ddd;
}

.nav {
    border: 1px solid #000000;
}

label, fieldset {
    flex-flow: row;
    width: 100%;
    margin-bottom: 20px;
}

fieldset > label {
    width: 50%;
    display: inline-flex;
}

textarea, input[type=text], input[type=email], input[type=password] {
    font-size: 16px;
    width: calc(100% - 2rem);
}

.nav > ul > li {
    margin-left: 0;
}

.flex-center {
    height: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}
.list {
    display: flex;flex-flow: row wrap;
}
.flex-row {
    width: auto;
    padding: 10px;
}
nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/* Style the menu link */
.nav .skip {
    display: none;
}
.js .nav .skip {
	background: #ddd;
    overflow: hidden;
    text-align: center;
    line-height: 2.5em;
    padding: 0 0.5em;
    display: block;
}
.nav a {
    text-decoration: none;
}

/* Give the .nav ul a height when it's been opened, i.e. make it show */
.js nav > ul.open {
    max-height: unset;
}

/* Hide and position the closed .nav ul */
.js nav > ul {
    max-height: 0;
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
}

/* Style the list item links for ease of touch on small screens */
nav > ul > li > a {
    padding: 1rem;
    margin: 0;
    display: block;
    background-color: #ddd;
}
nav > ul > li > a.admin, button.admin {
    background-color: #cdc;
}
nav > ul > li > a.logout {
    background-color: #fff;
}
nav > ul > li > a:hover, nav > ul > li > a:focus, nav > ul > li > a:active {
    background-color: #eee;
}

@media screen and (min-width: 550px) {
    .location, .starttime, .public, .elegant, .stimmlage {
        width: 50%;
    }
    input[type=text].comment-input {
        width: calc(50% - 2rem);
    }
    .name, div.status {
        width: 50%;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
}
@media screen and (min-width: 992px) {
    .js .nav ul {
        overflow: auto;
        max-height: inherit;
        position: static;
        display: flex;
        justify-content: flex-start;
        background-color: transparent;
    }

    .nav li {
        text-align: left;
        display: inline-block;
    }

    .js .nav li:last-child {
        border: 0;
    }

    .js .nav .skip {
        display: none;
        visibility: hidden;
    }
}
.address > summary {
    padding: .5rem 1.5rem;
}
.address > summary::before {
    top: 0;
    left: -.25rem;
}
.address:nth-child(odd) > summary {
    background-color:#ccc
}
.addressCard {
    padding: .5rem 2rem;
    background-color:#eee
}
.address.chorleiter {
    border-top:2px solid #000;
}
.topinfo {
    padding:10px;
}
.inline {
    display: inline-block;
}
.logo {
    max-width: 90%;
}
.tablescroll {
width: 100%;
overflow: auto;
}
.tablescroll > table {
min-width: 900px;
}
.sendMessage {
    display: inline-block;
    border:1px solid black;
    padding: .5rem;
    margin-top: 1rem;
}
#messageList > ul {
    list-style: none;
    padding: 0;
}
summary {
    cursor: pointer;
    padding-left: 1rem;
}
summary::marker {
    content:'';
}
details summary::before {
    content:'\25B3';
    transform: rotate(90deg);
    margin-left: -1rem;
    display: inline-block;
    position: relative;
    top: -.25rem;
    left: -.25rem;
    transition: transform 100ms;
}
details[open] summary::before {
    transform: rotate(180deg);
}
summary > h2 {
    display: inline;
    clear: both;
}
summary > span {
    display: block;
}
audio {display: block;margin-top: .5rem;margin-bottom: 1rem}