/* ################################### General ######################################### */
:root
{
    
    /* --- platform --- */

    --maxWidth: 1024px;
    --fontSizeBody: 16px;
    
    /* --- colors --- */
    
    --colorMainBackground:#262a2d;
    --colorMainFont:#CCCCCC;
    --colorHeaderBackground:#1c2224;
    --colorFooterBackground:#1c2224;
    --colorHeaderFont:#CCCCCC;
    --colorFooterFont:#CCCCCC;
    --colorContainerBackground:#f3f3f3;
    --colorContainerFont:#3c3c3c;
    --colorHighlightBackground:#25bcb4;
    --colorLineBackground:#f3f3f3;


    /* --- header and footer --- */
    
    --headerHeight: 60px;
    --footerHeight: 60px;
    --logoScale:    100;
    --headerOuterCellWidth: 50px;
    --footerDesktopNavigationHeight: 60px;
    --footerIconMinimalWidth: 50px;

    /* --- magazine images. private & newspapers (thumb-nails) --- */
    
    --imageBaseThumbWidth:          160px;

    --imageArticleWidth:            160px;
    --imageArticleHeight:           216px;
    --imageNewspaperWidth:          160px;
    --imageNewspaperHeight:         216px;
    --imagePrivateArticleWidth:     160px;
    --imagePrivateArticleHeight:    216px;

    /* --- reader platform --- */

    --imageReaderWidth:             160px;
    --imageReaderHeight:            216px;

    /* --- search --- */

    --searchSectionMaxWidth:        650px;
    --categoryBlockWidth:           140px;

    /* --- html version --- */

    --fontSizeHtmlControllers: 14px;
    --htmlHeaderHeight: 50px;

    /* --- misc --- */

    --blockBorderWidth:         7px;
    --bannerHeightPerc:         75%; /* ideally 50% -> 2w x 1h */
    --tocMaxWidth:              650px;
    --tocFooterTopPerc:         50%; /* was 50% */
    --bookmarksMaxWidth:        650px;
    --offlineMaxWidth:          650px;
 
}


body,html								
{
	background-color:var(--colorMainBackground);
    color:var(--colorMainFont);  
}

h1 { color:var(--colorMainFont); }


.hideScrollbar                      { scrollbar-width:none;}
.hideScrollbar::-webkit-scrollbar   { display:none; background:transparent;}
.colorHighlight                     { color:var(--colorHighlightBackground);}

/* ################################### spinner ######################################### */

.lds-ring 		{color: var(--colorMainFont);}
.lds-ring div 	{border: 8px solid var(--colorMainFont); border-color: var(--colorMainFont) transparent transparent transparent;}

/* ################################### Platform ######################################### */

#divPlatform{
    max-width:var(--maxWidth);
    margin:auto;
    user-select: none;
}

.popoverBlock {

    position:fixed;
    left:0px;
    top:var(--headerHeight);
    bottom:var(--footerHeight); 
    width:100%;
    background-color: var(--colorMainBackground);
    overflow:auto;

}

.fixedScrollSection 
{
    height: 100svh;
    overflow:auto;
}


/* ################################### Header ######################################### */

header
{
    background-color:var(--colorHeaderBackground);
    height: var(--headerHeight);
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    z-index:1;
    padding:0px;
    overflow:hidden;
    
}

header.bottomDivider
{
    border-bottom:1px solid var(--colorLineBackground);
}


header table                        {height:var(--headerHeight);max-width:var(--maxWidth);margin:auto;}
header table td                     {height:var(--headerHeight); text-align:center; overflow:hidden; position:relative; } 
header table td:nth-child(1)        {width:var(--headerOuterCellWidth); padding-left:5px;}
header table td:nth-child(3)        {width:var(--headerOuterCellWidth); padding-right:5px;}
header table td:nth-child(2) img    {height: calc(85% * var(--logoScale)/100); width: auto; } /* header table td:nth-child(2) img    {height: calc(85% * var(--logoScale)/100); width: auto; display:inline-block;}  */
header table td img                 {display: inline-block;  position: absolute;  top: 50%;  left: 50%; transform: translate(-50%, -50%);}

/* ################################### divBodyContent ######################################### */

#divBodyContent
{
    padding-top:    calc(var(--headerHeight));
    padding-bottom: calc(var(--footerHeight) + 10px);
    position: relative; 
}


/* hide body content if a popover is available - sometimes the view is rendered after scrolling (i.e. on android) so you would see background magazines during scrolling */ 
#divPlatform:has(.popoverBlock:not(.hidden)) #divBodyContent      { visibility: hidden; } 

/* ################################### banners ######################################### */


#divBanner {
    position: relative;
    width: 100%;
    overflow:hidden;
    border-radius:var(--radiusBanner);
}

#divBanner.extraEdged {

    width:calc(100% - 24px); /* width: 95%; */
    margin:auto;
    margin-top:15px;
}

#divBanner[onclick]     { cursor:pointer; }

/* 2x1 ratio */
#divBanner::before {
    content: "";
    display: block;
    padding-top: var(--bannerHeightPerc); 
}



#divBanner img          {position:absolute;top:0px;left:0px;width:100%;height:auto;}


#divBannerSwiper                    {border:0px solid red;position:absolute;bottom:3px; left:0px;text-align:center; width:100%;}
#divBannerSwiper .bannerDot         {height: 10px;width: 10px;background-color: #bbb;border-radius: 50%;display: inline-block;margin-right:10px; opacity:0.8;}
#divBannerSwiper .bannerDot.active  {background-color:white;opacity:1;}

@media (max-width: 600px) 
{
    #divBannerSwiper .bannerDot {height: 5px;width: 5px;margin-right:5px;}
}


/* ################################### divHtml ######################################### */


#divHtml
{
    padding-top: var(--blockBorderWidth);   
}

/* ################################### Footer ######################################### */

footer
{
    background-color:var(--colorMainBackground);
    height:var(--footerHeight);
    position:fixed;
    bottom:0px;
    left:0px;
    width:100%;
    z-index:1;
    overflow: hidden;

}

footer::before
{
    content:"";
    position:absolute;
    display:block;
    top:0px;
    left:0px;
    height: 100%;
    width:100%;
    border-radius: var(--radiusFooter) var(--radiusFooter)  0px 0px;
    background-color:var(--colorFooterBackground);
    z-index:-1; 
}

#footerContent                        { height:100%;max-width: var(--maxWidth);margin:auto;width:100%;text-align:center; display: flex; justify-content: space-between;  align-items: center; padding-left:10px; padding-right:10px;}
footer .iconWrapper                   { display:inline-block; text-align:center;cursor:pointer; min-width:var(--footerIconMinimalWidth);position:relative;}
footer .iconLabelWrapper              { text-align:center;padding-top:5px;font-size:10px;color:var(--colorFooterFont);overflow:hidden;}
footer .iconLabelWrapper.active       { font-weight:bold;}
footer img                            { position: relative; top: 6px; }
footer img.icon                       { width:27px;height:27px; }


@media (max-width: 600px) 
{
    footer .iconWrapper                             {margin-left:3px; margin-right:3px; }
  
}

