* {
	box-sizing: border-box
}

html, body, .extLoader {
	height: 100%;
	width: 100%;
	background-color: #002f67;
	padding: 0px;
	margin: 0px
}

body {
	overflow-y: hidden;
	overflow-x: hidden;
	padding: 25px;

	position: fixed
}

img {
	max-height: 100%;
	max-width: 100%
}


.cWindow {
	background-color: #0266d6;
	border: 7px solid #0266d6;
	height: 100%;
	width: 100%;
	position: absolute;
	display: flex;
	flex-direction: column;
	scrollbar-color: #97c0ee #32649c;
	scrollbar-width: 4px;
	scrollbar-width: thin
}



.cWindow ::-webkit-scrollbar {
	width: 4px;
	height: 4px
}

.cWindow ::-webkit-scrollbar-track {
	background: #32649c
}

.cWindow ::-webkit-scrollbar-thumb {
	background: #beddff
}

.cWindow ::-webkit-scrollbar-thumb:hover {
	background: white
}

.cWindowMain {
	flex: 1;
	background-color: cyan;
	background-color: #4e94e2;
	padding: 5px;
	height: 100%;
	position: relative;
	overflow-x: hidden;
	overflow-y: hidden;
	z-index: 0;
	scrollbar-width: 4px;
	scrollbar-width: thin;
}


#main_container {
    height:100%;
    width:100%;
    display: flex;
    flex-direction: row;
}


#primary{
	flex: 0 0 300px;
	display:inline;
	order:1;
	position:relative;
	margin-left:10px;
	margin-right:10px;
	background-color: #0266D6;
}


#secondary{
	flex: 0 0 300px;
	order:3;
	display:inline;
	position:relative;
	overflow-x: visible;
	overflow-y: visible;
	margin-left:10px;
	margin-right:10px;
	flex-direction: column;
	background-color: #0266D6;
}

#center{
	flex:25;
	width:100%;
	display: flex;
	flex-direction: column;
	order:2;
	margin-left:10px;
	margin-right:10px;
	min-width: 0; /*Esto hace que el contenedor de las tabs del chat haga scroll sin hacer mas grande a su parent. .*/ /*EJEMPLO ENCONTRADO:  https://stackoverflow.com/questions/38223879/white-space-nowrap-breaks-flexbox-layout*/
}

#gameArea {
	flex: 10;
	order: 1;
	position: relative;
	min-height: 0;
	margin-top: 0px;
	background-color: #0266d6
}

#chatArea{
	flex:8;
	order:2;
	width:100%;
	min-height: 0;  /* ESTO EN CHROME NO HACE FALTA. EN LOS DEMAS SINO SE DESBORDA EL OVERFLOW DE HIJO A PADRE*/
	position:relative; /*Contenedores relative y contenido absolute para que pille 100% width y height en todos los navegaores.*/
	background-color: #0266D6;
}

			.chatArea{
				margin-top:20px;
			}
			.chatAreaFS{
				margin-top:0px;
			}

@media (max-width:1300px) /*1111*/{

#primary {
			flex: 1.2 0 250px;
}

#secondary {
	display: none;
}


}

@media(max-width:900px) {
	html, body {
		padding: 0px;
		margin: 0px
	}

	#main_container {
		height: 100%;
		padding: 0px
	}

	#primary {
		display: none;
	}

	#secondary {
		display: none;
	}

	#center {
		margin: 0px;
	}

	#gameArea {
		flex: 1;
		order: 1;
		margin: 0px;
		overflow-x: hidden;
		overflow-y: hidden
	}
#chatArea {
	display: none;
}

}

@media(min-width:901px) {
	#windowBrowserPreload .cWindowFooter {
		display: none
	}

}

.cWindowNoPad {
	padding: 0px
}

.cWindowTitle {
	flex: 0 0 60px;
	display: flex;
	background-color: #0266d6;
	overflow-x: hidden;
	overflow-y: hidden;
	cursor: default;
	position: relative
}

.cWTitleText {
	padding-left: 3px
}

