/* "Simpliste" template. Renat Rafikov. http://cssr.ru/simpliste/ */

@import url('reset.css');
@import url('color.css');
@import url('skin.css');
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    /*url(MaterialIcons-Regular.woff2) format('woff2'),
    url(MaterialIcons-Regular.woff) format('woff'),*/
    url("../MaterialIcons-Regular.ttf") format('truetype');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 1.65em;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}



/* Columns
-------
.col_33 | .col_33 | .col_33
.clearfix
-------
.col_75 | .col_25
.clearfix
-------
.col_66 | .col_33
.clearfix
-------
.col_50 | .col_50
.clearfix
-------
.col_100
-------
*/
.col_25 {
  width:23%;
  margin:0 2% 0 0;
  float:left;
}
.col_33 {
  width:31%;
  margin:0 2% 0 0;
  float:left;
}
.col_50 {
  width:48%;
  margin:0 2% 0 0;
  float:left;
}
.col_66 {
  width:64%;
  margin:0 2% 0 0;
  float:left;
}
.col_75 {
  width:73%;
  margin:0 2% 0 0;
  float:left;
}
.col_100 {
  width:98%;
  margin:0 2% 0 0;
}

.col_25.wrap { width:25%; margin:0;}
.col_33.wrap { width:33%; margin:0;}
.col_50.wrap { width:50%; margin:0;}
.col_66.wrap { width:66%; margin:0;}
.col_75.wrap { width:75%; margin:0;}
.col_100.wrap { width:100%; margin:0;}
/* End columns */


/* Helper classes */
.center {text-align:center; margin:auto;}
.left {text-align:left;}
.right {text-align:right;}

.img_floatleft {float:left; margin:0 10px 5px 0;}
.img_floatright {float:right; margin:0 0 5px 10px;}

.img {max-width:100%;}
/* End helper classes */

a.button { color:auto; }

a.button,
a.button:visited,
.button {
  display:block;
  width:inherit;
  margin:0 auto;
}
input#searchq, input#ksearchq, input#singer {
display:block;
max-width:90%;
min-width:280px;
height:2em;
margin:0 auto;
}
input[type=text] {
	background:#F0F0F0;
}
#logo{
	display:block;
	position:relative;
	top:0;
	height:110px;
	width:96%;
	margin:0 auto 30px;
	/*text-indent:-9999px;*/
	background:url(/img/mic-hand.png) 50% 50% no-repeat;
	background-size:contain;
	clear:both;
}
	#logo a {
		text-decoration:none;
	}
	#logo #ltext{
		margin:auto;
		font-size:3em;
		font-weight:bold;
		text-align:center;
		padding:32px 0 0 0;
		line-height:80px;
		margin:0 auto;
		transform: rotate(-10deg);
		/* Safari */
		-webkit-transform: rotate(-10deg);
		/* Firefox */
		-moz-transform: rotate(-10deg);
		/* IE */
		-ms-transform: rotate(-10deg);
		/* Opera */
		-o-transform: rotate(-10deg);

		-webkit-text-stroke-width: 1px;
		-webkit-text-stroke-color: white;
	}
#faq {
max-width:94%;
margin:0 auto;
display:none;
}
	#faq ul {
	list-style-position: inside;
	}
	#faq ul li {
	margin-bottom:10px;
	}
#expand {
  cursor:pointer;
}
#user {
display:block;
width:90%;
max-width:220px;
height:2em;
margin:0 auto;
}
.qrCode {
	display:block;
	width:auto;
	margin:0 auto;
}
#sub0, #sub1 {
  text-align:center;
  font-size:2em;
}

@media (min-width:600px) { /* Smartphone */
	input[type=text] {
		width:70%;
		font-size:1.5em;
	}
}
@media (max-width:480px) { /* Smartphone */
  .header {
    margin-bottom:0;
  }

  .logo{
    display:block;
    float:none;
    text-align:center;
	margin:0 auto;
  }

  .menu_main {
    width:100%;
    text-align:right;
    float:none;
    padding:0;
    /*margin:1em 0 0 0;*/
  }


  .copyright {
    width:100%;
    float:none;
    text-align:center;
  }

  .footer  {
    padding-bottom:0;
  }

  .menu_bottom {
    width:100%;
    float:none;
    text-align:center;
    margin:1em 0 0 0;
    padding:0;
  }
  .menu_bottom a {
    display:inline-block;
    padding:6px;
  }

  .form textarea {
    width:100%;
  }
  .form label {
    padding:10px 0 8px 0;
  }
  #sub0, #sub1 {
  font-size:1.5em;
  }
}


