/* QResponsive.css - ONE page for phones, tablets and desktops at the same URL.

   Qwoogi grew a mobile twin for every page (/MMain/MSearch next to /Main/Search) and
   sent phones there with a 302. A responsive page replaces both: the same HTML, the same
   address, and this file reshapes it by width. Desktop is the default; each section ends
   with its tablet (768-1099px) and phone (below 768px - where the M-pages used to start)
   rules. Phone values are taken from the old M-pages, so a phone sees what it saw before.
   Plan, status and how to convert the next page: Docs/Responsive_Plan.md.

   Breakpoints - keep them identical everywhere:
     phone   max-width: 767.98px
     tablet  min-width: 768px and max-width: 1099.98px */


/* phone: screen edge to text on the list pages - header, heads, results (Marek, 2026-10-31:
   20px; the M-pages had 15px) */
:root {
    --q-phone-gutter: 20px;
}


/* ---------- one-screen-only blocks (never on an element with an id) ---------- */

.q-only-phone,
.q-only-phone-inline,
.q-only-phone-contents {
    display: none !important;
}

@media (max-width: 767.98px) {
    .q-only-phone {
        display: block !important;
    }

    .q-only-phone-inline {
        display: inline !important;
    }

    /* its children take part in the parent's flex row as if the wrapper were not there */
    .q-only-phone-contents {
        display: contents !important;
    }

    .q-no-phone {
        display: none !important;
    }
}


/* ---------- header (PartialPageHeader68) ---------- */

.q-hdr {
    margin: 0;
    padding: 0;
    height: 128px;
}

    .q-hdr .q-hdr-row {
        margin: 0;
        padding: 0;
        width: auto;
        height: 70px;
        padding-bottom: 5px;
        margin-top: 12px;
    }

    .q-hdr .q-hdr-logo-text {
        margin-left: 30px;
        margin-right: 30px;
        padding-top: 6px;
        line-height: 1.2;
    }

    .q-hdr .q-hdr-bar {
        width: auto;
        display: flex;
        margin-top: 0;
        height: 70px;
    }

    /* 660px as before, but allowed to give way on a narrow window instead of pushing
       the icons off the edge */
    .q-hdr .q-hdr-search {
        flex: 0 1 660px;
        min-width: 0;
    }

    .q-hdr .q-hdr-input {
        margin-top: 15px;
        height: 48px;
        border: none;
        font-size: larger;
    }

    /* min-width: on a narrow window the search box gives way, the four icons stay in a row */
    .q-hdr .q-hdr-icons {
        text-align: right;
        flex: 1;
        min-width: 160px;
        margin-top: 25px;
    }

.q-hdr-nav {
    margin-left: 165px;
    margin-top: -8px;
}

@media (min-width: 768px) and (max-width: 1099.98px) {
    /* under the logo, so all seven shortcuts still fit one row at 768px */
    .q-hdr-nav {
        margin-left: 30px;
    }
}

    .q-hdr-menu,
    .q-hdr-nav .q-hdr-nav-extra {
        display: none;
    }