@media (min-width: 601px) and (max-width: 900px)        { #footerContent {justify-content: center; gap: 30px; align-items: center; } }
@media (min-width: 901px) and (max-width: 1023px)       { #footerContent {justify-content: center; gap: 70px; align-items: center; } }
@media (min-width: 1024px)                              { #footerContent {justify-content: center; gap: 100px; align-items: center; }}
@media (max-width: 601px)                               { #footerContent .iconWrapper:nth-of-type(n+6) {display: none; } /* only allow for a max of 5 icons (n+6) to be desplayed */ }

/* ------------ more icons div ----------------  */

#footerContentMore                                                      { position:absolute; bottom: calc(var(--footerHeight) - 2px ); right:0px; overflow:auto; background-color:var(--colorFooterBackground); }
footer:has(#footerContentMore:not(.hidden))                             { overflow:visible; }
#footerContentMore table                                                { width:auto; margin:10px; cursor:pointer;}
#footerContentMore table div                                            { padding-left:20px;padding-right:10px;}
footer .iconWrapper .topWrapper                                         { display:none;}
footer:has(#footerContentMore:not(.hidden)) .iconWrapper .topWrapper    { display:inline-block; width:100%; height:100%; position:absolute; top:0px; left:0px; }


/* ################################### Main Overview Page (and branches-page) ######################################### */

#divAllTitles, #divBranches 
{
    text-align:center;
    font-size:0px; /* else images show bit margin at bottom */
}

#divAllTitles .imgWrapper, #divBranches .imgWrapper
{  
    display:inline-block;
    overflow:hidden;
    position:relative;

}

#divAllTitles .articleCaption, #divBranches .articleCaption, #divPrivate .articleCaption
{
    text-align:left;
    font-size:14px;
    overflow:hidden;
    text-overflow: ellipsis;
    margin-bottom:15px;
    white-space: nowrap;
    padding:2px;
    padding-left:var(--blockBorderWidth);
    position:relative;
}

#divAllTitles .articleCaption, #divBranches .articleCaption     {width:var(--imageArticleWidth);}
#divNewspapers .articleCaption                                  {width:var(--imageNewspaperWidth);}



#divAllTitles img, #divBranches img 
{
    cursor:pointer;
    margin:var(--blockBorderWidth);
    border-radius: var(--radiusMagazine);
}

#divArticles img, #divBranches img 
{
    width:  var(--imageArticleWidth);
    height: var(--imageArticleHeight);
}

#divNewspapers img
{
    width:  var(--imageNewspaperWidth);
    height: var(--imageNewspaperHeight);
}

#divTitleDescription                    {   font-size:var(--fontSizeBody);text-align:left;margin-bottom:15px;margin-top:10px;padding:10px;}
#divTitleDescription div:first-child    {   text-transform: uppercase;font-size: calc(var(--fontSizeBody) * 1.5); margin-bottom:10px; }
#divTitleDescription div:last-child     {   margin-bottom:10px; }
#divTitleDescription.centred            {   text-align:center; }

/* first branch highlighted magazine */

#divFirstBranchHighlight            {margin:auto; margin-top:20px;position:relative;display:inline-block;cursor:pointer;}

#divFirstBranchHighlight::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(to bottom,  rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.6) 100%); */
    border-radius: var(--radiusMagazine);
}

#divFirstBranchHighlight img                {margin:0px;height:auto;width: calc(2 * var(--imageArticleWidth)); position:relative; }
#divFirstBranchHighlight .textBlock         
{
    text-align:center;
    position:absolute;
    bottom:30px;
    left:0%;
    width:100%;
    z-index:1;
    color:white;
}

#divFirstBranchHighlight .inlineCaption1     {font-size:24px;}
#divFirstBranchHighlight .inlineCaption2     {margin-top:10px;font-size:16px;}

/* ################################### Side Menu ######################################### */

#divSideMenu
{
    border:0px solid red;
    background-color:var(--colorHeaderBackground);
    color: var(--colorHeaderFont);
    width:200px;
    height:100%;
    position:fixed;
    top:0px;
    right:0px;
    z-index:2; /* over the footer(z-index 1) if applicable */
    width:auto;
    min-width:290px;
    font-size:17px;
    overflow-y:auto;
    white-space: nowrap;
    overflow-x:hidden;
    padding-bottom:var(--footerHeight);
    max-width:350px;

    @media (min-width: 601px)   
    {
        min-width:350px;
        max-width:450px;
    }
}


#divSideMenu .topBlock
{
    width: 100%; 
    padding-top: 50%; 
    overflow:hidden;
    position:relative;
    cursor:pointer;
}



#divSideMenu .topBlock:has(> .backgroundImage:not([style])) 
{
    padding-top:60px;
}



#divSideMenu .header    {
    height: var(--headerHeight);
    position:relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right:10px;
}

#divCategoriesArticles div, 
#divCategoriesNewspapers div,
#divBranchTypesArticles div,
#divBranchTypesNewspapers div,
#divBranchTypesAll,
#divCategoriesAll,
#divCategoryToggler,
#divBranchTypeToggler,
#divDepartmentToggler,
#divMenuGameTypesToggler,
#divPodcastCategoriesToggler,
.sortEntry,
.departmentSwitchOption  {padding:2px;padding-left:30px;padding-right:30px;text-overflow: ellipsis; }

#divSortTitles                                                                                          {padding-bottom:20px;margin-top:15px;}
#divCategories div[data-category_id], #divArticleBranchTypes div[data-branchtype_id]                    {cursor:pointer;padding-left:45px;}
#divCategories div[data-category_id].active, #divArticleBranchTypes div[data-branchtype_id].active      {font-weight: bold;}

#divSortTitles div.sortEntry                                        {cursor:pointer;}
#divSortTitles div.sortEntry.active                                 {font-weight: bold;}

#divBranchTypesAll {margin-top:20px;}

/* department switcher (default)*/

#divDepartmentSwitcher              { margin-bottom:25px;}
.departmentSwitchOption             { cursor:pointer;margin-bottom:20px;padding-left:45px;}
.departmentSwitchOption.active      { font-weight: bold; }

/* country switcher */

#divCountryToggler                                          {width:280px;margin:auto; margin-top:10px; overflow: hidden;} 
#divCountryToggler .flagSectionWrapper                      {display: flex;}
#divCountryToggler img.flag                                 {border-radius:8px;width:50px;height:auto;cursor:pointer;}
#divCountryToggler .flagSection:nth-child(1)                {flex-grow: 1;padding-left:25px;}
#divCountryToggler .flagSection:nth-child(1) span           {display:inline-block;margin-top:10px;}
#divCountryToggler .flagSection:nth-child(2)                {flex-shrink: 0;min-width:30px;text-align:center;}
#divCountryToggler .flagSection:nth-child(2) img            {margin-top:10px; width:20px;height:auto; }
#divCountryToggler .flagSection:nth-child(2) img.flipped    {transform: scaleY(-1); }
#divCountryToggler .flagSection:nth-child(3)                {flex-shrink: 0; min-width:60px; text-align:center;}
.flagChoices                                                {padding-left:25px; padding-top:5px; display: flex; flex-wrap: wrap;}
.flagChoices img                                            {margin-top:10px; margin-right:10px;display:inline-block;}

@media (max-width: 600px)                                   { #divCountryToggler .flagSection:nth-child(2) img { width:20px; }}

/* category toggler */

#divCategoryToggler                                             {display: flex; justify-content: space-between;cursor:pointer; margin-top:15px; }
#divCategoryToggler span:last-child                             {margin-left: auto;}
#divCategoryToggler span:last-child img                         {width:20px;height:auto;}
#divCategoryToggler span:last-child img.flipped                 {transform: scaleY(-1);}
#divCategories [data-category_id],#divCategoryToggler           {margin-bottom:20px;}

/* branchtype toggler */

#divBranchTypeToggler                                           {display: flex; justify-content: space-between;cursor:pointer;margin-top:15px;}
#divBranchTypeToggler span:last-child                           {margin-left: auto;}
#divBranchTypeToggler span:last-child img                       {width:20px;height:auto;}
#divBranchTypeToggler span:last-child img.flipped               {transform: scaleY(-1);}
#divArticleBranchTypes [data-branchtype_id],#divCategorydivBranchTypeTogglerToggler    {margin-bottom:20px;}

/* department toggler */
#divDepartmentToggler                                           {display: flex; justify-content: space-between;margin-top:15px;margin-bottom:20px; }
#divDepartmentToggler span:last-child                           {margin-left: auto;}
#divDepartmentToggler span:last-child img                       {width:20px;height:auto;}
#divDepartmentToggler span:last-child img.flipped               {transform: scaleY(-1);}


/* ################################### Article Reader ######################################### */

#divArticle                     
{
    text-align:center;
    overflow:hidden; 
    position:fixed; 
    top:0px;
    left:0px; 
    margin-top: calc(var(--headerHeight)); 
    height: calc(100% - var(--headerHeight));
    width:100vw; 
    font-size:0px;
    border:0px solid green;
    
}

#divArticle:has(#divInlineFooterMenu:not(.hidden))   
{
    height: calc(100% - var(--headerHeight) - var(--footerHeight) );
    margin-bottom: calc(var(--footerHeight)); 
}

#divArticle.noNavigationOverlap                     
{
    height: calc(100% - var(--headerHeight) - var(--footerDesktopNavigationHeight) );
}

#divArticle.observeMaxWidth                                             {max-width: var(--maxWidth);left:50%;transform: translateX(-50%);}
#divArticleImages                                                       {height: 100%;position: relative;white-space: nowrap;font-size:0px;}

#divArticleImages .divImgWrapper                                           
{
    width:  var(--imageReaderWidth);
    height: var(--imageReaderHeight);
    overflow:hidden;
    margin:0px;
    padding:0px;
    position:relative;
    text-align:center;
    display:inline-block;
    top:50%;
    transform: translateY(-50%);
}

#divArticleImages .divImgWrapper div
{
    top:0px;
    left:0px;
    display:inline-block; 
    position:absolute; 
    width:  100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin:0px;
    padding:0px;
    overflow:hidden;

}

#divArticle[data-quantity_pages="2"] #divArticleImages .divImgWrapper:first-child div  {left:1px; /* for pixel rounding to avoid line in middle */}

/* inline article footer */

#divInlineFooterMenu
{
    position:fixed;
    bottom:0px;
    left:0px;
    width:100%; 
    height:var(--footerHeight); 
    padding:0px;
    text-align:left;
    background-color:var(--colorFooterBackground);
    z-index:1;
    display: flex;
    justify-content: space-between;
    visibility: hidden;
    padding-left:20px;
    padding-right:20px;
    
}


#divInlineFooterMenu:has(.block:not(.hidden))   {visibility: visible; }
#divInlineFooterMenu .block                     {min-width:30px;min-height:30px;text-align:center;position:relative;width: fit-content;  display: flex;flex-direction: column;padding-bottom:5px;cursor:pointer;}
#divInlineFooterMenu .block .wrapper            {border:0px solid yellow;position:relative;bottom:0px;left:0px; /* width: fit-content; */ width:80px; margin-top: auto;}
#divInlineFooterMenu .block .top                {}
#divInlineFooterMenu .block .bottom             { font-size:10px;text-align:center;padding-top:4px;white-space: nowrap; text-overflow: ellipsis;overflow:hidden; color:var(--colorFooterFont);}
#divInlineFooterMenu .block img.icon            { width:27px;height:27px; }

#divInlineFooterMenu .block.toc .top            {position:relative;}
#divInlineFooterMenu .block.toc .top img        {width:40px;height:auto;position:absolute;bottom:0px;left:50%;   transform: translateX(-50%); border-radius:8px 8px 0px 0px;cursor:pointer;border:2px solid var(--colorFooterBackground);}
#divInlineFooterMenu .block.toc .bottom         {text-align:center;}

#divInlineFooterMenu[data-quantity_active="1"]:has(.toc.hidden)         {justify-content: center;}
#divInlineFooterMenu[data-quantity_active="2"] .block:nth-child(2)      { position: absolute; left: 50%; transform: translateX(-50%);  bottom: 0; }


#divPlatform:has(.popoverBlock:not(.hidden)) #divInlineFooterMenu       { display: none; }
#divPlatform:has(.popoverBlock:not(.hidden)) #divMainExtendedNavigation { display: none; }

/* ---------------------------------- (desktop) simplified-navigation ------------------------------------------- */

#divArticleNavigation
{
    position:fixed;
    bottom:0px;
    left:0px;
    width:200px;
    left:50%;
    transform: translateX(-50%);
    background-color: var(--colorMainBackground);
    border-radius: 10px 10px 0 0;
    opacity:0.8;
}

#divArticleNavigation               {font-size:var(--fontSizeBody);color: var(--colorMainFont);}
#divArticleNavigation img           {width:23px;height:23px;margin-top:5px;cursor:pointer;}
#tableArticleNavigation td          {padding:5px;text-align:center;position:relative;}
#divArticleNavigation img.inactive  {opacity:0.4;cursor:auto;pointer-events: none;}
/* ---------------------------------- (desktop) extended-navigation ------------------------------------------- */

#divArticleExtendedNavigation
{
    position:fixed;
    bottom:0px;
    left:0px;
    width:100%; /* ipv 800px */
    left:50%;
    transform: translateX(-50%);
    background-color: var(--colorFooterBackground);
    /* border-radius: 15px 15px 0 0; */
    font-size:var(--fontSizeBody);
    color: var(--colorFooterFont);
    height:var(--footerDesktopNavigationHeight);

}

#tableArticleExtendedNavigation                         {height:100%;width: var(--maxWidth);margin:auto;}
#tableArticleExtendedNavigation td                      {overflow:hidden;}
#tableArticleExtendedNavigation input[type="text"]      {color:var(--colorFooterFont); border-radius:5px;border:1px solid var(--colorFooterFont); width:55px; background-color: var(--colorFooterBackground); text-align:center; height: 30px;}


#tableArticleExtendedNavigationLeftBlock                        {margin-top:5px;margin-bottom:5px;}
#tableArticleExtendedNavigationLeftBlock td                     {overflow:hidden;}
#tableArticleExtendedNavigationLeftBlock img                    {height:14px;width:auto;margin-top:4px;}
#tableArticleExtendedNavigationLeftBlock img.inactive           {opacity:0.4;cursor:auto;pointer-events: none;}
#tableArticleExtendedNavigationLeftBlock td:nth-child(1) img    {transform: rotate(90deg); }
#tableArticleExtendedNavigationLeftBlock td:nth-child(4) img    {transform: rotate(-90deg); }

#tableArticleExtendedNavigationCenterBlock img                  {height:22px;width:auto;margin-top:5px;}

#tableArticleExtendedNavigation input[type="range"]                                  {width:95%;margin-top:8px;}
#tableArticleExtendedNavigation input[type="range"]::-webkit-slider-thumb 		     {-webkit-appearance: none;border: 1px solid var(--colorFooterFont);height: 15px;width: 15px;border-radius: 50%;background: var(--colorFooterFont); cursor: pointer;box-shadow: 1px 1px 1px var(--colorFooterFont), 0px 0px 1px var(--colorFooterFont); margin:-7px;}
#tableArticleExtendedNavigation input[type="range"]::-webkit-slider-runnable-track   {height: 3px;cursor: pointer;background: var(--colorFooterFont);border-radius: 1.3px;border: 0px;}
#tableArticleExtendedNavigation input[type="range"]::-moz-range-thumb                {box-shadow: 1px 1px 1px var(--colorFooterFont),0 0 1px var(--colorFooterFont);height: 8px;width: 8px;background: var(--colorFooterFont);border:0px;}
#tableArticleExtendedNavigation input[type="range"]::-moz-range-track                {background: var(--colorFooterFont);}

#divArticleExtendedNavigationRightBlock                                             {display: flex;justify-content: center; align-items: center; }
#divArticleExtendedNavigationRightBlock img                                         {height:22px;width:auto;margin-left:25px;}
#spanExtendedTotalPages                                                             {margin-left:4px;}


.divExtNav              {position:fixed;width:40px;height:calc(100% - var(--footerDesktopNavigationHeight) - var(--headerHeight) );top:var(--headerHeight); display: flex;justify-content: center; align-items: center; }
.divExtNav:hover        {background-color:var(--colorMainBackground); opacity: 0.6;}
.divExtNav img          {width:90%;height:auto;}
#divExtNavLeft          {left:0px;}
#divExtNavRight         {right:0px;}
.divExtNav.inactive     {display:none;}

/* ---------------------------------- article thumbs ------------------------------------------- */

#divArticleThumbs{

    position:fixed;
    bottom:0px;
    left:0px;
    width:100%;
    height:auto;  
    background-color: var(--colorFooterBackground);
    padding:10px;
    z-index:1;
}


#divArticleThumbsListing {
    white-space:nowrap;
    width:100%;
    overflow:auto;
    overflow-y:hidden;
}

#divArticleThumbsListing .divImgWrapper{
    display:inline-block;
    position:relative;
    border:0 solid red;
    user-select:none
}

#divArticleThumbsListing .divImgWrapper img {

    width:auto;
    height:160px;
    margin:5px;
    cursor:pointer;
    outline:none;
    border-radius: var(--radiusMagazine);
}

#divArticleThumbsListing .thumbSubScript {
    display:inline-block;
    position:absolute;
    text-align:center;
    bottom:19px;
    left:50%;
    transform:translateX(-50%);
    margin:auto;
    font-size:var(--fontSizeBody);
    background-color:inherit;
    border-radius:0px;
    min-width:30px;
    padding:2px;
    padding-bottom:4px;
    vertical-align:middle;
    background-color: var(--colorFooterBackground);
    color: var(--colorFooterFont);
  }


