/* -------------------------------------------------------------------------- */
/* Light mode */
:root,body.lightmode {
    --bg00:          #fff;
    --bg0:          #fff;
    --bg1:          #eee;
    --bg2:          #ddd;
    --bg3:          #ccc;
    --bg4:          #bbb;
    --bg5:          #aaa;
    --bg6:          #999;
    --bg7:          #888;
    --bg8:          #777;
    --bg9:          #666;
    --bg-info:      #ff0;
    --bgi:          rgba(0,0,0,0.7);
    --ci:           #eee;
    --C:        #00c;
    --c:        #222;
    --cc:       #000;
    --c-low:    #888;
    --c-hidden: #aaa;

    --bgb: #337ab7;
    --bgbc:#dddddd;

    --bgb-hover:    #286090;
    --bgb-selected: #205066;
    --bgb-selectedc:#ffffff;
    --bgb-on:       #143048;
    --bgb-close:    #ff0000;
    --bgb-closeh:   #880000;
    --bgb-dz-drag-hover: #44ff44;
    --bgb-delete:    #f00;
    --bgb-deleteh:   #800;
    --bgb-deletec:   #fff;
    --bgb-new:       #ff0;
    --bgb-newc:      #000;
}
@media (prefers-color-scheme: light) {
    #menu>h1 { color: #fff; }
}

/* -------------------------------------------------------------------------- */
/* Dark mode */
@media (prefers-color-scheme: dark) {
/*  */
   :root {
        --bg00:         linear-gradient( 0deg, rgba(10,10,20,1) 0%, rgba(50,47,55,1) 80%), rgb(10,10,20);
        --bg0:          #111118;
        --bg1:          #222228;
        --bg2:          #333338;
        --bg3:          #444449;
        --bg4:          #555559;
        --bg5:          #66666a;
        --bg6:          #77777a;
        --bg7:          #88888b;
        --bg8:          #99999b;
        --bg9:          #aaaaac;
        --bg-info:      #440;
        --bgi:          #000;
        --ci:           #eee;
        --C:        #ff8;
        --c:        #eee;
        --cc:       #fff;
        --c-low:    #888;
        --c-hidden: #666;

        --bgb: #081830;
        --bgbc:#dddddd;

        --bgb-hover:    #103060;
        --bgb-selected: #284090;
        --bgb-selectedc:#ffffff;
        --bgb-on:       #143048;
        --bgb-close:    #a00;
        --bgb-closeh:   #b00;
        --bgb-dz-drag-hover: #44ff44;
        --bgb-delete:    #b00;
        --bgb-deleteh:   #f00;
        --bgb-deletec:   #fff;
        --bgb-new:       #ff0;
        --bgb-newc:      #000;
    }
    #menu { box-shadow: none !important; }
    a { color: #00ff00; }
}


::-webkit-scrollbar { width: 15px; height: 15px; }
::-webkit-scrollbar-thumb { background: rgb(90, 90, 90); }
::-webkit-scrollbar-track { background: rgba(128, 128, 128, 0.2); }

/* ----------------------------------------------------------------- */
body { background-repeat:repeat-x !important; font-family: sans-serif; padding:0; margin:0; background: var(--bg00); color: var(--c); }


/* --------------- Kennzeichen der Reihenfolge --------------------- */
/* ---------------------------- Menue ------------------------------ */
#menu { position: fixed; left: 0; right: 0; top: 0; height: 50px; z-index: 2000; line-height: 50px;
        color: var(--ci); background: var(--bgi) ; box-shadow: 0 0 10px #000; }
body.bottom_menu #menu { top:unset; bottom:0; }
#menu object, #menu img, #menu svg { width:36px; height:36px; vertical-align:middle; }
#menu svg { stroke: var(--bgbc) !important; fill: var(--bgbc) !important; margin:0.4em; }
#menu svg #frame { fill: var(--bgb) !important; stroke: #2e6da4 !important;}
#menu svg:hover #frame { fill: var(--bgb-hover) !important; }

/* ------------------------------- Inhalt --------------------------- */
#inhalt { padding-top: 60px; padding-bottom: 60px;}


/* ------------------------------- seitenmenu ----------------------- */
#smenu,.smenu  {
    padding: 60px 10px;
    direction: rtl;
    overflow-y: scroll;
    position: fixed; top:0; left:0; width: 300px; bottom:0; box-sizing: border-box; background: var(--bg1); z-index:10;
}
#smenu *,.smenu * { direction: ltr; }
#smenu .tooltip,.smenu .tooptip { max-width:250px; white-space:normal; }


