/*
 * PB071 Webpage Style
 *
 *   - Bootstrap overrides
 *   - Custom improvements
 *
 * Comined sources from
 *
 *   - Roman Lacko <xlacko1@fi.muni.cz>
 *   - Marko Rehacek <xrehacek@fi.muni.cz>
 */

/* --  Fonts and Colors  --------------------------------------------------- */

body {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 0.9em;
}

h1, h2, h3, h4, h5 {
    font-family: 'Quicksand', 'Open Sans', sans-serif !important;
}

kbd {
    font-family: 'Anonymous Pro', 'Quicksand', sans-serif !important;
}

pre, code {
    font-family: 'Anonymous Pro', SFMono-Regular, Menlo, Monaco,
        Consolas, 'Liberation Mono', 'Courier New', monospace !important;
    font-size: 1em;
    line-height: 1.2em;
}

code {
    color: #404040;
    border: 1px dashed #e4e4e4;
    border-radius: 5px;
}

pre {
    background-color: rgb(220, 220, 220, 0.3);
    border: 1px dashed #d0d0d0;
    border-radius: 5px;

    padding: 0.3em;
}

pre code,
a code{
    background-color: transparent;
    border: 0px;
    padding: 0px;
}

h1 { font-size: 1.85em; font-weight: bold; }
h2 { font-size: 1.70em; font-weight: bold; }
h3 { font-size: 1.60em; font-weight: bold; }
h4 { font-size: 1.40em; }

/* This is what div.sect1:first-of-class would do, if it existed */
main div.sect1 h2 {
    margin-top: 1em;
}

main div.sect1 ~ div.sect1 h2 {
    margin-top: 1.5em;
}

h2:not(.modal-warning) {
    background-color: #deebff;
    margin-bottom: 0.75em;
    margin-left: -24px;
    margin-right: -24px;
    padding: 0.45em 0.9em;
}

h3:not(.modal-title),
h4:not(.modal-title) {
    margin-top: 1em;
    margin-bottom: 0.5em;
}

h4 {
    border-bottom: 1px solid #a0a0a0;
}

h5:not(.modal-title) {
    margin-top: 1em;
    margin-bottom: 0.75em;
}

h2.warning {
    background: repeating-linear-gradient(
        -45deg,
        #dee0e4,
        #dee0e4 10px,
        #f2f5b7 10px,
        #f2f5b7 20px
    );
}

div.paragraph p {
    text-align: justify;
}

p.border-bottom, li.border-bottom {
    border-bottom: 1px solid;
}

.normal-size {
    font-size: 1em;
}

/* --  Page layout  -------------------------------------------------------- */

body {
    background-image: url('../images/funky-lines.png');
    background-repeat: repeat;
}

div.content-container {
    background: rgba(255, 255, 255, 0.90);
    border: 1px solid #c0c0c0;
    padding: 0px;
}

body > div.row-main {
    margin-top: 20px;
}

@media(min-width: 768px) {
body > div.row-main {
    margin-top: 50px;
}
}

@media(max-width: 767.98px) {
div.container {
    max-width: unset;
    padding: 0px;
}
}

header,
footer {
    padding-left: 24px;
    padding-right: 24px;
}

main {
    padding-left: 24px;
    padding-right: 24px;
}

/* --  Header and footer  -------------------------------------------------- */

header {
    background: rgba(240, 243, 248, 0.75);

    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-bottom-color: rgb(205, 215, 232, 0.75);

    color: #1c50a1;

    padding: 1.5em 1.75em;
}

header.error {
    background: rgba(255, 233, 233, 0.75);
}

header h1.page-title,
header .page-title-icon {
    font-size: 2em;
    margin: 0px;
    text-shadow: 1px 1px 3px #b0b0b0;
}

header .page-title-icon {
    margin-right: 10px;
}

header span.page-subtitle {
    color: #4a6a9f;
    font-size: 1.2em;
}

footer {
    background-color: rgba(243, 243, 243, 0.75);
    border-top-style: solid;
    border-top-color: #b3b3b3;
    border-top-width: 5px;

    font-size: 0.85em;
    color: #808080;

    margin-top: 15px;
    padding: 1em 2em;
}

footer .separator {
    margin-left: 5px;
    margin-right: 5px;
    color: #a0a0a0;
}

@media(min-width: 768px) {
div.content-container {
    box-shadow: 0px 0px 3px #c0c0c0;
    margin-bottom: 20px;
}
}

div.content-container {
    border-radius: 7px;
}