#divArticleThumbsSlider {
    padding-top:20px;
    padding-bottom:20px;
} 


#divArticleThumbsSlider input[type="range"]                                  {width:95%;}
#divArticleThumbsSlider input[type="range"]::-webkit-slider-thumb 		     {-webkit-appearance: none;border: 1px solid var(--colorFooterFont);height: 15px;width: 15px;border-radius: 50%;background: var(--colorFooterFont); cursor: pointer;box-shadow: 1px 1px 1px var(--colorFooterFont), 0px 0px 1px var(--colorFooterFont); margin:-7px;}
#divArticleThumbsSlider input[type="range"]::-webkit-slider-runnable-track   {height: 3px;cursor: pointer;background: var(--colorFooterFont);border-radius: 1.3px;border: 0px;}
#divArticleThumbsSlider input[type="range"]::-moz-range-thumb                {box-shadow: 1px 1px 1px var(--colorFooterFont),0 0 1px var(--colorFooterFont);height: 15px;width: 15px;background: var(--colorFooterFont);border:0px;}
#divArticleThumbsSlider input[type="range"]::-moz-range-track                {background: var(--colorFooterFont);}


/* ################################### PRIVATE ######################################### */

/* ---- side menu items ----- */



#divPrivateView {}
#divPrivateView .sortEntry  { position:absolute;top:50%; left:0px;transform: translateY(-50%);}
#divPrivateView span {position:relative;}
#divPrivateView img  {position:absolute;top:50%;transform: translateY(-50%);}

