a, p, h1, h2, h3, h4, h5, h6 {
      margin: 0;
      /* color: var(--txt1); */
  }
  a {
      color: var(--c0);
      text-decoration: underline;
      cursor: pointer;
  }
  hr {
      border: 1px solid var(--c0);
  }
  hr.light {
      border-width: 0.5px;
  }
  hr.gray {
      border-color: var(--c6);
  }
  textarea {
      color: var(--txt1);
  }
  input {
      color: var(--txt1);
    -webkit-appearance: none;
  }
  :root {
      color-scheme: light dark;
      /* --c0: #B5142B; */
      /* --c0: rgb(0,166,218); */
      --c0: #EB3631;
      /* standard color*/
  
      --bg0: rgb(246, 246, 250); /* light Background*/
      --bg1: rgb(29,37,43); /* dark Background*/
      --bg2: #fff; /* white Background*/
      --bg3: rgb(193, 193, 193); /* white Background*/

      --txt1: #111111;/* font color*/
      --txt2: #fafafa;/* font color*/
      --c3: #fff;/* font color*/
      --c4: #ddd;/* font color*/
      --c5: #f1f1f1;
      --c6: #adadad;
      
      /* zum abrufen: var(--standardColor); */
  
  
      /* state colors (task) */
      --s0: #ccc/*rgb(162, 88, 88)*/;
      --s1: rgb(88, 181, 206);
      --s2: rgb(220, 167, 75);
      --s3: #ccc;
      --s4: rgb(235, 120, 88);
      --s5: rgb(123, 214, 135);
  
      /* priority colors (task) */
      --p0: #ccc;
      --p1: rgb(227, 187, 68);    
      --p2: rgb(232, 121, 36);
      --p3: rgb(200, 48, 58);
  }
  @media (prefers-color-scheme: dark) {
      /* Dark Mode*/
  }
  html, body {
      margin: 0;
      padding: 0;
      width: 100vw;
      color: var(--txt1);
  }
  body {
      min-height: 100vh;
      /* height: 400vh; */
      font-family: "Helvetica Neue",Arial, Helvetica, sans-serif;
      /* font-weight: lighter; */
      font-weight: normal;
      background-color: var(--txt2);
  }
  main.content {
      position: relative;
      margin-left: 250px;
      top: 50px;
      padding: 12.5px;
  }

  .noselect {
    cursor: default;
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
    supported by Chrome, Edge, Opera and Firefox */
}

.hidden {
    visibility: hidden;
}
.hide {
    display: none;
}

header > * {
    vertical-align: top;
    display: inline-block;
}
header > h1{
    margin-left: 15px;
    line-height: 50px;
    color: var(--txt2);
}
header {
    position: fixed;
    width: calc(100% - 250px);
    margin-left: 250px;
    height: 50px;
    z-index: 9999;
    /* background: linear-gradient(30deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));*/
    /* background: linear-gradient(135deg, red, blue); */
    
    /* background: linear-gradient(35deg, rgba(255, 255, 255, 0), rgba(250, 255, 0, 0.25)); */
    background-color: var(--c0);
}
.navBar {
    position: fixed;
    width: 250px;
    height: 100%;
    background-color: var(--bg1);
}
.navBar > .logo {
    display: block;
    width: calc(100% - 50px);
    margin: 0 25px;
    height: 50px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(/s/logo.png);
}

nav > a {
    position: relative;
    display: block;
    padding: 10px;
    color: var(--txt2);
    margin: 0 12.5%;
    line-height: 20px;
    height: 20px;
    position: relative;
    /* margin-left: 65px; */
    padding-left: 65px;
    text-decoration: none;
}
nav > hr {
    width: 75%;
    border-width: 0.5px;
    margin: 10px 12.5%;
    border-color: var(--bg0);
}
nav {
    margin-top: 20%;
}
nav > a::after {
        background: none repeat scroll 0 0 transparent;
        bottom: 0;
        content: "";
        display: block;
        height: 2px;
        left: -35px;
        left: 0px;
        position: absolute;
        background: var(--bg2);
        opacity: 0;
        transition: width 0.3s ease 0s, opacity 0.3s ease-in;
        width: 0;
    }
    nav > a:hover::after {
        opacity: 1;
        width: calc(100%);
        /* left: 0; */
}