header {
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

footer {
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
}

/* --  Breadcrumbs  -------------------------------------------------------- */

main nav.breadcrumbs {
    font-size: 0.85em;
    margin-top: -10px;
    margin-bottom: 10px;
    margin-left: -24px;
    margin-right: -24px;

    border-radius: 0;
    background-color: #f9f9f9;

    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-bottom-color: rgb(225, 225, 225, 0.75);
}

main nav ol.breadcrumb {
    margin-bottom: 0px;
    padding-left: 2em;
    background-color: #f4f8fb;
}

/* --  Menu and Table of Contents  ----------------------------------------- */

/* Common declarations */

nav#menu,
nav#toc {
    background-color: rgba(245, 245, 245, 0.80);
    border: 1px solid #d0d0d0;
    border-radius: 7px;
    padding: 2px;

    display: block !important;
    width: 100%;
}

@media(min-width: 768px) {
nav#menu,
nav#toc {
    background-color: rgba(245, 245, 245, 1);
    box-shadow: 0px 0px 3px #c0c0c0;
}
}

/* Menu */

nav#menu ul {
    position: relative;
    margin-top: 6px;
    margin-bottom: 6px;
}

nav#menu li.nav-item {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

nav#menu a.nav-link {
    padding: 0.3em 1.25em;
}

nav#menu div#menu {
    width: 100%;
}

nav#menu div.submenu {
    padding-left: 1rem;
}

nav#menu div.submenu li.nav-item a.nav-link .nav-link-icon {
    width: 1rem;
    text-align: center;
    color: #a0a0a0;
    margin-right: 0.5em;
}

nav#menu div.submenu li.nav-item a.nav-link {
    padding: 0.1em 1.25em;

    white-space: nowrap;
}

nav#menu div.submenu li.nav-item a.nav-link table {
    table-layout: fixed;
}

nav#menu div.submenu li.nav-item a.nav-link td:nth-child(2) {
    width: 100%;
    max-width: 0;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Table of Contents */

@media(min-width: 1200px) {
nav#toc {
    margin-top: 10px;
}
}

@media (max-width: 1199.98px) {
nav#menu,
nav#toc {
    margin-bottom: 10px;
}
}

nav#toc ul.section-nav {
    list-style-type: none;
}

nav#toc ul.section-nav {
    padding-left: 1rem;
    position: relative;
    width: 100%;
}

nav#toc ul.section-nav ul {
    padding-left: 1.5em;
}

nav#toc li.toc-entry {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

nav#toc span.toc-li {
    display: inline-block;
    width: 1.5em;
    text-align: center;
}

/* colors */

nav#toc > div > ul.section-nav > li > a {
    color: #505050;
}

nav#toc > div > ul.section-nav > li > ul > li > a {
    color: #707070;
    font-size: 0.9em;
}

nav#toc > div > ul.section-nav > li > ul > li > ul > li > a {
    color: #909090;
    font-size: 0.8em;
}

/* icons */

nav#toc .toc-entry.toc-h1::before,
nav#toc .toc-entry.toc-h2::before,
nav#toc .toc-entry.toc-h3::before {
    display: inline-block;
    padding-right: 0.5em;
    color: #909090;

    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

nav#toc .toc-entry.toc-h1::before {
    content: "\f1ea";
}

nav#toc .toc-entry.toc-h2::before {
    content: "\f02e";
}

nav#toc .toc-entry.toc-h3::before {
    content: "\f105";
}

/* --  Table Group (idea from Gentoo web page)  ---------------------------- */

table.table-group {
    background-color: #ffffff;
    width: 100%;

    border-spacing: 0px;
}

/* paddings */

table.table-group tr th,
table.table-group tr td {
    padding: 0.75em 1.25em;
}

table.table-group.table-sm tr th,
table.table-group.table-sm tr td {
    padding: 0.3em 0.7em;
}

/* links */

table.table-group tr .table-group-link {
    padding: 0px !important;
}

table.table-group tr .table-group-link a {
    display: block;
    text-decoration: none;
}

table.table-group tr .table-group-link a {
    display: block;
    padding: 0.75em 1.25em;
}

table.table-group.table-sm tr .table-group-link a {
    padding: 0.3em 0.7em;
}

/* borders (wide screen) */