/* ---- private main block ----- */

#divPrivate                                 { font-size: var(--fontSizeBody); position:fixed;left:0px;top:var(--headerHeight);bottom:var(--footerHeight); width:100%;background-color: var(--colorMainBackground);overflow:auto; }
#divPrivate div[data-category_id="0"]       { padding-top:20px; }

#divPrivate .imgWrapper                     { border:0px solid red; display:inline-block; overflow:hidden; position:relative; width:calc( var(--imagePrivateArticleWidth) + (2 * var(--blockBorderWidth)) );  text-align:center; height:calc(1.3 * var(--imagePrivateArticleHeight));}
#divPrivate .imgWrapper img:not(.icon)      { width: var(--imagePrivateArticleWidth); height: var(--imagePrivateArticleHeight); cursor:pointer; margin:var(--blockBorderWidth); margin-bottom:calc(var(--blockBorderWidth) / 2); }
#divPrivate .articleCaption img.icon        { position:absolute; right:5px;top:2px; width:17px; height:17px; }
#divPrivate .articleCaption                 { text-align:center; display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; white-space: normal ;}

@media (max-width: 600px)   
{
    #divPrivate .articleCaption             {text-align:left;}
}

#divPrivateTitles                           {text-align:center;max-width:var(--maxWidth);margin:auto;}

/* ################################### SEARCH ######################################### */

#divSearchBlock                             {max-width:var(--searchSectionMaxWidth);border:0px solid red; margin:auto; padding:10px;}
#divSearchInput                             {padding-top:0px;text-align:center;}
#divSearchInput input                       {background-repeat:no-repeat; background-size:20px 20px; background-position: right 5px center; padding-right:30px;}

/* ------------ categories -------------------- */

#divSearchCategories                        {font-size:0px;text-align:center;min-height:50px;margin:auto;padding-top:20px;} 
#divSearchCategories .blockWrapper          {border:1px solid var(--colorMainBackground);margin:3px;margin-bottom:0px;display:inline-block; width:var(--categoryBlockWidth); height:var(--categoryBlockWidth);position:relative;cursor:pointer;}
#divSearchCategories .blockWrapper.noimage  {border:1px solid var(--colorMainFont);}
#divSearchCategories .blockImage            {background-repeat: no-repeat; background-position: center center; background-size: cover; width:100%; height:100%; opacity:0.5;}
#divSearchCategories .blockText             {font-size:var(--fontSizeBody); text-align:center; position:absolute; top:50%; transform: translateY(-50%);left:0px;border:0px solid red; width:100%; font-weight:bold; text-overflow: ellipsis;}


/* ------------ search results -------------------- */

#divSearchResults                                           {padding-top:20px;overflow:hidden;}
#tableSearchTabs td                                         {position:relative;padding-bottom:10px;cursor:pointer;color:var(--colorHighlightBackground);}
#tableSearchTabs td.active::after                           {content:' '; border-bottom:1px solid var(--colorHighlightBackground); width:90%; position:absolute; left:0px; bottom:0px; }
#tableSearchTabs td:last-child.active::after                {right:0px;left:auto;width:100%;}

#divResultsMagazinesListing, #divResultsNewspapersListing                               {white-space:nowrap; overflow:auto; }
#divResultsMagazinesListing .imgWrapper, #divResultsNewspapersListing .imgWrapper       {display:inline-block;overflow:hidden;position:relative;}
#divResultsMagazinesListing img                                                         {width:  var(--imageArticleWidth); height: var(--imageArticleHeight);cursor:pointer;margin:var(--blockBorderWidth);margin-bottom:calc(var(--blockBorderWidth) / 2);}
#divResultsNewspapersListing img                                                        {width:  var(--imageNewspaperWidth);height: var(--imageNewspaperHeight);cursor:pointer;margin:var(--blockBorderWidth);margin-bottom:calc(var(--blockBorderWidth) / 2);}
#divNoResultsTab1, #divNoResultsTab2                                                    {text-align:center;padding-top:40px;}
#divResultsArticles                                                                     {padding-top:40px;}

/* ------------ deepsearch blocks -------------------- */

