*
{
	margin:				0;
	padding:			0;
	background-color:	transparent;
}

:root {
  --primary-color: rgb(0, 0, 255);
  --icon-top:40px;
  --icon-left:87px;
  --on-background: rgb(0, 0, 0);
  --webkit-filter:0;
  --shinwa-bg : #383810;
  --shinwa-h2 : #383810;
  --shinwa-bg_highlight : #484820;
  --shinwa-bg_shadow : #353508;
  --shinwa-txt : #000000;
  --shinwa-txt_highlight : #200000;
  --shinwa-txt_highlight2 : #909030;
  --shinwa-txt_greyed : #202010;
  --shinwa-txt_input : #001000;
  --shinwa-error : #301010;
}

[data-theme='dark'] {
  --primary-color: rgb(0, 255, 255);
  --on-background: rgba(26, 159, 255, 0.9);
  --on-background-alt: rgba(255, 255, 255, 0.7);
  --background: #333; /* #121212;*/
  --table-even:#919090;
  --webkit-filter:invert(1);
  --shinwa-bg : #383810;
  --shinwa-h2 : #2d733e;
  --shinwa-bg_highlight : #484820;
  --shinwa-bg_shadow : #353508;
  --shinwa-txt : #cd9428;
  --shinwa-txt_highlight : #200000;
  --shinwa-txt_highlight2 : #909030;
  --shinwa-txt_greyed : #27c9c2;
  --shinwa-txt_input : #cd9428;
  --shinwa-error : #cd9428;
}

html
{
	height:				100%;
}

body
{
	background-color:	var(--shinwa-bg);
	font-family:		verdana, "nimbus sans l", myriad, arial;
	font-size:			1em;
	color:				var(--on-background);
	margin-top :		0;
	font-weight:		normal;
	font-style:			normal;
	text-decoration:	none;
}

a:link
{
	color:				var(--on-background);
	text-decoration:	none;
	font-style:			none;
	font-weight:		none;
}
a:visited
{
	color:				var(--on-background);
	text-decoration:	none;
}
a:hover
{
	color:				var(--shinwa-txt_highlight);
}
a:active
{
	color:				var(--shinwa-txt_highlight);
}

div
{
	padding:			4px;
}
div.userdata
{
	position:					absolute;
	top:						0px;
	right:						0px;
	height:						20px;
	width:						240px;
/*	border:						1px solid #00ffff;*/
	text-align:					right;
	z-index:					100;
}

div.nav
{
	position:					absolute;
	bottom:						0px;
	right:						0px;
/*	border:						1px solid #00ffff;*/
	text-align:					right;
	z-index:					100;
}

img
{
	border-style:		none;
}

h1
{
	font-family:		verdana, "nimbus sans l", myriad, arial;
	font-size:			1.2em;
	font-variant:		small-caps;
	color:				var(--shinwa-bg);
	text-align:			center;
	text-decoration:	underline;
	text-shadow:		-1px 1px var(--shinwa-txt_highlight);
}
h2
{
	font-family:		verdana, "nimbus sans l", myriad, arial;
	font-size:			1.2em;
	font-variant:		small-caps;
	color:				var(--shinwa-h2);
	text-align:			center;
	text-shadow:		-1px 1px var(--shinwa-txt);
}

hr
{
	border:				1px solid;
	border-color:		var(--shinwa-txt);
}

table
{
	border-collapse:	collapse;
	table-layout:		fixed;
}
table.default
{
	width:				900px;
	border:				1px solid;
	margin-left:		auto;
	margin-right:		auto;
}
table.highlight
{
	width:				900px;
	border:				1px solid var(--shinwa-txt_highlight);
	margin-left:		auto;
	margin-right:		auto;
}
table.highlight2
{
	width:				900px;
	border:				1px solid var(--shinwa-txt_highlight2);
	margin-left:		auto;
	margin-right:		auto;
}
tr.odd
{
	background-color:	var(--shinwa-bg_shadow);
}
tr.even
{
	background-color:	var(--shinwa-bg_highlight);
}
td
{
	spacing-left:		2px;
	spacing-right:		2px;
	vertical-align:		top;
}