.cWindowFooter {
	flex: 0 0 60px;
	order: 3;
	background-color: #4e94e2;
	cursor: default;
	position: relative
}

.cWindowRowSL, .cWindowRowSS {
	flex: 0 0 30px;
	line-height: 0px
}

.cWindowRowR {
	justify-content: flex-end
}

.cWindowTitleNav {
	flex: 0 0 200px;
	text-align: right;
	order: 2;

	user-select: none
}

.cWindowTitleClose {
	flex: 0 0 100px;
	order: 5;
	text-align: right;
	user-select: none
}

.cWindowTitleCloseSpace {
	flex: 0 0 100px;
	order: 3;
	display: none;
	user-select: none
}

@media(max-width:900px) {
	.cWindow {
		border: 0px
	}

	.cWindowMain {
		padding: 0px
	}

	.cWindowTitle, .cWindowFooter {
		flex: 0 0 80px
	}

	.cWindowRowS:first-child {
		padding: 7px;
		flex: 0 0 50px
	}

	.cWindowRowSL, .cWindowRowLL {
		flex: 0 0 50px
	}

	.cWindowFooter.cWindowRowSS {
		padding: 0px
	}

	.cWindowTitleClose, .cWindowTitleNav {
		flex: 0 0 64px
	}

}

.cWindowSideCont * {
	scrollbar-width: 4px;
	scrollbar-width: thin
}

.cWindowSideCont {
	display: flex;
	flex-direction: row;
}

.cWindowSideMain {

	flex: 1 1 300px;
	overflow-x: hidden;
	overflow-y: auto;
	position: relative;
	scrollbar-width: 10px !important
}

@media(max-width:1111px) {
	.cWindowSideCont {
		display: flex;
		flex-direction: column
	}

	.cWindowSideMain {
		flex: 1;
		overflow-x: hidden;
		overflow-y: scroll
	}

}

@media(max-width:900px) {
	.cWindowSideCol {
		margin-left: 0px !important
	}

}

.logoHeader {
	display: none;
	background: url("https://opqa.com/cacherver/res/svg/ico/files/logoOPQA-1T.auto") left 7px center/contain no-repeat
}

@media(max-width:900px) {
	.logoHeader {
		flex: 1;
		display: inline-block;
		background-color: #0156b6
	}

}

.appBtnCont {
	display: none;
	position: absolute;
	right: 0px;
	z-index: 100
}

.appBtnChk {
	display: none
}

.appBtnLabel {
	padding-top: 0px !important;
	width: 100%;
	height: 100%;
	position: absolute
}

.appBtnLabel:hover {
	background-color: rgba(255, 255, 255, 0.15);
	cursor: pointer
}

.appBtnLabel:active {
	background-color: #0c4091
}

.appBtnChk:checked+.appBtnLabel {
	background-color: #0093ff !important
}

.appBtnChk:checked+.appBtnLabel+#burgerNotifyCount {
	display: none
}

#menuTitle .cWindowTitleClose {
	height: 100%;
	background-color: #0093ff
}

.icoMenuBurger {
	height: 100%;
	background-color: transparent
}

@media(max-width:900px) {
	.appBtnCont {
		display: inline-block;
		overflow: hidden;
		height: 50px;
		width: 64px
	}

	.appBtnLabel {
		background-image: url(https://opqa.com/cacherver/res/svg/ico/files/icoBurger50.auto)
	}

}

.zCompList {

	/* background-color: #4E94E2; */ /* padding: 2px; */ width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	user-select: none;
	overflow-x: hidden;
	overflow-y: auto;
	border: 0px solid white;
	scrollbar-width: 4px;
	scrollbar-width: thin;
}

.sListGames, .sListGamesPreload {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	background: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255, 255, 255, .07) 10px, rgba(255, 255, 255, .07) 20px) bottom right scroll;
}

.sListCredits, .sListGamesPreload {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	position: relative;
}

