body {
    font-family: sans-serif;
    font-size: 75%;
    margin: 0;
    padding: 0;
    background-color: #555555;
}

div.page {
    width: 80em;
    min-height: 40em;
    height: auto;
    margin: 5mm auto;
    padding: 0em;
    border: 3px solid #add8e6;
    border-radius: 10px;
    display: block;
    background-color: #ffffff;
/*    justify-content: center; */ /* Horizontální zarovnání uprostřed */
/*    align-items: flex-start; */ /* Vertikální zarovnání na horní okraj */
}

div.blocked {
  pointer-events: none;   /* Zablokuje klikání a interakce */
  opacity: 0.5;           /* Volitelně vizuální indikace */
/*  filter: grayscale(100%);/* Volitelně zšedne celý obsah */
  user-select: none;      /* Zamezí označování textu */
}

div.page h1 {
    width: 100%;
    margin: -1px;
    padding: 0px;
    color: #555555;
    display: block;
    border: 1px solid #add8e6;
    border-radius: 10px 10px 0px 0px;
    background-color: #add8e6;
    text-align: center;
}

div.page p {
    display: block;
}

div.page img {
    
}

div.page a.btn {
    display: inline-block;
    width: 8em;
/*    height: 3em;  */
    border: 1px solid #add8e6;
    border-radius: 5px;
    text-align: center;
    padding: 10px;
    margin: 0 auto;
}

div.page table {
    margin: 1em auto 1em auto;
    border: 1px solid gray;
    border-radius: 10px;
    border-collapse: separate;
/*    text-align: auto;   */
}

div.page table tr th,
div.page table tr td {
    margin: 0em;
    padding: 0em 1em 0em 1em;
}

div.page table tr th {
    border-bottom: 1px solid gray;
    border-radius: 0px 0px 10px 10px;
}

div.page table tr td.name {
    width: 20em;
}

div.page table tr td.size {
    width: 10em;
    text-align: right;
}

div.page table tr td.param {
    width: 10em;
    text-align: right;
}

div.page table tr td.quant {
    width: 10em;
    text-align: center;
}

div.page table tr.sel td {
    font-weight: bold;
    background-color: #add8e6;
}

div.page form {
    display: block;
    margin: 0em;
    padding: 0em;
}

div.page form.chat div.output,
div.page form.chat textarea.system,
div.page form.chat textarea.user {
    display: block;
    border: 1px solid #add8e6;
    margin: 1em;
    padding: 0.5em;
    height: 10em;
    min-height: 5em;
    max-height: 15em;
    border-radius: 5px;
    width: calc(100% - 2em);
    box-sizing: border-box;
    resize: vertical;
    overflow: auto; /* nebo scroll */
}

div.page form.chat div.output {
    height: 30em;
    max-height: 30em;
}

div.page form.chat textarea.system {
    height: 5em;
    border: 1px solid #d8ade6;
}

div.page form.chat textarea.user {
    height: 10em;
    border: 1px solid #d8e6ad;
}


div.page form.chat input.btn {
    display: block;
    margin: 1em auto 1em auto;
    padding: 1em;
    font-weight: bold;
}

div.page a {
  color: blue;
  text-decoration: none;
}

div.page form.chat div.output div.item {
    position: relative;
    border: 1px solid #777777;
    border-radius: 3px;
    padding: 0em;
    margin: 0em;
}

div.page form.chat div.output div.item div.text {
    margin: 0em;
    padding: 0em;
}

div.page form.chat div.output div.item div.text * {
    all: revert;
}

div.page form.chat div.output div.item span.typ {
    display: block;
    font-weight: bold;
    font-size: 110%;
    color: black;
    border-radius: 3px 3px 0px 0px;
    padding: 0em 0em 0em 0.25em;
    margin: 0em;
}

div.page form.chat div.output div.item span.time {
    position: absolute;
    text-align: right;
    padding: 0em 0.25em 0em 0em;
    margin: 0em;
    top: 0em;
    right: 0em;
}


div.page form.chat div.output div.otazka {
    border: 1px solid #55ff55;
    margin-bottom: 0.5em;
}

div.page form.chat div.output div.otazka span.typ {
    background-color: #55ff55;
}

div.page form.chat div.output div.odpoved {
    border: 1px solid #aaaaff;
    margin-bottom: 1em;
}

div.page form.chat div.output div.odpoved span.typ {
    background-color: #aaaaff;
}

div.page form.chat div.output div.error {
    border: 1px solid #ff5555;
    margin-bottom: 1em;
}

div.page form.chat div.output div.error span.typ {
    background-color: #ff5555;
}

div.page ul.status {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
}

div.page ul.status li {
    border-top: 1px solid gray;
    border-radius: 5px 5px 0px 0px;
    padding: 0em 1em 0em 1em;
}

div.page ul.status li#stattext {
    flex-grow: 1;
    text-align: left;
}

div.page ul.status li#stattimer {
    white-space: nowrap;
    text-align: right;
}

div.page div.loader {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
}

div.page div.loader svg.spinner {
    width: 48px;
    height: 48px;
    animation: rotate 2s linear infinite;
}

div.page div.loader svg.spinner circle.path {
    stroke: #1976d2; /* Material Design modrá */
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation:
	dash 1.5s ease-in-out infinite,
	color 6s ease-in-out infinite;
}

@keyframes rotate {
    100% {
	transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
	stroke-dasharray: 1, 200;
	stroke-dashoffset: 0;
    }
    50% {
	stroke-dasharray: 89, 200;
	stroke-dashoffset: -35px;
    }
    100% {
	stroke-dasharray: 89, 200;
	stroke-dashoffset: -124px;
    }
}

@keyframes color {
    0% {
	stroke: #1976d2;
    }
    40% {
	stroke: #388e3c;
    }
    66% {
	stroke: #fbc02d;
    }
    80%, 90% {
	stroke: #d32f2f;
    }
}

div.hidden {
    display: none;
}