/* Bootstrap-style row + col-sm-N/12 grid used by manual body content.
 *
 * The legacy gpswox theme provided these via web.min.css, but gpswox_new
 * doesn't load that file for /en/user-manual-ui/ URLs. Without these rules
 * col-sm-5 / col-sm-7 inside a .row have no width constraint and the image
 * displays at its natural intrinsic width instead of 41.667%/58.333% of the
 * row. */
.manual__content .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.manual__content .row > [class*="col-sm-"] {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

/* Mobile (<576px): every col stacks full-width */
.manual__content .row > .col-sm-1,
.manual__content .row > .col-sm-2,
.manual__content .row > .col-sm-3,
.manual__content .row > .col-sm-4,
.manual__content .row > .col-sm-5,
.manual__content .row > .col-sm-6,
.manual__content .row > .col-sm-7,
.manual__content .row > .col-sm-8,
.manual__content .row > .col-sm-9,
.manual__content .row > .col-sm-10,
.manual__content .row > .col-sm-11,
.manual__content .row > .col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
}

@media (min-width: 576px) {
    .manual__content .row > .col-sm-1  { flex: 0 0 8.333333%;  max-width: 8.333333%;  }
    .manual__content .row > .col-sm-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .manual__content .row > .col-sm-3  { flex: 0 0 25%;        max-width: 25%;        }
    .manual__content .row > .col-sm-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .manual__content .row > .col-sm-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .manual__content .row > .col-sm-6  { flex: 0 0 50%;        max-width: 50%;        }
    .manual__content .row > .col-sm-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .manual__content .row > .col-sm-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .manual__content .row > .col-sm-9  { flex: 0 0 75%;        max-width: 75%;        }
    .manual__content .row > .col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .manual__content .row > .col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .manual__content .row > .col-sm-12 { flex: 0 0 100%;       max-width: 100%;       }
}

/* Bare col-sm-* (not inside a .row) inside .manual__content:
 * Without this, those bare cols inherit flex behavior from the column flex
 * parent (.manual__content is display:flex; flex-direction:column) and get
 * stretched vertically. Reset them to plain block elements. */
.manual__content > .col-sm-1,
.manual__content > .col-sm-2,
.manual__content > .col-sm-3,
.manual__content > .col-sm-4,
.manual__content > .col-sm-5,
.manual__content > .col-sm-6,
.manual__content > .col-sm-7,
.manual__content > .col-sm-8,
.manual__content > .col-sm-9,
.manual__content > .col-sm-10,
.manual__content > .col-sm-11,
.manual__content > .col-sm-12 {
    flex: none;
    width: 100%;
    max-width: 100%;
    display: block;
}

/* Make images in body content responsive.
 *
 * Each image has an inline `style="width:Xpx; height:auto"` set in the
 * HTML body (carried over from the dimensions of the original webstage
 * image). Inline styles beat the global `img { width: auto }` rule from
 * style.css, so we don't need to override `width` here — only enforce
 * `max-width:100%` as a guard against viewport-narrower-than-image cases. */
.manual__content img {
    max-width: 100%;
    height: auto;
}

/* Center gallery images themselves, but keep any text/lists inside the
 * mygallery wrapper left-aligned. Some manual pages (e.g. 6-device-management)
 * wrap a <ul> of feature descriptions inside <div class="mygallery">, so we
 * can't blanket-center all content. */
.manual__content .mygallery img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
}

/* Click-to-enlarge: main.js wraps every .manual__content img in an
 * <a class="manual-fancybox"> linked to the original/ photobank URL.
 * Show a zoom cursor so users discover the affordance. */
.manual__content a.manual-fancybox {
    display: inline-block;
    cursor: zoom-in;
}