.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;
}

@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 */
@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 */
    }
}