hr{
    width: 100%;
    float: left;
    margin: 10px 0px 10px;
    border: none;
    border-top: 1px #d3d3d3 solid;
}
.section-wrapper{
    width: calc(100% - 10px);
    float: left;
    padding: 5px;
    border-radius: 3px;
    transition: all 0.4s;
}
.red{
    background-color:  #f00;
}

.yellow{
    background-color: #fc3;
}

.green{
    background-color: #6c3;
}

.gray{
    background-color: gray;
}

.font-gray{
    color:grey;
}

/* CSS of the popup*/
#popupInfo1{
        display:flex;
        width:785px;
        
    }
#popupInfo2{
        
        width: 645px;
        
    }

    #popupGameInfo{
        margin-left: 14px;
    }

   
#popupConsolesAvailability{
width:800px;
}

  
/* Popup metacritic */
#popupMetacriticSVG{
width:22px;
height:22px;
margin-bottom: 5px;
}

#popupGameServiceSVG{
width: 20px;
margin-top: 5px;
}

/* Popup metacriticsvg */

#popupHltbSVG{
width:22px;
height:22px;
position:relative;
top:5px;
}

body{
font-family:'segoe ui';
}
#popupDeveloperDiv{
padding-bottom:18px;
}
/* Popup game numbers */
#popupGameNumbers{
width:123px !important;
height:0px;
padding-bottom:93px;
}

/* Popup */
#popup{
width:760px;
}


/* Popup metacriticsvg */
#popupMetacriticSVG{
position:relative;
top:5px;
}
/* Popup */
#popup{
width:981px;
margin-right:87px;
}

/* Popup game info */
#popupGameInfo{
width:440px;
}
/* Popup game numbers */
#popupGameNumbers{
position:relative;
padding-left:25px;
}

.myBlock{
display:block;
margin-bottom:5px;
}

/* END CSS of popup*/


.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-color: DodgerBlue;
padding: 5px;
}

.flex-container > div {
background-color: #f1f1f1;

margin: 10px;
text-align: center;
}


.title{
inline-size: 171px;
margin-top: -20px;

}

.hltb{
position:relative;
background-color:#2980b9;
color:#ffffff;
display: flex;

width: fit-content;

top:-182px;
left:5px;
padding-left:5px;
padding-right:4px;
}



.meta{
position: relative;
top: -33px;

left: 131px;

padding: 3px;
width: fit-content;

display: flex;
}

body {
font-family: "Segoe UI";
/*overflow: hidden;*/
}

/* Title */
#main div .title{
text-align:left;
position:relative;
padding-left:0px;
top:auto !important;
left:auto !important;
font-weight:500;
line-height:18.9px;
font-style:normal;
text-transform:none;
text-shadow:none;
white-space:normal;
}

/* Meta */
#main div .meta{
top:-33px;
position:relative;
}

/* Image */
.cover{
width:180px;
height:240px;
cursor:pointer;
}

/* Title */
#main div .title{
font-size:15px;
text-transform:none;
}


/* Category */
#main div .category{
text-align:left;
}

/* Year */
#main div .year{
text-align:left;
margin-left:8px;
position:absolute;
}

#main div .gameservice{
position:relative;
top:0px;
left:68px;
width:18px;
height:18px;
}


/* Category */
#main div .category{
position:relative;
white-space:normal;
overflow:visible;
}

.slider-range{
width:200px;
margin-left: 8px;
}

aside {
    background: #fff;
    overflow-y:scroll;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    width:335px;
    height: 100%;
}

/* Main */
#main{
position:absolute;
top:0px;
left:333px;
transform:translatex(0px) translatey(0px);
background-color:#1e90ff;
overflow: auto;
}

.buttonPressed, .butGSPressed, .buttonSpecialPressed, .buttonGMPressed, .buttonThemesPressed{
background-color:rgba(52,152,219,0.55);
}

/* Image */
aside img{
width:272px;
}

/* Metascore */
#main div .metascore{
padding-left:1px;
padding-right:1px;
margin-left:1px;
}

/* Meta */
#main div .meta{

color:#000000;
font-weight:500;
}

/* Div game */
#main .divGame{
margin-left:3px;
margin-right:3px;
margin-top:3px;
margin-bottom:3px;
}

/* Div aside */
#divAside{
padding-left:7px;
padding-right:7px;
}

/* Section */
.mySection{
padding-top: 5px;
padding-bottom: 5px;
}

/* Title */
.myTitle{
font-weight:600;
font-size:16px;
margin-bottom:5px;
}

#popupDivStoryline{
width: 600px;
}

#categorybuttons{
    width:94% !important;
}

a:link {
    text-decoration: none;
  }
  
  a:visited {
    text-decoration: none;
  }
  
  a:hover {
    text-decoration: underline;
  }
  


.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 60px;
height: 60px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

.center {
    
    margin: auto;
    top: 200px;
    position:relative;
  }
