/* safety net - nothing may be wider than the screen */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

img, svg, video, canvas, iframe {
    max-width: 100%;
    height: auto;
}

    svg:not([height]) {
        height: auto;
    }

table {
    max-width: 100%;
}

pre, code {
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 767px) {

    /* bootstrap containers + rows: stay inside the screen */
    .container, .container-fluid, .common-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px;
        padding-right: 12px;
    }

    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    [class*="col-xs-"], [class*="col-sm-"], [class*="col-md-"], [class*="col-lg-"] {
        float: none !important;
        width: 100% !important;
    }

    [class*="col-"]:empty {
        display: none;
    }

    /* ---- top bar: the 5 tools (skip, language, accessibility, Login, Register) were ~450px wide ---- */
    #b-accessibility,
    .gh-wrap #b-accessibility {
        flex-wrap: wrap !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        min-height: 0 !important;
    }

    .b-acc-icons {
        flex-wrap: wrap !important;
        width: 100%;
        margin-left: 0 !important;
        justify-content: flex-start;
        row-gap: 6px;
    }

    .b-tool-item {
        padding: 0 6px;
    }

        .b-tool-item .gh-btn, .gh-btn {
            padding: 5px 9px !important;
            font-size: 12px !important;
        }

    .b-ministry-line {
        font-size: 12px;
    }

    /* accessibility panel: fits the screen instead of a fixed 380px */
    .b-acc-dropdown {
        position: fixed !important;
        left: 8px;
        right: 8px;
        top: 64px;
        width: auto !important;
        max-height: 80vh;
        overflow-y: auto;
    }

    /* ---- brand row: stack emblem/title, search, logos ---- */
    .gh-wrap .gh-brand .gh-inner {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .gh-logo {
        max-width: 100%;
    }

    .gh-title strong {
        font-size: 18px !important;
    }

    .gh-search, .gh-wrap .gh-search {
        width: 100% !important;
        max-width: 100% !important;
        order: 3;
    }

    .gh-logos-right, .gh-right {
        justify-content: center;
        max-width: 100%;
    }

    .gh-emblem {
        height: 52px;
        width: auto;
    }

    /* ---- navbar ---- */
    .megamenu-wraper .container {
        padding-left: 0;
        padding-right: 0;
    }

    /* ---- partners strip + footer ---- */
    .gp-inner {
        padding-left: 12px;
        padding-right: 12px;
    }

    .gf-inner {
        grid-template-columns: 1fr !important;
        padding-left: 12px;
        padding-right: 12px;
    }

    .gf-col, .gf-col:first-child {
        padding: 0 !important;
        border-left: 0 !important;
    }

    .gf-links {
        grid-template-columns: 1fr !important;
    }

    /* ---- page content ---- */
    .table-responsive, .dataTables_wrapper {
        max-width: 100%;
        overflow-x: auto;
    }

    p[style*="justify"], .text-justify {
        text-align: left !important;
    }
    /* justified text makes big gaps on 360px */
}