@media(min-width: 768px) {

/* table borders */

table.table-group tr:first-child th,
table.table-group tr:first-child td {
    border-top:  1px solid rgba(0, 0, 0, .125);
}

table.table-group tr th:first-child,
table.table-group tr td:first-child {
    border-left: 1px solid rgba(0, 0, 0, .125);
}

table.table-group tr th:last-child,
table.table-group tr td:last-child {
    border-right: 1px solid rgba(0, 0, 0, .125);
}

table.table-group tr:last-child th,
table.table-group tr:last-child td {
    border-bottom: 1px solid rgba(0, 0, 0, .125);
}

/* border radius */

table.table-group tr:first-child > :first-child {
    border-top-left-radius: .25rem;
}

table.table-group tr:first-child > :last-child {
    border-top-right-radius: .25rem;
}

table.table-group tr:last-child > :first-child {
    border-bottom-left-radius: .25rem;
}

table.table-group tr:last-child > :last-child {
    border-bottom-right-radius: .25rem;
}

/* table internal borders */

table.table-group.table-bordered tr th,
table.table-group.table-bordered tr td {
      border-left: 1px solid rgba(0, 0, 0, .125);
}
}

/* don't wrap headers on large screen */
@media(min-width: 768px) {
table.table-group th {
    white-space: nowrap;
}
}

/* responsive width */

@media(max-width: 768px) {
table.table-group:not(.table-group-fixed) {
    display: flex;
    flex-wrap: wrap;
}

table.table-group:not(.table-group-fixed) tr {
    display: block;
}

table.table-group:not(.table-group-fixed) tr > * {
    display: block;
}

table.table-group:not(.table-group-fixed) tbody {
    width: 100%;
}

table.table-group:not(.table-group-fixed) tr th:first-child,
table.table-group:not(.table-group-fixed) tr td:first-child {
    border-top: 1px solid rgba(0, 0, 0, .125);
    padding-bottom: 1px;
}

table.table-group:not(.table-group-fixed) tr th:not(:first-child),
table.table-group:not(.table-group-fixed) tr td:not(:first-child) {
    border-top: 0px;
    padding-top: 0px;
}

table.table-group:not(.table-group-fixed) tr th,
table.table-group:not(.table-group-fixed) tr td {
    border-left: 1px solid rgba(0, 0, 0, .125);
    border-right: 1px solid rgba(0, 0, 0, .125);
}

table.table-group:not(.table-group-fixed) tr:first-child th:first-child,
table.table-group:not(.table-group-fixed) tr:first-child td:first-child {
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
}

table.table-group:not(.table-group-fixed) tr:last-child th:last-child,
table.table-group:not(.table-group-fixed) tr:last-child td:last-child {
    border-bottom: 1px solid rgba(0, 0, 0, .125);
    border-bottom-left-radius: .25rem;
    border-bottom-right-radius: .25rem;
}
}

/* --  Bootstrap overrides  ------------------------------------------------ */

/* do not display background inside badge */

.badge code {
    background-color: transparent;
    border: 0px;
    padding: inherit;
}

/* smaller list group */

.list-group-sm .list-group-item {
    padding: 8px 12px;
}

.list-group-xs .list-group-item {
    padding: 4px 8px;
}

/* smaller card */

.card.card-sm .card-header,
.card.card-sm .card-body {
    padding: 0.5em 1.0em;
}

.card p {
    margin-bottom: 0.33em;
}

/* list-group-item with justified content */

.list-group-item-justify {
    display: flex;
    align-items: center !important;
    justify-content: space-between !important;
}

/* regular table head */

table.table {
    box-shadow: 0 .125em .25em rgba(0, 0, 0, 0.075);
}

table.table thead {
    background: #e6e6e6;
}

/* dropdown buttons */

div.dropdown-menu a.dropdown-item {
    padding-left: 0.5em;
    padding-right: 0.5em;
}

/* custom text classes */

.text-soft {
    color: #abb9c5 !important;
}

.text-warning-dark {
    color: #db7202 !important;
}

.text-small {
    font-size: 80%;
}

/* --  AsciiDoc overrides  ------------------------------------------------- */

main #preamble {
    margin-top: 1em;
}

nav#toc ul.section-nav {
    margin-bottom: 0px;
}

nav#toc div#toc-expand {
    padding-bottom: 0.5em;
}

/* Anchors */

main h1 > a.anchor,
main h2 > a.anchor,
main h3 > a.anchor,
main h4 > a.anchor,
main h5 > a.anchor {
    margin-left: -0.9em;
    width: 1em;

    position: absolute;
    text-align: center;
    text-decoration: none;
    visibility: hidden;
    z-index: 100;
}

main h1 > a.anchor::before,
main h2 > a.anchor::before,
main h3 > a.anchor::before,
main h4 > a.anchor::before,
main h5 > a.anchor::before {
    content: "\f0c6";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    font-size: 0.75em;
    padding-bottom: 0.2em;

    display: inline-block;
    width: 100%;
}