@media (min-width: 768px) {
    /* the phone menu, left open, must not survive a rotation to landscape */
    .q-hdr #menuOptions {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    .q-hdr {
        height: auto;
        position: relative;
        background: #e6f5fa;
    }

        .q-hdr .q-hdr-row {
            height: auto;
            margin: 0;
            padding: 0;
        }

        .q-hdr .q-hdr-logo {
            display: block;
            text-align: center;
            padding: 12px 15px;
            font-size: 14px;
            line-height: 20px;
        }

        .q-hdr .q-hdr-logo-text {
            float: none;
            display: inline;
            margin: 0;
            padding: 0;
            font-size: 30px;
            font-weight: 700;
            font-family: 'Lato', sans-serif;
            line-height: 1;
        }

        .q-hdr .q-hdr-bar {
            display: block;
            height: auto;
            padding: 0;
            margin: 0;
        }

        .q-hdr .q-hdr-search {
            width: auto;
            margin: 0;
        }

        /* float: the desktop bar is a flex row that contains it; this block would not, and
           the icons, centred on their box, would rise above the field */
        .q-hdr .q-hdr-input {
            float: none;
            width: calc(100% - 2 * var(--q-phone-gutter));
            margin: 0 var(--q-phone-gutter);
            height: 44px;
            padding-right: 95px;
        }

        .q-hdr .search-icon {
            top: 50%;
            right: calc(var(--q-phone-gutter) + 15px);
        }

        .q-hdr #microphoneIconId {
            top: 50%;
            right: calc(var(--q-phone-gutter) + 40px);
        }

        .q-hdr .clear-icon {
            top: 50%;
            right: calc(var(--q-phone-gutter) + 70px);
        }

        .q-hdr .divider {
            top: 50%;
            right: calc(var(--q-phone-gutter) + 60px);
        }

        .q-hdr .q-hdr-icons {
            display: none;
        }

        .q-hdr .q-hdr-menu {
            display: block;
            position: absolute;
            top: 22px;
            right: var(--q-phone-gutter);
        }

        .q-hdr .header-icons2 {
            fill: white;
        }

        /* a tap is a hover on a phone: the tooltip would cover the next shortcut */
        .q-hdr .has-tooltip::before {
            display: none;
        }

    .q-hdr-nav {
        margin: 15px 0 0 0;
        height: 35px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

        .q-hdr-nav::-webkit-scrollbar {
            display: none;
        }

        .q-hdr-nav .nav {
            display: flex;
            float: none;
            margin: 0;
            padding: 0 0 0 var(--q-phone-gutter);
            min-width: min-content;
        }

            .q-hdr-nav .nav > li {
                display: inline-flex;
                float: none;
                flex-shrink: 0;
                padding: 0 15px 0 0;
                max-height: none;
            }

                .q-hdr-nav .nav > li > a {
                    display: flex;
                    align-items: center;
                    padding: 0;
                    color: #808080;
                    text-decoration: none;
                    background: none;
                }

            .q-hdr-nav .nav > li.dropdown {
                display: none;
            }

            .q-hdr-nav .nav > li.q-hdr-nav-extra {
                display: inline-flex;
            }
}


/* ---------- footer (PartialPageFooter) ---------- */

.q-ftr .q-ftr-in {
    width: 100%;
    height: 10px;
}

.q-ftr .q-ftr-links {
    margin-left: 0;
}

.q-ftr .q-ftr-copy {
    height: 10px;
    width: 20%;
    text-align: right;
    float: right;
    margin-right: 5px;
    margin-top: 15px;
}

@media (min-width: 768px) and (max-width: 1099.98px) {
    /* five links and the copyright no longer fit one 50px bar */
    footer.q-ftr {
        height: auto;
        overflow: hidden;
        padding-bottom: 10px;
    }

    .q-ftr .q-ftr-in {
        height: auto;
    }

    .q-ftr .q-ftr-copy {
        width: auto;
        height: auto;
    }
}

@media (max-width: 767.98px) {
    footer.q-ftr {
        height: auto;
        padding: 20px 0 0 0;
        text-align: center;
        font-family: 'Roboto', sans-serif;
        background-color: transparent;
    }

    .q-ftr .q-ftr-in {
        width: auto;
        height: auto;
        max-width: 300px;
        margin: auto;
        padding-bottom: 10px;
        font-size: 12.8px;
    }

    .q-ftr .q-ftr-links {
        float: none;
        display: block;
        margin: 0;
        padding: 0;
    }

        .q-ftr .q-ftr-links > li {
            display: inline;
            float: none;
            font-size: 12.8px;
        }

            .q-ftr .q-ftr-links > li > a {
                display: inline;
                white-space: nowrap;
                position: static;
                padding: 4px 4px;
                margin-right: 4px;
                color: #38A3F5;
                background: none;
            }

                .q-ftr .q-ftr-links > li > a:active {
                    background-color: #d2e6f5;
                    border-radius: 10px;
                }

    .q-ftr .q-ftr-copy {
        display: block;
        float: none;
        width: auto;
        height: auto;
        margin: 5px 0 0 0;
        padding: 5px 0;
        text-align: center;
    }

    .q-ftr .q-footer-span-text {
        font-size: 12px;
        font-weight: normal;
        color: #666;
        padding: 0;
    }
}