@media (max-width:768px) { /* Tablet */
  .col_25,
  .col_33,
  .col_66,
  .col_50 ,
  .col_75  {
    width:98%;
    float:none;
  }

  .form label {
    padding:10px 0 8px 0;
  }
  .hideM {
  display:none;
  }
}


@media print { /* Printer */
  * { background:transparent !important; color:black !important; text-shadow:none !important; filter:none !important; -ms-filter:none !important; }
  a, a:visited { color:#444 !important; text-decoration:underline; }
  a[href]:after { content:" (" attr(href) ")"; }
  abbr[title]:after { content:" (" attr(title) ")"; }
  pre, blockquote { border:1px solid #999; page-break-inside:avoid; }
  thead { display:table-header-group; }
  tr, img { page-break-inside:avoid; }
  img { max-width:100% !important; }
  @page { margin:0.5cm; }
  p, h2, h3 { orphans:3; widows:3; }
  h2, h3{ page-break-after:avoid; }

  .header, .footer, .form {display:none;}
  .col_33, .col_66, .col_50  { width:98%; float:none; }
}

/*--------EMiLE--------*/
  body {
  font:Arial, Helvetica, sans-serif;
  /*text-align:center;*/
  }
  #mainbody {
  font-size: 1.25em;
  }
  #mainbody #update-result ul li, ul#list li {
	list-style:none;
  }
  #mainbody #update-result ul li a, ul#list li a {
  display: block;
	/*margin-left:-30px;*/
	padding:0 0 0 2em;
	z-index: 1;
  }
  #mainbody #update-result ul li a, ul#list li a {
	font-size: 1.0em;
	font-weight: normal;
	text-align: left;
	padding: 20px;
	margin:0 0 6px;
	border-spacing: 10px;
	border: 2px solid #4d4d4d;
	cursor: pointer;
	color: var(--secondary-color);
	background-color: var(--bg-color);
	border-radius: 5px;
  }
  #mainbody #update-result ul li a:hover, ul#list li a:hover {
  background:#262626;
  }
li.result
{
	position: relative;
	width: 100%;
	max-width:700px;
	margin: 0 auto;
}
li.result div span.favs {
	position:absolute;
	right:5px;
	font-size:2em;
	cursor: crosshair;
	z-index: 2;
}
li.result .ccc
{
	color:  var(--secondary-color);
}
li.result a
{
	display:inline-block;
	width:calc(100% - 46px);
	font-size: 1.4em;
	font-weight: normal;
	text-align: left;
	padding: 20px;
	margin:0 0 10px;
	border-spacing: 10px;
	border:2px solid var(--border-color);
	cursor: pointer;
	color:  var(--secondary-color);
	background-color:  var(--bg-secondary-color);
	border-radius: 10px;
	-webkit-box-shadow:4px 4px 6px -2px var(--dark-color);
	   -moz-box-shadow:4px 4px 6px -2px var(--dark-color);
			box-shadow:4px 4px 6px -2px var(--dark-color);
	z-index: 1;
}
	.favourite {
	color:red;
	}
	.w, .white {
  color:#FFF;
  font-size:1.4em;
  }
  .bigger {
    font-size: 1.5em;
  }

  .mess {
  display:block;
  width:90%;
  margin:auto;
  padding:10px;
  text-align:center;
  color:#FFF;
  font-size:1.5em;
  /*background:#868;*/
  }
  #mainbody #update-your-queue{
  padding: 2em 2% 3em 2%;
  }
  hr {
  border:none;
  }
.logo {
  float:none;
  display:block;
  margin:0 auto;
  /*border-bottom:1px solid #000;*/
  font-size:1.24em;
  text-align:center;
}
nav {
float:right !important;
top:7px;
right:5px;
text-align:right;
/*position:absolute;*/
/*font-size:1.3em;*/
}
nav a {
text-decoration:none;
}
li#home {
float:left;
left:0;
}

