/* left align items inside imageblock */
.doc .imageblock {
    align-items: flex-start;
  }

/* add a shadow to the image container */
.doc .bordershadow .content{
    border: solid 1px black;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/*custom video css*/
video {
    border: solid 1px black;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* allow for wider screens */
.doc {
    max-width: none;
}

.navbar-item-right-dropdown {
    float: right!important;
}

.navbar-dropdown-right {
    right: 0;
    left: auto;
}

.navbar-item-right-content {
    width: 100%;
    background-color: #131313;
}
/* keep commands on one line and scroll sideways instead of wrapping mid-flag */
.doc .listingblock pre,
.doc .tableblock pre {
    white-space: pre;
    overflow-x: auto;
}
/* let a code block inside a table scroll instead of widening the table past the screen */
.doc table.tableblock:has(.listingblock) {
    table-layout: fixed;
}
/* the footer holds only the build stamp: release, commit, shared setup and build time
   (partials/footer-content.hbs replaces the theme's "Powered by Red Hat Demo Platform" link,
   because demo.redhat.com is for Red Hat employees only) */
.build-info {
    color: #5d5d5d;
    font-size: 0.75rem;
    text-align: center;
    padding: 0.25rem 1rem;
}
.build-info span {
    white-space: nowrap;
}
.build-info a {
    color: #191919;
}
.build-info code {
    font-size: inherit;
}
.build-info-sep {
    margin: 0 0.4rem;
}
/* provider tabs (@asciidoctor/tabs, css/tabs.css): the theme still styles an older
   ".tabs ul/li" markup, so undo that inside panels and restyle the tab strip */
.doc .tabs .tabpanel ul {
    display: block;
    list-style: disc;
    margin: 0;
    padding: 0 0 0 1.5rem;
}
.doc .tabs .tabpanel li {
    display: list-item;
    border: 0;
    height: auto;
    padding: 0;
    margin: 0.5rem 0 0;
    font-weight: inherit;
    line-height: inherit;
    cursor: auto;
}
.doc .tabs .tabpanel li::after {
    content: none;
}
.doc .tabs .tablist li {
    height: auto;
    padding: 0.5rem 1.25rem;
    border: 1px solid #c1c1c1;
    border-bottom: 0;
}
.doc .tabs .tablist li.is-selected {
    border-top: 3px solid #ee0000;
}
/* keep every boxed chunk (notes, code, tabs, collapsibles, tables, images)
   clear of the content around it; sibling margins collapse, so each gap is 1.75rem */
.doc .admonitionblock,
.doc .listingblock,
.doc .tabs,
.doc details,
.doc table.tableblock,
.doc .imageblock {
    margin-top: 1.75rem;
    margin-bottom: 1.75rem;
}
/* the NOTE badge sits above its box, so give it extra room */
.doc .admonitionblock {
    margin-top: 2.25rem;
}
/* inside a tab panel the first chunk needs less room */
.doc .tabs .tabpanel > :first-child {
    margin-top: 0.5rem;
}
.doc .tabs .tabpanel > .admonitionblock:first-child {
    margin-top: 1.25rem;
}
.doc .tabs .tabpanel > :last-child {
    margin-bottom: 0;
}
/* make list titles such as "Exercises on this page" stand out */
.doc .ulist > .title {
    font-weight: 600;
    margin-top: 1.5rem;
}
/* on phones, let wide tables scroll sideways instead of breaking words mid-word */
@media screen and (max-width: 600px) {
    .doc table.tableblock {
        display: block;
        overflow-x: auto;
    }
    .doc table.tableblock th,
    .doc table.tableblock td {
        overflow-wrap: normal;
    }
}
/* collapsible blocks (such as "EKS and AKS (reference only)" or "In production: ...") get a
   tinted panel with a grey edge, so their commands don't read as hands-on steps once opened */
.doc details {
    background-color: #f3f5f8;
    border-left: 4px solid #8a8d90;
    border-radius: 0 0.25rem 0.25rem 0;
    padding: 0.6rem 1rem;
}
.doc details > summary {
    font-weight: 600;
    cursor: pointer;
}
.doc details[open] > summary {
    margin-bottom: 0.75rem;
}
.doc details > .content > :first-child {
    margin-top: 0;
}
.doc details > .content > :last-child {
    margin-bottom: 0;
}
/* validation notes ([.validation]: "Validated on ...", "Not validated: ...") are quieter
   than guidance notes: a grey "Validation" badge and an outlined box instead of a filled one */
.doc .admonitionblock.validation .icon {
    background-color: #6a6e73;
}
.doc .admonitionblock.validation .icon i::after {
    content: "Validation";
}
.doc .admonitionblock.validation td.content {
    background: transparent;
    border: 1px solid #d2d2d2;
    color: #4d4d4d;
}
.doc .admonitionblock.validation td.content,
.doc .admonitionblock.validation p {
    font-size: 0.83333rem;
}
/* a validation note inside a reference panel sits on the panel's tint */
.doc details .admonitionblock.validation td.content {
    background: #ffffff;
}
/* keep a tab strip (such as ROSA / ARO) in view, under the navbar (3.5rem) and the breadcrumb
   bar (2.5rem), while a long tab panel scrolls past */
@media screen {
    .doc .tabs .tablist {
        position: sticky;
        top: 6rem;
        z-index: 1;
        background-color: #ffffff;
    }
}
/* named stages that split a long tab panel ([discrete] ==== headings) */
.doc h4.discrete {
    font-weight: 600;
    margin-top: 2rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #e1e1e1;
}
/* links in the text are Red Hat's link blue, as in Red Hat's product documentation, so they
   don't read as warnings next to the red accents (the theme colors them #ee0000) */
.doc a,
.doc a:hover {
    color: #0066cc;
}
.doc a:hover {
    text-decoration: underline;
}