:root{
    font-size:15px;
    font-family:system-ui,sans-serif;
    --color:black;
    --colorSoft:#444;
    --bgColor:white;
    --hoverColor:lightgrey;
    --mediaColorA:wheat;
    --mediaColorB:rgb(210,210,255);
    --headerColor: #777;
    --bgColorFirstMenu: #004a70a7;
    --bgColorSecondMenu: #73adcba6;;
    --brand:blue;
    --leftTopBorderColor:#ccc;
    --rightBottomBorderColor:#aaa;
    --attentionColor:rgba(255, 48, 48);
    --top-nav-height:2.5rem;
    --bottom-nav-height:27px;
    --textFieldMinWidth:13rem;
    accent-color:#00f;
}
*{
    margin:0;
    padding:0;
    text-decoration:none;
    color:inherit;
    background-color:inherit;
}
@media print{
    :root{
        --brand:blue;
        accent-color:var(--brand);
        font-size:9px;
    }
    .first-menu,#top-filler,#explorer,#nav{
        display:none !important;
    }
    img{
        max-width:100%;
    }
}
main{
    position: absolute;
    top:0;
    left:0;
    z-index:2;
    width: 100%;
    overflow-x:auto;
    overflow-y:visible; 
    background: none;
}
span{
    font-family:inherit;
    font-size:inherit;
    text-decoration:none;
    color:inherit;
}
h1,h2,h3,li,ol,ul,div,p,div,fieldset,calendar-sheet-wrapper,embed,button,svg,input,textarea,select,progress,a.btn,.js-button{
    float:left;
    clear:both;
    font-size:inherit;
    font-style:inherit;
}
h1,h2,h3{
    margin:1em 0 0.75rem 5px;
    width:98%;
    font-weight: normal;
    color: var(--headerColor);
}
h1{
    font-size:1.6rem;
}
h2{
    font-size:1.4rem;
}
h3,caption{
    font-size:1.2rem;
}
object{
    overflow:hidden;
}
p,li,code{
    font-size:1.1rem;
}
a.std:hover{
    background-color:var(--hoverColor);
}
a.textlink{
    font-weight:bold;
    text-decoration: underline dotted var(--brand);
}
ol,ul{
    margin-left:1rem;
    list-style-position:inside;
}
li{
    margin:0.5rem 1rem;
}
li:hover{
    background-color:var(--hoverColor);
}
code{
    display:block;
    white-space: pre-wrap;
    padding:0.2rem;
    color:var(--leftTopBorderColor);
    background-color:var(--color);
    font-family:'Courier New',monospace;
    font-weight:bold;
    font-size:1.05rem;
}
button,input,textarea,select,a.btn,a.plot,.js-button{
    float:left;
    clear:none;
    font-size:1rem;
    padding:0.2rem 0.4rem;
    margin: 0 0.2rem;
    background-color:var(--bgColor);
    border-radius:unset;
    border-left:1px solid var(--leftTopBorderColor);
    border-top:1px solid var(--leftTopBorderColor);
    border-right:2px solid var(--rightBottomBorderColor);
    border-bottom:2px solid var(--rightBottomBorderColor);
}
button,input[type="submit"],a.btn,a.plot,.js-button{
    text-align:center;
}
button:hover,input[type="submit"]:hover,input[type="file"]:hover,a.btn:hover,a.plot:hover,.js-button:hover{
    cursor:pointer;
    color:var(--bgColor);
    background-color:var(--color);   
}
select{
    max-width:20rem;
    cursor:pointer;
}
textarea{
    min-height:3rem;
}
input.filter[type="text"]{
    border:1px dotted var(--attentionColor);
}
p.filter{
	clear:none;
	line-height:1rem;
	padding:0;
	color:var(--brand);
	font-size:0.9rem;
    margin:0 0 0 -1.3rem;
    background-color:var(--bgColor);
}
p.sample{
    float:left;
    clear:both;
    font-style:italic;
    font-size:0.9rem;
    padding: 0;
    margin: 0 0.2rem;
    color:var(--brand);
}
.td-content-wrapper{
    white-space:break-spaces;
    max-height:300px;
    max-width:300px;
    overflow:auto;
}
div.preview,main,div,select,video,img,p{
    float:left;
}
div.preview,video,img{
    clear:left;
    background:none;
}
div.preview{
    margin: 5px;
}
div.cover-wrapper{
    clear:none;
    position:relative;
    overflow:hidden;
    width:auto;
}
p{
    padding:0.2rem 10px;
}
p.std,p.calendar-hour,p.cover,p.icon,p.first-menu,p.toolbox,p.comment,p.comment-footer,p.user-abstract{
    padding:0;
    line-height:initial;
    white-space:break-spaces;
    background: none;
}
p.cover{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    color:var(--bgColor);
    background-color:var(--attentionColor);
    opacity: 0.6;
    text-align:center;
    cursor:pointer;
}
table{
    float:left;
    clear:both;
}
table.std,div.table{
    clear:none;
    margin:0.5rem;
    box-shadow: 5px 5px 3px var(--rightBottomBorderColor);
    border: 1px solid var(--rightBottomBorderColor);
}
table.matrix{
    border:1px dotted var(--colorSoft);
}
td.matrix{
    padding:1px;
}
caption{
    margin:5px 0;
}
fieldset{
    font-size:1rem;
    border:2px solid var(--brand);
}
legend{
    font-weight:bold;
    margin:0.4rem;
    padding:0.4rem;
}
div.fieldset{
    padding:0.5rem 0;
}
input[type="text"],input[type="tel"],input[type="password"],input[type="email"],textarea{
    min-width: var(--textFieldMinWidth);
}
input[type="checkbox"]{
    clear:left;
    width:1.2rem;
    height:1.2rem;
    margin:0 0.5rem;
}
label{
    float:left;
    clear:right;
    line-height:initial;
}
tr:hover{
    color:var(--color);
    background-color:var(--hoverColor);
}
th{
    color:var(--colorSoft);
    border-bottom:1px solid var(--rightBottomBorderColor);
}
td,th{
    position:relative;
    padding:0.125rem;
    max-width:95vw;
    max-height:80vh;
}
p.log{
    clear:none;
    font-size:0.95rem;
    padding:0 1rem 0 0.5rem;
}
div.log{
    clear:both;
    width:100%;
    border-bottom:1px dotted var(--rightBottomBorderColor);
}
embed{
    min-width:500px;
    min-height:300px;
    box-shadow:2px 2px 3px 3px var(--rightBottomBorderColor);
}
article{
    float:left;
    clear:none;
    display:block;
    position:relative;
    width:100%;
    padding-bottom: 2rem;
    overflow:auto;
    color:var(--color);
    background-color:var(--bgColor);
    border-bottom:1px solid var(--leftTopBorderColor);
}
article.multimedia{
    max-width:300px;
    height:280px;
    margin:5px;
    border:1px solid var(--leftTopBorderColor);
    box-shadow:10px 5px 5px var(--leftTopBorderColor);
}
div.container-busy{
    display:none;
    position:absolute;
    left:0;
    bottom:0;
    right:0;
    top:0;
    background-image:url('busy.gif');
    background-color:var(--bgColor);
    background-repeat:no-repeat;
    background-position:center;
    opacity:0.7;
    z-index:60;
}
div.explorer{
    clear:none;
    padding:1em 0.5em 0.5em 5px;
}
label.explorer{
    float:left;
    margin:-1.3em -3em 0 0;
}
div.icon{
    clear:none;
    display: block;
    overflow:hidden;
    margin:0 3px;
    background-size:cover;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;  
}
p.icon{
    text-align:center;
    background-color:var(--brand);
    color:var(--bgColor);
}
.logo{
    float:none;
    margin:10px auto;
}
meter{
    float:left;
    clear:both;
    margin:3px 0.25rem 0 0;
}
/** IMAGE VIEWER **/
#overlay,#overlay-image,#prev-img-btn,#next-img-btn,#img-index,#overlay-title,#overlay-image-container{
    z-index:100;
}
#overlay,#overlay-image-container{
    position:fixed;
    float:unset;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:var(--color);
    opacity: 0.8;
}
#overlay-image-container{
    background:none;
    opacity: 1;
}
#overlay-image{
    position: relative;
    display: block;
    cursor:pointer;
    max-width:90vw;
    max-height:90vh;
    margin:0 auto;
    cursor:pointer;
    background-repeat:no-repeat;
    background-position:center;
    border:1px solid var(--rightBottomBorderColor);
}
#prev-img-btn,#next-img-btn{
    position:absolute;
    top:0;
    padding:3rem 0.5rem;
    text-align:center;
    line-height:100vh;
    min-width:5%;
    cursor:pointer;
    font-size:3rem;
    color:var(--bgColor);
    background: none;
}
#prev-img-btn:hover,#next-img-btn:hover{
    color:var(--color);
    background-color:var(--bgColor);
    opacity: 0.6;
}
#prev-img-btn{
    left:0;
}
#next-img-btn{
    right:0;
}
#img-index,#overlay-title{
    color:var(--rightBottomBorderColor);
    text-align:center;
}