nav > a.active {
    background-color: var(--bg2);
    border-radius: 3px;
    color: var(--bg1);
}
nav > a.active:hover::after {
    width: 0;
    opacity: 0;
}
nav > a::before {
    position: absolute;
    content: "";
    width: 25px;
    height: 25px;
    left: -30px;
    left: 10px;
    top: 7.5px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
nav > a.user::before {
    background-image: url(/s/icon/nav_icon_person.png);
}
nav > a.post::before {
    background-image: url(/s/icon/nav_icon_news.png);
}
nav > a.form::before {
    background-image: url(/s/icon/nav_icon_form.png);
}
nav > a.groups::before {
    background-image: url(/s/icon/nav_icon_group.png);
}
nav > a.files::before {
    background-image: url(/s/icon/nav_icon_files.png);
}
nav > a.monitor::before {
    background-image: url(/s/icon/nav_icon_display.png);
}
nav > a.user.active::before {
    background-image: url(/s/icon/nav_icon_person_b.png);
}
nav > a.post.active::before {
    background-image: url(/s/icon/nav_icon_news_b.png);
}
nav > a.form.active::before {
    background-image: url(/s/icon/nav_icon_form_b.png);
}
nav > a.groups.active::before {
    background-image: url(/s/icon/nav_icon_group_b.png);
}
nav > a.files.active::before {
    background-image: url(/s/icon/nav_icon_files_b.png);
}
nav > a.monitor.active::before {
    background-image: url(/s/icon/nav_icon_display_b.png);
}


.toggle-switch {
    height: 30px;
    width: 55px;
    display: inline-block;
    background-color:  var(--bg2);
    margin: 2px;
    margin-bottom: 5px;
    border-radius: 30px;
    cursor: pointer;
    border: solid 1px var(--bg3);
    box-shadow: inset 1px 1px 9px -3px rgba(4, 4, 4, 0.08), 1px 2px 6px -2px rgba(0, 0, 0, 0.01);
    transition: background-color 0.2s ease-in, border 0.2s ease-in;
    }
    
.toggle-switch.disabled {
    opacity: 0.75;
    cursor: auto;
}
.toggle-switch > .toggle-knob {
    width: 26px;
    height: 24px;
    display: inline-block;
    background-color: var(--bg2);
    border: solid 2px var(--bg3);
    /*border: solid 1px rgba(126, 126, 126, 0.07);
    box-shadow: 0 1px 3px rgba(107, 106, 106, 0.26), 0 5px 1px rgba(107, 106, 106, 0.13); */
    border-radius: 24px;
    margin: 1px 1px;
    transition: margin-left 0.2s ease-in;
}

.toggle-switch.active {
    background-color: #77e189;
    border: solid 1px transparent;
}

.toggle-switch.active .toggle-knob {
    margin-left: 24px;
}
input[type="file"] {
    width: 0;
    height: 0;
    opacity: 0;
    transform: scale(0);
}
.toggle-switch + p {
    display: inline-block;
    line-height: 32px;
    vertical-align: top;
}
p.text {
    white-space: pre-line
}
body > .alert div > a:hover {

    color: var(--bg2);
    background-color: var(--c0);
}
body > .alert div > a {
    display: inline-block;
    padding: 5px;
    border-radius: 5px;
    text-decoration: none;
    border: 2px solid var(--c0);
    width: 100px;
    text-align: center;
    transition: background-color 0.25s ease-in, color 0.25s ease-in;
}
body > .alert > div {
    width: 480px;
    padding: 10px;
    border-radius: 5px;
    background-color: var(--bg2);
    margin: 50px calc(50% - 250px);
}
body > .alert {
    position: fixed;
    z-index: 99999;
    top: 0;
    width:100vw;
    height:100vh;
    background-color: rgba(0,0,0,0.5)
}