@charset "utf-8";
:root {
    --header: 1.8em;
    --header-padding: 0.5em;
    --topnav-font: 1.3em;
    --footer: 2em;
    --footer-padding: 0.5em;
    --tah: env(titlebar-area-height, 0em);
    --taw: env(titlebar-area-width, 100%);
    --tax: env(titlebar-area-x, 0em);
    --tay: env(titlebar-area-y, 0em);
    --sat: env(safe-area-inset-top, 0em);
    --sar: env(safe-area-inset-right,0em);
    --sab: env(safe-area-inset-bottom,0em);
    --sal: env(safe-area-inset-left,0em);
    --kbt: env(keyboard-inset-top, 0em);
    --kbr: env(keyboard-inset-right, 0em);
    --kbb: env(keyboard-inset-bottom, 0em);
    --kbl: env(keyboard-inset-left, 0em);
    --kbw: env(keyboard-inset-width, 0em);
    --kbh: env(keyboard-inset-height, 0em);

    --top-menue: calc(var(--header) + 2 * var(--header-padding));
    --content-top: calc(var(--top-menue) + 0.2em + var(--tah) + var(--sat));
    --content-top-responsive: calc(4 * var(--top-menue) + var(--content-top) );
    --content-bottom: calc(var(--footer) + 2 * var(--footer-padding) + 0.2em + var(--sab) );

    --theme-color: #ffffff;
    --bkg-color: #222222;
    --hover-color: #dddddd;
    --contrast-color: #04AA6D;
    --hover-contrast-color: red;

    --padding: 12px;
    --toolbar-height: calc(40px + 2 * var(--padding));
    --edited-demo-height: 60%;
    --t-top: 0;
    --t-height: 0;
}

html {
    margin: var(--sat) var(--sar) var(--sab) var(--sal);
    height: calc(100% - var(--tah));
    background-color:var( --contrast-color);
    /*background-attachment: fixed;
    background-image: url('/bg.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;*/
}

body {
    margin: 0;
    background-color: var(--theme-color);
    height: calc(100% - var(--sab));
    font-size: 16px;
}

#titlebar {
    position: absolute;
    display:none;
    left: var(--tax);
    top: var(--tay);
    width: var(--taw);
    height: var(--tah);
    background-color:var(--contrast-color);
}
#titlebar.titlebar {
    display: block;
    -webkit-app-region: drag;
}

#topnav {
    position:absolute;
    top: calc(var(--sat) + var(--tah));
    left:var(--sal);
    right:var(--sar);
    user-select: none;
    -webkit-user-select: none;
    overflow: hidden;
    background-color: #333;
}
#topnav.titlebar {
}


#content {
    position:absolute;
    top:var(--content-top);
    bottom:var(--content-bottom);
    left:var(--sal);
    right:var(--sar);
    overflow:auto;
    padding: 0 1em;
}
#content.responsive {
    top:var(--content-top-responsive);
}

#content.titlebar {
    /*top:var(--content-top-titlebar);*/
}

footer {
    position:absolute;
    bottom: var(--sab);
    height:var(--footer);
    left:var(--sal);
    right:var(--sar);
    padding:var(--footer-padding);
    overflow:hidden;
    background-color: var(--bkg-color);
    color: var(--theme-color);
}
.right {
    float:right;
}

.logo {
    height:1em;
}

.flex-items {
    display: flex;
    flex-wrap: wrap; /* Standardwert = nowrap */
    /*flex-direction: column;*/
}

.flex-item {
    flex: 1 0 auto;
}

.flex-item img {
    height: 200px;
}

.item button {
    background-color: var(--bkg-color);
    border: none;
    color: var(--theme-color);
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 16px;
}
.add-button {
    position: absolute;
    top: 1px;
    left: 1px;
}