main h1:hover > a.anchor::before,
main h2:hover > a.anchor::before,
main h3:hover > a.anchor::before,
main h4:hover > a.anchor::before,
main h5:hover > a.anchor::before,
main h1 > a.anchor:hover,
main h2 > a.anchor:hover,
main h3 > a.anchor:hover,
main h4 > a.anchor:hover,
main h5 > a.anchor:hover {
    visibility: visible;
}

a.anchor {
    color: #c0c0c0;
}

a.anchor:hover {
    color: #505050;
}

/* Badges */

.badge.badge-royal {
    color: #ffffff;
    background-color: #a80ba8;
}

.badge.badge-light {
    border: 1px solid #b7b7b7;
}

.badge a {
    color: inherit;
}

/* Lists */
ol, ul {
    padding-left: 2.5em;
}

/* Margin in paragraph */

div.ulist ul li p,
div.olist ol li p,
div.content div.paragraph:last-child p,
div.paragraph.alert p:last-child,
table p,
.card p {
    margin-bottom:  0rem;
}

/* List Groups */

div.ulist ul.list-group {
    margin-bottom: 1rem;
}

div.card div.ulist ul.list-group {
    margin-bottom: 0rem;
}

/* Pre inside lists */

div.ulist pre,
div.listingblock pre {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

div.ulist.list-group > ul.list-group {
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
}

/* Cards and Media */

.card {
    box-shadow: 1px 1px 4px #e0e0e0;
}

.card h1,
.card h2,
.card h3,
.card h4,
.card h5 {
    margin-top: 0em;
    margin-bottom: 0.25em;
}

.media-body {
    font-size: 0.8em;
}

/* Alignment */

.halign-left   { text-align: left;   }
.halign-center { text-align: center; }
.halign-right  { text-align: right;  }

.valign-top    { vertical-align: top;    }
.valign-middle { vertical-align: middle; }
.valign-bottom { vertical-align: bottom; }

table td.valign-middle {
    vertical-align: middle;
}

/* -- AsciiDoc Lists -------------------------------------------------------- */

.hdlist {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.hdlist td.hdlist1,
.hdlist td.hdlist2 {
    padding: 0.25em;
}

.hdlist td.hdlist1 {
    font-weight: bold;
}

.dlist > dl > dd {
    padding-left: 2em;
}

.colist > td:first-of-type {
    padding-left: 1em;
    padding-right: 1em;
}

.content > *:first-child {
    margin-top: 0;
}

.content > .ulist:last-child > ul,
.content > .olist:last-child > ol,
.content > .dlist:last-child > dl,
.content > .dlist:last-child > dl > dd:last-child {
    margin-bottom: 0;
}

/* -- AsciiDoc Blocks ------------------------------------------------------- */

/* Blocks (+ Bootstrap alerts) */

.admonitionblock,
.exampleblock,
.sidebarblock {
    position: relative;
    padding: 0.75em 0.75em;
    margin-top: 1em;
    margin-bottom: 1em;
    border: 1px solid transparent;
    border-radius: 0.25em;
}

.admonitionblock div.alert-heading,
.admonitionblock div.title {
    font-weight: bold;
}

.admonitionblock td.icon {
    font-size: 1.0em;
    text-align: center;
    vertical-align: top;
    width: 30px;
    padding-left: .625em;
    padding-right: .625em;
}

.alert.alert-success,
.admonitionblock.tip {
    color: #155724;
    background-color: #ecfdf0;
    border-color: #9fc8a9;
}

.alert.alert-info,
.admonitionblock.note {
    color: #0c5460;
    background-color: #ebf8fb;
    border-color: #acd5db;
}

.alert.alert-primary,
.admonitionblock.important {
    color: #004085;
    background-color: #e0f0ff;
    border-color: #a7c7ea;
}

.alert.alert-danger,
.admonitionblock.caution {
    color: #721c24;
    background-color: #fbeaeb;
    border-color: #c8828a;
}

.alert.alert-warning,
.admonitionblock.warning {
    color: #624901;
    background-color: #fffbed;
    border-color: #eecc65;
}

.alert.alert-secondary {
    color: #383d41;
    background-color: #e7e8ea;
    border-color: #c1c3c6;
}

.alert.alert-light {
    color: #818182;
    background-color: #f9f9f9;
    border-color: #e4e4e4;
}

.alert.alert-dark {
    color: #1b1e21;
    background-color: #e0e2e4;
    border-color: #acaeb1;
}

/* Layout for other blocks */

div.exampleblock > div.content,
div.sidebarblock > div.content {
    padding: 10px;
}

div.exampleblock > div.content > *:last-child,
div.sidebarblock > div.content > *:last-child {
    margin-bottom: 0px;
}

div.exampleblock > div.convent > div.admonitionblock,
div.listingblock > div.content > div.admonitionblock,
div.sidebarblock > div.content > div.admonitionblock {
     margin: -10px -10px 15px -10px;
}

div.listingblock,
div.sidebarblock,
div.exampleblock {
    margin-top: 1em;
    margin-bottom: 1em;
}

/* Example block */

div.exampleblock {
    border: 1px solid #dddac1;
    border-radius: 5px;
    background-color: #fffef7;
    box-shadow: 0 .125em .25em rgba(0, 0, 0, 0.075);
}

/* Listing block */

div.listingblock > .title {
    color: #898989;
    font-style: italic;
    margin-top: 1.25em;
}

/* Sidebar block */

div.sidebarblock {
    border: 1px solid #e4e4e4;
    border-radius: 5px;
    background-color: #f8f8f8;
    box-shadow: 0 .125em .25em rgba(0, 0, 0, 0.055);
}

/* Image Block */

div.imageblock {
    text-align: center;
    margin-bottom: 1em;
    margin-top: 1em;
}

div.imageblock.right,
.image.right {
    float: right !important;
    padding-left: 1em;
}

div.imageblock.left,
.image.left {
    float: left !important;
    padding-right: 1em;
}

/* Blockquote */

div.quoteblock {
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    padding: 10px;
}

div.quoteblock blockquote {
    font-style: italic;
    font-size: 1.15em;
}

div.quoteblock div.attribution {
    color: #6c757d;
    text-align: right;
}

/* --  Photo  -------------------------------------------------------------- */

.photo-circular-wrapper {
    width: 54px;
    height: 54px;

    display: inline-block;
    position: relative;
    overflow: hidden;
    border-radius: 50%;

    border: 2px solid #adadad;
}

.photo-circular {
    margin-top: -6px;
    margin-left: -1px;
}

/* --  Other stuff  -------------------------------------------------------- */

.strike-light {
    text-decoration: line-through wavy #707070;
}

.strike-dark {
    text-decoration: line-through wavy #303030;
}

/* Deadlines */

.deadline-spec {
    display: inline-block;
    min-width: 150px;
    width: 150px;
}

.deadline-passed {
    color: #707070;
}

/* Text corrections */

.rm {
    color: #fb8f8f;
    text-decoration: line-through wavy #ff3e3e;
    font-style: italic;

    background-color: #fffbfb;
    border: 1px dashed #ffc8c8;
    border-radius: 5px;
    padding: 0em 0.1em;
}

.rm-borderless {
    color: #fb8f8f;
    text-decoration: line-through wavy #ff3e3e;
    font-style: italic;
}

.add {
    color: #5cb85c;
    text-decoration: underline #bcfdbc;
    font-style: italic;
}

/* Keyboard */

kbd {
    background-color: #f7f7f7;
    border: 1px solid #c0c0c0;
    box-shadow: 0px 1px 0px #909090;
    color: #101010;
    padding: 0.1em 0.6em;
}

/* Images alignment */

img:not([class]), img[class=""] {
    max-width: 100%;
    height: auto;
}

/* -- Animations ------------------------------------------------------------ */

.badge-animation {
    animation-duration: 30s;
    animation-delay:    60s;
    animation-iteration-count: infinite;
}

@keyframes kontrsupp {
     98% { transform: rotate(0deg);  }
     99% { transform: rotate(45deg); }
    100% { transform: rotate(0deg);  }
}

.badge-animation-kontrsupp { animation-name: kontrsupp; }

@keyframes xlacko1 {
     96% { transform: translate( 0px,  0px); color: inherit; }
     97% { transform: translate( 2px,  1px); color: black;   }
     98% { transform: translate( 3px, -2px); color: black;   }
     99% { transform: translate(-4px, -1px); color: black;   }
    100% { transform: translate( 0px,  0px); color: inherit; }
}

.badge-animation-xlacko1 { animation-name: xlacko1; }

@keyframes xsvenda {
      0% { transform: translate( 0px, 10px); }
      2% { transform: translate( 0px,  0px); }
     99% { transform: translate( 0px,  0px); }
    100% { transform: translate( 0px,-10px); }
}

.badge-animation-xsvenda { animation-name: xsvenda; }

@keyframes kontr {
     96% { transform: translate( 0px,  0px); color: inherit; }
     97% { transform: translate( 0px, -2px); color: black;   }
     98% { transform: translate( 0px,  0px); color: black;   }
     99% { transform: translate( 0px, -4px); color: black;   }
    100% { transform: translate( 0px,  0px); color: inherit; }
}

.badge-animation-kontr { animation-name: kontr; }