.caption_1
{
	font-size:			0.7em;
	text-transform:		uppercase;
	padding:			2px;
}
.caption_2
{
	font-size:			0.9em;
	font-variant:		small-caps;
}
.caption_2_highlight
{
	font-size:			0.9em;
	font-variant:		small-caps;
	color:				var(--shinwa-txt_highlight2);
}
.mark
{
	font-size:			0.8em;
	color:				var(--shinwa-txt_highlight2);
}
.errormsg
{
	font-size:			0.8em;
	text-transform:		uppercase;
	color:				var(--shinwa-error);
}

input.btn_checkbox
{
	color:				var(--shinwa-txt);
	background-color:	var(--shinwa-bg);
	border:				1px solid;
	border-color:		var(--shinwa-txt);
	width:				26px;
	font-size:			1.2em;
	font-weight:		bold;
	width:              50px;
}

select.btn_checkbox
{
	color:				var(--shinwa-txt);
	background-color:	var(--shinwa-bg);
	border:				1px solid;
	border-color:		var(--shinwa-txt);
	width:				26px;
	font-size:			1em;
	font-weight:		bold;
	width:              55px;
}

input.btn_dropdown
{
	color:				var(--shinwa-txt);
	background-color:	var(--shinwa-bg);
	border:				1px solid;
	border-color:		var(--shinwa-txt);
	font-size:			1.2em;
	font-weight:		bold;
}

select.btn_dropdown
{
	color:				var(--shinwa-txt);
	background-color:	var(--shinwa-bg);
	border:				1px solid;
	border-color:		var(--shinwa-txt);
	font-size:			1em;
	font-weight:		bold;
}

input.btn
{
	color:				var(--shinwa-txt);
	background-color:	var(--shinwa-bg);
	border:				1px solid;
	border-color:		var(--shinwa-txt);
	width:				100px;
	font-size:			0.8em;
	font-weight:		bold;
	text-transform:		uppercase;
}
input.btn_rm
{
	color:				var(--shinwa-error);
	background-color:	var(--shinwa-bg);
	border:				1px solid;
	border-color:		var(--shinwa-txt);
	width:				20px;
	font-size:			0.6em;
	font-weight:		bold;
	text-transform:		uppercase;
}
input.btn_rm_even
{
	color:				var(--shinwa-error);
	background-color:	var(--shinwa-bg_highlight);
	border:				1px solid;
	border-color:		var(--shinwa-txt);
	width:				20px;
	font-size:			0.6em;
	font-weight:		bold;
	text-transform:		uppercase;
}
input.btn_check
{
	color:				var(--shinwa-txt);
	background-color:	var(--shinwa-bg);
	border:				1px solid;
	border-color:		var(--shinwa-txt);
	width:				20px;
	font-size:			0.8em;
	font-weight:		bold;
	text-transform:		uppercase;
}
input.btn_check_even
{
	color:				var(--shinwa-txt);
	background-color:	var(--shinwa-bg_highlight);
	border:				1px solid;
	border-color:		var(--shinwa-txt);
	width:				20px;
	font-size:			0.8em;
	font-weight:		bold;
	text-transform:		uppercase;
}
input.btn_check_disabled
{
	color:				var(--shinwa-txt_greyed);
	background-color:	var(--shinwa-bg);
	border:				1px solid;
	border-color:		var(--shinwa-txt_greyed);
	width:				20px;
	font-size:			0.8em;
	font-weight:		bold;
	text-transform:		uppercase;
}
input.btn_check_even_disabled
{
	color:				var(--shinwa-txt_greyed);
	background-color:	var(--shinwa-bg_highlight);
	border:				1px solid;
	border-color:		var(--shinwa-txt_greyed);
	width:				20px;
	font-size:			0.8em;
	font-weight:		bold;
	text-transform:		uppercase;
}
input.txt
{
	color:				var(--shinwa-txt_input);
	background-color:	var(--shinwa-bg);
	border:				1px solid;
	border-color:		var(--shinwa-txt);
	width:				100px;
	font-size:			1em;
	font-style:			italic;
}
input.quantity
{
	color:				var(--shinwa-txt_input);
	background-color:	var(--shinwa-bg);
	border:				1px solid;
	border-color:		var(--shinwa-txt);
	width:				40px;
	font-size:			1em;
	text-align:			center;
}