.context-buttons {
    display: flex;
    flex-direction: row;
    position: relative;
    justify-content: space-between;
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
}
.context-buttons span {
    padding-left: 40px;
    margin-right: 10px;
}
.context-button {
    font: inherit;
    outline: none;
    border: 0;
    padding: 0;
    border-radius: 8px;
    background-color: var(--color-bg-secondary);
}
.context-button:hover {
    background-color: var(--color-bg-primary-offset);
}
.context-button:hover + .menu-sub-list {
    display: flex;
}
.context-button:hover svg {
    fill: var(--color-text-primary);
}
.context-button svg {
    width: 1em;
    margin-right: 1em;
    fill: var(--color-text-primary-offset);
}
.navbar {
    border: none;
    padding: 15px;
    height: 30px;
    margin-bottom: 12px;
    float:left;
}

.menu-button svg:nth-of-type(2) {
    margin-right: 0;
    position: absolute;
    right: 8px;
}


.settings-button {
    font: inherit;
    outline: none;
    color: inherit;
    border: 0;
    height: 20px;
    border-radius: 8px;
    background-color: var(--color-bg-secondary);
}
.settings-button:hover {
    background-color: var(--color-bg-primary-offset);
}

.settings-button svg {
    width: 100%;
    height: 100%;
    margin-right: 10px;
}

.break{
    border-top: 1px solid var(--hover-color);
}
.menu-button span.disabled,  .context-button:hover:disabled {
    color: var(--color-text-primary-offset) ;
}
.menu-button:hover:disabled, .context-button:hover:disabled {
    background-color: var(--color-bg-secondary);
}

/* Kein JavaScript? Info anzeigen */
.no-js #no-js{
    display: block;
}
.js #no-js{
    display: none;
}
.active {
    display: block;
}
.inactive {
    display: none;
}

select, textarea, input[type="text"], input[type="password"],
input[type="datetime"], input[type="datetime-local"],
input[type="date"], input[type="month"], input[type="time"],
input[type="week"], input[type="number"], input[type="email"],
input[type="url"]{
    font-size: 16px;
}

#topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: var(--header-padding);
    text-decoration: none;
    font-size: var(--topnav-font);
}
#topnav a:not(:first-child) {
    display: none;
}

#topnav.responsive a{
    float: left;
    width: calc(50% - var(--header-padding) * 2);
    display: block;
    text-align: left;
    text-indent: 35px;
}

#topnav a:hover {
    background-color: var(--hover-color);
    color: black;
}

#topnav a.active {
    background-color: var(--contrast-color);
    color: white;
}
#topnav a.icon {
    float: right;
    display: block;
}

.nav {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path d="" ></path></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
}
#topnav.responsive .nav {
    background-position-x: 10px;
}

.icon {
    /* Hide the text. */
    width: 20px;
    text-indent: 40px;
    white-space: nowrap;
    overflow: hidden;
    display: block;
}
#nav_1 {
    background-image: url(/assets/icon0/32.png);
    background-position: 10px center;
    text-indent: 35px;
}

#topnav.titlebar a#nav_1 {
    background-image: none;
    text-indent: unset;
}
#nav_2, #nav_2.active {
    background-image: url(/assets/icon0/calendar-days.svg);
}
#nav_2:hover {
    background-image: url(/assets/icon0/calendar-days000.svg);
}
#topnav.responsive #nav_2.icon {
    position: relative;
    float: left;
}

#nav_login, #nav_login.icon.active {
    background-image: url(/assets/icon0/user-shield.svg);
}
#nav_login:hover {
    background-image: url(/assets/icon0/user-shield000.svg);
}
#nav_login.lock, #nav_login.icon.lock.active {
    background-image: url(/assets/icon0/user-lock.svg);
}
a#nav_login.lock:hover {
    background-image: url(/assets/icon0/user-lock000.svg);
}
#nav_bars  {
    background-image: url(/assets/icon0/bars.svg);  /* shows image */
    background-position: center;
    /*width: 1em;*/
    /*display: block;*/
}
#nav_bars:hover {
    background-image: url(/assets/icon0/bars000.svg);  /* shows image */
}

#topnav.responsive #nav_bars {
    background-image: url(/assets/icon0/xmark.svg);
    background-position: center;
    width:1em;
}
#topnav.responsive #nav_bars:hover{
    background-image: url(/assets/icon0/xmark000.svg);
}

#topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
}
#topnav.responsive #nav_login {
    background-position-x: 10px;
    width: calc(50% - 40px - 2 * var(--header-padding) );
    position: relative;
    display: block;
    float:left;
}