.sListGames>li, .sListGamesPreload>li {
	position: relative;
	flex: 1 0 auto;
	width: 200px;
	height: 150px;
	color: #0266D6;
	margin: 2px;
	text-align: center;
	animation: none; /* z-index: 2; */

	/* background-color: #0c4091; */ background-size: contain, 90px;
}

@media (max-width:1393px) {
	.sListGames>li, .sListGamesPreload>li {
		width: 160px;
	}

}

.sListGamesPreload>li:after {
	content: ''; /* display: block!important; */
	top: 0px;
	left: 0px;
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: none;
	background-color: rgb(41, 127, 220); /* background-position: 0px 0px; */

	/* color: #0266D6; */ opacity: 0.85;
}

.sListGamesPreload>li:nth-child(even):after {
	background-image: none;
	background-color: rgb(5, 105, 214);
}

@media (max-width:495px) {
	.sListGames>li, .sListGamesPreload>li {
		flex: 1 0 auto;
		width: 120px;
		height: 100px;
		margin: 2px;
		background-size: 90px;
	}

}

/* SCARD */

#cardFooter{
  background-color: #0266D6;
}

.cardTitleLogo {
  text-align: center;
  user-select: none;          /* Likely future */
  z-index: 4;
}

    .cardTitleLogo img {

      /* height: 150%; */

      max-height: 150%;
      position: absolute;
      top: -5px;
      left: 0;
      right: 0;
      z-index: 2;
    }

#windowCard .cWindowTitle, #windowCardPreload .cWindowTitle {
  position: static;
}

      @media (max-width:900px){
        #windowCardPreload .cWindowTitle{
          position:relative;
        }

        #conteTabs-windowCardPreload{
          display:none;
        }
      }

/* VENTANA DE LOGIN - A */






/*///////////AVATAR/////////////*/



.avatarsBg{
  position:relative;
  height:100%;
  user-select: none;

}

          
     


         .cardAvatar2{ 
            max-width: none;
            max-height: none;
            position:absolute;
            min-height: 116%;
            top: -243px;
            /* bottom: -9999px; */
            left: -9995px;
            right:-9999px;
            margin:auto;
            opacity: .2;
            z-index: -3!important;
          }






/* PRELOAD SQ*/

.progressBar {position:absolute;top:130px;background: repeating-linear-gradient(45deg,#00CDFF,#00CDFF 6px,#00B4E1 6px,#00B4E1 12px);/*background-color:rgb(66,224,255);*/height: 4px;z-index: 10;box-shadow: 0px 3px rgba(0,0,0,0.15);/* width: 3px; */}
@media (max-width:900px) { /* ANTIGUO: max-width:625px) */
#progressBar {
	
	height: 10px;
	
	position: fixed;
	
}
}

.preloadSq{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	z-index:10;
	width:150px;
	height:150px;

}

.preloadSq>img{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	width:50px;
	height:50px;

}

.preloadAnimIcon>img {
	animation: preLogo 2s infinite linear;
	align-items: center;
	z-index: 13;
}

@keyframes preLogo {
		from {
				transform: rotate(0deg);
		}
		to {
				transform: rotate(359deg);
		}
}

/* LISTA JUEGOS A */
@media (min-width: 901px){
		#windowBrowserPreload .cWindowFooter{
			display: none; /* OCULTA FOOTER EN PRELOAD DE PC*/
		}
}
.sListGamesPreload .sListGamesNumUsers {
display:none;
}

.sListGamesPreload>li:after {
	content: '';
	top: 0px;
	left: 0px;
	position: absolute;
	width: 100%;
	height: 100%;
	background-image:none;
	background-color: rgb(41,127,220);
	opacity: 0.85;
}
			.sListGamesPreload>li:nth-child(even):after {
				background-image:none;
				background-color: rgb(5,105,214);
			}

/* LISTA JUEGOS Z */


/* LISTA USUARIOS A */

.listaItemPreload{
	height: 60px!important;
	background-color: rgb(40,126,220)!important;
}
			.listaItemPreload:nth-child(even){
					background-color: rgb(52,135,222)!important;
			}


/* LISTA USUARIOS Z */

/* CARD A */