#modal-body::-webkit-scrollbar { display: none; }
/*
 #video {
    background-color: transparent;
}
*/

 html, body {
    /* 1. Standardowe zachowanie (pojawia się tylko gdy trzeba) */
    overflow-y: auto; 
    
    /* 2. Standard W3C (Firefox) - nie przyjmuje px! */
    scrollbar-width: thin; 
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent; 
}

/* 3. Webkit (Chrome, Edge, Safari, Opera) */
html.body::-webkit-scrollbar { 
    width: 5px; 
}

html.body::-webkit-scrollbar-track { 
    background: transparent; 
}

html.body::-webkit-scrollbar-thumb { 
    background: rgba(255, 255, 255, 0.1); 
    border-radius: 5px; 
}

/* Trik UX: Lekkie rozjaśnienie paska, gdy użytkownik na niego najedzie */
html.body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}





.DarkGlassVideo {
    /* 1. Ciemne, półprzezroczyste tło (wypełni paski nad i pod filmem) */
    background: rgba(10, 10, 15, 0.95) !important;
    background-color: rgba(10, 10, 15, 0.95) !important; 
    /*opacity: 0;
     2. Efekt szkła - rozmycie tego, co prześwituje z tyłu aplikacji */
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px); /* Wsparcie dla Safari */
    
    /* 3. Delikatny, ledwo widoczny obrys, który nadaje szkłu "krawędź" */
    border: 1px solid rgba(255, 255, 255, 0.15);
    
    /* 4. Opcjonalnie: Zaokrąglenie rogów (dopasuj do swojego UI, np. 8px lub 12px) */
    border-radius: 12px;
    
    /* 5. Miękki cień oddzielający player od tła */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.06);
    
    /* 6. Kluczowe dla wideo: zachowuje proporcje, reszta to nasze tło */
    width: 100%;
    height: 100%;
    object-fit: contain;
    
    /* Płynne pojawianie się (jeśli ładujesz wideo dynamicznie) */
    transition: all 0.3s ease;
}


.DarkGlassVideoTransparent {
    /* 1. Ciemne, półprzezroczyste tło (wypełni paski nad i pod filmem) */
    background: rgba(10, 10, 15, 0.35) !important;
    background-color: rgba(10, 10, 15, 0.35) !important; 
    /*opacity: 0;
     2. Efekt szkła - rozmycie tego, co prześwituje z tyłu aplikacji */
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px); /* Wsparcie dla Safari */
    
    /* 3. Delikatny, ledwo widoczny obrys, który nadaje szkłu "krawędź" */
    border: 1px solid rgba(255, 255, 255, 0.15);
    
    /* 4. Opcjonalnie: Zaokrąglenie rogów (dopasuj do swojego UI, np. 8px lub 12px) */
    border-radius: 12px;
    
    /* 5. Miękki cień oddzielający player od tła */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.9);
    
    /* 6. Kluczowe dla wideo: zachowuje proporcje, reszta to nasze tło */
    width: 100%;
    height: 100%;
    object-fit: contain;
    
    /* Płynne pojawianie się (jeśli ładujesz wideo dynamicznie) */
    transition: all 0.3s ease;
}







/* --- EFEKT ZOOM DLA KART FLIX TV (Filmy, Seriale, Bajki) --- */

/* 1. Upewniamy się, że powiększony obrazek nie "wyleje" się poza zaokrąglone rogi kafelka */
.CardImageWrapper {
    overflow: hidden;
}

/* 2. Nadajemy obrazkowi płynność ruchu (pół sekundy) */
.GlassProgramCard .CardImageWrapper > img {
    transition: transform 0.5s ease-out;
}

/* 3. Magia: gdy najeżdżasz na kafelek, obrazek w środku lekko rośnie */
.GlassProgramCard:hover .CardImageWrapper > img {
    transform: scale(1.08); /* Ustaw na 1.05 dla subtelniejszego efektu, 1.08 to fajny standard */
}



