@font-face {
 font-family: 'JostMedium';
 src: url('Jost-Medium.ttf')  format('truetype');
}

@font-face {
 font-family: 'JostBold';
 src: url('Jost-Bold.ttf')  format('truetype');
}

body {
 background-color: black;
 color:white;
 font-family: "JostMedium";
}

#content {
 display:flex;
 flex-direction: column;
 width: 800px;
 margin-left:auto;
 margin-right:auto;
}

#addobjectmodule {
 border-top: solid white 1px;
 border-bottom: solid white 1px;
 padding: 0.5em 0;
 width:100%;
 margin-bottom:1em;
}

#addobjectelements {
 display: flex;
 justify-content:center;
}

#addobjectlabel {
 text-align: center;
 font-family: 'JostBold';
 font-size: 1.2em;
 margin-bottom: 0.5em;
}

.addobjectelement {
 width: 150px;
 min-height: 100px;
 margin-left: 0.25em;
 margin-right: 0.25em;
 background-size: 70px 70px;
 background-repeat: no-repeat;
 background-position: top;
 align-content: flex-end;
 text-align: center;
 font-size: 1em;
 cursor:pointer;
}
#newText { background-image: url(images/textsymbol.png); }
#newTextImage { background-image: url(images/textimagesymbol.png); }
#newAudio { background-image: url(images/audiosymbol.png); }
#newAudio2 { background-image: url(images/audio2symbol.png); }

.listitem {
 border-radius: 0.5em;
 border: dotted grey 1px;
 display:flex;
 margin: 0.2em 0;
}
.itemsymbol {
 width:50px;
 height:50px;
 margin:0.5em;
 margin-top:auto;
 margin-bottom:auto;
 flex-grow: 0;
 flex-shrink: 0;
}
.itemsymbol img {
 width:100%;
 height:100%;
}
.qrsymbol img {
 width:50px;
 height:50px;
}
.itemname {
 align-self: center;
 font-size: 1.5em;
}

.itemlink {
}

.itemlink a {
 color: lightgrey;
}
.iteminfo {
 flex-grow: 1;
 padding: 0.5em;
}

.itemactions {
 display: flex;
 align-items: center;
 margin: 0.5em;
 flex-grow:0;
 flex-shrink:0;
}
.itemaction {
 margin:0.2em;
 padding:0.2em;
 border-radius: 0.2em;
 background-color: lightgray;
 color: black;
 cursor:pointer;
}

#adminpassword {
 border-top: solid white 1px;
 margin-top: 1em;
 padding-top: 0.5em;
}

#objectedit {
 margin-top: 2em;
 padding: 1em;
 border: solid white 1px;
 border-radius: 1em;
 }

#objectedit div {
 margin-top:0.5em;
}

#editheadline {
 font-family: JostBold;
 font-size: 1.5em;
 text-align: center;
}

#objecteditmenu {
 display: flex;
 justify-content: center;
 margin-top: 1em;
}
.objecteditaction {
 margin:0.5em;
 padding:0.4em;
 border-radius: 0.2em;
 background-color: lightgray;
 color: black;
 cursor:pointer;
}

.edittext {
 font-size: 1.2em;
 font-family: JostBold;
 padding: 0.4em;
}

#text textarea {
 font-size: 1.2em;
 font-family: JostMedium;
 padding: 0.4em;
}

.editelement {
 display: flex;
 flex-direction: column;
}

#stage {
 display: flex;
 justify-content: center;
 margin-top: 5em;
}

#pwview {
 display:flex;
 flex-direction:column;
}
#pwview #title {
 font-family: JostBold;
 text-align: center;
 font-size: 1.2em;
}
#pwview input {
 margin: 0.3em;
 padding: 0.3em;
 font-size: 1em;
}
#pwview button {
 margin-left: auto;
 padding: 0.2em;
 width: 100px;
 margin-right: auto;
 margin-top: 0.5em;
}
.imageedit img {
 object-fit: contain;
 max-width: 100%;
}