.video-js {
    font-size: 13px;
    font-family: var(--font-primary, 'Inter', sans-serif);
    font-weight: 400;
}

.vjs-skin-tudaspiac .vjs-fluid {
    overflow: hidden;
}

.vjs-skin-tudaspiac .vjs-big-play-button {
    font-size: 2em;
    line-height: 1.5em;
    height: 1.63222em;
    width: 2.5em;
}

/* teljes control sáv  (progress + gombok) */
.vjs-skin-tudaspiac .vjs-control-bar {
    display: flex;
    align-items: flex-end;
}

.vjs-skin-tudaspiac .vjs-control {
    position: absolute;
}

/* progress bogyó*/
.vjs-skin-tudaspiac .vjs-progress-control {
    bottom: 38px;
    left: -10px;
    height: 12px;
    width: 100%;
}

/* Lejátszás progress csík teljes */
.vjs-skin-tudaspiac .vjs-progress-holder {
    position: absolute;
    left: 0;
    margin: 0;
    height: 10px;
    width: 100%;
}

/*  */
.vjs-skin-tudaspiac .vjs-play-progress,
.vjs-skin-tudaspiac .vjs-load-progress {
    height: 12px;
    background-color: white;
}

.vjs-skin-tudaspiac .vjs-play-progress:before {
    font-size: 12px;
    top: -2px;
    text-shadow: 0 0 2px black;
}

/* hide the subtitles settings item from the captions menu */
.vjs-texttrack-settings {
    display: none;
}

/* betöltés progress csík */
.vjs-skin-tudaspiac .vjs-load-progress div {
    background-color: darkgrey;
}

/* Idő kijelzők (aktuális idő / elválasztó / teljes hossz): a Video.js saját
   flex-elrendezését használjuk fix pixel-pozíciók helyett, hogy a szélességük
   mindig a tartalomhoz igazodjon (pl. hosszú, óra:perc:mp formátumú videóknál),
   és sose lógjanak egymásba - a köztük lévő gap mindig ugyanakkora, mert a
   Video.js saját .vjs-time-control szabálya (padding-left/right: 1em) adja */
.vjs-skin-tudaspiac .vjs-current-time,
.vjs-skin-tudaspiac .vjs-time-divider,
.vjs-skin-tudaspiac .vjs-duration {
    position: static;
    display: flex;
    align-items: center;
    /* a current-time/duration-nak van egy rejtett (position:absolute,
       screen-reader-only) .vjs-control-text gyereke is, a time-dividernek
       nincs - emiatt a 3 doboz "auto" magassága eltérő, és a középre igazított
       "/" jel néhány pixellel máshova esne, mint a számok. A height:100%-tel
       mindhárom pontosan ugyanakkora (a control-bar teljes magassága) lesz,
       így az align-items:center mindegyiknél ugyanoda igazít */
    height: 100%;
}

.vjs-skin-tudaspiac .vjs-current-time {
    margin-left: auto; /* a bal oldali gombok (play/vissza/hangerő) után, jobbra igazítva kezdődjön */
}

.vjs-skin-tudaspiac .vjs-remaining-time {
    display: none;
}

.vjs-skin-tudaspiac .vjs-duration {
    /* hely a jobb oldali 4 gombnak (feliratok / sebesség / PIP / teljes képernyő),
       ld. lentebb - mindegyik gomb szélessége a Video.js alapértelmezése szerint 4em */
    margin-right: 16em;
}

/* Gombok - mindegyik gomb szélessége a Video.js saját alapértelmezése szerint 4em
   (lásd .vjs-button { width: 4em } a video-js.css-ben), ezért a bal/jobb oldali
   pozíciók is 4em többszörösei, hogy sose lógjanak egymásba (korábban px-ben,
   a tényleges gombszélességnél szűkebb réssel voltak megadva, ezért a
   kattintható területük átfedte egymást) */

/* Play gomb (kicsi) */
.vjs-skin-tudaspiac .vjs-play-control {
    position: absolute;
    bottom: 0;
    left: 0;
}

.vjs-skin-tudaspiac .vjs-skip-backward-5 {
    position: absolute;
    bottom: 0;
    left: 4em;
}

/* hangerő ikon, amikor a hangerő csík vízszintes */
.vjs-skin-tudaspiac .vjs-volume-panel-horizontal {
    position: absolute;
    bottom: 0;
    left: 8em;
}