.divDeepsearchBlock                 { border-radius: var(--radiusContainer); position:relative;margin-bottom:20px;cursor:pointer;background-color: var(--colorContainerBackground);color: var(--colorContainerFont);}
.divDeepsearchBlock .deepDiv1       { margin-bottom:7px; padding:2px;padding-top:15px;  font-weight:bold; font-size:18px; white-space: nowrap; overflow:hidden; text-overflow: ellipsis;}
.divDeepsearchBlock .deepDiv2       { margin-bottom:7px; padding:2px; white-space: nowrap; font-size:14px; overflow:hidden;  text-overflow: ellipsis;}
.divDeepsearchBlock .deepDiv3       { margin-bottom:7px; font-size:14px; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.divDeepsearchBlock .deepDiv4       { font-size:12px; vertical-align:top; opacity:0.9; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-top:3px;}
.divDeepsearchBlock .deepDiv4.short { -webkit-line-clamp: 2; }
.divDeepsearchBlock .deepTable      { border:0px solid red; height:150px;}
.divDeepsearchBlock .deepTable td   { padding-left:15px;overflow:hidden;border:0px solid blue;height:100%;vertical-align:top;}
.divDeepsearchBlock .deepTable td:last-child    { width:100px; text-align:center; position:relative;}
.divDeepsearchBlock .imgBlock                   { border-radius: 0px var(--radiusContainer) var(--radiusContainer) 0px; width:100% ; height:100% ; overflow:hidden; display:inline-block; background-repeat: no-repeat; background-position: top center; background-size: cover;   top:50%; left:50%;position:absolute;transform:translate(-50%,-50%); /* border: 8px solid var(--colorContainerBackground); */    }
.divDeepsearchBlock span.highlighted            { background-color: var(--colorContainerFont); color: var(--colorContainerBackground);}

@media (min-width: 601px)   
{
    .divDeepsearchBlock 
    {
         display:inline-block;
         flex-basis: calc(50% - 5px); 
         max-width: calc(50% - 5px); 
         display: inline-block;
         margin-bottom:10px;
    }

    #divResultsArticles                                                                     
    {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between; 
    }

}

/* ################################### HTML VERSION ######################################### */

.divHtmlContent                 {margin-top:var(--htmlHeaderHeight);}
.htmlReader .highlighted        {background-color:var(--colorHtmlFont); color: var(--colorHtmlBackground); }


/* ------------ html block-------------------- */

#divHtmlWrapper                  {z-index:2;position:fixed; top:0px;  left:0px;width:100%;height: 100%; text-align:left;background-color:var(--colorHtmlBackground);color:var(--colorHtmlFont);overflow:auto;}
#divHtmlWrapper .header          {position:fixed;height:var(--htmlHeaderHeight);background-color:var(--colorHtmlBackground);}
#spanHtmlDurationMessage         {font-size: var(--fontSizeHtmlControllers);}
#tableHtmlheader                 {height:100%;}
#tableHtmlheader td              {padding:5px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;}
#tableHtmlheader td:last-child   {width:50px;text-align:right;}
#tableHtmlheader td:first-child  {width:50px;}
#tableHtmlheader.hasSpeechBlock td:nth-child(1) {visibility: hidden;}
#tableHtmlheader.hasSpeechBlock td:nth-child(2) {visibility: hidden;}
#imgPlay.blocked,#spanHtmlDurationMessage.blocked {opacity:0.3;pointer-events: none;}


/* ------------ html audio-------------------- */

input[name="inputAudioSlider"]                                  {width:100%;}
input[name="inputAudioSlider"]::-webkit-slider-thumb 		    {-webkit-appearance: none;border: 1px solid var(--colorHtmlFont);height: 15px;width: 15px;border-radius: 50%;background: var(--colorHtmlFont); cursor: pointer;box-shadow: 1px 1px 1px var(--colorHtmlFont), 0px 0px 1px var(--colorHtmlFont); margin:-7px;}
input[name="inputAudioSlider"]::-webkit-slider-runnable-track   {height: 3px;cursor: pointer;background: var(--colorHtmlFont);border-radius: 1.3px;border: 0px;}
input[name="inputAudioSlider"]::-moz-range-thumb                {box-shadow: 1px 1px 1px var(--colorHtmlFont),0 0 1px var(--colorHtmlFont);height: 15px;width: 15px;background: var(--colorHtmlFont);border:0px;}
input[name="inputAudioSlider"]::-moz-range-track                {background: var(--colorHtmlFont);}

#divHtmlSpeechPlayer {position:relative;}
#spanCurrentSec      {position:absolute; top:14px; font-size:var(--fontSizeBody); left:0px;   margin-left: 10px; }
#spanDurationSec     {position:absolute; top:14px; font-size:var(--fontSizeBody); right: 0px; text-align: right; }
#inputAudioSlider    {z-index:1;}
#imgPause            {width:30px;height:30px;}
#imgClose            {width:35px;height:35px;}

/* ################################### HIGHLIGHTS ######################################### */

#divHighlights > div            { max-width:var(--maxWidth); margin:auto; padding-top: var(--blockBorderWidth); width:calc(100% - 24px); /* width: 95%; */  }
#divHighlights                  {}

@media (max-width: 600px)   
{
  
     .highlightTable         {display:block;height:auto;} 
     .highlightTable tr      {display:block;height:auto;} 
     .highlightTable td,th   {display:block;height:auto;padding:0px; }
     .highlightTable tbody   {display:block;height:auto;}
}

.highlightBlock             { border-radius: var(--radiusContainer); background-color: var(--colorContainerBackground);border-bottom:10px solid var(--colorContainerBackground);  margin:var(--blockBorderWidth); position:relative; color: var(--colorContainerFont); margin-bottom: calc(2 * var(--blockBorderWidth)); } 
@media (max-width: 600px)   { .highlightBlock{margin-left:0px;margin-right:0px;}}

.highlightBlock .highlightBlockClicker      {cursor:pointer; position:absolute; top:0px; left:0px; height:100%; display:inline-block; width:100%;}
.highlightBlock .highlightImageContainer    {border-radius: var(--radiusContainer) var(--radiusContainer) 0px 0px; width: 100%;padding-bottom: 50%;background-size: 100% auto;background-repeat: no-repeat; background-position: top center; }
.highlightBlock .highlightLinesContainer    {padding-top:10px;position:relative;bottom:0px;}
.highlightBlock .highlightLine              {text-overflow: ellipsis; user-select: none; padding-left:10px; padding-right:10px; white-space: nowrap;overflow:hidden;font-size:16px;}
.highlightBlock .highlightLine1             {margin-top:15px;text-transform: uppercase;font-weight:bold;font-size:19px;}
.highlightBlock .highlightLine2             {margin-top:15px;margin-bottom:15px;}
.highlightBlock .highlightLine3             {
    
    margin-bottom:15px;  
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space:normal; 
    height:40px;
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
}

/* ################################### PRIVACY POLICY ######################################### */

/* side menu block */

#divPrivacyPolicy                   {cursor:pointer;position:fixed;height:var(--headerHeight);background-color:var(--colorHeaderBackground);top:calc(100% - 60px); width:100%; /* note overflow-x is hidden for divSideMenu so width 100% is fine */}
#divPrivacyPolicy .sortEntry        {position:absolute;top:50%;left:0px;transform: translateY(-50%);}
#divPrivacyPolicy span              {position:relative;}
#divPrivacyPolicy img               {position:absolute;top:50%;transform: translateY(-50%);}

/* html block */

#divPrivacyWrapper                  { z-index:2; position:fixed;top:0px;left:0px;width:100%;height:100%; text-align:left;background-color:var(--colorHeaderBackground);color:var(--colorHeaderFont);overflow:auto;}
#divPrivacyWrapper .header          { height:var(--htmlHeaderHeight);}
#tablePrivacyHeader                 { height:100%;}
#tablePrivacyHeader td              { padding:5px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;}
#tablePrivacyHeader td:last-child   { width:60px;text-align:right;}
#tablePrivacyHeader td:first-child  { width:50px;}
.divPrivacyContent                  { max-width:var(--maxWidth);margin:auto;}


/* ################################### TOC  ######################################### */

#divArticleTocListing                   { text-align:left; max-width: var(--tocMaxWidth); margin:auto; padding:10px; display:flex; flex-wrap:wrap;justify-content: space-between;}
.divTocBlock                            { border-radius: var(--radiusContainer); position:relative;margin-bottom:20px;cursor:pointer;background-color: var(--colorContainerBackground);color: var(--colorContainerFont);}
.divTocBlock .tocTable                  { height:130px;}
.divTocBlock .tocTable td               { padding-left:15px; padding-right:15px; overflow:hidden;border:0px solid blue;height:100%;vertical-align:top;}
.divTocBlock .tocTable td:last-child    { width:100px; text-align:center; position:relative;}
.divTocBlock .imgBlock                  { border-radius: 0px var(--radiusContainer) var(--radiusContainer) 0px; width:100% ; height:100% ; overflow:hidden; display:inline-block; background-repeat: no-repeat; background-position: top center; background-size: cover;   top:50%; left:50%;position:absolute;transform:translate(-50%,-50%); /* border: 8px solid var(--colorContainerBackground); */    }

.tocDivCommon                           { text-overflow: ellipsis;overflow: hidden; font-size: 12px;}
.tocDiv1                                { margin-bottom:7px; padding:2px;padding-top:15px; font-weight:bold; white-space: nowrap; }
.tocDiv2                                { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; font-weight:bold; text-transform: uppercase; margin-bottom:7px; padding:2px;   }
.tocDiv3                                { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; vertical-align:top; opacity:0.9;  margin-top:3px;}


@media (min-width: 601px)   
{
    .divTocBlock 
    {
         display:inline-block;
         flex-basis: calc(50% - 5px); 
         max-width: calc(50% - 5px); 
         display: inline-block;
         margin-bottom:10px;
    }

}


#divArticleTocHeader        { position:sticky; background-color:var(--colorMainBackground); left:0px; top:0px; z-index:1; }
#divArticleTocHeaderClose   { width:100%; max-width:var(--tocMaxWidth); margin:auto; text-align:right; padding:10px; }


/* ################################### INTERACTIONS  ######################################### */

.interaction                                {display:inline-block;position:absolute; min-height:20px; min-width:20px;overflow:hidden;}
.interaction.clickable                      {cursor:pointer;}
.interaction div.clickableDivOverlay        {cursor:pointer;border:0px solid green;z-index:1;background-color:white;opacity:0;width:100%;height:100%;}
.interaction video, .interaction img        {object-fit: fill;}
.interaction a                              {width:100%; height:100%; display:inline-block;}
.interaction video, 
.interaction iframe, 
.interaction div, 
.interaction img 
{
    width: 100%;
    height: 100%;
}

.interaction[data-publicationlinkagetype="url"],
.interaction[data-publicationlinkagetype="email"]
{
    z-index:1;
}

/* ---------------- interaction effect ---------------------------- */

.effects.perspective                {--a: 4deg;aspect-ratio: 1; transition: transform 2s; animation: perspectiveAnimation 2s;}
@keyframes perspectiveAnimation     {0% {transform: perspective(400px) rotate3d(var(--r, 1, -1), 0, calc(var(--i, 1) * var(--a)));} 50% { transform: perspective(400px) rotate3d(var(--r, 1, -1), 0, calc(var(--i, 1) * var(--a) * 2));} 100% { }}

.effects.zoomout                     {transform: scale(1.5); animation: unzoom-animation 1.5s ease-in-out forwards; } 
@keyframes unzoom-animation          {from { transform: scale(1.5);}to {transform: scale(1);}}

.effects.flipvert                    {transform: scaleY(-1); animation: flip-vert 1s ease-in-out forwards; }
@keyframes flip-vert                 {from { transform: scaleY(-1);}to { transform: scaleY(1);}}

.effects.fliphor                     {transform: scaleX(-1); animation: flip-hor 1s ease-in-out forwards;  }
@keyframes flip-hor                  {from {transform: scaleX(-1);}to { transform: scaleX(1); }}

.effects.unblur                      {filter: blur(8px) saturate(1.5); animation: blur-to-normal 1.5s ease-in-out forwards;} 
@keyframes blur-to-normal            {from { filter: blur(5px) saturate(1.5); } to { filter: none; } }

.effects.greyout                     {filter: grayscale(100%); animation: grayscale-to-color 1s ease-in-out forwards; }
@keyframes grayscale-to-color        {from { filter: grayscale(100%);}to {filter: grayscale(0%);}}

.effects.rotate                      {animation: rotation 2s forwards;}
@keyframes rotation                  {from {transform: rotate(0deg);} to {transform: rotate(360deg);}}

.effects.zoomin                     { transform: scale(0.5); animation: zoomin-animation 1.5s ease-in-out forwards;}
@keyframes zoomin-animation         { from { transform: scale(0.5); } to { transform: scale(1); }}

.effects.flashx1                     {animation: flash-anim 1.5s 1; } 
@keyframes flash-anim                {0% { opacity: 0; filter: brightness(1);}50% { opacity: 1; filter: brightness(1.5);}100% { opacity: 0; filter: brightness(1);}}

.effects.flashx2                     {animation: flash-anim 1.5s 2; } 
@keyframes flash-anim                {0% { opacity: 0; filter: brightness(1);}50% { opacity: 1; filter: brightness(1.5);}100% { opacity: 0; filter: brightness(1);}}

.effects.shake                       { animation: shake 0.5s; animation-iteration-count: 3;} 
@keyframes shake                     { 0%{transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); }}