/* ---------- search results (Main/Search) ---------- */

.q-sr-page {
    position: relative;
}

    .q-sr-page .q-sr-main {
        width: 750px;
        display: flex;
    }

    .q-sr-page .q-sr-col {
        width: 680px;
        padding-top: 40px;
    }

.q-sr-head {
    padding-top: 10px;
    padding-bottom: 20px;
}

    .q-sr-head .q-sr-count {
        color: #cccccc;
        font-size: smaller;
    }

    .q-sr-head .q-sr-tip {
        font-size: smaller;
    }

.q-sr-tip-label {
    color: #6a6fad;
}

/* top right of the page on a desktop, inside the results band on a phone - one element,
   because PartialShare carries ids */
.q-sr-share {
    position: absolute;
    top: 20px;
    right: 35px;
    display: flex;
    gap: 5px;
}

.q-sr-item {
    margin-top: 20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 10px;
    align-items: start;
}

    /* category / attribute: the image stands beside everything */
    .q-sr-cat.q-sr-has-img {
        grid-template-columns: minmax(0, 1fr) 120px;
        grid-template-rows: auto auto auto 1fr;
        grid-template-areas:
            "title  img"
            "links  img"
            "labels img"
            "info   img";
    }

    /* subject: the image stands beside the short text and the labels under it (the old
       float let the labels run beside its lower half) */
    .q-sr-subj.q-sr-has-img {
        grid-template-columns: minmax(0, 1fr) 120px;
        grid-template-rows: auto auto auto 1fr;
        grid-template-areas:
            "title  title"
            "ref    ref"
            "text   img"
            "labels img";
    }

    .q-sr-has-img > .q-sr-title {
        grid-area: title;
    }

    .q-sr-has-img > .q-sr-links {
        grid-area: links;
    }

    .q-sr-has-img > .q-sr-ref {
        grid-area: ref;
    }

    .q-sr-has-img > .q-sr-text {
        grid-area: text;
    }

    .q-sr-has-img > .q-sr-labels {
        grid-area: labels;
    }

    .q-sr-has-img > .q-sr-info {
        grid-area: info;
    }

    .q-sr-has-img > .q-sr-img {
        grid-area: img;
    }

.q-sr-cat .q-sr-labels {
    margin-top: 10px;
}

.q-sr-subj .q-sr-labels {
    margin: 0 0 10px 0;
}

.q-sr-sep {
    height: 12px;
    margin: 0 0 10px 0;
}

.q-sr-sep-s {
    display: none;
}

.q-sr-pager {
    width: 50%;
    margin: auto;
    position: relative;
    padding: 40px 0;
}

/* the rail gives way on a laptop instead of running off the right edge */
.q-sr-page .q-sr-rail {
    min-width: 0;
    flex: 0 1 600px;
}

.q-sr-related {
    padding-left: 20px;
    padding-top: 120px;
    max-width: 580px;
}

    /* QMoreExploreStyle.css pins these at 560px !important, which ran them off the right
       edge of any window narrower than ~1450px */
    .q-sr-related .other-sites-displayed2 {
        width: auto !important;
    }

@media (min-width: 768px) and (max-width: 1099.98px) {
    .q-sr-page {
        flex-wrap: wrap;
    }

        .q-sr-page .left-div-s {
            width: 30px;
            min-width: 30px;
        }

        .q-sr-page .q-sr-main {
            width: auto;
        }

        .q-sr-page .q-sr-rail {
            flex: 1 1 100%;
            padding-left: 10px;
        }

    .q-sr-related {
        padding-top: 0;
        padding-bottom: 20px;
    }
}

