html { color-scheme: dark;scroll-behavior: smooth; }
body { margin: 0 auto;
font-family: Tahoma, Verdana, Arial, sans-serif; }	
*{
	box-sizing: border-box;
}
svg, img{
	vertical-align: middle;
	height:20px;
}
.inv{
	filter: invert(100%);
}
.sfaded{
	color:#333;
}
.itemlinks a.icon{
	margin:0 5px;
	color:#04AA6D;
	text-decoration:none;	
}
.itemlinks a.icon:hover img{
	/*filter:invert(25%) sepia(92%) saturate(6953%) hue-rotate(347deg) brightness(78%) contrast(120%);*/
	/*filter:invert(100%);*/
	transform:scale(1.2);
}
.itemlinks a.txt{
	margin:0 5px;
	color:#04AA6D;
	text-decoration:none;
	padding: 3px 10px;
}
.itemlinks a.txt:hover{
	background-color: #04AA6D;
    color: white;
    border-radius: 5px;
    padding: 3px 10px;
}
.itemlist{
	margin-top:49px;
}
thead tr{
	position:sticky;left:0;right:0;top:49px;background:#333;color:white;
	z-index: 10;
}
tfoot tr{
	position:sticky;left:0;right:0;bottom:0;background:#333;color:white;
	z-index: 10;
}
#filterinput{
	padding:5px;
	min-width:400px;
}
.topnav {
	background-color: #333;
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index: 10;
}
/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  border-left:1px solid #555;
  text-transform:capitalize;
}
.topnav a:first-child {
	display: none;
}
.topnav a:first-child {
	border-left:0;
}
.topnav a:last-child {
	border-right:1px solid #555;
}
/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}
.gg-menu {
    transform: scale(var(--ggs,1))
}
.gg-menu,
.gg-menu::after,
.gg-menu::before {
    box-sizing: border-box;
    position: relative;
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 3px;
    background: currentColor
}
.gg-menu::after,
.gg-menu::before {
    content: "";
    position: absolute;
    top: -6px
}
.gg-menu::after {
    top: 6px
}
.moviename img{	
	height: 25px;
	margin:0 5px 0 0;
	vertical-align:middle;
}
@media screen and (min-width: 781px) {
	.tooltip {
		position:relative; /* making the .tooltip span a container for the tooltip text */	  
		transition:.5s opacity;
	}
	.tooltip:before {
		content: attr(data-text); /* here's the magic */
		position:absolute;

		/* vertically center */
		top:50%;
		transform:translateY(-50%);

		/* move to right */
		left:100%;
		margin-left:15px; /* and add a small left margin */

		/* basic styles */
		width:200px;
		padding:10px;
		border-radius:10px;
		background:#eee;
		color: #333;
		text-align:center;
		display:none; /* hide by default */
		opacity:0;
		transition:.5s;  
	}
	.tooltip:hover:before {
		display:block;
		opacity:1;
		transition:.5s;
	}
	.tooltip.left:before {
		/* reset defaults */
		left:initial;
		margin:initial;
		/* set new values */
		right:100%;
		margin-right:25px;
		transition:.5s;
	}
	.tooltip:after {
		content: "";
		position:absolute;
		/* position tooltip correctly */
		left:0;
		margin-left:-25px;	 
		/* vertically center */
		top:50%;
		transform:translateY(-50%);	 
		/* the arrow */
		border:10px solid #eee;
		border-color: transparent transparent transparent #eee;	  
		/*display:none;
		opacity:0;*/
		display:none;
		transition:.5s;
		opacity:0;
	}
	.tooltip:hover:before, .tooltip:hover:after {
		display:block;
		transition:.5s;
	}
	.tooltip:hover:after {
		opacity:1;
		transition:.5s;
	}
}
@media screen and (max-width: 780px) {
	.moviename{
		display:block;
		width:100%;
	}
	table{
		width:100%;
		max-width:100%;
	}
	thead tr th {
		display: none;
	}
	tbody tr td{
		word-wrap: break-word;
		display: block;
		width:100%;
	}
	tbody tr td.moviename{			
		word-wrap: break-word;
		overflow-wrap: break-word;
		word-break: break-all;			
	}
	tbody tr td:before {
		content: attr(data-th) ": ";
		font-weight: bold;
		width: 5.5em;
		display: inline-block;
	}
	tbody tr td.moviename:before{
		content:none;
	}
	tbody tr td:last-child {			
		margin-bottom: 1.5em;
	}
	.footerbox{
		padding:0 5px;
	}
	.footerbox span{
		float:left;
		width:100%;
		margin:5px 0 5px 0;
		font-size:.8rem;
	}
	#filterinput{
		padding:5px;
		min-width:auto;
		width:90vw;
	}	
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
	.topnav a:not(:first-child) {display: none;}
	.topnav a.icon {
		float: left;
		display: block;
		height: 49px;
		line-height: 49px;
		padding: 24px 15px 0px 15px;
	}
	.topnav.responsive {position: relative;}
	.topnav.responsive a.icon {
		/*position: absolute;
		left: 0;
		top: 0;*/
		transition:all .5s ease-in-out;
	}
	.topnav.responsive a.icon:after{	  
		content: attr(righttitle);
		position: absolute;
		color: black;
		top: 0;
		width: 200px;
		height: 49px;
		right: 15px;
		z-index: 5;
		text-align:right;
	}
	.topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
		transition:all .5s ease-in-out;
	}
}