/*
 * Fallback for 'gap' on FLEX containers.
 *
 * Safari 14.0 (iOS 14.0 - 14.4, macOS 11 with unpatched Safari) supports' gap'
 * only on the grid - on the flex appeared in Safari 14.1. Without fallback, the elements
 * from the containers below stick to each other.
 *
 * All rules are prefixed with the 'no- flex-gap', class put on <html> only by
 * js / flex-gap-detect.js when the support really is missing. On Chrome / Edge /
 * Firefox 100 + and Safari 14.1 + file has no effect.
 *
 * `gap` pe GRID nu are nevoie de fallback (Safari 12+), deci .stats-cards,
 * .embedded-status-cards and other grids are intentionally absent.
 *
 * Loading the last, according to the other pages of style.
 */

/* ==========================================================================
   css/style.css
   ========================================================================== */

/* .page-edge-icons - column, 10px */
.no-flex-gap .page-margin-icons > * + * { margin-top: 10px; }

/* .single-page-icons - column, 10px (desktop) */
.no-flex-gap .single-page-icons > * + * { margin-top: 10px; }

/* #notes-section - column, 6px */
.no-flex-gap #notes-section div[style*="display: flex"] > * + * { margin-top: 6px; }

/* audio / media player - row, 8px */
.no-flex-gap .audio-player-container > * + *,
.no-flex-gap .media-player-container > * + * { margin-left: 8px; }

/* .notepeafooter - row, 12px */
.no-flex-gap .notepad-footer > * + * { margin-left: 12px; }

@media (max-width: 640px) {
    /* on mobile.single- page-icons becomes row with wrap, 5px */
    .no-flex-gap .single-page-icons > * + * { margin-top: 0; }
    .no-flex-gap .single-page-icons > *,
    .no-flex-gap .mobile-html-wrapper .single-page-icons > * {
        margin-right: 5px;
        margin-bottom: 5px;
    }
}

/* ==========================================================================
   css/user-activity-styles.css
   ========================================================================== */

.no-flex-gap .combined-tab-btn > * + * { margin-left: 8px; }
.no-flex-gap .current-user-info > * + * { margin-left: 20px; }
.no-flex-gap .current-user-card > * + * { margin-left: 20px; }
.no-flex-gap .logout-btn > * + * { margin-left: 8px; }
.no-flex-gap .user-switch-section h3 > * + * { margin-left: 10px; }
.no-flex-gap .user-preferences-card h3 > * + * { margin-left: 10px; }
.no-flex-gap .volume-display > * + * { margin-left: 10px; }
.no-flex-gap .switch-btn > * + *,
.no-flex-gap .new-user-btn > * + * { margin-left: 6px; }

/* column, 12px */
.no-flex-gap .volume-slider-container > * + * { margin-top: 12px; }

/* Wrap row, 20px / 15px */
.no-flex-gap .user-cards-container > * { margin-right: 20px; margin-bottom: 20px; }
.no-flex-gap .user-selector > * { margin-right: 15px; margin-bottom: 15px; }

@media screen and (max-width: 768px) {
    /* devin coloane */
    .no-flex-gap .current-user-info > * + *,
    .no-flex-gap .current-user-card > * + * {
        margin-left: 0;
        margin-top: 15px;
    }
    .no-flex-gap .user-selector > * {
        margin-right: 0;
        margin-bottom: 15px;
    }
}

/* ==========================================================================
   css/reports-styles.css
   ========================================================================== */

.no-flex-gap .export-btn > * + * { margin-left: 10px; }
.no-flex-gap .clear-btn.danger > * + * { margin-left: 10px; }
.no-flex-gap .embedded-stat-card > * + * { margin-left: 15px; }
.no-flex-gap .embedded-chart-export-container > * + * { margin-left: 30px; }
.no-flex-gap .embedded-results-header > * + * { margin-left: 12px; }
.no-flex-gap .embedded-export-btn > * + * { margin-left: 8px; }

/* Wrap row, 15px / 10px */
.no-flex-gap .filters-bar > * { margin-right: 15px; margin-bottom: 15px; }
.no-flex-gap .embedded-export-buttons > * { margin-right: 10px; margin-bottom: 10px; }

@media screen and (max-width: 768px) {
    /* . Filters-bar becomes column, 10px */
    .no-flex-gap .filters-bar > * {
        margin-right: 0;
        margin-bottom: 10px;
    }
    /* .embedded-charter-export-container becomes column, 20px */
    .no-flex-gap .embedded-chart-export-container > * + * {
        margin-left: 0;
        margin-top: 20px;
    }
    .no-flex-gap .embedded-export-buttons > * {
        margin-right: 8px;
        margin-bottom: 8px;
    }
}