@media (max-width: 767.98px) {
    .container-s.q-sr-page {
        display: block;
    }

        .q-sr-page .left-div-s {
            display: none;
        }

        .q-sr-page .q-sr-main {
            width: auto;
            display: block;
            float: none;
        }

        .q-sr-page .q-sr-col {
            width: auto;
            padding-top: 0;
        }

    .q-sr-head {
        padding: 8px var(--q-phone-gutter) 20px var(--q-phone-gutter);
        background: linear-gradient(to bottom, #e6f5fa, white);
        border-bottom: 1px solid #e6e6e6;
    }

        .q-sr-head .q-sr-count {
            color: #595353;
            font-size: 12.8px;
        }

    .q-sr-share {
        position: static;
        justify-content: flex-end;
        margin-bottom: 20px;
    }

        .q-sr-share .filter-button {
            height: 20px;
            font-size: 12.8px;
        }

    .q-sr-list {
        padding-top: 20px;
    }

    .q-sr-item {
        margin-top: 0;
        padding: 0 var(--q-phone-gutter);
    }

    .q-sr-cat.q-sr-has-img {
        grid-template-columns: minmax(0, 1fr) 100px;
        grid-template-rows: auto;
        grid-template-areas:
            "title  title"
            "links  img"
            "labels labels"
            "info   info";
    }

    .q-sr-subj.q-sr-has-img {
        grid-template-columns: minmax(0, 1fr) 100px;
        grid-template-rows: auto;
        grid-template-areas:
            "title  title"
            "ref    ref"
            "text   img"
            "labels labels";
    }

    .q-sr-item .s-title {
        font-size: 20px;
    }

    .q-sr-item .frame-img-80,
    .q-sr-item .image-container-80 {
        width: 100px;
        height: 100px;
    }

    .q-sr-cat .q-sr-title {
        margin-bottom: 8px;
    }

    .q-sr-cat .q-sr-labels {
        margin-top: 4px;
    }

    .q-sr-subj .q-sr-labels {
        margin: 4px 0 0 0;
    }

    .q-sr-subj .q-sr-text,
    .q-sr-subj .q-sr-img {
        margin-top: 6px;
    }

    .q-sr-item .short-text {
        color: #4b5057;
    }

    /* the server cuts every text at its desktop length; a phone shows fewer lines */
    .q-sr-links,
    .q-sr-info,
    .q-sr-item .short-text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .q-sr-links {
        -webkit-line-clamp: 5;
    }

    .q-sr-info {
        -webkit-line-clamp: 3;
    }

    /* after the clamped (block) text a <br> would open an empty line */
    .q-sr-text > br {
        display: none;
    }

    /* as a block it would use its own 1.28 line height, which the inline span never did */
    .q-sr-item .short-text {
        -webkit-line-clamp: 4;
        padding: 0;
        line-height: 20px;
    }

    .q-sr-ref .s-reference {
        display: inline-block;
        max-width: calc(100% - 140px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
    }

    .q-sr-sep,
    .q-sr-sep-s {
        display: block;
        height: 10px;
        margin: 20px 0;
        background-color: #f2f4f6;
    }

    .q-sr-pager {
        padding: 0;
    }

    .q-sr-page .q-sr-rail {
        display: block;
        float: none;
        padding: 0 var(--q-phone-gutter) 20px var(--q-phone-gutter);
    }

    .q-sr-related {
        padding: 0;
        max-width: none;
    }
}


/* ---------- subjects of a final category (ListQS/ListQSX) ----------
   The results list itself is the q-sr-* grid above; this is its head (toolbar, heading,
   position picker, count) and the page around it. */

.q-lq-tools-wrap {
    width: 100%;
    position: relative;
}

.q-lq-tools {
    display: flex;
    gap: 5px;
    float: right;
    margin-top: 20px;
    margin-right: 35px;
}

.q-lq-tools-spacer {
    display: none;
}

.q-lq-titlerow {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 20px 0 0 0;
}

.q-lq-gutter {
    width: 170px;
    flex-shrink: 0;
}

.q-lq-title {
    margin-left: 0;
    cursor: pointer;
    text-decoration: none;
}

    /* bootstrap's a:hover outranks the class and underlined the view-all triangle */
    .q-lq-title:hover,
    .q-lq-title:focus {
        text-decoration: none;
    }

    .q-lq-title h1 {
        cursor: pointer;
        display: inline-block;
        margin: 0 0 5px 0;
    }

.q-lq-picker {
    display: flex;
    align-items: center;
}

.q-lq-place-label {
    display: none;
}

.q-lq-picker .q-lq-select {
    width: auto;
}

.q-lq-picker .q-lq-select-off {
    display: none;
}

.q-lq-ftxt,
.q-lq-count {
    padding-left: 170px;
}

.q-lq-ftxt {
    margin: 0 0 10px 0;
}

.q-lq-ftxt-empty {
    margin: 0;
}

.q-sr-page .q-lq-col {
    width: 680px;
    padding-top: 30px;
}

@media (min-width: 768px) and (max-width: 1099.98px) {
    /* up to eleven buttons: on a tablet they wrap instead of running off the left edge */
    .q-lq-tools {
        flex-wrap: wrap;
        justify-content: flex-end;
        row-gap: 5px;
        max-width: calc(100% - 65px);
    }

    .q-lq-gutter {
        width: 30px;
    }

    .q-lq-ftxt,
    .q-lq-count {
        padding-left: 30px;
    }
}

@media (max-width: 767.98px) {
    /* one band: toolbar, heading, attribute line, place, count - the M-page's order */
    .q-lq-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "tools"
            "title"
            "ftxt"
            "place"
            "count";
        padding: 8px var(--q-phone-gutter) 0 var(--q-phone-gutter);
        background: linear-gradient(to bottom, #e6f5fa, white);
    }

    .q-lq-titlerow {
        display: contents;
    }

    .q-lq-gutter {
        display: none;
    }

    .q-lq-tools-wrap {
        grid-area: tools;
    }

    .q-lq-tools {
        float: none;
        margin: 0;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

        .q-lq-tools::-webkit-scrollbar {
            display: none;
        }

        /* right-aligned while the row fits, scrollable from its start once it does not */
        .q-lq-tools .q-lq-tools-spacer {
            display: block;
            margin-left: auto;
            order: -10;
        }

        .q-lq-tools .q-tool-filter {
            order: -4;
        }

        .q-lq-tools .q-tool-group {
            order: -3;
        }

        .q-lq-tools .q-tool-map {
            order: -2;
        }

        .q-lq-tools .filter-button {
            height: 20px;
            font-size: 12.8px;
            flex-shrink: 0;
        }

        .q-lq-tools .has-tooltip::before {
            display: none;
        }

    .q-lq-title {
        grid-area: title;
        margin-top: 20px;
    }

        .q-lq-title h1 {
            display: inline;
            margin: 0;
            font-size: 28px;
            line-height: 26px;
            font-weight: 600;
        }

            .q-lq-title h1.q-lq-h1-long {
                font-size: 23.8px;
            }

    .q-lq-ftxt {
        grid-area: ftxt;
        padding-left: 0;
        margin: 0;
    }

    .q-lq-ftxt-empty {
        height: 20px;
    }

    .filters-container.q-lq-place {
        grid-area: place;
        display: block;
        margin: 0;
        max-width: none;
        overflow: visible;
        font-size: 12.8px;
        color: #595353;
    }

    .q-lq-picker {
        display: inline-block;
        position: relative;
    }

    .q-lq-place-label {
        display: inline;
        width: auto;
    }

    .q-lq-place-plain.form-control-position-d {
        display: inline;
        width: auto;
        cursor: default;
    }

    /* the real select lies over the blue place, invisible: one tap opens the phone's list */
    .q-lq-picker .q-lq-select {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        font-size: 16px;
        border: 0;
        -webkit-appearance: none;
        appearance: none;
    }

    .q-lq-count {
        grid-area: count;
        padding-left: 0;
    }

    .q-sr-page .q-lq-col {
        width: auto;
        padding-top: 0;
    }

    .q-lq-list {
        margin-top: 20px;
        border-top: 1px solid #e6e6e6;
    }

    .q-lq-sorry {
        margin-top: 20px;
        border-top: 1px solid #e6e6e6;
        padding: 20px var(--q-phone-gutter);
    }

    .q-sr-page .q-lq-rail {
        display: none;
    }
}


/* ---------- category hubs (ListCategories, ListOvercategories - _PartialCategoryHub) ----------
   The same head as ListQSX (q-lq-*) and the same category rows as Search (q-sr-cat). */

.q-lc-sub {
    font-size: 12.8px;
    color: darkgrey;
}

.q-sr-page .q-lc-col {
    padding-top: 20px;
}

.q-sr-item.q-lc-item {
    margin-top: 30px;
}

/* the old rows were inline-blocks: their line box added about 10px under each (height, not
   margin - a margin would collapse into the next row's) */
.q-sr-sep.q-lc-sep {
    height: 12px;
}

.q-sr-sep.q-lc-sep-over {
    height: 12px;
}

@media (max-width: 767.98px) {
    .q-lq-head.q-lc-head {
        min-height: 140px;
        padding-bottom: 20px;
    }

    /* the hub's toolbar starts at the left, as on the M-page */
    .q-lc-head .q-lq-tools {
        justify-content: flex-start;
    }

    .q-lc-title {
        margin-top: 20px;
    }

        .q-lc-title h1 {
            display: block;
            margin: 28px 0;
            line-height: 31px;
        }

        .q-lc-title .q-lc-sub {
            margin: -18px 0 0 0;
        }

    .q-sr-page .q-lc-col {
        padding-top: 0;
    }

    .q-lc-list {
        border-top: 1px solid #e6e6e6;
    }

    .q-sr-item.q-lc-item {
        margin-top: 0;
    }

    .q-sr-sep.q-lc-sep,
    .q-sr-sep.q-lc-sep-over {
        height: 10px;
    }
}


/* ---------- panel layout (_LayoutPanel) ----------
   Desktop: the centred 1280px panel of _LayoutCorrectRow. Phone: no panel at all, the page
   sits in the 15px margins of _M_LayoutCorrect. */

.q-panel-grid {
    display: grid;
    grid-template-columns: 1240px;
    gap: 0;
}

.q-panel-pad {
    padding-inline: 60px;
}

.q-panel-body {
    text-align: center;
}

/* below the panel's own width it gives way instead of scrolling sideways */
@media (min-width: 768px) and (max-width: 1319.98px) {
    .panel-css-min2.q-panel {
        width: calc(100% - 40px);
    }

    .q-panel-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .q-panel-pad {
        padding-inline: 20px;
    }
}

@media (max-width: 767.98px) {
    .q-panel-content {
        margin-left: 15px;
        margin-right: 15px;
    }

    .wrapper-class.q-panel-wrap {
        display: block;
        width: auto;
    }

    .panel-css-min2.q-panel {
        width: auto;
        min-height: 0;
        padding: 0;
        border-radius: 0;
        background: none;
        text-align: start;
    }

    .q-panel-grid {
        display: block;
    }

    .q-panel-pad {
        padding: 0;
    }

    .q-panel-body {
        text-align: start;
    }
}


/* ---------- information pages (QInformation/*) ---------- */

.q-info-title {
    margin-left: 20px;
}

.q-info-text {
    width: 600px;
    margin: auto;
}

@media (min-width: 768px) and (max-width: 1319.98px) {
    .q-info-text {
        width: auto;
        max-width: 600px;
    }

    .settings-d-outer-div.q-settings {
        width: auto;
        flex-wrap: wrap;
    }
}

@media (max-width: 767.98px) {
    /* the phone pages used an h3 here */
    h2.q-info-title {
        margin-left: 0;
        font-size: 24px;
    }

    .q-info-text {
        width: auto;
        margin: 0;
    }

    /* Terms sat in one more 15px margin on the phone */
    .q-info-text.q-info-text-inset {
        margin: 0 15px;
    }

    .panel-media.q-contacts-icons {
        width: auto;
        min-width: 0;
        gap: 22px;
    }

    /* Settings: one column, Theme before Safe mode, as the phone page had it */
    .settings-d-outer-div.q-settings {
        display: flex;
        flex-direction: column;
        width: auto;
        gap: 0;
    }

        .q-settings .settings-d-inner-div {
            width: auto;
            margin-top: 20px;
        }

            .q-settings .settings-d-inner-div:first-child {
                margin-top: 0;
            }

        /* the phone page had no gap under these two headings */
        .q-settings .q-settings-nobr > br {
            display: none;
        }

        .q-settings .q-settings-theme {
            order: 1;
        }

        .q-settings .q-settings-safe {
            order: 2;
        }

    .q-settings-save {
        order: 3;
    }
}