/*               INFOBOX DATA                   */
.infobox {
    float: right;
    width: 300px;
    margin: 0 0 0.5em 0.5em;
    border: 1px solid var(--md-default-table-content-border-color);
    background: var(--md-default-table-bg-color);
    font-size: 0.9em;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    overflow: hidden;
    font-family: 'Segoe UI', sans-serif;
}

.infobox-header {
    background: #444;
    color: #fff;
    text-align: center;
    font-weight: bold;
    padding: 10px;
    font-size: 1.1em;
}

.infobox-image {
    width: 100%;
    overflow: hidden;
    /*display: flex;*/
    justify-content: center;
    align-items: center;
    padding: 10px; /* optional */
    box-sizing: border-box;
}

.infobox-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    image-rendering: pixelated; /* or pixelated for crisp icons */
    display: block;
}

.infobox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--md-default-table-content-border-color);
    border-left: none;
    border-right: none;
}

.infobox-row {
    border: 1px solid var(--md-default-table-content-border-color);
    border-left: none;
    border-top: none;
    padding: 10px;
    text-align: center;
    font-size: 0.85em;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*height: 70px;*/
    min-height: 50px;
}

.infobox-row .label {
    font-weight: bold;
    margin-bottom: 4px;
    white-space: normal; /* allow wrapping */
}

.infobox-row .value {
    font-weight: normal;
    white-space: normal; /* allow wrapping */
}

/* Remove border-right on rightmost cells */
.infobox-row:nth-child(2n) {
    border-right: none;
}

/* Remove border-bottom on last row cells */
.infobox-row:nth-last-child(-n+1) {
    border-bottom: none;
}

.infobox-footer {
    background: var(--md-default-table-footer-bg-color);
    text-align: center;
    padding: 8px;
    font-weight: bold;
    font-size: 1em;
    color: var(--md-default-table-footer-fg-color);
}

.infobox-footer-data {
    text-align: center;
    padding: 8px;
    text-align: center;
    font-size: 0.85em;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/*When on mobile, display infobox at top and filling screen*/
@media screen and (max-width: 768px) {
    .infobox {
        float: none;
        width: 100%;
        margin: 1em 0;
    }
}

/*disabled due to the fact that its messing up every admonition in the wiki
and is this really needed anymore? I disabled it and don't see any difference.*/
/* Float the infobox/admonition right and wrap text around it */
/*.md-typeset .admonition, 
.md-typeset .infobox {
  float: right;
  width: 300px;
  margin: 0 0 1em 2em;
}

@media (max-width: 768px) {
  .md-typeset .admonition,
  .md-typeset .infobox {
    float: none;
    width: 100%;
    margin: 0 0 1em 0;
  }
}*/

.infobox-version-wrapper {
    padding: 10px;
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.infobox-version-wrapper strong {
    font-size: 1.2em;
}

.version-spacer {
    height: 10px;
}

/* Infobox link styling */
.infobox a {
    /*color: white !important;*/
    text-decoration: underline;
    font-weight: 500;
}

.infobox a:hover {
    color: #000000 !important;
    text-decoration: underline;
}