/* ==========================================================================
   css/md-platform.css
   ========================================================================== */

/* Wrap row, 16px */
.no-flex-gap .md-image-row > * { margin-right: 16px; margin-bottom: 16px; }

/* ==========================================================================
   css / style.css and css / window_games.css (added after first pass)
   ========================================================================== */

/* .toc-tables - row, 6px */
.no-flex-gap .toc-tabs > * + * { margin-left: 6px; }

/* #eduPanel. edi-head - row, 10px */
.no-flex-gap #eduPanel .edu-head > * + * { margin-left: 10px; }

/* #gameTranscript .gt-head - row, 10px; .gt-play - icon and text, 8px */
.no-flex-gap #gameTranscript .gt-head > * + * { margin-left: 10px; }
.no-flex-gap #gameTranscript .gt-play > * + * { margin-left: 8px; }

/* ==========================================================================
   Styles from JS (inline or <style> injected)
   ========================================================================== */

/* js / ui-modules / display.js - on phone.page-marginicons e row centered with wrap, 10px
   (on desktop remains column above) */
.no-flex-gap body[data-display-mode="mobile-html"] .page-margin-icons > * { margin: 0 5px 10px; }

/* js / ui-modules / audio-player-new.js -.simple-audio-player, row, 10px */
.no-flex-gap .simple-audio-player > * + * { margin-left: 10px; }

/* js / script.js - volume popup, column, 8px */
.no-flex-gap #volume-popup > div > * + * { margin-top: 8px; }

/* js/drawing-tools-panel-template.js — panoul de desen (doar pe desktop). style.css pune deja
   edges below the elements; only the gap is added here. Mode buttons and labels
   Margin: 0! important in style.css, therefore and here! important. Colour Groups and
   The thickness has only one visible element (style.css hides them label), so they don't need it. */
.no-flex-gap #drawing-tools-panel > div > * + * { margin-top: 6px; }
.no-flex-gap #drawing-mode-label + #notes-mode-label { margin-left: 2px !important; }
.no-flex-gap #drawing-controls > * + * { margin-top: 8px; }
.no-flex-gap #pen-tool-btn + #eraser-tool-btn { margin-left: 6px !important; }

/* js / games / PuzzleMatcher.js - on the phone the tracks (#objs) and the areas (#areas) sit on the rows
   centered with wrap, PuzzleMatcher. MOBILE.gap (12px). Only flex containers: in the book
   The pieces are absolutely positioned and an edge would move them. */
.no-flex-gap #objs[style*="display: flex"] > *,
.no-flex-gap #areas[style*="display: flex"] > * { margin: 6px; }

/* js / games / QuestionMedia.js - photo gallery of the question on your phone, row with wrap, 10px */
.no-flex-gap .game-question-media-mobile > * { margin: 0 10px 10px 0; }

/* js / games / QuizSelector.js - category palette, row with wrap,. 35em (label has and. 2em own) */
.no-flex-gap .qsw-palette > * { margin: 0 .35em .35em 0; }
.no-flex-gap .qsw-palette > .qsw-palette-label { margin-right: .55em; }

/* js / games / MatchConnector.js - columns of labels, var (--mc- gap). The above groups and
   de sub imagine sunt grid, deci nu au nevoie de fallback. */
.no-flex-gap .mc-col:not(.mc-col-above):not(.mc-col-below) > * + * { margin-top: var(--mc-gap, 14px); }
/* puncte pe imagine, carte: etichete | imagine | etichete, column-gap var(--mc-gutter) */
.no-flex-gap .mc-board.mc-points:not(.mc-digital) > .mc-col + .mc-pic,
.no-flex-gap .mc-board.mc-points:not(.mc-digital) > .mc-pic + .mc-col { margin-left: var(--mc-gutter, 60px); }
/* puncte pe imagine, telefon: etichete deasupra / imagine / etichete dedesubt, row-gap 30px */
.no-flex-gap .mc-points.mc-digital > .mc-col-above + .mc-pic,
.no-flex-gap .mc-points.mc-digital > .mc-pic + .mc-col-below { margin-top: 30px; }
/* .lb-transcript-head (lightbox transcript card) - row, 10px */
.no-flex-gap .lb-transcript-head > * + * { margin-left: 10px; }