.effects.scroll                      { animation: scroll 3s linear 1;position:relative;left:0%} 
@keyframes scroll                    { 0% {left: 0%;} 49.9% {left: 100%;} 50% { left: -100%;} 100% {left: 0%;} }

.effects.wobble                      {animation: wobble 1s ease-in-out 2;} 
@keyframes wobble                    {0% {transform: translateX(0%);} 15% { transform: translateX(-25%) rotate(-5deg);} 30% {transform: translateX(20%) rotate(3deg);} 45% { transform: translateX(-15%) rotate(-3deg);} 60% { transform: translateX(10%) rotate(2deg);} 75% {transform: translateX(-5%) rotate(-1deg);} 100% {transform: translateX(0%);}}

.effects.fade                       {animation: fade 1.5s ease-in-out 2;}
@keyframes fade                     {0%, 100% { opacity: 1; } 50% { opacity: 0; }}

.effects.border                     { border: 0px solid var(--colorHighlightBackground);  animation: border 1.5s 3; }
@keyframes border                   { 0% {} 50% {border-width: 5px;} 100% {}}

.effects.bounce                     {animation: bounce 1.5s 2;}
@keyframes bounce                   {0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); }}
  
.effects.swing                      {animation: swing 2s ease-in-out 2;}
@keyframes swing                    {20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); }}

.effects.elastic                    {animation: elastic 1s ease-in-out 2;}
@keyframes elastic                  {0%, 100% { transform: scale(1); } 30% { transform: scale(1.25, 0.75); } 40% { transform: scale(0.75, 1.25); } 50% { transform: scale(1.15, 0.85); } 65% { transform: scale(0.95, 1.05); } 75% { transform: scale(1.05, 0.95); } }
  
.effects.rollin                     {animation: rollin 1s ease-out forwards;}
@keyframes rollin                  {0% { transform: translateX(-100%) rotate(-120deg); opacity: 0; } 100% { transform: translateX(0) rotate(0deg); opacity: 1; }}

/* url effect */
.interaction[data-publicationlinkagetype="url"] { animation: flash-url 1.5s 2;   }
@keyframes flash-url                            { 0% { opacity: 0.3; background-color: transparent; } 50% { opacity: 0.5; background-color: var(--colorMainBackground) } 100% { opacity: 0; background-color: transparent; }}
.interaction[data-appended_url] a               {position:absolute;width:100%;height:100%;z-index:1;}

/* ################################### SEARCH TEXT HIGHLIGHTS  ######################################### */

.searchResultsHighlights
{
    position:absolute;
    background-color:var(--colorHighlightBackground);
    opacity:0.5; 
    border:1px solid var(--colorMainFont);
    overflow:auto;
    border-radius:5px;
}

/* ################################### PODCAST LISTING  ######################################### */

/* divPodcast */

/* #divPlatform:has(#divPodcast:not(.hidden)) header td:last-of-type .icon { display: none; } */ /* hide burger-menu button */

#divPodcastWrapper               { max-width: var(--searchSectionMaxWidth);margin:auto; padding:10px;}
#divPodCastHeading               { height:40px; }

/* global podcast view */

#divPodcastGlobal                { display: flex;flex-wrap: wrap; justify-content: space-between;}
.divPodcastBlock                 { border-radius: var(--radiusContainer); position:relative;margin-bottom:20px;cursor:pointer;background-color: var(--colorContainerBackground);color: var(--colorContainerFont);}
.divPodcastBlock .podcastDiv1    { margin-bottom:7px; padding:2px;padding-top:15px;  font-weight:bold; font-size:18px;  overflow:hidden; display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical}
.divPodcastBlock .podcastDiv2    { margin-bottom:7px; padding:2px; white-space: nowrap; font-size:14px; overflow:hidden;  text-overflow: ellipsis;}

.divPodcastBlock .podcastTable                  { border:0px solid red; }
.divPodcastBlock .podcastTable td               { padding-left:15px;overflow:hidden;border:0px solid blue;height:100%;vertical-align:top; position:relative;}
.divPodcastBlock .podcastTable td:first-child   {  width:100px; height:100px; text-align:center; position:relative;}
.divPodcastBlock .podcastTable td img           { position:absolute;right:10px;width:20px;height:auto;}
.divPodcastBlock .imgBlock                      { border-radius: var(--radiusContainer) 0px 0px var(--radiusContainer);  width:100% ; height:100% ; overflow:hidden; display:inline-block; background-repeat: no-repeat; background-position: center center; background-size: cover;   top:50%; left:50%;position:absolute;transform:translate(-50%,-50%); }

@media (min-width: 601px)   
{
    .divPodcastBlock 
    {
         display:inline-block;
         flex-basis: calc(50% - 5px); 
         max-width: calc(50% - 5px); 
         display: inline-block;
         margin-bottom:10px;
    }
}

/* article podcast view */

#divPodcastArticleImage                 { text-align:center;}
#divPodcastArticleImage .imgBlock       { margin:auto;width:200px;height:200px;border-radius: var(--radiusContainer); overflow:hidden; display:inline-block; background-repeat: no-repeat; background-position: center center; background-size: cover;  }
#divPodcastArticleImage .imgBlock img   { width:100%;height:100%;}
#divPodcastArticleTitle                 {font-weight:bold;padding-top:20px;padding-bottom:20px;text-align:left;}

#divPodcastArticleListing .divAudio             {margin-bottom:20px;border-bottom:1px solid var(--colorMainFont);padding-bottom:10px;}
#divPodcastArticleListing .divAudio:has(input)  {border-bottom:0px;}

#divPodcastArticleListing .audioTable td    {vertical-align:top;}
#divPodcastArticleListing .audioTable tr:first-child td:last-child {width:50px;text-align:center;}
#divPodcastArticleListing .audioTable .div1 {white-space: nowrap;text-overflow: ellipsis;overflow:hidden;}
#divPodcastArticleListing .audioTable .div2 {padding-top:5px;padding-bottom:5px; font-size:12px;opacity:0.5;}

#divPodcastArticleListing .divPLayerLine    {height:2px;}
.imgCircleWrapper                           {display:inline-block; border:2px solid var(--colorMainFont);border-radius:50%;width:40px;height:40px;position:relative; }
.imgCircleWrapper.active                    {border:2px solid var(--colorMainBackground); background-color: var(--colorMainFont);}
.imgCircleWrapper img                       {margin-left:2px;position:absolute;top:50%; left:50%; position:absolute;transform:translate(-50%,-50%); }
.imgCircleWrapper.divPause img              {margin-left:0px;width:22px;height:22px;}

/* podcast player */


#podcatDurationSec              {text-align: right; }


input[name="inputPodcastSlider"]                                  {width:100%;padding:0px;}
input[name="inputPodcastSlider"]::-webkit-slider-thumb 		      {-webkit-appearance: none;border: 1px solid var(--colorMainFont);height: 15px;width: 15px;border-radius: 50%;background: var(--colorMainFont); cursor: pointer;box-shadow: 1px 1px 1px var(--colorMainFont), 0px 0px 1px var(--colorMainFont); margin:-7px;}
input[name="inputPodcastSlider"]::-webkit-slider-runnable-track   {height: 3px;cursor: pointer;background: var(--colorMainFont);border-radius: 1.3px;border: 0px;}
input[name="inputPodcastSlider"]::-moz-range-thumb                {box-shadow: 1px 1px 1px var(--colorHtmlFont),0 0 1px var(--colorMainFont);height: 15px;width: 15px;background: var(--colorMainFont);border:0px;}
input[name="inputPodcastSlider"]::-moz-range-track                {background: var(--colorMainFont);}

#divPodcastPlayer                                                 {}
#divPodcastPlayer table td                                        {position:relative;height:35px;}
#divPodcastPlayer table td img                                    {display: inline-block;  position: absolute;  top: 50%;  left: 50%; transform: translate(-50%, -50%);width:30px;height:30px;}
#divBodyContent > #divPodcastPlayer                               {margin-top:10px;padding:10px;margin-bottom:10px;}

/* podcast catgories side menu */

#divPodcastCategoriesToggler                                                    {display: flex; justify-content: space-between;cursor:pointer;margin-top:15px;}
#divPodcastCategoriesToggler span:last-child                                    {margin-left: auto;}
#divPodcastCategoriesToggler span:last-child img                                {width:20px;height:auto;}
#divPodcastCategoriesToggler span:last-child img.flipped                        {transform: scaleY(-1);}
#divPodcastCategories [data-podcastcategory_id],#divPodcastCategoriesToggler    {margin-bottom:20px;}

#divPodcastCategories div[data-podcastcategory_id]                              {cursor:pointer;padding-left:45px;}
#divPodcastCategories div[data-podcastcategory_id].active                       {font-weight: bold;}