.inputForSlider{
    width:75px;
}

#inputSearch{
    position:relative;
    top:5px;
   }
#popupHLTB{
    
    width: 140px;

}

.floatRight{
    float:right;
}

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }
  
  td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
  }
  
  tr:nth-child(even) {
    background-color: #dddddd;
  }

  .myLink{
    background-color:#d3d3d3;
    background-position-x:0%;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
    padding-left:7px;
    padding-right:7px;
    padding-bottom:3px;
   }

   #popupMoreInfoLink{
    width:62px;
    padding-top:3px;
    font-size: small;
    padding-left: 14px;
    float: left;
   }

   .spaceFromTop{
    margin-top: 15px;
   }

   .disabled{
    pointer-events: none;
   }
   
   #popupStats{
    height: 600px!important;
    overflow-y:scroll;
   }

   .mousePointerLink:hover{
        cursor:pointer;
        text-decoration: underline;
   }

   .wait {cursor: wait!important;}

   .RecentlyAdded{
    position:relative;
    top:-12px;
    background-color:#00bfff;
    color:#ffffff;
    font-weight:600;
    font-size: small;
    width: 97px;
   }

   .hide{
    display: none;
   }
   .ui-tooltip {
    white-space: pre-line;
  }
  
  .LeavingSoon{
    position:relative;
    top:-12px;
    background-color:#fc3;
    color:black;
    font-weight:600;
    font-size: small;
    width: 97px;
   }

   .ComingSoon{
    position:relative;
    top:-12px;
    background-color:#04aa6ad9 ;
    color:rgb(255, 255, 255);
    font-weight:600;
    font-size: small;
    width: 97px;
   }

   .pointerLabels{
    cursor: context-menu;
   }
   header{
    display: none;
   }
   #main div .title{
        height: 50px;
        margin-bottom: 10px;
        margin-left: 5px;
        margin-right: 5px;
    }
    #main div .category{
        margin-bottom: 10px;
        height: 40px;
        width: calc(100% - 10px);
        margin-left: 0px;
        padding-left: 5px;
        padding-right: 5px;
    }
    .hltblink{
        position: absolute;
        margin-top: -180px;
        left: 5px;
    }
    .hltb{
        top: 0;
        left: 0;
    }
    .GameServicesDiv{
        width: 100%;
        text-align: right;
        padding-bottom: 10px;
    }
    #main div .gameservice{
        position: static;
        padding-right: 5px;
    }
    #main .divGame{
        position: relative;
        width: 180px;
    }
    .mySection{
        float: left;
        width: 98%;
    }
    .mySection button{
        float: left;
    }

    #popupCloseSmall{
        width:25px;
        height:25px;
    }

    #popupClose{
        width:40px;
        height:40px;
        
        position: fixed;
        right: 13px;
        bottom: 0;
    }

    .ui-dialog-titlebar {visibility: hidden;}
    
    /* For Desktop View */
    @media screen and (min-width: 1024px) {
        #popupClose,#popupCloseSmall{
            display: none;
        }
        
        
        .ui-dialog-titlebar {visibility: visible;}
    }
    

   /*regular mobile screen*/
   @media only screen and (max-width: 767px){
    html, body {
        overflow-x: hidden;
        margin: 0px;
    }
    header{
        display: flex;
        width: 94%;
        padding: 10px 3%;
        position: fixed;
        z-index: 100;
        background: #fff;
        box-shadow: 0 0 10px 1px rgb(0 0 0 / 10%);
        justify-content: center;
        z-index: 999999;
    }
    img{
        max-width: 100%;
    }
    #main{
        transition: transform 0.4s,opacity 0.4s;
    }
    aside{
        transform: translateX(-100%);
        transition: transform 0.4s,opacity 0.4s;
        width: 320px;
    }
    #main{
        position: static;
        margin-top: 80px;  
        width: auto; 
        padding: 0px;
    }
    #main .divGame{
        width: 48%;
        margin: 1%;
        position: relative;
    }
    .cover{
        width: 100%;
        height: auto;
    }
    #main div .meta{
        left: calc(100% - 50px);
    }
    #popupHLTB{
        width: 100%;
    }
    /*sidebar*/
    aside img {
        width: 98%;
    }
    .sidebar-overlay{
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.8);
        opacity: 0;
        visibility: hidden;
        transition: visibility 0.4s,opacity 0.4s;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999999;
    }
    .sidebar-active .sidebar-overlay {
        opacity: 1;
        visibility: visible;
    }
    .sidebar-open {
        display: flex;
        align-items: center;
        justify-content: center;
        /*position: fixed;*/
        padding: 5px;
        color: #fff;
        z-index: 1000;
    }
    .sidebar-close {
        margin: 0;
        top: 25px;
        transition: opacity 0.3s;
        right: 5%;
        width: 25px;
    }
    .sidebar-active .sidebar-active{
        opacity: 0;
        visibility: hidden;
    }
    .sidebar-active aside{
        transform: translateX(0);
        opacity: 1;
        z-index: 99999999;
    }
    .ui-dialog.ui-widget.ui-widget-content{
        width: calc(100% - 2px) !important;
        padding: 0% !important;
        z-index: 99999999;
        margin: 0%;
        top: 0px !important;
        left: 0px !important;
        position: fixed !important;
    }
    #slider-hltb, #slider-metascore, #slider-userscore, #slider-releaseyear{
        position: relative !important;
        width: 200px !important;
        margin-left: 8px;
    }
    .ui-corner-all{
        border-radius: 0px;
    }
    .loader{
        z-index: 9999;
    }
    #popup, #popupAbout, #popupStats{
        margin-right: 0px;
        overflow-y: scroll;
        height: calc(100vh - 51px) !important;
    }

    #popupInfo1{
        width: 100%;
        flex-wrap: wrap;
        align-items: center;
    }
    #popupCover{
        order: 1;
        width: 48%;
        padding-right: 2%;
    }
    #popupGameInfo {
        width: 100%;
        margin: 0px;
        order: 3;
        padding-top: 5px;
    }
    iframe{
        width: 100% !important;
        height: auto !important;
    }
    #popupGameNumbers{
        width: 48% !important;
        padding: 0px 2px 3px;
        order: 2;
        height: auto;
    }
    #popupGameNumbers #popupMetaUrl,#popupGameNumbers #popupMetaUrl:active, #popupGameNumbers #popupMetaUrl:focus {
        outline: none;
        border: none;
    }
    #popupMetacriric{
        outline: none;
        border: none;
    }
    #popupInfo2, #popupConsolesAvailability{
        width: 100%;
    }
    #popupCover .cover{
        width: auto;
    }
    .title{
        inline-size: auto;
    }
    header img{
        width: 50px;
    }
    .logo img{
        width: 290px;
    }
    .ui-selectmenu-menu{
        z-index: 999999999;
    }
    .ui-selectmenu-menu .ui-widget.ui-widget-content{
        width: 100% !important;
        position: static !important;
    }
    .center{
        top: 45%;
        position: fixed;
        left: 38%;
        transform: translate(50%, 50%);
    }
    .ui-dialog .ui-dialog-titlebar-close{
        width: 30px;
        height: 30px;
        margin: -15px 0 0 0;
    }
}
/*landascape mobile screen*/
@media only screen and (min-width: 576px) and (max-width: 767px){
    #main .divGame {
        width: 31.333%;
        margin: 1%;
    }
    #popupCover{
        width: auto;
    }
    iframe{
        height: 300px !important;
    }
    header{
        justify-content: space-between;
    }
}
/*smaller mobile screen*/
@media only screen and (max-width: 350px){
    aside{
        width: 270px;
    }
    .ui-selectmenu-button.ui-button{
        width: auto;
    }
}
/*tablet screen devices*/
@media only screen and (min-width: 768px) and (max-width: 860px){
    
    .center{
        top: 45%;
        position: fixed;
        left: 63%;
        transform: translate(50%, 50%);
    }
    #main{
        padding: 0px;
        width: -webkit-fill-available;
    }
    #main .divGame {
        width: 48%;
        margin: 1%;
    }
    .cover {
        width: 100%;
        height: auto;
    }
    #popup, #popupAbout, #popupStats{
        margin-right: 0px;
        overflow-y: scroll;
        height: calc(100vh - 51px) !important;
    }
    #popupInfo1{
        width: 100%;
        flex-wrap: wrap;
        align-items: center;
    }
    #popupCover{
        width: 24%;
        padding-right: 1%;
    }
    #popupGameInfo {
        width: 50%;
        margin: 0px;
        padding-right: 1%;
        padding-top: 5px;
    }
    #popupGameNumbers{
        width: 23% !important;
        padding: 0px 2px 3px;
        height: auto;
    }
    #popupInfo2, #popupConsolesAvailability{
        width: 100%;
    }
    iframe{
        width: 100% !important;
    }
    #popupCover .cover {
        width: auto;
    }
    .ui-dialog.ui-widget.ui-widget-content {
        width: calc(100% - 2px) !important;
        padding: 0% !important;
        z-index: 999999;
        margin: 0%;
        top: 0px !important;
        left: 0px !important;
        position: fixed !important;
    }
    #slider-hltb, #slider-metascore, #slider-userscore, #slider-releaseyear{
        position: relative !important;
        width: 200px !important;
        margin-left: 8px;
    }
    .GameServicesDiv {
        width: 100%;
        text-align: right;
    }
    #main div .gameservice {
        position: static;
        padding-right: 5px;
    }
    #main div .meta {
        left: calc(100% - 50px);
    }
    .ui-selectmenu-menu{
        z-index: 999999;
    }
    .ui-selectmenu-menu .ui-widget.ui-widget-content{
        width: 100% !important;
        position: static !important;
    }
}