/*------------------------------------*\
	NAV
\*------------------------------------*/
#nav
{
	list-style:			none;
}
#nav li
{
	float:				right;
	margin-right:		0px;
	position:			relative;
}
#nav a
{
	display:			block;
	padding:			2px;
}

/*--- DROPDOWN ---*/
#nav ul
{
	background:			var(--shinwa-bg);
	background:			rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
	list-style:			none;
	position:			absolute;
//	left:				-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
	right:				0px;
	visibility:			hidden;
	bottom:				100%; /* 1st level go above their parent item */
}
#nav ul li
{
	padding-top:		2px; /* Introducing a padding between the li and the a give the illusion spaced items */
	float:				none;
}
#nav ul a
{
	white-space:		nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul
{ /* Display the dropdown on hover */
	right:				0; /* Bring back on-screen when needed */
	bottom:				100%; /* 1st level go above their parent item */
	visibility:			visible;
	font-size:			0.6em;
	text-transform:		uppercase;
}
#nav li:hover a
{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
	background:			var(--shinwa-bg);
}
#nav li:hover ul a
{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
	text-decoration:	none;
}
#nav li:hover ul li a:hover
{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
	background:			var(--shinwa-bg);
}

.select-wrapper {
  position: relative;
  width: 200px;
}

.select-wrapper::before {
  font-size: 16px;
  pointer-events: none;
  position: absolute;
  right: 15px;
  top: 10px;
}

select {
  border-radius: 5px;
  border: 1px solid gray;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  height: 24px;
  outline: none;
  padding-left: 5px;
  width: 280px;
}

select option {
  color: #666;
}

/* Sun and Moon */
.my-sun{
   content: "";
   background: url(img/my-sun.png) no-repeat;
   position:absolute;
   top: var(--icon-top);
   left: var(--icon-left);
   width: 30px;
   height: 30px;
}

.my-moon{
   content: "";
   background: url(img/my-moon.png) no-repeat;
   position:absolute;
   top: var(--icon-top);
   left: var(--icon-left);
   width: 30px;
   height: 30px;
     -webkit-filter: invert(1);
}

.my-lotus{
   content: "";
   background: url(img/ico_lotus.png) no-repeat;
   position:absolute;
   -webkit-filter:var(--webkit-filter);
   left:-30px;
}

/* Dark Mode Toggle */
.theme-switch-wrapper {
  display: flex;
  align-items: center;
  z-index: 100;
  position: fixed;
  right: 6px;
  top: -4px;
}

.theme-switch-wrapper span {
  margin-right: 10px;
  font-size: 1rem;
}

.toggle-text {
  position: relative;
  top: 33px;
  right: 20px;
  color: var(--on-background);
}

.toggle-text-user {
  position: fixed;
  top: 0px;
  right: 0px;
  color: var(--on-background);
}

.theme-switch {
  display: inline-block;
  height: 34px;
  position: relative;
  width: 60px;
  top: 35px;
}

.theme-switch input {
  display: none;
}

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

.slider::before {
  background: #fff;
  bottom: 4px;
  content: '';
  height: 26px;
  left: 4px;
  position: absolute;
  transition: 0.4s;
  width: 26px;
}

input:checked + .slider {
  background: var(--primary-color);
}

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

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

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

.nav-switch-wrapper {
  display: flex;
  align-items: center;
  z-index: 100;
  position: fixed;
  right: 6px;
  bottom: 25px;
}