.PayBankListContainer {

    /* --- STYLIZACJA SUWAKA (MOZILLA FIREFOX) --- */
    scrollbar-width: thin !important;
    /* Kolor suwaka / Kolor tła (przezroczysty) */
    scrollbar-color: rgba(48, 135, 255, 0.6) transparent !important; 
}

/* --- STYLIZACJA SUWAKA (CHROME, EDGE, SAFARI, OPERA) --- */
.PayBankListContainer::-webkit-scrollbar {
    width: 6px !important;
    background: transparent !important;
}
.PayBankListContainer::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02) !important;
    border-radius: 10px !important;
}
.PayBankListContainer::-webkit-scrollbar-thumb {
    background: rgba(48, 135, 255, 0.5) !important;
    border-radius: 10px !important;
}
.PayBankListContainer::-webkit-scrollbar-thumb:hover {
    background: rgba(48, 135, 255, 0.8) !important;
}



/* CLASY DLA KAFELKÓW URZĄDZEŃ NA KARCIE USTAWIEŃ */

/* GŁÓWNE PRZYCISKI KARTY URZĄDZENIA */
.btn-dev-action {
    background: transparent;
    padding: 0 15px;
    height: 32px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.5px;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap; /* Blokuje łamanie tekstu na małych ekranach */
}
.btn-dev-edit {
    color: #3087ff;
    border: 1px solid rgba(48,135,255,0.5);
}
.btn-dev-edit:hover {
    background: rgba(48,135,255,0.1);
}
.btn-dev-remove {
    color: #ff6b6b;
    border: 1px solid rgba(255,107,107,0.5);
}
.btn-dev-remove:hover {
    background: rgba(255,107,107,0.1);
}

/* PRZYCISKI POTWIERDZENIA W AKORDEONIE */
.confirm-btn-container {
    display: flex;
    gap: 10px;
    width: 100%;
    justify-content: center;
}
.btn-confirm-cancel {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #789;
    padding: 0 20px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.3s;
    font-size: 11px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.btn-confirm-cancel:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}
.btn-confirm-remove {
    background: rgba(255,107,107,0.1);
    border: 1px solid #ff6b6b;
    color: #ff6b6b;
    padding: 0 20px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.3s;
    font-size: 11px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.btn-confirm-remove:hover {
    background: #ff6b6b;
    color: #fff;
}


/*   ------------------------------ */



.spinner {
    /* Zmieniamy z 2s na 0.8s - im mniejsza liczba, tym szybszy obrót */
    animation: rotatespinner 1s linear infinite;
    display: block;
    margin: 0 auto;
}

@keyframes rotatespinner {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


.payu-tile:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transform: translateY(-2px);
}
.payu-tile.selected {
    border: 2px solid #3087ff !important;
    box-shadow: 0 0 10px rgba(48,135,255,0.4);
}




 #ModalContainer {
    background-color: #182028;
    color: #abc;
    padding: 0px;
    box-sizing: border-box;
}

/* Główny kontener ustawień (Flexbox) */
.settings-wrapper {
    display: flex;
    flex-direction: row;
    gap: 20px;
    width: 100%;
    min-height: 400px;
}

