@import url('https://fonts.googleapis.com/css?family=Ubuntu:500');

body {
	background:#272727;
	background-image: url('pix/back.png');
	background-repeat:repeat;
	background-size: 60%;
	color:white;
	margin: 0;
	height:100%;
	padding:0;
	font-family:Ubuntu;
	text-align:center;
}


.remembered .avatar.selected { border:2px solid orange; }
.remembered .avatar
{
	border-radius:8px;
	margin:0px;
	height:64px;
	width:64px;
	cursor:pointer;
	padding:1px;
	border:2px solid transparent;
}

/* TOS */
.title {padding:5px;font-size:18pt;color:#EEE;text-shadow:0 0 1px}
.ptitle {color:#FEFEFE;font-size:16pt;padding:5px;     background: rgba(0,0,0,.5);}
.paragraph {text-align: justify;
    position: relative;
    padding: 5px;
    color: #FEFEFE;
    max-width: 900px;
    font-size: 18px;
    margin: auto;}
.notice {padding:20px;color:#FFF;font-weight:bold;font-size:16pt;}

#app .filters span, #app .tabs span {
	padding: 5px;
	cursor:pointer;
    background-color: black;
    border-radius: 4px;
}

#app .filters span.active, #app .tabs span.active {
	color: cyan;
    border: 1px solid gray;
}

#app .filters strong, #app .tabs trong {
    margin-left: 30px;
}

#app .filters , #app .tabs { background:rgba(0,0,0,0.4); padding:20px; margin:0px !important;}
#app .fixed-top strong, #app .top-tabs strong { color:gainsboro;}
#app .fixed-top, #app .top-tabs {
    background: rgba(0,0,0,0.9);
    padding: 12px;
    margin: 0px !important;
    position: fixed;
    z-index: 5;
    top: 0px;
    width: 100%;
	letter-spacing: -0.5px;
}

/* socials signin */
.signin a img {width:24px;height:24px; position:relative; top:3px;}
.signin a:hover span { width:55px; margin-left:5px;margin-right:2px;}
.signin a {    
	transition:0.5s linear all;
    display: inline-block;
    padding: 3px;
    color: white;
    border-radius: 6px;
    font-size: 14px;
    text-decoration: none;
    padding-top: 0px;
}
.signin a span {
	transition:0.2s linear all;
    font-size: 18px;
    position: relative;
    top: 0px;
    margin-right: 5px;
	display:inline-block;
	margin:0px;
	white-space:nowrap;
	overflow:hidden;	
	width:0px;
}
#login-screen strong.err {    display: block;    margin: 10px;    color: red;}
#login-screen button[disabled] { opacity:0.3; pointer-events:none;}
#login-screen button { cursor:pointer; border-radius:8px; font-size:18px; background:rgba(0,0,0,0.3); border:1px solid gray; text-align:center; margin:2px; outline:none; font-weight:bold;color:gainsboro;}
#login-screen hr {opacity:0; margin:0px; }
#login-screen form {margin:auto; width:300px;/*height:130px;*/ }
#login-screen input, input.dark { font-weight:bold;color:white; border-radius:8px; font-size:18px; background:rgba(0,0,0,0.3); border:1px solid gray; text-align:center; margin:2px; outline:none;}
#login-screen a {cursor:pointer; font-weight:bold; }
#login-screen a.active { color:orange; }
#login-screen .signin { margin-top:10px; }
#login-screen {display:block; text-align:center; margin-bottom:20px; margin-top:20px;}
#logged-screen a.logout {    position: absolute;    right: 15px;    top: 15px; }
#logged-screen a {color:orange;text-decoration:none;}
footer p
{
margin: 0px 0px 0px 0px;
top: 5px;
position:relative;
}
footer
{
bottom: 0px;
position: absolute;
text-align:center;
color: #CCC;
width:100%;
height:30px;

}
footer a {	color:#9EB8BE;text-decoration: none; transition: 0.5s linear color;}
footer a:hover{	color:#00CCFF;}

#main-container
{
	position:relative; /* needed for footer positioning*/
	margin:0 auto; /* center, not in IE5 */
	height:auto !important; /* real browsers */
	height:100%; /* IE6: treaded as min-height*/
	min-height:100%; /* real browsers */
}
#container { 
	padding-bottom:40px;   
	min-height: calc(100vh - 40px);
}

.loggedName
{
color: #B4B4B4;
font-weight: bold;
padding-right: 10px;
position: relative;
top: 2px;
}

.loggedAvatar
{
width: 33px;
border-radius: 4px;
}

#app .top-pad {
	height:42px;display:block;
}
#app .filters span b {
    color: #fff24c;
}


#app {
 color:white;
 font-weight:bold;
 text-align:center;
}
#app img.avatar:hover {
	opacity:1;
}
#app img.avatar {
    cursor: pointer;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    opacity: 0.8;
}


#app a {
	cursor:pointer;
	color:orange;
}
#app .items {
   max-width:1200px;
   
   margin:auto;
   margin-top:10px;
}
#app .item {
	padding-bottom:12px;
    margin: 2px;
    text-align: left;
    position: relative;
    border-left: 3px solid gray;
    padding-left: 10px;
    margin-left: 110px;
	margin-bottom:8px;
}

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  margin: 4px 0;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  box-shadow: 0px 0px 1px #000000, 0px 0px 0px #0d0d0d;
  background: #00ffff;
  border-radius: 0.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 1px #000000, 0px 0px 0px #0d0d0d;
  border: 1.6px solid #000000;
  height: 14px;
  width: 14px;
  border-radius: 7px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -4.2px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #1affff;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  box-shadow: 0px 0px 1px #000000, 0px 0px 0px #0d0d0d;
  background: #00ffff;
  border-radius: 0.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 1px #000000, 0px 0px 0px #0d0d0d;
  border: 1.6px solid #000000;
  height: 14px;
  width: 14px;
  border-radius: 7px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #00e5e6;
  border: 0.2px solid #010101;
  border-radius: 0.6px;
  box-shadow: 0px 0px 1px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #00ffff;
  border: 0.2px solid #010101;
  border-radius: 0.6px;
  box-shadow: 0px 0px 1px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 1px #000000, 0px 0px 0px #0d0d0d;
  border: 1.6px solid #000000;
  height: 14px;
  width: 14px;
  border-radius: 7px;
  background: #ffffff;
  cursor: pointer;
  height: 6px;
}
input[type=range]:focus::-ms-fill-lower {
  background: #00ffff;
}
input[type=range]:focus::-ms-fill-upper {
  background: #1affff;
}

a.resetpassword {
	color:gray;font-size:12px;
}
a.resetpassword:hover{
	color:orange;
}


@media only screen and (max-width : 640px) {
 .img-responsive {
	 margin-top:50px;
	 width:90%;
 }
 footer, .vgmqindex {
	 font-size:.6em;
 }
 #logged-screen a {
	 font-size:2em;
 }
}