:root {
    --table-radius: 0.3em;
    --table-border: 1px solid #222;
    --box-shadow: 1px 1px 4px #000;
    --box-shadow-hover: 1px 1px 12px #111;
    --text-shadow: 1px 1px 2px #000;
    --gradient: linear-gradient(to bottom, rgba(255,255,255, .1), rgba(0,0,0, .3));
    --gradient-reverse: linear-gradient(to top, rgba(255,255,255, .1), rgba(0,0,0, .3));
}

* { transition: all 0.1s ease; }

html, body { height: 100%; margin: 0px; padding: 0px; }
body { background-color: #aaa; background-image: linear-gradient(to bottom, #333, #000); font-size: 100%; background-attachment: fixed; color: #ddd; font-family: Verdana, Tahoma, Arial; }

div.main { display: block; width: 53em; margin: 5em auto 2em auto; padding: 0em; border: 1px solid #000; border-radius: var(--table-radius); box-shadow: var(--box-shadow); background-color: #555; }
div.main h1 { padding: 0.25em 0em 0.25em 0em; margin: 0em; font-size: 150%; text-align: center; letter-spacing: 0.1em; border-bottom: 1px solid #000; border-radius: var(--table-radius); background-color: #024;  background-image: var(--gradient); box-shadow: inset 0px 0px 2px #ccc; text-shadow: var(--text-shadow); transform: scale(1.01); }
div.main p.note { padding: 0.5em; margin: 1em; text-align: justify; }

div.links { display: flex; gap: 2em; flex-direction: row; justify-content: space-around; /* center; */ padding: 1em; }
div.links a { display: block; text-align: center; text-decoration: none; color: #ddd; border: 1px solid #333; border-radius: 0.5em 0.5em; background-color: #555; background-image: var(--gradient); box-shadow: var(--box-shadow); }
div.links a.back { background-color: STEELBLUE; }
div.links a.back:hover { background-color: #5ad; }
div.links a.clear { background-color: RED; }
div.links a.clear:hover { background-color: #f33; }
div.links a.auto { overflow: hidden; }
div.links a.auto:after { content: ""; height: 3px; background-color: GREEN; display: block; position: relative; width: 0px; top: 1em; left: -1em; animation-name: deduction; animation-timing-function: linear; border-radius: 3px; }
div.links a.t2:after { animation-duration: 2s; }
div.links a.t5:after { animation-duration: 5s; }
div.links a.t10:after { animation-duration: 10s; }
div.links a h1 { font-size: 100%; border-bottom-color: #000; }
div.links a p.note { padding: 0em; margin: 0.5em; font-size: 90%; font-style: italic; }
div.links a:hover { border-color: #557; background-color: #777; transform: scale(1.1); box-shadow: var(--box-shadow-hover); text-shadow: var(--text-shadow); }
div.links a:hover h1 { border-bottom-color: #557; }

div.menu div.links { display: grid; grid-template-columns: repeat(auto-fit, 15em);  }
div.menu a { height: 10em; padding: 0em; background-color: #696; }
div.menu a:hover { background-color: #7b7; }
div.menu a h1 { border-color: #261; background-color: #594; }
/*
div.menu a p { margin: 0.5em; text-align: justify; }
*/

div.syserr { border-color: #f66; background-color: #400; }
div.syserr h1 { border-bottom-color: #f66; color: #faa; background-color: #600; }
div.syserr p.note { margin: 3em; color: #f66; color: WHITE; text-shadow: var(--text-shadow); }
div.syserr a { width: 15em; padding: 1em; font-size: 120%; font-weight: bold; background-color: #c00 !important; border-color: #f00; }
div.syserr a:hover { background-color: #f00 !important; border-color: #f55; }



div.dodak a, div.faktura a { width: 5em; padding: 1em; }
div.dodak form, div.faktura form { padding: 0em; margin: 0em; text-align: center; }
div.dodak form input.files, div.faktura form input.files { height: 80px; }
div.dodak form input.files:before, div.faktura form input.files:before { content: "klikněte pro výběr souborů"; cursor: pointer; display: block; text-align: center; padding: 1em; margin: 2em; border: 1px solid #ccc; border-radius: 0.5em 0.5em; background-color: #888; background-image: var(--gradient); }
div.dodak form input.files::before:hover, div.faktura form input.files::before:hover { background-color: #aaa; }

div.seznam table { margin: 2em auto 2em auto; table-layout: fixed; border-spacing: 0px; }

/* HEAD tabulky */
div.seznam table thead { background-image: var(--gradient); border-radius: 6px; background-color: #222; }
div.seznam table thead tr:first-child th:first-child { border-top-left-radius: 6px; } /* zaobleni leveho horniho rohu hlavicky tabulky */
div.seznam table thead tr:first-child th:last-child { border-top-right-radius: 6px; } /* zaobleni prabeho horniho rohu hlavicky tabulky */
div.seznam table thead tr:first-child th { border-top: var(--table-border); } /* cara nad hlavickou tabulky */
div.seznam table thead tr th:not(:first-child), div.seznam table thead tr th.all { border-left: 1px solid #555; }

/* BODY tabulky */
div.seznam table tr th,
div.seznam table tr td { border-width: 0px 0px 0px 0px; margin: 0em; padding: 0.25em 0.5em 0.25em 0.5em; }
div.seznam table tbody tr td { border-left: var(--table-border); }
div.seznam table tbody tr td:last-child { border-right: var(--table-border); }
div.seznam table tbody tr td:last-child { border-right: var(--table-border); }
/*div.seznam table tbody tr td:first-child { border-radius: var(--table-radius) 0px 0px var(--table-radius); }
div.seznam table tbody tr td:last-child { border-radius: 0px var(--table-radius) var(--table-radius) 0px; }*/
div.seznam table tbody tr:nth-child(odd) td { background-color: #5c5c5c; }
div.seznam table tbody tr:hover td { background-color: #069; background-image: var(--gradient); }
div.seznam table tbody tr.warn td { background-color: #630; }
div.seznam table tbody tr.err td { background-color: #610; }
div.seznam table tbody tr.empty td { background-color: #324; color: RED; }
div.seznam table tbody tr.err td.err a, div.seznam table tbody tr.warn td.err a { color: RED; }
div.seznam table tbody tr.err td.ok a, div.seznam table tbody tr.warn td.ok a { color: #2c0; }
div.seznam table tbody tr.err td.xml { color: RED; }

/* FOOT tabulky */
div.seznam table tfoot { background-image: var(--gradient-reverse); border-radius: 6px; background-color: #222; }
div.seznam table tfoot tr:last-child td:first-child { border-bottom-left-radius: 6px; } /* zaobleni leveho horniho rohu hlavicky tabulky */
div.seznam table tfoot tr:last-child td:last-child { border-bottom-right-radius: 6px; } /* zaobleni prabeho horniho rohu hlavicky tabulky */
div.seznam table tfoot tr:last-child td { border-bottom: var(--table-border); } /* cara nad hlavickou tabulky */
div.seznam table tfoot tr td:not(:first-child) { border-left: 1px solid #555; }

div.seznam table tr td a { margin: 0em; padding: 0em; color: #8CF; }
div.seznam table tr td.nazev { width: 15em; text-align: left; }
div.seznam table tr td.all { width: 6em; text-align: right; }
div.seznam table tr td.ok { width: 6em; text-align: right; }
div.seznam table tr td.err { width: 6em; text-align: right; }
div.seznam table tr td.xml { width: 6em; text-align: center; }

div.seznam table tr.tail td { font-weight: bold; }
div.seznam table tr.tail td.nazev { text-align: center; }

div.detail div.list { margin: 1em 1em 0em 1em; border: 1px solid #000; border-radius: 0.5em 0.5em 0em 0em; }
div.detail div.list h1 { margin: 0em; font-size: 100%; border-bottom: 1px solid #000; border-radius: 0.5em 0.5em; color: WHITE; }
div.detail div.list h1 span { margin: 0em 1em 0em 1em; }
div.detail div.list pre { margin: 1em; color: BLACK; }
div.detail div.ok { background-color: #8a8; border-color: #252; }
div.detail div.ok h1 { background-color: #352; border-bottom-color: #252; color: WHITE;}
div.detail div.err { background-color: #a88; border-color: #522; }
div.detail div.err h1 { background-color: #a01; border-bottom-color: #522; color: WHITE; }

div.error p.note { color: #500; }
div.warn { background-color: #630; }
div.warn h1 { background-color: #520; }
div.err { background-color: #610; }
div.err h1 { background-color: #500; }
div.empty { background-color: #324; }
div.empty h1 { background-color: #213; }
div.warn p.note, div.err p.note div.empty p.note { color: WHITE; }

/* ANIMACE odepoctu */
@keyframes deduction {
  from { width: calc(100% + 2em); }
  to { width: 0%; }
}

/* styl pro tisk */
@media print {
    * { background-color: transparent !important; background-image: none !important; box-shadow: none !important; text-shadow: none !important; color: BLACK !important; border-color: BLACK !important; border-radius: 0px !important; }
    h1 { transform: scale(1) !important; }
    .links { display: none !important; }
    .list { page-break-inside: avoid; page-break-after: auto; }
    a { color: BLACK !important; }
    table { border-collapse: collapse; }
    table, thead, tbody, tfoot, tr, td, th { border-radius: 0px !important; border-width: 0px; }
    td, th { border: 1px solid BLACK !important; }

    table { page-break-inside: auto; page-break-after: always; }
    tr    { page-break-inside: auto; page-break-after: auto; }
    td    { page-break-inside: auto; page-break-after: auto; }
    thead { display: table-header-group; }
    tbody { display: table-row-group; }
    tfoot { display: table-footer-group; }
}