/* Lewa kolumna: Beleczki nawigacyjne */
.settings-sidebar {
    flex: 0 0 220px; /* Stała szerokość 220px, nie kurczy się i nie rośnie */
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Pojedyncza belka ustawień */
.settings-tab {
    padding: 12px 18px;
    background-color: transparent;
    color: #abc;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 400;
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;
}

/* Efekt najechania i aktywnej belki (przyciemnione tło, jasny tekst) */
.settings-tab:hover, 
.settings-tab.active-tab {
    background-color: #11171d; /* Ciemniejszy odcień tła modala */
    color: #cde;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.05); /* Delikatna ramka dodająca głębi */
}

/* Prawa kolumna: Obszar treści */
  /* Prawa kolumna: Obszar treści */
   /* Prawa kolumna: Obszar treści */
.settings-content-area {
    flex: 1; 
    background-color: #1a232c; 
    border-radius: 8px;
    padding: 25px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
    
    /* POPRAWKA: Wymuszamy układ pionowy od samej góry */
    display: flex;
    flex-direction: column; 
    min-height: 300px;        
    position: relative;       
}

/* Wewnętrzny kontener na samego spinnera i tekst */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Tekst ładowania */
.loading-text {
    position: relative;
    color: #abc;
    top: 45px; /* Skorygowany, uniwersalny odstęp (zmniejszony o te 30px) */
    font-size: 16px;
    font-weight: 300;
}

/* --- RESPONSYWNOŚĆ (Ekrany mniejsze niż 650px) --- */
@media (max-width: 650px) {
    .settings-wrapper {
        flex-direction: column;
    }
    
    .settings-sidebar {
        flex: auto;
        /* POPRAWKA: Beleczki układają się jedna pod drugą */
        flex-direction: column; 
        gap: 5px; /* Mniejszy odstęp, żeby zbić je w zgrabną listę */
    }
    
    .settings-tab {
        width: 100%; /* Rozciągają się na całą szerokość modala */
        padding: 10px 15px; /* Mniejszy 'height' (zmniejszony padding pionowy) */
        text-align: center; /* Możesz zmienić na 'left', jeśli wolisz tekst do lewej */
        box-sizing: border-box;
    }

    /* POPRAWKA: Obniżony napis 'Ładowanie...' na małym ekranie o 30px */
    .loading-text {
        margin-top: 20px; 
    }
}











































 #PlayerAlertsDiv {
    /* --- UKRYCIE I ANIMACJA (STARTOWE) --- */
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    
    /* --- CENTROWANIE 50% / 50% --- */
    position: absolute; /* Użyj 'fixed' jeśli ma być na środku całego ekranu, a 'absolute' jeśli na środku diva z odtwarzaczem */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* --- WYGLĄD ALERTY --- */
    background-color: rgba(220, 38, 38, 0.95); /* Półprzezroczysta czerwień (ostrzegawcza) */
    color: #ffffff; /* Biały tekst */
    padding: 20px 30px;
    border-radius: 84x; /* Zaokrąglone rogi */
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* Lekki cień, żeby "odkleić" go od wideo */
    
    /* --- Z-INDEX --- */
    z-index: 9999999; /* Musi być na samym wierzchu, nad Shaka Playerem */
    pointer-events: none; /* Żeby kliknięcia "przelatywały" przez diva, gdyby np. zasłaniał jakiś przycisk po zniknięciu */
}


 @keyframes DispAnimatedAppBg { 
  0% { background-color: rgba(0, 0, 0, 1); } /* Całkowicie przezroczyste */
  100% { background-color: rgba(0, 0, 0, 0); } /* Pełny kolor */
}

.animated-DispAnimatedAppBg {
  animation: DispAnimatedAppBg .6s ease-in-out forwards; /* Zastosowanie animacji */
}

 
@keyframes HideAnimatedAppBg { 
  0% { background-color: rgba(0, 0, 0, 0); } /* Całkowicie przezroczyste */
  100% { background-color: rgba(0, 0, 0, 1); } /* Pełny kolor */
}

.animated-HideAnimatedAppBg {
  animation: HideAnimatedAppBg .3s ease-in-out forwards; /* Zastosowanie animacji */
} 
 
 
 
 
 
 @keyframes DispAnimatedAppBgSrc { 
  0% { opacity: 0 } /* Całkowicie przezroczyste */
  100% { opacity: 1 } /* Pełny kolor */
}

.animated-DispAnimatedAppBgSrc {
  animation: DispAnimatedAppBgSrc .6s ease-in-out forwards; /* Zastosowanie animacji */
}

 
@keyframes HideAnimatedAppBgSrc { 
     0% { opacity: 1 } /* Całkowicie przezroczyste */
  100% { opacity: 0 } /* Pełny kolor */
}

.animated-HideAnimatedAppBgSrc {
  animation: HideAnimatedAppBgSrc .3s ease-in-out forwards; /* Zastosowanie animacji */
}  
 




@keyframes DispAnimatedLogin { 
  0% { opacity: 0 } /* Całkowicie przezroczyste */
  100% { opacity: 0.95 } /* Pełny kolor */
}

