@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: 24px;  /* 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';
}

/*
DARK: 			#212121
LIGHT			#303030
BORDER			#494949
BORDER-LIGHT	#7F7F7F

Main:				#434343;
Insets:				#2a2a2a
Outer Border:		#353535
Borders:			#4d4d4d
*/
:root {
/*CCC*/
    --theme: #169fe5;
    --dark-color: #000;
    --primary-color: #666;
    --secondary-color: #F5F5F5;
    --font-color: #999;
    --bg-color: #333333;
    --bg-secondary-color: #303030;
    --border-color: #303030;
    --heading-color: #F5F5F5;
    --heading-bg-color: #000000;

}
[data-theme="light"] {
    --theme: #169fe5;
    --dark-color: #CCC;
    --primary-color: #ffffff;
    --secondary-color: #303030;
    --font-color: #333;
    --bg-color: #f7f7f7;
    --bg-secondary-color: #ffffff;
    --border-color: #F5F5F5;
    --heading-color: #303030;
    --heading-bg-color: var(--theme);
}
	#historybutton a{
	background: url(history_192.png) 50% 50% no-repeat;
	}

body
{
	text-align: center;
	font-family:sans-serif;
	font-size: 1em;
	font-weight: normal;
	background-color: var(--bg-color);
	color: var(--font-color);
	padding-top: 60px;
	margin:0;
}
.noscript {
	text-align:center;
	color:yellow;
}
ul, ol {
	margin: 1em 0;
	padding: 0 0 0 0;
}
p.info
{
	font-size: 1.0em;
}
div#nav
{
	min-height: 35px;
	line-height:2.5em;
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	padding: 5px 5px 5px 5px;
	width: 100%;
	text-align: left;
	border-style: solid;
	border-width: 0px 0px 2px 0px;
	border-color: var(--theme);
	background: rgb(0,0,0);
	background: var(--heading-bg-color);
	z-index:999;
}
a.navbar, navbar a
{
	color: var(--heading-color);
	text-decoration: none;
}
#mainbody {
	width:96%;
	margin:0 auto;
}
div.spacer
{
	position: relative;
	width: 90% !important;
	top: 0;
	height: 50px;
}
table
{
	margin: auto;
	border: 1px;
}
@media only screen and (max-width: 600px) {
	table {
		width: 96%;
	}
}
tr
{
	margin:0 0 10px;
}
li
{
	list-style:none;
	margin:0;
}
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;
}


input[type=text], input[type=search], input[type=button], input[type=submit], input[type=reset], a.button {
	border-radius: 5px;
	background-color: var(--bg-color);
	color: var(--heading-color);
    border: 2px solid var(--primary-color);
}
input[type=text], input[type=search] {
    border-color: #7F7F7F;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-right: 5px;
	font-size: 1.2em;
	font-weight: bold;

	width:70%;
}
input[type=button], input[type=submit], input[type=reset], a.button {
    font-weight: bold;
    padding: 5px 13px;
    margin-top: 12px;
    text-decoration: none;
    font-size: 1.2em;
    cursor: pointer;
    border: 2px solid var(--primary-color);
}
::placeholder, ::-webkit-input-placeholder, :-ms-input-placeholder { /* Edge */
  color: var(--primary-color);
}

input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 1em;
  width: 1em;
  border-radius: 50em;
  background: url(https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg) no-repeat 50% 50%;
  background-size: contain;
  opacity: 0;
  pointer-events: none;
}

input[type=search]:focus::-webkit-search-cancel-button {
  opacity: .3;
  pointer-events: all;
}

input[type=search].dark::-webkit-search-cancel-button {
  filter: invert(1);
}

.favourite {
color:red;
}
#searchq {
	display: #000;
	min-width:280px;
	max-width:90%;
	height: 2em;
	margin: 0 auto;
}
.backbtn, .exitkbtn, .histbtn, .qrbtn {
	position: fixed;
	top: 6px;
}
.backbtn a.button, .exitkbtn a.button, .histbtn a.button, .qrbtn a.button {
	padding: 3px 10px 0;
	font-size:1.75em;
}
.backbtn {
	left: 5px;
}
.exitkbtn {
	right: 5px;
}
.histbtn {
	right: 60px;
}
.qrbtn {
	right: 5px;
}
.title {
	font-size: 1.3em;
	max-width:80%;
	text-align:left;
	color: var(--primary-color);
}
a {
	color: var(--secondary-color);
}
.small {
    font-size: 0.7em;
}
.bigger {
    font-size: 1.5em;
}
.7F7F7F {
	color:#7F7F7F;
}
.white {
	color: var(--secondary-color);
}