#divPlatform:has(#divPodcast:not(.hidden)) #divCategories                       { display: none; } 
#divPlatform:has(#divPodcast:not(.hidden)) #divSortTitles                       { display: none; } 
#divPlatform:has(#divPodcast.hidden) #divPodcastCategories                      { display: none; } 

/* ################################### BOOKMARKS  ######################################### */

#divArticle[data-is_private="1"] #imgBookmarkDesktop[data-allow_private_documents="0"]  { display:none; }
#divBookmarkIcon                                                                        {text-align:center;position:absolute;top:0px;left:0px;width:100%;height:100%;}
#divBookmarkIcon img                                                                    { position:absolute;top: 50%;  transform: translateY(-50%);}

/* ----- side menu ------  */ 

#divBookmarks                       {margin-top:20px;margin-bottom:20px;position:relative;padding-left:40px;}
#divBookmarks img                   {position:absolute;left:30px;top:50%;transform: translateY(-50%);}
#divBookmarks .sortEntry            {cursor:pointer;}
#divBookmarks .sortEntry.active     {font-weight:bold;}

/* ----- popover ------  */ 

#divBookmarkPopoverListing       { text-align:left; max-width: var(--bookmarksMaxWidth); margin:auto; padding:10px; }
#divBookmarkPopoverHeader        { position:sticky; background-color:var(--colorMainBackground); left:0px; top:0px; z-index:1; }
#divBookmarkPopoverHeaderClose   { margin:auto; margin-top:15px; width:100%; max-width:var(--bookmarksMaxWidth); text-align:right; padding:10px; font-size:var(--fontSizeBod); }

#divBookmarkPopoverHeaderClose table td:nth-child(1)    {width:40px;text-align:center;}
#divBookmarkPopoverHeaderClose table td:nth-child(1) img {cursor:auto;}
#divBookmarkPopoverHeaderClose table td:nth-child(2)    {text-align:left;}
#divBookmarkPopoverHeaderClose table td:nth-child(3)    {width:40px;text-align:center;}

#divBookmarkPopoverListing              {}
#divBookmarkPopoverListing .noResults   { text-align:center;padding:20px;width:100%;}
#divBookmarkPopoverListing .section     { display: flex; flex-wrap: wrap; justify-content: space-between;}

.divBookmarkBlock                                   { border-radius: var(--radiusContainer); position:relative;margin-bottom:20px;cursor:pointer;background-color: var(--colorContainerBackground);color: var(--colorContainerFont);}
.divBookmarkBlock .bookmarkTable                    { border:0px solid red; height:150px;}
.divBookmarkBlock .bookmarkTable td                 { position:relative; padding-left:15px;overflow:hidden;border:0px solid blue;height:100%;vertical-align:top;}
.divBookmarkBlock .bookmarkTable td:last-child      { width:100px; text-align:center; position:relative;}
.divBookmarkBlock .imgBlock                         { border-radius: 0px var(--radiusContainer) var(--radiusContainer) 0px; width:100% ; height:100% ; overflow:hidden; display:inline-block; background-repeat: no-repeat; background-position: top center; background-size: cover;   top:50%; left:50%;position:absolute;transform:translate(-50%,-50%);    }
.bookmarkDivCommon                                  { margin-bottom:5px; padding:2px;margin-top:5px; text-overflow: ellipsis;overflow: hidden; font-size: 12px;}
.bookmarkDiv1                                       { padding-top: 15px; margin-bottom: 7px; font-weight:bold; white-space: nowrap; }
.bookmarkDiv2                                       { margin-bottom:7px; padding:2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; font-weight:bold; text-transform: uppercase;    }
.bookmarkDiv3                                       { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; vertical-align:top; opacity:0.9; }
.bookmarkDiv4                                       { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; vertical-align:top; opacity:0.9; }
.bookmarkDiv5                                       { padding-left:15px; padding-bottom:3px; position:absolute;bottom:0px;left:0px;width:100%; }
.bookmarkDiv5 img                                   { width:20px; height:auto; }

@media (min-width: 601px)   
{
    .divBookmarkBlock 
    {
         display:inline-block;
         flex-basis: calc(50% - 5px); 
         max-width: calc(50% - 5px); 
         display: inline-block;
         margin-bottom:10px;
    }

}


/* ----- add confirmation block ------  */ 

#bookmarkConfirmer                          
{
    width:100px;
    margin:auto;
    background-color:var(--colorMainBackground);
    max-width:300px;
    position:absolute;
    display: inline-block; 
    top: 50%;  
    left: 50%; 
    transform: translate(-50%, -50%);
    border-radius:15px;
    color:var(--colorMainFont);
    font-size:12px;
    animation: confirmFader 1.5s forwards;
    height:70px;
}

@keyframes confirmFader {0% {opacity: 0.5;} 50% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0.5; }}

#bookmarkConfirmer div:first-child         {padding-top:5px;}
#bookmarkConfirmer div:first-child img     {height:40px;width:auto;}
#bookmarkConfirmer div:last-child          {text-align:center;padding:5px; position:absolute;bottom:0px;left:0px;width:100%; }
#bookmarkConfirmer div                     {overflow:hidden;text-overflow: ellipsis;white-space: nowrap;}


/* ----- deletion bookmark ------  */ 

.bookmarkDeletionWarning        {animation: bookmarkWarningIn 0.3s forwards; width:100%;height:100%;background-color:var(--colorContainerBackground);position:absolute;left:0px;top:0px;}
@keyframes bookmarkWarningIn    {0% {left: 50%; } 100% {left: 0%;}}
.bookmarkDeletionWarning img    {width:50px;height:auto; display: inline-block;  position: absolute;  top: 50%;  left: 50%; transform: translate(-50%, -50%);}

/* ################################### OFFLINE MODE  ######################################### */

#divPlatform[data-is_online="0"] header .icon                                                               {display:none;}
#divPlatform[data-is_online="0"] footer .iconWrapper                                                        {display:none;}
#divPlatform[data-is_online="0"] #divBanner                                                                 {display:none;}
#divPlatform[data-is_online="0"] #divHtml                                                                   {display:none;}
#divPlatform[data-is_online="0"] #divAllTitles                                                              {display:none;}
#divPlatform[data-is_online="0"] #imgOfflineCloseButton                                                     {display:none;}
#divPlatform[data-is_online="0"] #divArticleExtendedNavigationRightBlock .icon[data-filename="search.svg"]  {display:none;} 
#divPlatform[data-is_online="0"]:has(#divArticle:not(.hidden)) header td:first-of-type .icon                {display: inline-block;} /* allow back button */
#divPlatform[data-is_online="0"] #tableHtmlheader td:not(:last-child)                                       {visibility: hidden;}


#divResultsMagazines .divCaptionIcon img.icon {display:none;}
#divBranches .divCaptionIcon,#divAllTitles .divCaptionIcon                              {text-align:left; overflow:hidden; width:100%;position:absolute; bottom:15px; left:0px; height:20px;} 
#divBranches .divCaptionIcon img.icon, #divAllTitles .divCaptionIcon img.icon           {position:absolute; right:0px;top:-5px; width:17px; height:17px; background-color:var(--colorMainBackground);}
#divBranches .divCaptionIcon .downloaded, #divAllTitles .divCaptionIcon .downloaded     {cursor:auto;}
.imgWrapper .divLoaderWrapper                                                           {position:absolute;top:0px;left:0px;width:100%; height:100%;}



/* ----- side menu ------  */ 

#divOffline                       {margin-top:20px;margin-bottom:20px;position:relative;padding-left:40px;}
#divOffline img                   {position:absolute;left:30px;top:50%;transform: translateY(-50%);}
#divOffline .sortEntry            {cursor:pointer;}
#divOffline .sortEntry.active     {font-weight:bold;}

/* offline content -------- */

#divOfflinePopoverHeader        { position:sticky; background-color:var(--colorMainBackground); left:0px; top:0px; z-index:1; }
#divOfflinePopoverHeaderClose   { margin:auto; margin-top:15px; width:100%; max-width:var(--offlineMaxWidth); text-align:right; padding:10px; font-size:var(--fontSizeBod); }
#divOfflinePopoverHeaderClose table td:nth-child(1)    {width:40px;text-align:center;}
#divOfflinePopoverHeaderClose table td:nth-child(1) img {cursor:auto;}
#divOfflinePopoverHeaderClose table td:nth-child(2)    {text-align:left;}
#divOfflinePopoverHeaderClose table td:nth-child(3)    {width:40px;text-align:center;}

#divOfflinePopoverListing              { text-align: left; max-width: var(--offlineMaxWidth); margin: auto; padding: 10px;display: flex;flex-wrap: wrap;justify-content: space-between;}
#divOfflinePopoverListing .noResults   { text-align:center;padding:20px;width:100%;}
#divOfflinePopoverListing .section     { display: flex; flex-wrap: wrap; justify-content: space-between;}

