input, textarea { background-color: #a5a5d9; color: #000; padding: 0.2em; }

.nb { white-space: nowrap; }

.klein { font-size: 0.9em; }

body { display: flex; background-color: #9090d0; color: #000; font-family: "Roboto",Verdana,Arial,sans-serif; font-size: 1em; height: 100%; }

* { margin: 0; padding: 0; outline: none; box-sizing: border-box; }

a { color: #000; text-decoration: none; }

a:hover { color: #ccc; }

hr { margin: 0.5em 0; border-top: 2px solid #000; }

#container { margin: 0 auto; width: 100%; max-width: 60em; background-color: #6c6cc1; height: 100%; }

div.port { display: flex; }

div.port div { flex: 1; }

div.port div#addr { flex: 7; text-align: center; }

div.port img { border-radius: 1em; max-width: 7em; margin: 0 1em; }

#topnav { position: fixed; top: 0; z-index: 30; width: 100%; max-width: 60em; display: flex; background-color: #6c6cc1; height: 2em; border-bottom: 1px solid #f0f0f0; }

#topnav > div { text-align: center; font-size: 1.25em; width: 100%; }

#topnav > div#menu { cursor: pointer; }

nav { z-index: 0; position: fixed; top: 2em; padding: 1em 1em 0 0; height: 100vh; width: 100%; max-width: 60em; background-image: linear-gradient(90deg, #a5a5d9 0em, #a5a5d9 10em, rgba(0, 0, 0, 0) 100%); }

nav div { width: 10em; padding: 1em; }

nav div a { display: inline-block; width: 100%; border-radius: 0.5em; border-top: 1px #fff solid; border-left: 1px #fff solid; box-shadow: 2px 2px 2px 0px rgba(87, 64, 0, 0.25); padding: 0.5em 1em; margin-bottom: 1em; background-color: #9e9ed6; }

nav div img { width: 100%; border-radius: 1em; margin-top: 2em; }

nav.on { z-index: 20; }

main { z-index: 10; position: relative; top: 2em; padding: 3em 1em 2em 1em; min-height: 100vh; height: 100%; background-color: #9e9ed6; }

main p { margin-bottom: 1em; }

main p.ooo { margin: 2em; padding: 1em; color: #000; background-color: #6c6cc1; text-align: center; border-radius: 1em; box-shadow: 2px 2px 2px 0px rgba(87, 64, 0, 0.25); color: #800; font-weight: bold; }

main p.kasten { margin: 2em; padding: 1em; color: #000; background-color: #6c6cc1; text-align: center; border-radius: 1em; box-shadow: 2px 2px 2px 0px rgba(87, 64, 0, 0.25); }

main div.disclaimer { font-size: 0.6em; }

/* footer { position:fixed; bottom:0; z-index:5; background-color:$bgd; width:100%; max-width:$maxw;  border-top:1px solid $border; display:flex; flex-wrap:wrap;  p { padding-right:2em; white-space:nowrap; } } */
@media (min-width: 1em) { #menu { display: block; } nav { z-index: 0; } #container main { margin-left: 0; } }

@media (min-width: 40em) { #menu { display: none; } #container main { margin-left: 10em; } }

/* Layout */
div.i2ls label { display: block; }

div.i2ls label .long { width: 95%; }

div.i2ls label span.sil { min-width: 10em; display: inline-block; }

div.i2ls label textarea { height: 10em; }

/* div.linkcont {  border-bottom:1px solid #000;  width:100%; display: grid;  grid-template-rows: 50% 50%; // 5em 5em 100%;  grid-template-columns: 1fr 1fr 10fr; // 50% 50%;  grid-template-areas:   "num url urlinput"  "num text textinput"; div { padding-bottom:0.2em; } div.num { grid-area:num; padding-right:1em; align-self:center; input { text-align:center; } } div.url { grid-area:url; } div.urlinput { grid-area:urlinput; } div.text { grid-area:text; } div.textinput { grid-area:textinput; } input { width:100%; padding:0.1em; } } */
div.url { font-size: 0.8em; display: flex; flex-direction: row; border-top: 1px solid #000; align-items: center; padding: 0.2em 0; }

div.url input { padding: 0.2em; font-size: inherit; }

div.url div.num { width: 5em; }

div.url div.num input { text-align: center; width: 3em; }

div.url div.lines { display: flex; flex-direction: column; width: 95%; }

div.url div.lines div { width: 100%; display: flex; align-items: center; }

div.url div.lines div span { width: 3em; }

div.url div.lines div input { width: 95%; }