div#qrcode, div#qrcode img {
}
div#qrcode {
	display:block;
	width:260px;
	margin:50px auto;
}
div#qrcode img {
	padding:15px;
	background:#ffffff;
	width:230px;
}


/*********************************************/
/*Simple css to style it like a toggle switch*/
/*********************************************/
.theme-switch-wrapper {
	display: flex;
	align-items: center;
	float:right;
	margin-top:45px;
	margin-right:10px;
}
  em {
    margin-right: 10px;
    font-size: 1em;
  }

.theme-switch {
	display: inline-block;
	height: 30px;
	position: relative;
	width: 54px;
}

.theme-switch input {
	display:none;
}

.slider {
	background-color: #ccc;
	bottom: 0;
	cursor: pointer;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: .4s;
}

.slider:before {
	background-color: #ffffff;
	bottom: 2px;
	content: "";
	height: 26px;
	left: 2px;
	position: absolute;
	transition: .4s;
	width: 26px;
}

input:checked + .slider {
	background-color: #66bb6a;
}

input:checked + .slider:before {
	transform: translateX(24px);
}

.slider.round {
	border-radius: 30px;
}

.slider.round:before {
	border-radius: 50%;
}

ul.pagination {
	text-align:center;
}
ul.pagination li {
	text-decoration:none;
	display:inline-block;
	list-style:none;
	text-align:center;
	width:20px;
	padding:8px;
	border:1px solid #666;
	cursor:pointer;
}
/*********************************************/
/*Simple css to style bottom navigation */
/*********************************************/
ul#menu {
	margin: 0;
	padding: 5px 0 20px;
	overflow: hidden;
	background-color: var(--heading-bg-color);
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index:9999;
	-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  var(--bg-color);
}
ul#menu li {
	display: inline-block;
	/*width:49%;*/
	text-align:center;
	text-decoration:none;
	text-align:center;
	margin:0 auto;
	display: inline-block;
	height:60px;
	text-indent:-9999px;
	cursor:pointer;
}
ul#menu li.menuitem1 {
	border-right: 1px solid var(--bg-color);
}
ul#menu li.menuitem2 {
	border-right: 1px solid var(--bg-color);
}
ul#menu li.menuitem1:hover, ul#menu li.menuitem2:hover {
}
	ul#menu li.menuitem1 {
		background:url(/search.png) 50% 50% no-repeat;
	}
	ul#menu li.menuitem2 {
		background:url(/browse.png) 50% 50% no-repeat;
	}
	ul#menu li.menuitem3 {
		background:url(/popular.png) 50% 50% no-repeat;
	}
	ul#menu li.menuitem4 {
		background:url(/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(/01_verify.gif) 50% 50% no-repeat;
	background-size:contain;
}
.loading-container {
  height: 100px;
  padding: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.loading-container .loading {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: #fff;
  border-right-color: #fff;
  animation: loading 0.5s infinite forwards;
}

@keyframes loading {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


/*a#historybutton {
position:absolute;
float:right;
top:7px;
right:70px;
margin: 0;
display: block;
width: 15px;
height: 22px;
text-indent: -9999px;
	background: url(history_192.png) 7px 50% no-repeat;
background-size: 50px 25px;
background-color: var(--border-color);
}*/

/****** 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:28px;
overflow:hidden;
}
#charselect {
position: -webkit-sticky;
position: sticky;
  top: 55px;
  z-index:9;
  background-color: var(--bg-color);
}
div#arleft {
position:absolute;
float:left;
left:0;
}
div#arright {
position:absolute;
float:right;
right:0;
}
div#arleft, div#arright {
font-size:18px;
	display:inline;
	list-style:none;
	text-align:center;
	width:20px;
	padding:9px 8px;
	border:1px solid #666;
	margin:0;
	cursor:pointer;
color:var(--font-color);
background-color: var(--dark-color);
}
ul#scrollmenu {
  overflow: auto;
  white-space: nowrap;

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

ul#scrollmenu li.active {
  background-color: #000;
}
ul#scrollmenu li a.exit.active {
  background-color: var(--dark-color);
}
	ul#scrollmenu li a {
	display:inline-block;
	list-style:none;
	color: var(--font-color);
	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 */
}
form .errorField, form input.errorField {
  background-color: #FDD;
}