:root {
  --main-dlg-color: #211a43;
  --main-bg-color: #4d4869;
  --main-bg-color2: #7a768e;
}

*, *:before, *:after {
    box-sizing: border-box;
}
html,body,h1,h2,h3,h4,h5,h6,div,span,form, input, button, img, abbr {
    margin:0;
    padding:0;
}
abbr {
    text-decoration: none
}
.hidden {
    display: none;
}
a, a:visited, a:hover {
    color:#fefefe;
    text-decoration: underline 1px dashed rgba(255,255,255,0.5);
    /*border-bottom: 1px dotted #aaa;*/
}
h1 {
    font-size: 1.6em;
}
html {
  font-family: sans-serif; /* 1 */
  font-size: 14pt;
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
  width:100%;
  height:100%;
  background: var(--main-bg-color);
  background: linear-gradient(90deg, var(--main-bg-color2) 0%, var(--main-bg-color) 100%);
}

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

html > body  {
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items: center;
    position: relative;
}
div.graphelement.heading {
    position: fixed;
    top:1em;
    height:0.4em;
    width:100%;
    display:flex;
    justify-content: space-around;
}
div.graphelement.heading > div {
    height:100%;
    border-radius:0.5em;
    background:rgba(255,255,255,0.2);
}
div.graphelement.heading > div:nth-child(1) {
    width: 3%;
    position: relative;
    display: flex;
    align-items:center;
}
div.graphelement.heading > div:nth-child(2) {
    width: 7%;
}
div.graphelement.heading > div:nth-child(3) {
    width: 13%;
}
div.graphelement.heading > div:nth-child(4) {
    width: 70%;
}


x-listbox {
    max-width: 20em;
    display: block; 
}

div.page, div.dialog {
    background: var(--main-dlg-color);
    color: white;
    border-radius: 10px;
    padding: 2em 4em;
}

div.page {
    margin:3em;
    min-width: 90%;
    max-width: 60em;
    min-height:60%;
    max-height:90%;
    overflow: auto;
}
@media screen and (min-width: 65em) {
    div.page {
        min-width:50em;
    }
}
div.dialog {
    padding: 2em 4em;
    min-width: 25em;
    border-radius: 10px;
    position:relative;
    background: var(--main-dlg-color);
    color: white;
}
@media screen and (max-width: 25em) {
div.dialog {
    min-width: 100%;
    max-width: 100%;
    padding: 2em 1.5em;
}
div.page {
    margin: 0.5em;
    padding: 1em;
}
}

div.dialog > div,
div.dialog > form {
    display: flex;
    flex-direction: column;
}
.spacer {
    flex-grow:1;
}
button {
    min-height: 4em;
}
button.login {
    position:relative;
    display:flex;
    align-items: center;
    background: rgba(255,255,255,0.05);
    justify-content: space-between;
}
button:focus, input:focus{
    outline: none;
}
.logindialog > form > input {
    display: block;
}
input:disabled {
    border:0;
    pointer-events:none;
    box-shadow:none;
}
input:focus, input:hover, button:focus, button:hover {
    box-shadow:0 0 15px 4px rgba(255,255,255,0.06);*/
    
}
input, button {
    border: 2px solid var(--main-bg-color);
    background: transparent;
    color: white;
    border-radius:10px;
    padding:10px;
    margin:10px 0;
}
button.login:after{
    /*content: "\2771";*/
    content: "\27B2";
    line-height: 0.5em;
    font-size:2.5em;
    color: rgba(255,255,255,0.7);
    justify-self: end;

}
@keyframes drawAttention {
   from { top: 0px; left: 0px; bottom: 0px; right: 0px;  }
}
@keyframes drawAttentionDone {
   to { 
        opacity: 0;
        border-width: 10px;
        transform: scale(1.2);
   }
}
ul.horizontal {
    margin:0;
    padding:0;
    list-style-type: none;
}
ul.horizontal > li {
    display: inline;
}
ul.horizontal > li:not(:first-child):before {
    content: "\00B7  ";
}