/** BODY **/
.bg-media{
    position: fixed;
    background-size:cover;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    overflow: hidden;
}
p.bg-media{
    position: absolute;
    display:none;
    color:var(--mediaColorA);
    background-color:var(--color);
    opacity: 0.6;
    top:1rem;
    left:0.5rem;
    width:350px;
    height:auto;
    padding:0.5rem;
    border: 1px solid var(--color);
}
div.transparent{
    position: relative;
    height:25vh;
    background:none;
}
/** MENUs **/
#top-filler{
    height:var(--top-nav-height);
    width: 100%;
    background-color: var(--bgColor);
}
div.first-menu,div.second-menu{
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:var(--top-nav-height);
    z-index:10;
    background-color: var(--bgColorFirstMenu);
    overflow:hidden;
}
div.second-menu{
    top:var(--top-nav-height);
    background-color: var(--bgColorSecondMenu);
    border-bottom: 1px solid var(--hoverColor);
}
ul.menu{
    list-style-type: none;
    margin:0;
}
li.menu{
    float:left;
    clear:none;
    width:6rem;
    height:4.1rem;
    margin:0;
    border-right:1px solid var(--hoverColor);
    border-bottom:3px solid var(--leftTopBorderColor);
    transition:border 200ms ease-out;
    background-color: var(--bgColor);
    overflow: hidden;
}
li.menu:hover{
    border-bottom:3px solid var(--color);
}
a.menu,a.first-menu,p.first-menu{
    display:block;
    height: 100%;
    text-align:center;
}
a.first-menu,p.first-menu{
    float:left;
    clear:none;
    font-size:1.5rem;
    font-weight:bold;
    height:var(--top-nav-height);
    width:var(--top-nav-height);
    border-right:1px solid var(--rightBottomBorderColor);
}
select.menu{
    font-size:1.1rem;
    height:2.5rem;
    margin:0;
}
a.first-menu{
    color:var(--bgColor);
    background-color:var(--color);
    margin:1px 0 0 1px;
}
div.menu-item-emoji,div.menu-item-label{
    float:inherit;
    text-align:center;
    width:100%;
}
div.menu-item-emoji{
    font-size:24px;
}
select.lng-selector{
    float:right;
    clear:none;
}