@media screen and (min-width: 69em) {
    #topnav.responsive {
        position: absolut;
    }
    #topnav a,
    #topnav.responsive a{
        float: left;
        width: inherit;
    }
    #topnav a:not(:first-child) {
        display: block;
    }
    #topnav a.icon {
        display: none;
    }
    #topnav #nav_2,
    #topnav.responsive #nav_2 {
        display: block;
        float: left;
        background-position-x: 10px;
    }
    #topnav #nav_login,
    #topnav.responsive #nav_login {
        width: inherit;
        position: relative;
        display: block;
        float: right;
        background-position-x: 10px;
    }
    #content {
        top:var(--content-top) !important;
    }
    #topnav .icon {
        display: none;
    }
    #nav_login {
        background-position-x: 10px;
        /* Hide the text. */
        width: auto;
        text-indent: 35px;
        display: block;
    }
    #nav_login.icon.active {
        text-indent: 35px;
    }

}

#seite_nav_9 h3, #seite_nav_9 button {
    float: left;
}
.w100 {
    width: 100%;
}
td.wrap {
    word-break: break-word;
}

.footertext {
    text-align: right;
    flex: 0 0 auto;
}

.info {
    width: 30px;
    height: 20px;
    float: left;
    display: block;
    background-color: wheat;
}
#info {
    width: 60px;
}
#info-net {
    -webkit-mask: no-repeat center/20px url(/assets/icon0/wifi-off-svgrepo-com.svg);
    mask: no-repeat center/20px url(/assets/icon0/wifi-off-svgrepo-com.svg);
}
#info-net.online {
    -webkit-mask-image: url(/assets/icon0/wireless-signal-svgrepo-com.svg);
    mask-image: url(/assets/icon0/wireless-signal-svgrepo-com.svg);
}
#info-sync {
    -webkit-mask: url(/assets/icon0/handshake-slash.svg) center/20px no-repeat;
    mask: url(/assets/icon0/handshake-slash.svg) center/20px no-repeat;
}
#info-sync.online {
    -webkit-mask-image: url(/assets/icon0/handshake.svg);
    mask-image: url(/assets/icon0/handshake.svg);
    /*background-color: white;*/
}
#info-push {
    -webkit-mask: url(/assets/icon0/bell-slash-solid.svg) center/20px no-repeat;
    mask: url(/assets/icon0/bell-slash-solid.svg) center/20px no-repeat;
}
#info-push.online {
    -webkit-mask: url(/assets/icon0/bell-solid.svg) center/20px no-repeat;
    mask: url(/assets/icon0/bell-solid.svg) center/20px no-repeat;
}
#info-chat {
    -webkit-mask: url(/assets/icon0/comment-slash-solid.svg) center/20px no-repeat;
    mask: url(/assets/icon0/comment-slash-solid.svg) center/20px no-repeat;
}
#info-chat.online {
    -webkit-mask: url(/assets/icon0/comment-solid.svg) center/20px no-repeat;
    mask: url(/assets/icon0/comment-solid.svg) center/20px no-repeat;
}
.cal-day{
    font-size: 0.91rem;
    position: relative;
    height: 48.1em;
    background-size: 100% 4em;
    background-image:
        linear-gradient(to right, grey 1px, transparent 1px),
        linear-gradient(to bottom, grey 1px, transparent 1px);
    background-position: 2.4em 0.8em;
    background-repeat-x: no-repeat;
}
.cal-fix {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}
.cal-time {
    height: 2.8em;
    padding: 0.1em;
    font-size: 1.333em;
}
.cal-t {
    padding: 0.2em;
    position: absolute;
    display: block;
    top: calc( var(--t-top) * 4em );
    height: calc( var(--t-height) * 4em - 0.4em);
    width: 50%;
    border: black 1px solid;
    border-radius: 4px;
}
.cal-t1 {
    background-color: antiquewhite;
    margin-left: 5em;
}
.cal-t2 {
    background-color: burlywood;
    margin-left: calc(5.2em + 51%);
}


.alert-box {
	padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;  
}

.success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
    display: none;
}

.failure {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
    display: none;
}

.warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
    display: none;
}