@charset "UTF-8";

@font-face {
    font-family: 'Material Icons Sharp';
    font-style: normal;
    font-weight: 400;
    src: url(fonts/MaterialIconsSharp-Regular.woff2) format('woff2');
}

* {
    font-family: Arial, "Material Icons Sharp";
    font-size: 20px;
}

body {
    background: #FFF;
    transition: background 0.5s;
}

body.show {
    background: #AAA;
}

h2 {
    color: black;
    text-align: left;
    margin: 0 0 0.25em 0;
    font-size: 1.4em;
}

h2 span {
    display: block;
    background: #8884;
    width: 2em;
    height: 2em;
    text-align: center;
    border-radius: 1em 1em;
    padding: 0.5em 0.4em;
    box-sizing: border-box;
    cursor: pointer;
    margin: 0 0 0.25em 0;
    position: relative;
    top: -0.5em;
    left: -0.25em;
}

m4-dialog {
    max-width: 480px;
    width: 95%;
    background: #FFFE;
    position: fixed;
    bottom: -75%;
    height: 66%;
    margin: 0 auto 8px;
    transform: translate(-50%, 0);
    transition: bottom 0.5s;
    left: 50%;
    border: none;
    padding: 1em;
    box-sizing: border-box;
    border-radius: 2em 2em;
}

m4-dialog.show {
    bottom: 0;
}

m4-template,
m4-account {
    display: block;
    position: relative;
    box-sizing: border-box;
    filter: blur(0);
    transition: filter 0.4s;
}
m4-template {
    display: none;
    padding: 0.75em;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

m4-accounts {
    white-space: nowrap;
    overflow-x: auto;
    display: block;
}

m4-account {
    border: 1px #000 solid;
    border-radius: 1em 1em;
    margin: 1em;
    padding: 1em;
}

m4-account div {
    margin: 1em  0 0 0;
    cursor: pointer;
}

m4-template#accounts {
    text-align: center;
    display: block;
}

.show m4-template {
    filter: blur(3px);
}

m4-account {
    display: inline-block;
    padding-bottom: 4em;
}

th,
td {
    padding: 0.5em 0.5em 0.5em 0;
}

th {
    text-align: center;
}

img.avatar {
    display: inline-block;
    margin: 0 0 1em;
    width: 6em;
    height: 6em;
    background: yellow;
    border-radius: 3em 3em;
    object-fit: cover;
}

img.icon {
    display: block;
    position: absolute;
    right: 1em;
    bottom: 1em;
    width: 4em;
    height: 2em;
    background: gray;
    border-radius: 0.5em 0.5em;
}

m4-template id#passwort {
    display: block;
    position: relative;
    box-sizing: border-box;
    margin: 1em;
    border: 1px #000 solid;
    border-radius: 1em 1em;
    text-right {
        text-align: right;
    }
}

img.save {
    display:;
}

table#betraege th:first-child {
    text-align: left;
}

table#betraege td:not(:first-child) {
    text-align: right;
}

table#betraege td:last-child {
    cursor: pointer;
}

table#betraege tr:last-child td {
    font-weight: bold;
}

table#betraege tr:last-child td:last-child {
    display: none;
}

@media only screen and (max-width: 720px) {
    table#betraege th,
    table#betraege td {
        font-size: 12px;
    }
}


m4-buttons {
    display: block;
    margin: 2em 0 0 0;
    text-align: center;
}