.animated-DispAnimatedLogin {
  animation: DispAnimatedLogin .3s ease-in-out forwards; /* Zastosowanie animacji */
} 
 
 
 .SubMenuRow
 {
     width: 100%;
     margin-left: 15px;
     margin-bottom: 5px;
     background-color: transparent;
     color: #8ab;
     cursor: pointer;
     font-size: 18px;
 }
 
 .SubMenuRow:hover
 {
     background-color: transparent;
     color: #def;
     opacity: 1;
     font-size: 19px;
 }
 



html, body {
    cursor: default !important;
}


 
 


.PlayerBackground  {
   background-image: url('../img/00000-nav-bg-black.png'); 
}

.ProgramInfoCard {
    border: 0px solid red; 
    height: auto; 
    left: 0px;
    top: 0px;
    width: 50%;
    min-width: 550px;
    padding-left: 10px;
    padding-right: 0px; 
    background-color: transparent;
    border: 0px solid blue;
    display: block;
    opacity: 1;
}

.MasterPlayerDiv {
    position: relative; 
    left: 0px; 
    border: 0px solid red;  
    padding-top: 0px;
    padding-bottom: 0px;
    width: 50%;
    min-width: 550px;
    padding-left: 3%;
    padding-right: 3%;
    border: 0px solid red;
}

.PlayerFlixNormal {
    text-align: center;  
    position: relative; 
    margin: 0px; 
    margin-top: 2%;
    margin-bottom: 2%; 
    margin-left: 0px;
    margin-right: 0px;
    width: 100%; 
    height: auto; /*calc(720px * 108/192);  */
    /*left: calc(50% - 410px);  */
    border: 0px solid #456; 
    background-size: contain; 
    background-repet: no-repeat; 
}


.fullscrAppPlayer {
    z-index: 10000;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;  
    max-height: 1080px;
    background-color: transparent;
    background-position: center; 
    overflow: hidden;
                scrollbar-width: none; /* Dla Firefox */
                -ms-overflow-style: none;
                -webkit-scrollbar: none;
                overflow-y: auto;
   
}

.normalAppPlayer {
    z-index: 10;
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    min-height: 1080px;
    background-color: transparent;
    background-position: center;
}

.PlayerAppPrzeslona {
    
    height: 100%; 
    min-height: 1080px;
     background-image: url('../img/000000-black-bg-0.8.png?p=1');
     background: radial-gradient(circle, rgba(0,0,0,0) 40%, rgba(0,0,0,0.8) 100%),
                linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 30%),  url('../img/000000-black-bg-0.8.png?p=2'),  url('../img/000000-black-bg-0.8.png?p=3');
}




    
      

.ExpandArrow {
    z-index: 1;
    width: 20px; 
    height: 30px; 
    text-align: center; 
    border: 0px solid white; 
    font-size: 18px; 
    color: #cde; 
    transform: rotate(-90deg); 
    position: absolute; 
    float: right; 
    top: 15px; 
    left: 190px;
}

.AppMasterSelectNav {
     width: 220px;
     height: 44px;
     display: none;
    }
.AppSelectNav {
    margin-left: 15px;
    margin-top: 0px; 
    width: 200px; 
    background-color: #234; 
    font-size: 22px; 
    text-align: left; 
    color: #cde; 
    height: 40px; 
    padding: 0px; 
    padding-left: 20px; 
    padding-right: 20px;
    position: relative; 
    top: 0px; 
    display: block;
    background: none;  
    outline: none; /* Usuwa kontur (zazwyczaj niebieski/pomarańczowy przy kliknięciu) */
    /* -webkit-appearance: none; Dla Chrome, Safari */
    /*-moz-appearance: none;     Dla Firefox  */ 
    appearance: none;                  
}

.ExpandArrowSlawe {
    z-index: 1;
    width: 20px; 
    height: 30px; 
    text-align: center; 
    border: 0px solid white; 
    font-size: 18px; 
    color: #cde; 
    transform: rotate(-90deg); 
    position: relative; 
    float: right; 
    top: 15px; 
    left: -20px;
}