.divOfflineBlock                                  { border-radius: var(--radiusContainer); position:relative;margin-bottom:20px;cursor:pointer;background-color: var(--colorContainerBackground);color: var(--colorContainerFont);}
.divOfflineBlock .offlineTable                    { border:0px solid red; height:150px;}
.divOfflineBlock .offlineTable td                 { position:relative; padding-left:15px;overflow:hidden;border:0px solid blue;height:100%;vertical-align:top;}
.divOfflineBlock .offlineTable td:last-child      { width:100px; text-align:center; position:relative;}
.divOfflineBlock .imgBlock                        { border-radius: 0px var(--radiusContainer) var(--radiusContainer) 0px; width:100% ; height:100% ; overflow:hidden; display:inline-block; background-repeat: no-repeat; background-position: top center; background-size: cover;   top:50%; left:50%;position:absolute;transform:translate(-50%,-50%);    }
.offlineDivCommon                                 { margin-bottom:5px; padding:2px;margin-top:5px; text-overflow: ellipsis;overflow: hidden; font-size: 12px;}
.offlineDiv1                                      { padding-top: 15px; margin-bottom: 7px; font-weight:bold; white-space: nowrap; }
.offlineDiv2                                      { margin-bottom:7px; padding:2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; font-weight:bold; text-transform: uppercase;    }
.offlineDiv3                                      { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; vertical-align:top; opacity:0.9; }
.offlineDiv4                                      { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; vertical-align:top; opacity:0.9; }
.offlineDiv5                                      { padding-left:15px; padding-bottom:3px; position:absolute;bottom:0px;left:0px;width:100%; }
.offlineDiv5 img                                  { width:20px; height:auto; }


@media (min-width: 601px) {
    .divOfflineBlock {
        display: inline-block;
        flex-basis: calc(50% - 5px);
        max-width: calc(50% - 5px);
        display: inline-block;
        margin-bottom: 10px;
    }
}

/* ----- deletion offline  ------  */ 

.offlineDeletionWarning        {animation: offlineWarningIn 0.3s forwards; width:100%;height:100%;background-color:var(--colorContainerBackground);position:absolute;left:0px;top:0px;}
@keyframes offlineWarningIn    {0% {left: 50%; } 100% {left: 0%;}}
.offlineDeletionWarning img    {width:50px;height:auto; display: inline-block;  position: absolute;  top: 50%;  left: 50%; transform: translate(-50%, -50%);}

/* ################################### GAMES  ######################################### */

/* ----- side menu ------  */ 

/* type toggler */

#divMenuGameTypesToggler                                           {display: flex; justify-content: space-between;cursor:pointer;margin-top:15px;}
#divMenuGameTypesToggler span:last-child                           {margin-left: auto;}
#divMenuGameTypesToggler span:last-child img                       {width:20px;height:auto;}
#divMenuGameTypesToggler span:last-child img.flipped               {transform: scaleY(-1);}
#divMenuGameTypes [data-gamestype_id],#divMenuGameTypesToggler     {margin-bottom:20px;}

#divMenuGameTypes div[data-gamestype_id]                            {cursor:pointer;padding-left:45px;}
#divMenuGameTypes div[data-gamestype_id].active                     {font-weight: bold;}

/*
#divCategories div[data-category_id], #divArticleBranchTypes div[data-branchtype_id]                    {cursor:pointer;padding-left:45px;}
#divCategories div[data-category_id].active, #divArticleBranchTypes div[data-branchtype_id].active      {font-weight: bold;}
*/

/* listing section */

#divGamesListing                                {text-align:center;margin:auto;}


/* ----- blocks ------  */ 

.divGamesBlock                                  { cursor:pointer; color: var(--colorContainerFont); background-color: var(--colorContainerBackground); margin:var(--blockBorderWidth);width:var(--imageArticleWidth); height:var(--imageArticleWidth); overflow:hidden; display:inline-block;  position: relative;   }
.divGamesBlock .imgBlock                        { width:100%;height:60%;overflow:hidden; display:inline-block; background-repeat: no-repeat; background-position: top center; background-size: cover;}
.gamesDiv1                                      { padding:10px;text-align:left;font-weight:bold;font-size:12px;overflow:hidden;text-overflow: ellipsis;white-space:nowrap; padding-top:5px;}
.gamesDiv2                                      { padding:10px;text-align:left;font-size:12px;overflow:hidden;text-overflow: ellipsis;white-space:nowrap; padding-top:0px; opacity:0.8;}

/* ------------ platform -------------------- */


#divGamesPlatform                 {z-index:2;position:fixed; top:0px;  left:0px;width:100%;height: 100%; text-align:left;color:var(--colorMainFont);overflow:auto;}
#divGamesPlatform .header         {position:fixed;height:var(--htmlHeaderHeight);overflow:hidden;width:100%; z-index:1; display: flex; justify-content: flex-end;  align-items: center; }
#tableGamesheader                 {height:100%;width:100px; background-color:var(--colorMainBackground);opacity:0.7;}
#tableGamesheader td              {padding:5px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap; text-align:center; }
#tableGamesheader td img.icon     {margin-top:5px;}
#divGameContent                   {height:100%; background-color:var(--colorMainBackground); }

@media screen and (orientation: landscape) 
{
    #divPlatform[data-has_mouse="0"] #divGameContent[data-isportrait="1"]
    {
        transform: rotate(-90deg);
        transform-origin: left top;
        width: 100dvh;
        overflow: hidden;
        top: 100%;
        height:100dvw;
        position:absolute;
    }
}

@media screen and (orientation: portrait) 
{
    #divPlatform[data-has_mouse="0"] #divGameContent[data-isportrait="0"]
    {
        transform: rotate(-90deg);
        transform-origin: left top;
        width: 100dvh;
        overflow: hidden;
        top: 100%;
        height:100dvw;
        position:absolute;
    }
}

/* ------------ fullscreen icon  -------------------- */

#tableGamesheader td:first-child img:nth-child(2)              {display:none;}
:fullscreen #tableGamesheader td:first-child img:nth-child(1)  {display:none;}
:fullscreen #tableGamesheader td:first-child img:nth-child(2)  {display:inline-block;}
#divPlatform[data-is_ios="1"] #tableGamesheader td:first-child {display:none;}
#divPlatform[data-is_ios="1"] #tableGamesheader                {width:50px;}

/* ################################### ADVERTS  ######################################### */

/* ----------- footer ---------------- */

#divFooterAdvert 
{
    position:fixed;
    max-width:var(--maxWidth);
    width:100%;
    bottom: var(--footerHeight); 
    overflow:hidden;;
    margin:auto;
    display:inline-block;
    left: 50%; 
    transform: translateX(-50%);
    max-height:200px;
}

#divFooterAdvertHeader{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    text-align:right;
    padding:5px;
}


#divFooterAdvertHeader img {
    background-color: var(--colorHeaderBackground);
    padding:5px;
    opacity:0.8;
}


#divFooterAdvertContent:has(img)                                       { cursor:pointer; } 
#divFooterAdvertContent img                                            { width:100%; height:auto; display: block; }
#divPlatform:has(#divArticle:not(.hidden)) #divFooterAdvert            { display: none; } 
#divPlatform:has(.popoverBlock:not(.hidden)) #divFooterAdvert          { display: none; } 


/* ------------- inline advert --------------- */


#divInlineAdvert{
    
    border:0px solid var(--colorHeaderBackground);
    background-color: var(--colorMainBackground);
    min-width:100px;
    max-width: calc(var(--maxWidth) / 2 );
    width:95%;
    position:fixed;
    left: 50%; 
    top: 50%; 
    transform: translate(-50%,-50%); 
    overflow:hidden;
    max-height:80%;
  
}

#divInlineAdvertHeader      
{     
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    text-align:right;
    padding:5px;
}

#divInlineAdvertHeader img {
    background-color: var(--colorHeaderBackground);
    padding:5px;
    opacity:0.8;
}


#divInlineAdvertContent     {  }
#divInlineAdvertContent img { width:100%;height:auto;display: block; cursor:pointer;  }
#divInlineAdvertHeader      { text-align:right;}

#divBodyContainer:has(#divInlineAdvert:not(.hidden)) #divBodyContent,           
#divBodyContainer:has(#divInlineAdvert:not(.hidden)) #divArticle,               
#divBodyContainer:has(#divInlineAdvert:not(.hidden)) .popoverBlock          
{ 
    filter: blur(3px);
    pointer-events: none; 
}


#divBodyContainer:has(#divInlineAdvert:not(.hidden)) #divFooterAdvert         { display:none; } /* estatically avoid footer and inline to appear at same time  */
/* ################################### END  ######################################### */