.vjs-skin-tudaspiac .vjs-volume-panel-vertical {
    position: absolute;
    bottom: 0;
    left: 8em;
}

/* Hangerő csík */
.vjs-skin-tudaspiac .vjs-volume-bar {
    position: absolute;
    bottom: 0;
    right: -55px;
}

/* FONTOS: a Video.js a feliratok/sebesség gomboknál (menü-popup típusú vezérlők)
   a külső, pozícionálandó div-re ÉS a benne lévő, ténylegesen kattintható belső
   <button>-re is UGYANAZT az osztálynevet teszi (pl. mindkettőn ott van
   ".vjs-subs-caps-button") - ezért a szelektorban a ".vjs-control"-t is meg kell
   adni, hogy CSAK a külső, ".vjs-control" osztályú div-et találja el, ne a belső
   gombot is (különben a belső gomb IS position:absolute-ot kapna, és a right
   értéket a - sokkal kisebb - külső div-hez képest számolná ki, nem a teljes
   control sávhoz képest, ami miatt a gomb teljesen máshova csúszna) */
.vjs-skin-tudaspiac .vjs-control.vjs-subs-caps-button {
    position: absolute;
    bottom: 0;
    right: 8em;
}

/* lejátszás sebessége */
.vjs-skin-tudaspiac .vjs-control.vjs-playback-rate {
    position: absolute;
    bottom: 0;
    right: 12em;
}

/* PIP gomb */
.vjs-skin-tudaspiac .vjs-picture-in-picture-control {
    position: absolute;
    bottom: 0;
    right: 4em;
}

.vjs-skin-tudaspiac .vjs-fullscreen-control {
    position: absolute;
    bottom: 0;
    right: 0;
}

/* Modal (pl. felirat beállítás */
.vjs-skin-tudaspiac .vjs-label {
    color: #FF0000;
}

.vjs-poster > picture > img {
    border-radius: 10px;
}

/* Csak container queries nélküli (régi) böngészőkben - a modernekben a lejátszó szélessége dönt, l. lent */
@supports not (container-type: inline-size) {
@media (max-width: 540px) {

    /* a bal oldali gombsor (play/vissza/hangerő) pozíciója em-ben van megadva,
       ezért mobilon sem kell külön felülírni - a fenti alap szabály már jó */

    /* Keskeny kijelzőn szűkebb a hely, ezért az "aktuális idő / teljes hossz"
       kijelzők belső "légterét" (a Video.js alapértelmezett 1em+1em
       padding-jét) összébb húzzuk, hogy elférjenek a jobb oldali gombok
       mellett is - a margin-left marad auto (mint desktopon), hogy a
       margin-right által lefoglalt hely mindig pontosan a jobb szélhez
       igazodjon (fix margin-left itt NEM működne jól, mert akkor a
       margin-right már nem a konténer széléhez, hanem a tartalom végéhez
       képest számolna, és átlóghatna a jobb oldali gombokba) */
    .vjs-skin-tudaspiac .vjs-current-time,
    .vjs-skin-tudaspiac .vjs-time-divider,
    .vjs-skin-tudaspiac .vjs-duration {
        padding-left: 0.15em;
        padding-right: 0.15em;
        font-size: 0.75em;
    }

    /* mobilon a sebesség/PIP gomb rejtve van, ezért kevesebb hely kell jobbra.
       FONTOS: px-ben, nem em-ben - az em a saját (fentebb kicsinyített)
       font-size-hez képest számolna, ami eltolná a pozíciót a többi,
       13px-es alapon számolt (px/em) elemhez képest */
    .vjs-skin-tudaspiac .vjs-duration {
        margin-right: 104px; /* = 8 * 13px, a subs-caps + fullscreen gomb szélessége */
    }

    /* lejátszás sebessége */
    .vjs-skin-tudaspiac .vjs-playback-rate {
        display: none;
    }

    .vjs-skin-tudaspiac .vjs-control.vjs-subs-caps-button {
        right: 4em;
    }

    /* PIP gomb */
    .vjs-skin-tudaspiac .vjs-picture-in-picture-control {
        display: none;
    }

}
}