.AppSlaweSelectNav {
     width: 220px;
     height: 44px;
     display: none;
    }
.AppSelectNavSlawe {
    margin-left: 15px;
    margin-top: 0px; 
    width: 200px; 
    background-color: #234; 
    font-size: 22px; 
    text-align: left; 
    color: #cde; 
    height: 40px; 
    padding: 0px; 
    padding-left: 20px; 
    padding-right: 20px;
    position: relative; 
    top: 0px; 
    display: block;
    background: none;  
    outline: none; /* Usuwa kontur (zazwyczaj niebieski/pomarańczowy przy kliknięciu) */
    /* -webkit-appearance: none; Dla Chrome, Safari */
    /*-moz-appearance: none;     Dla Firefox  */ 
    appearance: none;                  
}

















 


    
    






.ProgramTitle2 {
        margin-top: 10px;
    }




.ProgramTitlePlayer1 {
    color: #cde;
    font-size: 24px;
    font-weight: 500;
    margin-top: 10px;
    margin-bottom: 0px;
    height: 40px;
    display: none;
}


.ProgramTitlePlayer2 {
    color: #cde;
    font-size: 24px;
    font-weight: 500;
    margin-top: 10px;
    margin-bottom: 0px;
    display: none;
}








.CategoryBtnsPanel {
    position: relative; 
    top: 0px;
    width: 100%; 
    height: 60px; 
    padding-bottom: 0px; 
    margin-bottom: 0px; 
    border: 0px solid red;
    display: flex;
}

.hiddenDiv {
    opacity: 0;
    display: none;
}

.PlayButtonsMini {
        margin-top: 10px;;
        margin-bottom: 10px;
}

.BtnCloseInfoCard {
     z-index: 999;
     width:40px; 
     height: 40px; 
     background-color: black; 
     border: 0px solid rgba(255, 255, 255, 0.05); 
     position: absolute; 
     top: 0px;
     color: #abc;
     padding: 3px;
     padding-top: 0px; 
     right: -10px;
     border-radius: 20px;
     display: none;
     font-size: 32px;
}

.BtnCloseInfoCard:hover {
     border: 0px solid rgba(255, 255, 255, 0.2);
     color: #def;    
}

.ProgramTitle1 {
        z-index: 99;
        width: auto;
        margin-right: 40px;
        left: 20px;
        display: block;
    }
.ProgramTitle2 {
        z-index: 99;
        width: auto;
        margin-right: 40px;
        left: 20px;
        display: block;
    }

 @media (max-width: 1610px) {
    
    
    .ProgramTitle1 {
        z-index: 99;
        width: auto;
        margin-right: 40px;
        left: 40px;
        display: block;
    }
    .ProgramTitle2 {
        margin-top: 15px;
        left:40px;
        z-index: 99;
        width: auto;
        margin-right: 40px;
        left: 20px;
        display: block;
    }
    .ProgramTitle5 {
     display: none;
    }
    .ProgramTitlePlayer2 {
    color: #cde;
    font-size: 24px;
    text-align: justify;
    font-weight: 500;
    margin-left: 0px; 
    margin-top: 10px;
    margin-bottom: 10px;
    display: block;
    }
    .PlayButtonsMini {
        margin-bottom: 0px;
    }
    
    .shaka-current-time {
        display: none;
    }
    
 }


 
 
 
@media (max-width: 1450px) {   
   
      
  }
  
  
  
  
  
  
  
  