/** WIDGETS **/
.file-upload{
    clear:both;
    width:100%;
    padding: 0;
}
div.file-upload{
    height:100px;
    width:250px;
    padding:5px;
    background-color:var(--mediaColorA);
}

input.file-upload{
    clear:both;
    margin:0;
    padding:0;
    height:60%;
}
progress.file-upload{
    clear:both;
    margin-top:3px;
    background-color: var(--leftTopBorderColor);
}
p.file-upload{
    font-size: 0.8rem;
}

/** DETAILS, SUMMARY, APPs **/
summary{
    float:left;
    clear:none;
    min-width:3rem;
    width:100%;
    font-size:1.3rem;
    border-bottom:1px dotted var(--color);
    background-color: var(--mediaColorB);
}
summary:hover{
    cursor:pointer;
    color:var(--color);
    background-color:var(--hoverColorB);
}
details{
    position:relative;
    float:left;
    clear:none;
    overflow:hidden;
    padding:0.5em 1em 0 5px;
}
details.comment{
    clear:both;
}
details.forum,details.toolbox{
    width:100%;
    padding:0;
    overflow:auto;
}
details.toolbox{
    position:fixed;
    bottom:0;
    z-index:10;
    color:var(--bgColor);
    background-color:var(--color);
}
summary.forum,summary.toolbox{
    margin:0;
    line-height:var(--bottom-nav-height);
}
summary.toolbox{
    color:var(--bgColor);
    background: none;
}
article.toolbox{
    color:var(--hoverColor);
    background-color:var(--color);
    height:11vh;
    width:100%;
    margin:0;
    padding:0;
}
table.toolbox,tr.toolbox:hover{
    color:var(--bgColor);
    background:none;
    box-shadow:none;
}
div.toolbox{
    width:100%;
    border-bottom:1px dotted var(--rightBottomBorderColor);
}
p.toolbox{
    clear:none;
    color:var(--leftTopBorderColor);
}
/** CANVAS **/
#canvas{
    position:relative;
    min-width:1920px;
    height:500px;
    font-size:16px;
    background-color:var(--bgColor);
    border-top:1px solid var(--headerColor);
    border-bottom:1px solid var(--headerColor);
    overflow:auto;
    background-image:url("canvaslightbg.png");
}
.canvas-text,.canvas-symbol,.canvas-processor,.canvas-trigger,.canvas-std,.canvas-red,.canvas-green,.canvas-dark{
    position:absolute;
    font-size:16px;
    margin:0;
    color:var(--color);
    padding:5px;
    text-align:center;
}
.canvas-std,.canvas-red,.canvas-green,.canvas-dark{
    min-width:140px;
    border:1px solid var(--color);
    box-shadow:3px 3px 5px 1px var(--rightBottomBorderColor);
}
.canvas-symbol{
    font-size:30px;
    margin:0px;
    padding:0px;
}
button.canvas-trigger,button.canvas-std,button.canvas-red,button.canvas-green{
    color:var(--color);
}
button.canvas-trigger:hover,button.canvas-std:hover,button.canvas-red:hover,button.canvas-green:hover{
    color:var(--bgColor);
}
button.canvas-processor{
    color:var(--bgColor);
    background-color:#00f;
}
button.canvas-trigger{
    color:var(--bgColor);
    background-color:#fb0;
}
button.canvas-std{
    background-color:#eee;
}
button.canvas-std:hover{
    background-color:var(--headerColor);
}
button.canvas-red{
    background-color:#fcc;
}
button.canvas-red:hover{
    background-color:#a00;
}
button.canvas-green{
    background-color:#cfc;
}
button.canvas-green:hover{
    background-color:#0a0;
}
button.canvas-dark{
    color:var(--bgColor);
    background-color:var(--colorSoft);
}
.canvas-symbol{
    color:var(--color);
    background: none;
}
.canvas-cntr-btn{
    color:var(--color);
    background-color:var(--bgColor);
}
.canvas-element-btn{
    position:absolute;
    padding:0;
    right:-15px;
    font-size:10px;
    color:var(--attentionColor);
    background:none;
    z-index:15;
}
div.canvas-symbol:hover{
    background-color:var(--color)4;
}
button.canvas{
    float:left;
    clear:none;
    font-weight:bold;
    width:1.8rem;
    margin: 0.15rem 0.15rem 0rem 0rem;
}
div.canvas{
    clear:none;
}
p.canvas-info{
    position:absolute;
    bottom:-18px;
    left:0px;
    font-size:10px;
    color:var(--color);
    background:none;
    padding:1px;
    line-height:1rem;
}
/** CALENDAR **/
div.calendar-sheet-wrapper{
    width:100%;
    margin:5px 0;
    overflow:auto;
    border-bottom:1px solid var(--rightBottomBorderColor);
    border-bottom:1px solid var(--rightBottomBorderColor);
}
div.calendar-sheet{
    position:relative;
    overflow:hidden;
    min-height:200px;
    background-image:url("canvaslightbg.png");
}
div.calendar-day,button.calendar-day{
    position:absolute;
    top:0;
    height:100%;
    margin:0;
    padding:0;
    color:var(--colorSoft);
    text-align:center;
    overflow:hidden;
    border-right:1px solid var(--headerColor);
    background: none;
}
button.calendar-day{
    height:65px;
    border:none;
    font-size:1rem;
    background-color:var(--leftTopBorderColor);
}
p.calendar-hour,div.calendar-hour{
    position:absolute;
    color:var(--colorSoft);
    top:50px;
    width:0;
    font-size: 0.9rem;
}
div.calendar-hour{
    top:65px;
    height:5px;
    border-left:1px solid var(--colorSoft);
}
div.calendar-timeline{
    position:absolute;
    top:0;
    height:100%;
    border-left:3px dashed var(--attentionColor);    
}
.calendar-event,.calendar-event-selected{
    position:absolute;
    padding:0;
    height:25px;
    overflow:hidden;
    text-align:center;
    color:var(--color);
    background-color:var(--bgColor);
}
.calendar-event-selected{
    border:2px solid var(--attentionColor);
}
.calendar-settings-wrapper{
    clear:none;
    background-color:var(--leftTopBorderColor);
    margin:0.5rem 0.5rem 0.5rem 0;
    padding:0.25rem;
}
/** STATUS **/
.status-off{
    color:var(--color);
    background-color:#9bbb00;
}
.status-on{
    color:var(--bgColor);
    background-color:#0b008a;
}
.status-on,.status-off{
    clear:none;
    min-width:4rem;
    padding:0.1rem;
    text-align:center;
}