/* Extra kicsi kijelzőn a felirat gomb is rejtve van, ezért jobbra csak a
   teljes képernyő gombnak kell helyet hagyni - a ≤540px blokk UTÁN kell
   állnia, hogy a margin-right itt felülírja azt (egyenlő specificitásnál a
   forráskódban később álló szabály nyer). A törésponthoz (370px) mért
   biztonsági ráhagyás van szánva: 360px-nél (gyakori Android szélesség) a
   feliratok gombbal együtt már csak ~4px szabad hely maradna a hangerő gomb
   előtt, ami böngészőnként/betűtípusonként ingadozó szövegszélesség mellett
   könnyen átfedésbe csúszna - ezért already 370px alatt is rejtve van */
/* Csak container queries nélküli (régi) böngészőkben - a modernekben a lejátszó szélessége dönt, l. lent */
@supports not (container-type: inline-size) {
@media (max-width: 370px) {
    .vjs-skin-tudaspiac .vjs-control.vjs-subs-caps-button {
        display: none;
    }

    .vjs-skin-tudaspiac .vjs-duration {
        margin-right: 52px; /* = 4 * 13px, csak a teljes képernyő gomb szélessége */
    }
}
}

/* ------------------------------------------------------------------
   Videófejezetek (public/js/video/video-chapters.js)
   L. docs/plans/video-chapters-plan.md 5.5-5.6
   ------------------------------------------------------------------ */

/* A fejezetmenü gombja (Video.js ChaptersButton) - CSAK akkor kap helyet, ha a videónak van fejezete (a modul
   ilyenkor teszi a lejátszóra a vjs-has-chapters osztályt), hogy fejezet nélküli videónál ne tolódjon el az
   időkijelző. A ".vjs-control" itt is kell (a belső gombon is ugyanez az osztálynév van, l. subs-caps fentebb). */
.vjs-skin-tudaspiac .vjs-control.vjs-chapters-button {
    position: absolute;
    bottom: 0;
    right: 16em;
}

.vjs-skin-tudaspiac.vjs-has-chapters .vjs-duration {
    margin-right: 20em; /* + a fejezetgomb 4em-je */
}

/* Keskeny LEJÁTSZÓ (nem nézetablak - l. video-chapters.js updateFit()): a fejezetgomb a sebességgomb helyére kerül,
   így a lefoglalt hely ugyanannyi, mint fejezet nélkül */
.vjs-skin-tudaspiac.vjs-chapters-narrow .vjs-control.vjs-playback-rate {
    display: none;
}

.vjs-skin-tudaspiac.vjs-chapters-narrow .vjs-control.vjs-chapters-button {
    right: 12em;
}

.vjs-skin-tudaspiac.vjs-has-chapters.vjs-chapters-narrow .vjs-duration {
    margin-right: 16em;
}

/* a menü (Video.js alapból balra nyílik a gombtól) - a fejezetcímek hosszabbak a feliratnyelveknél */
.vjs-skin-tudaspiac .vjs-chapters-button .vjs-menu .vjs-menu-content {
    width: 18em;
    left: -7em;
}

.vjs-skin-tudaspiac .vjs-chapters-button .vjs-menu li.vjs-menu-item {
    justify-content: flex-start; /* a Video.js 8 a menüelemeket flex-szel középre igazítja */
    text-transform: none;
    text-align: left;
    padding-left: 0.8em;
}

/* jelölések a tekerősávon: keskeny rések a fejezethatároknál (YouTube-szerű szakaszolás) */
.vjs-skin-tudaspiac .vjs-chapter-markers {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    z-index: 2;
}

.vjs-skin-tudaspiac .vjs-chapter-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    margin-left: -1px;
    background-color: rgba(0, 0, 0, 0.6);
}

/* a fejezet címe a tekerősáv fölött, az egér helyén - a pozíciót (left/bottom) a video-chapters.js számolja: a
   bélyegkép-előnézet fölé, ha az látszik, különben az idő-tooltip fölé */