@media (max-width: 1250px) {   
    
    
     
     
    .ProgramTitle5 {
      display: none;  
    }
    
    .BtnCloseInfoCard {
     display: block;
     }

     .BtnCloseInfoCard:hover {
     display: block;    
     }
    
    
    
@keyframes displayInfoPanel { 
  0% { opacity: 0; top: 2%; }
  100% { opacity: 0.9; top: 2%; }
 
}

.animated-displayInfoPanel {
  animation: displayInfoPanel .4s ease-in-out forwards; /* Zastosowanie animacji */
}

 

/*
@keyframes hideModal { 
  0% { opacity: 1;  top: 10%; }
  90% { opacity: 0.0; top: -5%; }
  100% {opacity: 0; top: -100%; }
}
*/
@keyframes hideInfoPanel { 
    0% { opacity: 0.9; top: 2%; }
  99% { opacity: 0; top: 2%; }
  100% { opacity: 0; top: -2800px; }
}
.animated-hideInfoPanel {
  animation: hideInfoPanel .4s ease-in-out forwards; /* Zastosowanie animacji */
}
    
    
    
    
    
    .ProgramInfoCard {
    z-index: 21000;
    position: absolute;
    margin-left: 20%;
    margin-right: 20%;
    width: 60%;
    top: 2%;
    padding-top:20px;
    padding-right: 50px;
    background-color: #000;
    opacity: 0.8;
    height:100%;
    max-height: 490px;
    display: block;
    border: 1px solid #234;
    }
    
    .MasterPlayerDiv {
    width: 50%;
    min-width: 450px;
    padding-left: 3%;
    padding-right: 3%;
    text-align: center;
    float: center;
    width: 100%;
    }

  
     .PlayerFlixNormal {
    text-align: center; 
    float: center; 
    position: relative; 
    margin: 0px; 
    margin-top: 2%;
    margin-bottom: 2%;
    margin-left: 20%;
    margin-right: 20%; 
    width: 60%; 
    min-width: 400px;
    height: auto; /*calc(720px * 108/192);  */
    /*left: calc(50% - 410px);  */
    border: 0px solid #456; 
    background-size: contain; 
    background-repet: no-repeat; 
    }
     .ProgramTitlePlayer2 {
    color: #cde;
    font-size: 24px;
    text-align: center;
    font-weight: 500;
    margin-left: 0px; 
    margin-top: 10px;
    margin-bottom: 10px;
    display: block;
    }
    .shaka-volume-bar-container
    {
    display: block; 
    }

    .shaka-volume-bar{
    display: block;  
    } 
  }
  
  
@media (max-width: 1110px) {
    
  /*  .shaka-video-container,
     .shaka-controls-container {
     height: 100%;
     width:100%;
     float: bottom;
    }  
 */   
    .ProgramInfoCard {
    z-index: 999999;
    position: absolute;
    margin-left: 15%;
    margin-right: 15%;
    width: 70%;
    top: 2%;  
    display: block;
    }
    
    
    .PlayerFlixNormal {
    text-align: center; 
    float: center; 
    position: relative; 
    margin: 0px; 
    margin-top: 2%;
    margin-bottom: 2%;
    margin-left: 15%;
    margin-right: 15%; 
    width: 70%; 
    min-width: 400px;
    height: auto; /*calc(720px * 108/192);  */
    /*left: calc(50% - 410px);  */
    border: 0px solid #456; 
    background-size: contain; 
    background-repet: no-repeat; 
    }
    .ProgramTitlePlayer2 {
    color: #cde;
    font-size: 24px;
    text-align: center;
    font-weight: 500;
    margin-left: 0px; 
    margin-top: 10px;
    margin-bottom: 10px;
    display: block;
    }
}  


@media (max-width: 930px) {
    .shaka-volume-bar-container
    {
    display: block; 
    }

    .shaka-volume-bar{
    display: block;  
    } 
    
   
    .ProgramInfoCard {
    display: block;
    }
    
    .MasterPlayerDiv {
        text-align: center;
        float: center;
        width: 100%;
    }
    
    .ProgramInfoCard {   
    margin-left: 5%;
    margin-right: 5%;
    width: 90%;
    top: 1%;
    padding-top:20px;
    padding-right: 50px;
    height:100%;
    max-height: 490px;
    display: block;
    }
    
    .PlayerFlixNormal {
    text-align: center; 
    float: center; 
    position: relative; 
    margin: 0px; 
    margin-top: 3%;
    margin-bottom: 2%;
    margin-left: 5%;
    margin-right: 5%; 
    width: 90%; 
    min-width: 410px;
    height: auto; /*calc(720px * 108/192);  */
    /*left: calc(50% - 410px);  */
    border: 0px solid #456; 
    background-size: contain; 
    background-repet: no-repeat; 
    }
    
    
    
    
    
}


  
  