/** COMMENTS etc. **/
div.comment{
    padding:3px 5px;
}
p.comment{
    font-size:1.2rem;
    color:#a80;
}
p.comment-footer{
    font-size:0.8rem;
    font-weight:bold;
}
div.forum{
    width:100%;
}
div.user-abstract{
    margin:5px;
}
p.user-abstract{
    clear:none;
    font-size:1.5rem;
    line-height:60px;
}
span.emoji{
    font-size:1.2em;
}
a.emoji{
    float:left;
    clear:none;
    font-size:2rem;
    line-height:2.5rem;
    color:var(--color);
}

/** LOGIN **/
#login-article{
    float:none;
    margin:5em auto;
    width:max-content;
    background-color:#eee;
}
#login-table{
    background-color:#eee;
    box-shadow:none;
}
#login-email,#login-psw{
    clear:both;
    padding:3px;
    margin:0;
    width:222px;
}

/** KEYPAD **/
div.keypad{
    position:relative;
    margin:1px;
    border:2px solid var(--rightBottomBorderColor);
}
div.keypad:hover{
    border:2px solid #a00;    
}
a.keypad{
    position:absolute;
    top:0;
    left:0;
    padding:0
}
img.keypad{
    float:left;
    clear:none;
}
.phrase-preview{
    clear:both;
    width:226px;
    padding:0;
    margin:0.2em 0;
    border:1px solid var(--leftTopBorderColor);
}
div.phrase-preview{
    height:80px;
    background-color:var(--bgColor);
    overflow:hidden;
}
a.phrase-preview{
    float:left;
    text-align:center;
    background-color:var(--bgColor);
}
a.phrase-preview:hover{
    color:var(--bgColor);
    background-color:var(--color);
}
.leaflet-container{
    height:400px;
    width:600px;
    max-width:100%;
    max-height:100%;
}
div.plot-wrapper{
    clear:none;
    margin:5px;
}
div.center{
    font-size:16px;
    text-align: center;
    background-color: var(--bgColor);
    width: 100%;
}
div.widget{
    width:100vw;
    padding: 0;
    overflow-y:auto;
    background-color: var(--bgColor);
    border-bottom: 1px solid var(--rightBottomBorderColor);
}
.widget-entry-wrapper{
    padding:3px 2vw;
    width:94vw;
    border-bottom:1px dotted var(--color);
}
.widget-entry-header{
    clear:right;
    font-size:1.2rem;
    font-weight:bold;
}
.widget-entry-content-wrapper{
    clear:none;
    width:70vw;
}
.widget-entry-content{
    font-size:1.2rem;
}
/** image shuffle**/
div.imageShuffleItemWrapper,div.imageShuffleItem,article.imageShuffle,.imageShuffleBtnWrapper{
    margin:0;
    padding:0;
    max-width: 95%;
}
div.imageShuffleItem{
    position:absolute;
    top:0;
    bottom:0;
    height:100%;
    width:100%;
}
article.imageShuffle{
    max-width: 100%;
    max-height: 100%;
    border: none;
}
.imageShuffleBtnWrapper{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}