.vjs-skin-tudaspiac .vjs-chapter-title-tooltip {
    display: none;
    position: absolute;
    bottom: 70px;
    left: 0;
    transform: translateX(-50%);
    max-width: min(20em, 90%);
    z-index: 3;
    padding: 0.3em 0.6em;
    border-radius: 0.3em;
    background-color: rgba(0, 0, 0, 0.8);
    color: #FFFFFF;
    font-size: 1em;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.vjs-skin-tudaspiac .vjs-chapter-title-tooltip.vjs-chapter-title-visible {
    display: block;
}

/* Csak container queries nélküli (régi) böngészőkben - a modernekben a lejátszó szélessége dönt, l. lent */
@supports not (container-type: inline-size) {
@media (max-width: 540px) {
    .vjs-skin-tudaspiac .vjs-control.vjs-chapters-button {
        right: 8em; /* a subs-caps (4em) mellett; a sebesség és a PIP itt rejtve */
    }

    .vjs-skin-tudaspiac.vjs-has-chapters .vjs-duration {
        margin-right: 156px; /* = 12 * 13px: fejezet + subs-caps + teljes képernyő (px, l. fentebb) */
    }

    /* keskeny lejátszó mobil nézetablakban: a sebességgomb itt amúgy is rejtve, ezért a fejezetgomb tűnik el */
    .vjs-skin-tudaspiac.vjs-chapters-narrow .vjs-control.vjs-chapters-button {
        display: none;
    }

    .vjs-skin-tudaspiac.vjs-has-chapters.vjs-chapters-narrow .vjs-duration {
        margin-right: 104px;
    }
}
}

/* Extra kicsi kijelzőn a fejezetgomb rejtve (döntés, l. video-chapters-plan.md 12/2) - a fejezetek a tekerősáv
   jelölésein és a tartalomlistán át elérhetők */
/* Csak container queries nélküli (régi) böngészőkben - a modernekben a lejátszó szélessége dönt, l. lent */
@supports not (container-type: inline-size) {
@media (max-width: 370px) {
    .vjs-skin-tudaspiac .vjs-control.vjs-chapters-button {
        display: none;
    }

    .vjs-skin-tudaspiac.vjs-has-chapters .vjs-duration {
        margin-right: 52px;
    }
}
}

/* ------------------------------------------------------------------
   Keskeny LEJÁTSZÓ (nem nézetablak): container queries
   ------------------------------------------------------------------
   A fenti, nézetablak-alapú töréspontok (≤540 / ≤370 px) a böngészőablak szélességét nézik, a lejátszó viszont
   lehet jóval keskenyebb (pl. a videó szerkesztő oldal "Videó" paneljében ~420-520 px asztali ablakban is) - ilyenkor
   az elemek egymásra csúsztak. A container queries-t támogató böngészőkben (Chrome/Edge 105+, Safari 16+,
   Firefox 110+) ezért a LEJÁTSZÓ szélessége dönt; a régiekben a fenti szabályok maradnak változatlanul.

   Elrendezés: a bal oldali gombok (lejátszás, 5 mp vissza, hangerő) maradnak abszolút pozícióban, a jobb oldaliak
   (videófejezetek, sebesség, felirat, PiP, teljes képernyő) viszont a Video.js saját flex-sorában állnak, így a
   hiányzó gomb (pl. felirat nélküli videó) nem foglal helyet, és nem kell margókkal helyet tartani nekik.

   Fogyó szélességnél előbb az időkijelző lesz tömörebb, aztán kisebbek a gombok (4em -> 3.25em, ~42 px), végül
   fontossági sorrendben tűnnek el: PiP -> sebesség -> videófejezetek -> 5 mp vissza -> felirat. A lejátszás, a
   hangerő és a teljes képernyő mindig látszik. A küszöbök a legrosszabb esetre (fejezet ÉS felirat is van) vannak
   méretezve, kis ráhagyással az órás videók hosszabb időkijelzőjéhez. L. docs/plans/video-player-narrow-layout-plan.md
   ------------------------------------------------------------------ */
@supports (container-type: inline-size) {
    .video-js.vjs-skin-tudaspiac {
        container-type: inline-size;
    }

    /* a bal oldali (abszolút) gombsor helye */
    .vjs-skin-tudaspiac .vjs-control-bar {
        padding-left: 12em;
    }

    .vjs-skin-tudaspiac .vjs-control.vjs-chapters-button,
    .vjs-skin-tudaspiac .vjs-control.vjs-playback-rate,
    .vjs-skin-tudaspiac .vjs-control.vjs-subs-caps-button,
    .vjs-skin-tudaspiac .vjs-picture-in-picture-control,
    .vjs-skin-tudaspiac .vjs-fullscreen-control {
        position: relative;
        right: auto;
        bottom: auto;
        flex: none;
    }

    /* a mai vizuális sorrend: fejezetek, sebesség, felirat, PiP, teljes képernyő */
    .vjs-skin-tudaspiac .vjs-control.vjs-chapters-button {
        order: 1;
    }

    .vjs-skin-tudaspiac .vjs-control.vjs-playback-rate {
        order: 2;
    }

    .vjs-skin-tudaspiac .vjs-control.vjs-subs-caps-button {
        order: 3;
    }

    .vjs-skin-tudaspiac .vjs-picture-in-picture-control {
        order: 4;
    }

    .vjs-skin-tudaspiac .vjs-fullscreen-control {
        order: 5;
    }

    .vjs-skin-tudaspiac .vjs-duration,
    .vjs-skin-tudaspiac.vjs-has-chapters .vjs-duration,
    .vjs-skin-tudaspiac.vjs-has-chapters.vjs-chapters-narrow .vjs-duration {
        margin-right: 0;
    }

    /* A küszöbök JELENLÉT-FÜGGŐK (:has): ahány választható gomb (videófejezetek, felirat) ténylegesen ott van, annyi
       helyet számolnak - így kevesebb gombbal több elem fér ki. Mért alapértékek (13 px-es betű): bal oldali gombsor
       156 px (3 × 52) ill. 127 px (3 × 42); időkijelző asztalon ≤171 px, tömören ≤92 px (órás videónál is); 8 px
       ráhagyás. Szint = "egy választható gomb van" (vagy több), "mindkettő van"; a kettő felülírja az alapot. */

    /* 1. tömörebb időkijelző: alap < 491, legalább egy választható gomb < 543, mindkettő < 595 */
    @container (max-width: 490px) {
        .vjs-skin-tudaspiac .vjs-current-time,
        .vjs-skin-tudaspiac .vjs-time-divider,
        .vjs-skin-tudaspiac .vjs-duration {
            padding-left: 0.15em;
            padding-right: 0.15em;
            font-size: 0.75em;
        }
    }

    @container (max-width: 542px) {
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)) .vjs-current-time,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)) .vjs-time-divider,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)) .vjs-duration,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-current-time,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-time-divider,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-duration {
            padding-left: 0.15em;
            padding-right: 0.15em;
            font-size: 0.75em;
        }
    }

    @container (max-width: 594px) {
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)):has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-current-time,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)):has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-time-divider,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)):has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-duration {
            padding-left: 0.15em;
            padding-right: 0.15em;
            font-size: 0.75em;
        }
    }

    /* 2. kisebb gombok (3.25em ≈ 42 px, még kényelmes érintési méret): alap < 412, egy < 464, mindkettő < 516 */
    @container (max-width: 411px) {
        .vjs-skin-tudaspiac .vjs-control-bar .vjs-control.vjs-button,
        .vjs-skin-tudaspiac .vjs-control-bar .vjs-control.vjs-menu-button,
        .vjs-skin-tudaspiac .vjs-control-bar .vjs-control.vjs-playback-rate,
        .vjs-skin-tudaspiac .vjs-control-bar .vjs-volume-panel {
            width: 3.25em;
        }

        .vjs-skin-tudaspiac .vjs-skip-backward-5 {
            left: 3.25em;
        }

        .vjs-skin-tudaspiac .vjs-volume-panel-horizontal,
        .vjs-skin-tudaspiac .vjs-volume-panel-vertical {
            left: 6.5em;
        }

        .vjs-skin-tudaspiac .vjs-control-bar {
            padding-left: 9.75em;
        }
    }

    @container (max-width: 463px) {
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)) .vjs-control-bar .vjs-control.vjs-button,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)) .vjs-control-bar .vjs-control.vjs-menu-button,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)) .vjs-control-bar .vjs-control.vjs-playback-rate,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)) .vjs-control-bar .vjs-volume-panel,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-control-bar .vjs-control.vjs-button,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-control-bar .vjs-control.vjs-menu-button,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-control-bar .vjs-control.vjs-playback-rate,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-control-bar .vjs-volume-panel {
            width: 3.25em;
        }

        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)) .vjs-skip-backward-5,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-skip-backward-5 {
            left: 3.25em;
        }

        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)) .vjs-volume-panel-horizontal,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)) .vjs-volume-panel-vertical,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-volume-panel-horizontal,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-volume-panel-vertical {
            left: 6.5em;
        }

        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)) .vjs-control-bar,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-control-bar {
            padding-left: 9.75em;
        }
    }

    @container (max-width: 515px) {
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)):has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-control-bar .vjs-control.vjs-button,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)):has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-control-bar .vjs-control.vjs-menu-button,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)):has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-control-bar .vjs-control.vjs-playback-rate,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)):has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-control-bar .vjs-volume-panel {
            width: 3.25em;
        }

        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)):has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-skip-backward-5 {
            left: 3.25em;
        }

        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)):has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-volume-panel-horizontal,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)):has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-volume-panel-vertical {
            left: 6.5em;
        }

        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)):has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-control-bar {
            padding-left: 9.75em;
        }
    }

    /* 3. elrejtés fontossági sorrendben: PiP -> sebesség -> videófejezetek -> 5 mp vissza -> felirat */

    /* PiP: alap < 354, egy < 396, mindkettő < 438 */
    @container (max-width: 353px) {
        .vjs-skin-tudaspiac .vjs-picture-in-picture-control {
            display: none;
        }
    }

    @container (max-width: 395px) {
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)) .vjs-picture-in-picture-control,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-picture-in-picture-control {
            display: none;
        }
    }

    @container (max-width: 437px) {
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)):has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-picture-in-picture-control {
            display: none;
        }
    }

    /* sebesség: alap < 312, egy < 354, mindkettő < 396 */
    @container (max-width: 311px) {
        .vjs-skin-tudaspiac .vjs-control.vjs-playback-rate {
            display: none;
        }
    }

    @container (max-width: 353px) {
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)) .vjs-control.vjs-playback-rate,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-control.vjs-playback-rate {
            display: none;
        }
    }

    @container (max-width: 395px) {
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)):has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-control.vjs-playback-rate {
            display: none;
        }
    }

    /* videófejezetek: csak fejezettel < 312, felirattal együtt < 354 */
    @container (max-width: 311px) {
        .vjs-skin-tudaspiac .vjs-control.vjs-chapters-button {
            display: none;
        }
    }

    @container (max-width: 353px) {
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-control.vjs-chapters-button {
            display: none;
        }
    }

    /* 5 mp vissza: alap < 269, felirattal < 312. FONTOS: minden jelenlét-változatra (alap / fejezet / felirat /
       mindkettő) külön szelektor kell, azonos specificitással, mint a 2. pont kisebb-gomb szabályai - különben azok
       (több :has() miatt erősebb) padding-left/left értékei felülírnák az itteni eltolást. */
    @container (max-width: 268px) {
        .vjs-skin-tudaspiac .vjs-skip-backward-5,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)) .vjs-skip-backward-5,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-skip-backward-5,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)):has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-skip-backward-5 {
            display: none;
        }

        .vjs-skin-tudaspiac .vjs-volume-panel-horizontal,
        .vjs-skin-tudaspiac .vjs-volume-panel-vertical,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)) .vjs-volume-panel-horizontal,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)) .vjs-volume-panel-vertical,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-volume-panel-horizontal,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-volume-panel-vertical,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)):has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-volume-panel-horizontal,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)):has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-volume-panel-vertical {
            left: 3.25em;
        }

        .vjs-skin-tudaspiac .vjs-control-bar,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)) .vjs-control-bar,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-control-bar,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)):has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-control-bar {
            padding-left: 6.5em;
        }
    }

    @container (max-width: 311px) {
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-skip-backward-5,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)):has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-skip-backward-5 {
            display: none;
        }

        .vjs-skin-tudaspiac:has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-volume-panel-horizontal,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-volume-panel-vertical,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)):has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-volume-panel-horizontal,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)):has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-volume-panel-vertical {
            left: 3.25em;
        }

        .vjs-skin-tudaspiac:has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-control-bar,
        .vjs-skin-tudaspiac:has(.vjs-control.vjs-chapters-button:not(.vjs-hidden)):has(.vjs-control.vjs-subs-caps-button:not(.vjs-hidden)) .vjs-control-bar {
            padding-left: 6.5em;
        }
    }

    /* felirat: < 270 */
    @container (max-width: 269px) {
        .vjs-skin-tudaspiac .vjs-control.vjs-subs-caps-button {
            display: none;
        }
    }

    /* legkeskenyebb (< 228): az időkijelzőből csak a teljes hossz marad */
    @container (max-width: 227px) {
        .vjs-skin-tudaspiac .vjs-current-time,
        .vjs-skin-tudaspiac .vjs-time-divider {
            display: none;
        }

        .vjs-skin-tudaspiac .vjs-duration {
            margin-left: auto;
        }
    }
}