.right_menu  { padding: 60px 10px; overflow-y: scroll; position: fixed; top:0; right:0; width: 300px; bottom:0; box-sizing: border-box; background: var(--bg1); z-index:10; }
#messages  { user-select:none; padding: 0px 10px; overflow: hidden; position: fixed; top:60px; right:0; width: 300px; box-sizing: border-box; z-index:100; }
body.bottom_menu { top:0;  }
#messages>span { margin-top:10px; display:block; padding:20px; background-color: var(--bg2); }
#messages>span>div { font-weight: bold; overflow:hidden; }
#messages>span.error { background-color: #f00; color:#fff; }
#messages>*.hidden { display:none; }
#messages.show { bottom:0; overflow-x: hidden; overflow-y:scoll; }
#messages.show>*.hidden { display:block; }

.hinweis,.hinweise { background-color: #ff8 !important; color:#000 !important; padding: 10px; border: 1px solid #888; position:relative;}
.warnung { background-color: #f00 !important; color:#fff !important; padding: 10px; border: 1px solid #888; position:relative; font-weight:bold;}


.vorschlag { position: relative; box-sizing: border-box; display: block; border: 1px solid #888; margin: 5px 0; padding: 10px; background: var(--bg2); }
.vorschlag:hover { background: var(--bg3); }
.vorschlag i.uid { position:absolute; font-style: normal; font-size:80%; bottom:2px; right: 2px; color:#888; }

h1 { margin:0; }
div.layer { padding-top:70px; }
body.menu_bottom div.layer {  padding-top:0;}
/* --------------- Kennzeichen der Reihenfolge --------------------- */

.reihenfolge1,.reihenfolge2,.reihenfolge3,.reihenfolge4,.reihenfolge5,.reihenfolge { position:relative; }

body.reihenfolge_verstecken .reihenfolge1:after,
body.reihenfolge_verstecken .reihenfolge2:after,
body.reihenfolge_verstecken .reihenfolge3:after,
body.reihenfolge_verstecken .reihenfolge4:after,
body.reihenfolge_verstecken .reihenfolge5:after,
body.reihenfolge_verstecken .reihenfolge:after {
    display:none;
}

.reihenfolge1:after,
.reihenfolge2:after,
.reihenfolge3:after,
.reihenfolge4:after,
.reihenfolge5:after,
.reihenfolge:after {
    position: absolute;
    left: -15px;
    top: 10px;
    background-color: #00c;
    border-radius: 20px;
    line-height: 40px;
    display: inline-block;
    width: 40px;
    height: 40px;
    text-align: center;
    font-weight: bold;
    color: #fff;
    font-size: 200%;
    transition: 0.3s;
    content:"?";
    z-index: 500;
}

.reihenfolge1:hover:after,
.reihenfolge2:hover:after,
.reihenfolge3:hover:after,
.reihenfolge4:hover:after,
.reihenfolge5:hover:after,
.reihenfolge:hover:after {
    top: 8px;
    left: -17px;
    box-shadow: 2px 2px 10px #000;
    background-color: #00f;
}
.reihenfolge1:after { content:"1"; }
.reihenfolge2:after { content:"2"; }
.reihenfolge3:after { content:"3"; }
.reihenfolge4:after { content:"4"; }
.reihenfolge5:after { content:"5"; }

/* --------------- Kennzeichen Ladevorgang -------------------------- */
.pending:before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    width: 20px;
    height: 20px;
    right: 5px;
    border-radius: 50%;
    border: 6px solid #ccc;
    border-top-color: #333;
    animation: pending .9s linear infinite;
    z-index: 1;
}

@keyframes pending { to {transform: rotate(360deg);} }
.done:before {
    content: "\002714";
    position: absolute;
    right: 5px;
    text-shadow: 0 0 6px #000;
    color: #ff0;
    font-size: 150%;
}
.fail:before {
    content: "\002639";
    position: absolute;
    right: 5px;
    text-shadow: 0 0 6px #000;
    color: #f33;
    font-size: 150%;
}

/* ------------------------------ Buttons -------------------------- */
button,.button,#logout,#logout_f {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 120%;
    font-weight: normal;
    line-height: 120%;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    background-image: none;
    border-radius: 4px;
    color: var(--bgbc);
    background: var(--bgb);
    border: 1px solid #2e6da4;
    margin: 5px;
    position: relative;
    text-decoration: none;
    box-sizing: border-box;
}
button.fw, .button.fw { display:block; width: 100%; margin: 10px 0; }
button:hover,    .button:hover    { background: var(--bgb-hover); border-color: #204d74; }
button.selected, .button.selected { background: var(--bgb-selected); color: var(--bgb-selectedc); }
button.gewaehlt, .button.gewaehlt { background: var(--bgb-selected); color: var(--bgb-selectedc); }
button.on,       .button.on       { background: var(--bgb-on);      }
button.close,    .button.close    { background: var(--bgb-close);   }
button.close:hover,  .button.close:hover { background: var(--bgb-closeh); }

button.dz-drag-hover, .button.dz-drag-hover { background: var(bgb-dz-drag-hover); }





button.disabled,     .button.disabled, .button:disabled     { opacity: 0.5; }
button.delete,       .button.delete       { background: var(--bgb-delete); color: var(--bgb-deletec); font-weight:bold; }
button.delete:hover, .button.delete:hover { background: var(--bgb-deleteh); }
button.new,          .button.new          { background: var(--bgb-new);    color: var(--bgb-newc); }


/* ------------------------------ Logout --------------------------- */
#logout { position: fixed; right: 4px; top: 4px; }
#logout>svg, #logout_f>svg { fill: var(--bgbc); }
#logout_f { float:right; }
#logout, #logout_f {
  z-index: 10000;
  background-color: var(--bgb-close);
  border-color: #f00;
}
#logout:hover,#logout_f:hover { background-color: var(--bgb-closeh); }
/* #logout:after, #logout_f:after  { content:"Logout \0025ba"; color:#fff; font-size:20px; } */
#logout:after, #logout_f:after  { content:"\0021d2"; color:#fff; font-size:20px; }
#info { display: inline-block; position:fixed; bottom:5px; right:60px; z-index:0; color:#ccc; }
/* -------------------------- superadmin --------------------------- */
#superadmin { font-size: 80%; opacity: 0.5; z-index:9999; position:fixed; background: var(--bg3); border: 1px solid #000; padding: 0px; }
#superadmin { transform: translate(-50%,80%); bottom: 0; left: 50%; white-space: nowrap; }
#superadmin button { margin:2px 5px 0 5px; }
#ssuperadmin.superadminr { transform: rotate(90deg) translate(50%,50%); bottom: unset; left: unset; right: -2px; transform-origin: 100% 50%; top: 50%; }
#ssuperadmin.superadminr { transform: rotate(90deg) translate(50%,50%);}
#superadmin:hover,#superadmin.show { opacity:1; transform: translate(-50%,0); }

/* ------------------------------ Print ---------------------------- */
@media print{
    #menu           { display: none; }
    div.layer       { padding-top:0; }
    #smenu,.smenu   { display: none; }
    #logout         { display: none; }
    #superadmin     { display: none; }
    #inhalt         { padding:0; margin-left: 0;    }
    .reihenfolge:after { display: none; }
    body            { padding:0 !important; }
    .noprint        { display:none; }
}


.tooltip {
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    box-sizing: border-box;
    z-index: 10000;
    padding: 6px 16px;
    position: absolute;
    background: #f26422;
    border-radius: 8px;
    top: 100%;
    display: none;
    opacity: 0;
    left:20px;
    width:  0;
    height: 0;
}

*:hover>.tooltip {
    display: block;
    animation: fade_in_show 0.1s 2.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    width:  0;
    height: 0;
}

.tooltip:after {
    bottom: 100%;
    left: 12px;
    width: 0;
    display: block;
    content: "";
    position: absolute;
    border-width: 0 8px 8px;
    border-style: solid;
    border-color: #f26422 transparent;
}
.tooltip.above       { bottom: 98%; top:auto; }
.tooltip.above:after { top:100%; border-width: 8px 8px 0px 8px; }

@keyframes fade_in_show {
    0%    { opacity: 0; visibility: hidden;  width:0; height:0; }
    10%   { opacity: 0; visibility: visible; width:0; height:0; }
    100%  { opacity: 1; visibility: visible; width:auto; height: auto; }
}

div.floating { position: absolute; padding: 20px; z-index: 555555; background: var(--bg2); border: 1px solid #888; max-width:500px; }
div.floating:before { content:""; position:absolute; top:0; left:0; right:0; height:30px; background:: var(--bg5); }
div.floating>button.close { position:absolute; top:3px; right:3px; }
div.floating>div.title { position:absolute; top:0; left:0; right:0; text-align:center; padding:3px; background:var(--bg4)}
div.floating>pre { overflow:scroll; }


.overlay {
    position: fixed;
    top:0; bottom:0; left:0; right:0;
    background: rgba(0,0,0,.8);
    z-index: 1999;
}
.overlay>div {
    position: absolute; left:50%; top:50%; transform: translate(-50%, -50%);
    border-radius: 1em;
    padding: 2em;
    background: var(--bg1);
    min-width: 500px;
    min-height: 200px;
}
.overlay input[type=text] { background: var(--bg3); color: var(--cc); }
.overlay textarea { background: var(--bg3); color: var(--cc); }


@keyframes back_flash {
        0%   { background: var(--bg0); }
        50%  { background: var(--bg4); }
        100% { background: var(--bg0); }
}