@media (max-width: 640px) {
    
    
  @keyframes displayInfoPanel { 
  0% { opacity: 0; top: 45px; }
  100% { opacity: 0.9; top: 45px; }
 
 }

@keyframes hideInfoPanel { 
    0% { opacity: 0.9; top: 45px; }
  99% { opacity: 0; top: 45px; }
  100% { opacity: 0; top: -2800px; }
}
    
    .ProgramInfoCard {   
    margin-left: 1%;
    margin-right: 1%;
    width: 98%;
    min-width: 380px;
    top: 45px;
    padding-top:10px;
    padding-right: 20px;
    height:100%;
    max-height: 500px;
    display: block;
    }
     .MasterPlayerDiv {
        text-align: center;
        float: center;
        width: 100%;
    }
    .ProgramTitlePlayer1 {
    color: #cde;
    font-size: 24px;
    text-align: center;
    font-weight: 500;
    margin-left: 0px; 
    margin-top: 10px;
    margin-bottom: 10px;
    display: none;
    }
    .PlayerFlixNormal {
    text-align: center; 
    float: center; 
    position: relative;
    left: 0px; 
    margin: 0px; 
    margin-top: 45px;
    margin-bottom: 2%;
    margin-left: 0px;
    margin-right: 0px; 
    width: 100%; 
    min-width: 410px;
    height: auto; /*calc(720px * 108/192);  */
    /*left: calc(50% - 410px);  */
    border: 0px solid red; 
    background-size: contain; 
    background-repet: no-repeat; 
    }
    .shaka-volume-bar-container
    {
    display: none; 
    }

    .shaka-volume-bar{
    display: none;  
    }
/*    
    .text-shaka-content-title {
    font-size: 16px;
    }
    .shaka-show-controls-on-mouse-over,
    .shaka-bottom-control {
     width: calc(100% + 10px);
     margin-left: -5px;
     margin-right: -5px;
     min-height: 50px;
     padding-bottom: 5px;
     background-color: transparent;
     opacity: 0;
 }
} 


 */

@media (max-width: 432px) { 
 /*   .shaka-video-container,
    .shaka-controls-container {
     height: 100%;
     width: 100%;
     float: bottom;
    }  
    */
    .ProgramTitlePlayer1 {
    color: #cde;
    font-size: 24px;
    text-align: center;
    font-weight: 500;
    margin-left: 0px; 
    margin-top: 10px;
    margin-bottom: 10px;
    display: none;
    }
    .PlayerBackground {
        width: 410px;
    }
    .ProgramInfoCard {   
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
    min-width: 380px;
    top: 45px;
    padding-top:10px;
    padding-right: 20px;
    height:100%;
    max-height: 500px;
    display: block;
    }
    .MasterPlayerDiv {
        text-align: center;
        float: center;
        width: 100%;
        min-width: 400px;
        padding-left: 0px;
        padding-right: 0px;
        margin-left: 0px;
        margin-right: 0px;
        display: block;
        border: 0px solid yellow;
    }
    
    .PlayerFlixNormal {
    text-align: center; 
    float: center; 
    position: relative;
    left: 0px; 
    padding: 0px;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin: 0px; 
    margin-top: 45px;
    margin-bottom: 2%;  
    width: 100%; 
    height: auto; /*calc(720px * 108/192);  */
    /*left: calc(50% - 410px);  */ 
    background-size: contain; 
    background-repet: no-repeat; 
    display: block;
    }
    
    .fullscrAppPlayer {
    z-index: 10000;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%; 
    max-height: 910px;
    height: 100%;
        
    background-color: black;
    overflow: hidden;
                scrollbar-width: none; /* Dla Firefox */
                -ms-overflow-style: none;
                -webkit-scrollbar: none;
                overflow-y: auto;
   
   }

    .normalAppPlayer {
    z-index: 10;
    position: relative;
    top: 0px;
    left: 0px;
    width: 410px;
    height: 100%;
    min-height: 910px;
    background-color: black;
    }
}