div.leftside {
    width: 50%;
    padding: 0px 0px 0px 0px;
    float: left;
}

div.rightside {
    padding: 0px 0px 0px 0px;
    margin-left: 50%;
    bottom:0px;
    width:50%;
}

.center1 {
    text-align: center;
}

.left1 {
    text-align: left;
    padding:0px 0px 0px 0px;
    margin-left: 0px;
    width:100%;
    display: flex;
}
.left2 {
    text-align: left;
    padding-left: 5%;
    margin-left: 0px;
    width:100%;
    display: flex;
}
table.center1{
    display: block;
    margin: auto;

}
img.center1{
    display: block;
    margin: auto;
}
p.esp-statement-block {
    font-family: sans-serif;
    font-size: 0.85em;
    line-height: 1.2;
    background-color: #fff9e5;
    border: 1px solid #e2e2e2;
    white-space: pre;
    display: block;
    padding: 10px;
}

table.bounadriestable > * div.highlight {
    font-size: small;
}

.orange {
    color: orange;
}

details.summary {
    padding: 4px;
    width: 200px;
    cursor: pointer;
}

details.p {
    padding: 4px;
    margin: 0;
}

.card, .floatingcard {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px;
}

.card > img {
    border-radius: 5px 5px 0 0;
}

.card:hover, .floatingcard:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.floatingcard > img {
    border-radius: 5px;
}

.cards-table > * .col {
    padding: 5px;
}

code.code > button.copybtn {
    display: contents;
}


/* removes black dot markers on toctrees */
div.toctree-wrapper > * ul, div.toctree-wrapper > ul {
    list-style-type: none;
}

/* FONTS */
@font-face {
  font-family: 'flexcompute_title';
  src: url('ornitons_bold.ttf') format('truetype');
}

@font-face {
  font-family: 'flexcompute_subtitle';
  src: url('inter_var.woff2') format('truetype');
}


.wy-side-nav-search { background-color: #b5445b; }
.wy-nav-top { background-color: #666666; }
.wy-menu > .caption > span.caption-text { color: #b5445b; }

.wy-nav-content { max-width: 900px !important; }
.wy-table-responsive table td { white-space: normal !important; }
.wy-table-responsive { overflow: visible !important; }
body { line-height: 1.42857143; }
.heading-style, h1, h2, h3, h4, h5, h6 {margin: 1.6rem 0 1rem;}
h1 {font-family: 'flexcompute_title', sans-serif;}
h2, h3, h4, h5, h6 {font-family: 'flexcompute_subtitle', sans-serif;}
p {margin-bottom: 0.5rem; font-family: 'Roboto', sans-serif}
iframe {width: 100%;border: unset}

.toctree-wrapper li[class^=toctree-l1]>a {font-size: 1.4em; text-decoration: none}
.toctree-wrapper li[class^=toctree-l2]>a {font-size: 1em; text-decoration: none}
.toctree-wrapper li[class^=toctree-l3]>a {font-size: 0.9em; text-decoration: none}
.toctree-wrapper li[class^=toctree-l4]>a {font-size: 0.9em; text-decoration: none}

html[data-theme="light"] {
    --pst-color-primary: #b5445b;
    --pst-color-secondary: #4772ae;
    --tab-color: var(--pst-color-secondary);
    --pst-color-link: var(--pst-color-muted);
}

html[data-theme="dark"] {
    --pst-color-primary: #4772ae;
    --pst-color-secondary: #b5445b;
    --tab-color: #9647AE; /*#1C2E46;*/
    --pst-color-link: var(--pst-color-muted);
    --sd-color-info-bg:  var(--pst-color-primary);
}

html[data-theme=dark] .bd-content .nboutput .output_area.rendered_html {
    background-color: var(--pst-color-background);
}

img {
    margin: 0.1em;
}

/* Experimental below */
.navbar-brand:hover .logo__image .only-light{
    opacity: 1;
    content: url("_static/img/demo_logo_active.gif");
}

.sphinx-tabs-panel {
    background: var(--sd-color-info-bg);
    padding: 1em;
    border-radius: 0.25rem;
    margin-bottom: 0.5em;
    border-top-left-radius: 0;
}

.sphinx-tabs-tab {
    background: var(--tab-color);
    padding: 0.5em;
    padding-right: 2em;
    padding-left: 2em;
    margin-top: 0.5em;
    margin-right: 0.5em;
    border-top-left-radius: 1em;
    border-top-right-radius: 0.1em;
    border: 0;
    font-weight: bold;
    color: #000;
}

.sphinx-tabs-tab[aria-selected="true"] {
    background-color: var(--sd-color-info-bg);
}

/* Adjust the spacing between class fields */
dl.py.attribute.pydantic_field {
    margin-bottom: 0rem;
    padding-bottom: 1.5rem;
}

/* Adjust the color of parameter's name in the attribution line */
span.sig-name.descname{
    color: #b5445b;
}

/* Adjust the style of parameter's name in a cross-link */
code.xref.py{
    color:#b5445b;
    background-color: var(--pst-color-background);
    border: var(--pst-color-background);
}

/* Adjust the style of text in the code block */
code.code{
    color:#b5445b;
    background-color: var(--pst-color-background);
    border: var(--pst-color-background);
}


/* Adjust the style of internal link */
p a.reference.internal span.std.std-ref{
    color: #3091d1 !important;
}

p a.reference.internal span.std.std-numref{
    color: #3091d1 !important;
}

p a.reference.internal span.std.std-ref:hover{
    color: #3091d1 !important;
}

/* Adjust the style of external link */
p a.reference.external{
    color: #3091d1 !important;
}

p a.reference.external span.std.std-ref{
    color: #3091d1 !important;
}

p a.reference.external span.std.std-ref:hover{
    color: #3091d1 !important;
}

/* Adjust the global text-decoration behaviour */
/* a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
} */

/* Adjust the style of parameter's name in the attribute type hint */
/* em.property a.reference.internal span.pre{
    text-decoration: underline !important;
}

em.property a.reference.internal span.pre:hover{
    color:#b5445b !important;
} */


html[data-theme=dark] .dataframe {
    background-color: var(--pst-color-primary);
}

/* TODO make sure this is only for the API tables */
/*table {*/
/*  border: solid;*/
/*}*/

/*th {*/
/*  border: thin;*/
/*}*/

/* Grid container */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2rem;
    padding: 2rem 0;
}

/* Each grid item (image + text) */
.card-item {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; 
}

/* Link styling */
.card-link {
    text-decoration: none;
    color: inherit;
    display: inline-block; 
}

/* Image container with fixed size and aspect ratio */
.image-card {
    width: 100%;
    aspect-ratio: 3 / 2;
    border: 1px solid var(--pst-color-border);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

/* Image styling to ensure it's never cropped */
.card-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background-color: transparent !important;
    margin: 0;
}

/* Title styling below the image */
.card-item h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: normal; 
    color: var(--pst-color-text-base);
    margin-bottom: 8px;
    margin-top: 16px;
}

/* Card meta row: e.g. "WebUI • 8 minutes" */
.card-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
}

/* Platform label styling */
.platform {
    color: var(--pst-color-text-base);
    font-weight: 400;
}

/* Duration label styling */
.duration {
    color: var(--pst-color-text-muted);
    display: flex;
    align-items: center;
}

/* Insert a dot before the duration label */
.duration:before {
    content: "•";
    margin-right: 0.75rem;
}

/* Single-column on narrow screens */
@media (max-width: 768px) {
    .cards-grid {
        grid-template-columns: 1fr;
    }
}