/*-----------------------------------------------------------------------------
     * Copyright (c) 2020-present Detlef Stern
     *
     * This file is part of Zettelstore.
     *
     * Zettelstore is licensed under the latest version of the EUPL (European Union
     * Public License). Please see file LICENSE.txt for your rights and obligations
     * under this license.
     *
     * SPDX-License-Identifier: EUPL-1.2
     * SPDX-FileCopyrightText: 2020-present Detlef Stern
     *-----------------------------------------------------------------------------
     */
    *,*::before,*::after {
        box-sizing: border-box;
      }
      html {
        font-family: serif;
        scroll-behavior: smooth;
        height: 100%;
      }
      body {
        margin: 0;
        min-height: 100vh;
        line-height: 1.4;
        background-color: #f8f8f8 ;
        height: 100%;
      }
      nav.zs-menu {
        background-color: hsl(210, 28%, 90%);
        overflow: auto;
        white-space: nowrap;
        font-family: sans-serif;
        padding-left: .5rem;
      }
      nav.zs-menu > a {
        float:left;
        display: block;
        text-align: center;
        padding:.41rem .5rem;
        text-decoration: none;
        color:black;
      }
      nav.zs-menu > a:hover, .zs-dropdown:hover button { background-color: hsl(210, 28%, 80%) }
      nav.zs-menu form { float: right }
      nav.zs-menu form input[type=text] {
        padding: .12rem;
        border: none;
        margin-top: .25rem;
        margin-right: .5rem;
      }
      .zs-dropdown {
        float: left;
        overflow: hidden;
      }
      .zs-dropdown > button {
        font-size: 16px;
        border: none;
        outline: none;
        color: black;
        padding:.41rem .5rem;
        background-color: inherit;
        font-family: inherit;
        margin: 0;
      }
      .zs-dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
      }
      .zs-dropdown-content > a {
        float: none;
        color: black;
        padding:.41rem .5rem;
        text-decoration: none;
        display: block;
        text-align: left;
      }
      .zs-dropdown-content > a:hover { background-color: hsl(210, 28%, 75%) }
      .zs-dropdown:hover > .zs-dropdown-content { display: block }
      main { padding: 0 1rem }
      article > * + * { margin-top: .5rem }
      article header {
        padding: 0;
        margin: 0;
      }
      h1,h2,h3,h4,h5,h6 { font-family:sans-serif; font-weight:normal; margin:.4em 0 }
      h1 { font-size:1.5em }
      h2 { font-size:1.25em }
      h3 { font-size:1.15em }
      h4 { font-size:1.05em; font-weight: bold }
      h5 { font-size:1.05em }
      h6 { font-size:1.05em; font-weight: lighter }
      p { margin: .5em 0 0 0 }
      p.zs-meta-zettel { margin-top: .5em; margin-left: .5em }
      li,figure,figcaption,dl { margin: 0 }
      dt { margin: .5em 0 0 0 }
      dt+dd { margin-top: 0 }
      dd { margin: .5em 0 0 2em }
      dd > p:first-child { margin: 0 0 0 0 }
      blockquote {
        border-left: .5em solid lightgray;
        padding-left: 1em;
        margin-left: 1em;
        margin-right: 2em;
      }
      blockquote p { margin-bottom: .5em }
      table {
        border-collapse: collapse;
        border-spacing: 0;
        max-width: 100%;
      }
      td, th {text-align: left; padding: .25em .5em;}
      th { font-weight: bold }
      thead th { border-bottom: 2px solid hsl(0, 0%, 70%) }
      td { border-bottom: 1px solid hsl(0, 0%, 85%) }
      main form {
        padding: 0 .5em;
        margin: .5em 0 0 0;
      }
      main form:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }
      main form div { margin: .5em 0 0 0 }
      input { font-family: monospace }
      input[type="submit"],button,select { font: inherit }
      label { font-family: sans-serif; font-size:.9rem }
      textarea {
        font-family: monospace;
        resize: vertical;
        width: 100%;
      }
      .zs-input {
        padding: .5em;
        display:block;
        border:none;
        border-bottom:1px solid #ccc;
        width:100%;
      }
      input.zs-primary { float:right }
      input.zs-secondary { float:left }
      input.zs-upload {
        padding-left: 1em;
        padding-right: 1em;
      }
      a:not([class]) { text-decoration-skip-ink: auto }
      a.broken { text-decoration: line-through }
      a[rel~="external"]::after { content: "➚"; display: inline-block }
      img { max-width: 100% }
      img.right { float: right }
      ol.zs-endnotes {
        padding-top: .5em;
        border-top: 1px solid;
      }
      kbd { font-family:monospace }
      code,pre {
        font-family: monospace;
        font-size: 85%;
      }
      code {
        padding: .1em .2em;
        background: #f0f0f0;
        border: 1px solid #ccc;
        border-radius: .25em;
      }
      pre {
        padding: .5em .7em;
        max-width: 100%;
        overflow: auto;
        border: 1px solid #ccc;
        border-radius: .5em;
        background: #f0f0f0;
      }
      pre code {
        font-size: 95%;
        position: relative;
        padding: 0;
        border: none;
      }
      div.zs-indication {
        padding: .5em .7em;
        max-width: 100%;
        border-radius: .5em;
        border: 1px solid black;
      }
      div.zs-indication p:first-child { margin-top: 0 }
      span.zs-indication {
        border: 1px solid black;
        border-radius: .25em;
        padding: .1rem .2em;
        font-size: 95%;
      }
      .zs-info {
        background-color: lightblue;
        padding: .5em 1em;
      }
      .zs-warning {
        background-color: lightyellow;
        padding: .5em 1em;
      }
      .zs-error {
        background-color: lightpink;
        border-style: none !important;
        font-weight: bold;
      }
      td.left, th.left { text-align:left }
      td.center, th.center { text-align:center }
      td.right, th.right { text-align:right }
      .zs-font-size-0 { font-size:75% }
      .zs-font-size-1 { font-size:83% }
      .zs-font-size-2 { font-size:100% }
      .zs-font-size-3 { font-size:117% }
      .zs-font-size-4 { font-size:150% }
      .zs-font-size-5 { font-size:200% }
      .zs-deprecated { border-style: dashed; padding: .2em }
      .zs-meta {
        font-size:.75rem;
        color:#444;
        margin-bottom:1em;
      }
      .zs-meta a { color:#444 }
      h1+.zs-meta { margin-top:-1em }
      nav > details { margin-top:1em }
      details > summary {
        width: 100%;
        background-color: #eee;
        font-family:sans-serif;
      }
      details > ul {
        margin-top:0;
        padding-left:2em;
        background-color: #eee;
      }
      footer { padding: 0 1em }
      @media (prefers-reduced-motion: reduce) {
        * {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
          scroll-behavior: auto !important;
        }
      }
      div.notification {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 10px;
        border-radius: 5px;
        z-index: 9999;
        display: flex;
        align-items: center;
        font-family: sans-serif;
        font-weight: bold;
      }
    div.notification.success { background-color: hsl(130, 35%, 85%); }
    div.notification.error { background-color: hsl(0, 35%, 85%); }