#update-size {
float:left !important;
top:13px;
left:5px;
/*position:absolute;*/
/*font-size:1.3em;*/
}
#update-size span {
	color:#FFF;
}

ul.pagination {
	text-align:center;
}
ul.pagination li {
	display:inline;
	list-style:none;
}
ul.pagination li a {
	text-decoration:none;
	display:inline-block;
	list-style:none;
	text-align:center;
	width:20px;
	padding:8px;
	border:1px solid #666;
}
/*********************************************/
/*Simple css to style bottom navigation */
/*********************************************/
ul#menu {
	margin: 0;
	padding:0;
	overflow: hidden;
	background-color: #171612;
	position: fixed;
	transform: translate3d(0,0,0);
  	bottom: 0;
	width: 100%;
	z-index:9;
	-webkit-box-shadow: 0px -2px 10px  var(--dark-color);
	   -moz-box-shadow: 0px -2px 10px  var(--dark-color);
			box-shadow: 0px -2px 10px  var(--dark-color);
	border-top: 1px solid  #333;
}
ul#menu li {
	padding:0 0 20px;
	display: inline-block;
	/*width:49%;*/
	text-align:center;
	text-decoration:none;
	text-align:center;
	margin:0 auto;
	display: inline-block;
	height:60px;
	font-size:0.69em;
	color:#fff;
	text-indent:-9999px;
	cursor:pointer;
}
ul#menu li.menuitem1 {
	border-right: 1px solid #333;
}
ul#menu li.menuitem2 {
	border-right: 1px solid #333;
}
ul#menu li.menuitem1:hover, ul#menu li.menuitem2:hover {
}

	ul#menu li.menuitem1 {
		background:url(/img/search.png) 50% 50% no-repeat;
	}
	ul#menu li.menuitem2 {
		background:url(/img/browse.png) 50% 50% no-repeat;
	}
	ul#menu li.menuitem3 {
		background:url(/img/popular.png) 50% 50% no-repeat;
	}
	ul#menu li.menuitem4 {
		background:url(/img/favourite.png) 50% 50% no-repeat;
	}
	ul#menu li.menuitem1, ul#menu li.menuitem2, ul#menu li.menuitem3, ul#menu li.menuitem4 {
		background-size:contain;
	}

#loading {
	margin:5px auto;
	display:block;
	width:128px;
	height:128px;
	text-indent:-9999px;
	background:url(/img/01_verify.gif) 50% 50% no-repeat;
		background-size:contain;
}


/****** scroll ******/
#charselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
.material-icons {
max-width:1.65em;
overflow:hidden;
}
#charselect {
position: -webkit-sticky;
position: sticky;
  top: 0px;
  z-index:7;
  /*background-color: #666;*/
}
div#arleft {
position:absolute;
float:left;
left:0;
}
div#arright {
position:absolute;
float:right;
right:0;
}
div#arleft, div#arright {
font-size:1.0em;
	display:inline;
	list-style:none;
	text-align:center;
	width:20px;
	padding:9px 8px;
	border:1px solid #666;
	margin:0;
	cursor:pointer;
}
div#arleft i.material-icons, div#arright i.material-icons {
	max-width:28px;
}
ul#scrollmenu {
  overflow: auto;
  white-space: nowrap;

  width:auto;
  margin:0 38px;
}
ul#scrollmenu li {
  display: inline-block;
  background-color: #333;
}

ul#scrollmenu li.active {
  background-color: #000;
}
ul#scrollmenu li a.exit.active {
  background-color: #000;
}
	ul#scrollmenu li a {
	display:inline-block;
	list-style:none;
	color: white;
	text-align: center;
	padding: 14px;
	text-decoration: none;
	border:1px solid #666;
	width:20px;
	}
ul#scrollmenu li a {
text-decoration:none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
ul#scrollmenu::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
ul#scrollmenu {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* OFFLINE */
.NN_TEXT {
  display:flex;
  flex-direction: column;
  align-items: center;
  height: 90vh;
  justify-content: space-around;
}
#NN_OVERLAY {
  /*z-index:100;*/
  box-sizing: border-box;
  border-top: 4px solid var(--theme-color);
}
form .errorField, form input.errorField {
  background-color: #FDD;
}