* {
	box-sizing:border-box;
}

body {
	margin:0;
	padding:0;
	font-size:20px;
	font-family:Arial, Helvetica, sans-serif;
}

*:not(input, textarea){
	user-select:none;
}

textarea {
	line-height:normal !important;
}

#home {
	cursor:pointer;
}

#topnav {
	width:100%;
	top:0;
	text-align:right;
	position:relative;
	width:100%;
	line-height:42px;
	font-size:20px;
	background-color:#1b1b1b;
	border-bottom:1px solid #333;
	padding-right:20px;
	color:white;
	height:40px;
	overflow:hidden;
}

#bottom-nav {
	line-height:50px;
	text-align:center;
	color:#AAA;
	background-color:#1b1b1b;
	border-top:1px solid #333;
}

@media screen and (max-width:580px) {
	.double-item {
		margin:0;
	}
	
	.media-spacer {
		height:0;
	}
}

.line {
	content:'';
	margin-bottom:10px;
	border-bottom:1px solid black;
}

.yline {
	border-bottom:8px solid #00905a;
	width:130px;
	margin:0 auto;
	margin-top:10px;
	margin-bottom:10px;
}

.gline {
	border-bottom:1px solid #00905a;
	width:100%;
	margin-bottom:15px;
	margin-top:-5px;
	content:' ';
}

.grey-line {
	border-bottom:1px solid #444;
	width:100%;
	margin-bottom:5px;
	margin-top:-20px;
	content:' ';
}

.link:hover {
	color:#00905a;
	cursor:pointer;
}

#nav-account:hover #account-panel {
	display:block;
	color:#00e892;
}

#account-panel {
	display:none;
	position:absolute;
	color:black;
	background-color:#e1e1e1;
	border:2px solid green; 
	z-index:100;
	right:0px;
	top:49px;
	line-height:30px;
	width:175px;
	border-top:none;
	cursor:context-menu;
	border-radius:4px;
}

.menu-option, .menu-multi, .menu-item {
	display:block;
	color:black !important;
	padding-left:10px;
	padding-right:10px;
	width:100%;
//	border:1px solid #FFF;
//	border:1px solid #FFFFFF00;
	line-height:38px;
}


.divider {
	border-bottom:1px solid green;
	margin-left:10px;
	margin-right:10px;
	margin-bottom:5px;
	margin-top:5px;
}


/* box-shadow cheat because of chrome */

.menu-option:hover, .menu-multi:hover, .menu-item:hover {
	background-color:#00905a;
	border-radius:3px;
	box-shadow:0 0 1px 1px green;
	color:white !important;
	cursor:pointer;
	border-color:green;
}

.menu-option:active, .menu-multi:active, .menu-item:active {
	border-color:lightgreen !important;
}

.card {
	margin:0 auto;
	max-width:1800px;
	padding:30px;
	padding-top:25px;
	border: 1px solid #003867;
	background-color:#262626;
	background-color:rgb(0,0,0,0.35);
	backdrop-filter:blur(30px);
	color:white;
}

.card-page {
	min-height:calc(100vh - 132px);
}

.card-small {
	max-width:450px !important; 
	margin-top:10vh !important;
	margin-bottom:25vh	!important;
}

.card-header {
	text-align:left;
	font-size:30px;
	margin-bottom:18px;
	color:#00bc74;
}

.card-content {
	color:white;
	padding-bottom:25px;
}

.card-footer {
	margin-top:10px;	
}

.card-msg {
	display:none;
	position:relative;
	border:2px solid darkred;
	background-color:#FFA0A0;
	color:black;
	line-height:28px;
	font-size:22px;
	border-radius:4px;
	margin-bottom:20px;
}

.card-msg:focus {
	border:2px solid red;
}

.card-msg-text {
	padding-left:10px;
	width:calc(100% - 20px);
}

.card-msg-close {
	position:absolute;
	right:4px;
	top:0;
}

.card-msg-close:hover {
	cursor:pointer;
	color:black;
}

.msg-green {
	border:2px solid darkgreen !important;
	background-color:#00c079 !important;
}

.card-input {
	font-family:monospace;
	color:white;
	width:100%;
	font-size:22px;
	padding-left:10px;
	border:1px solid #004b00;
	line-height:38px;
	border-radius:4px;
	background-color:#000;
}
.card-input:focus {
	border:1px solid #00e892;
}
.card-input:hover {
	background-color:#1F1F1F;
}

.card-input-disabled:focus {
	border:1px solid green !important;
}
.card-input-disabled:hover {
	cursor:not-allowed !important;
	background-color:#202020 !important;
	background-color:rgb(254,254,254,0.06) !important;
}

.small-input {
	line-height:26px;
}

.card-item {
	border-radius:4px;
}

.card form {
	margin:0;
}

.card-textarea {
	max-width:423px;
	height:100px;
	margin-top:2px;
	overflow:hidden
}

.cat-listing {
	position:relative;
	overflow:hidden;
	margin-bottom:15px;
	border-radius:4px;
	border:1px solid #004b00;
	height:200px;
	background-color:#1b1b1b;
}

@-moz-document url-prefix() {
	input[type=checkbox] {
		transform:scale(1.5) translateY(-1px);
	}
	input[type=number] {
		-moz-appearance:textfield;
	}
	.cat-listing {
		background-color:#333;
	}
	.card {
		background-color:#222;		
	}
	html {
		scrollbar-color:#008852 black;
	}
}


.search-component {
	border:1px solid #004b00;
	border-radius:4px;
}

.button {
	line-height:28px;
	height:30px;
	font-size:20px;
	border-radius:4px;
	padding-left:10px;
	padding-right:10px;
	color:white;	
	background-color:#13744f;
	border:2px solid #009300;
	min-width:120px;
	text-align:center;
	user-select:none;
}

.button:hover {
	background-color:#005731;
	cursor:pointer;
}

.button:active {
	border:2px solid lightgreen !important;
}

.button:disabled {
	background-color:#003711 !important;
	border:2px solid #004300 !important;
	color:grey;
	cursor:default !important;
}

.button-disabled {
	background-color:#003711 !important;
	border:2px solid #004300 !important;
	color:grey;
	cursor:default !important;
}
.button-disabled:active {
	border:2px solid #004300 !important;
}

.button-red {
	background-color:#a92c2c;
	border:2px solid #fa7171;
}

.button-red:hover {
	background-color:#dd0c0c;
}

.button-red:active {
	border:2px solid red !important;
}

.button-green {
	background-color:#13744f;
	border:2px solid #009300;
}

.button-green:hover {
	background-color:#006741;
}

.button-green:active {
	border:2px solid lightgreen !important;
}

.slim-button {
	line-height:31px !important;
	height:34px;
}


input:focus {
	outline-width:0;
}

input[type=checkbox] {
	transform:scale(1.5);
	cursor:pointer;
}

.moz-scroll {
	scrollbar-color:#008852 black;	
}

#show_msg {
	position:fixed;
	width:100%;
	top:0;
	z-index:99999;
}

#show_txt {
	text-align:center;
	position:absolute;
	display:none;
	width:100%;
	line-height:40px;
	font-size:25px;
	border-bottom:1px solid #CCC;
}

.pc25 {
	width:24.95%;
	float:left;
	padding-left:5px;
	padding-right:5px;
	overflow:hidden;
	white-space: nowrap;
}

.pc20 {
	width:19.99%;
	float:left;
	padding-left:5px;
	padding-right:5px;
	overflow:hidden;
	white-space: nowrap;
}

.no-hover:hover {
	background-color:transparent !important;
	cursor:default !important;
}

.card a:link, .card a:visited {
	color:#00bc74;
}

.card a:hover {
	color:#01995f;
	cursor:pointer;
}

a:active {
	color:lightgreen;
}

.hover-text:hover {
	cursor:pointer;
	color:#00b672 !important;
}

input:-webkit-autofill::first-line {
	font-size:22px
}
&:-webkit-autofill::first-line,
&:-webkit-autofill,
&:-webkit-autofill:hover,
&:-webkit-autofill:focus,
&:-webkit-autofill:active {
	font-size:22px
}

#b2 {
	top:0;
	margin-left:calc(50% - 60px);
	font-size:200px;
	animation:slide-right 5s;
	animation-fill-mode:forwards;
	width:150px;
}

#b1 {
	top:0;
	margin-left:calc(50% - 60px);
	font-size:200px;
	animation:slide-left 5s;
	animation-fill-mode:forwards;
	width:150px;
}

@keyframes slide-right {
	0% {
		transform:translateX(0px);
	}
	100% {
		transform:translateX(50px);
	}
}

@keyframes slide-left {
	0% {
		transform:translateX(0px);
	}
	100% {
		transform:translateX(-50px);
	}
}

#slogan {
	font-size:0px;
	animation:bigger 5s;
	animation-fill-mode:forwards;
	color:#fff;
	text-shadow:2px 4px 3px rgb(0 0 0);
}

@keyframes bigger {
	0% {
		font-size:0px;
	}
	100% {
		font-size:30px;
	}
}

#cat-header {
	font-size:28px;
	margin-left:4px;
	color:white;
}

::placeholder {
	color:#AAA;
	opacity:1;
}
:-ms-input-placeholder {
	color:#AAA;
}
::-ms-input-placeholder {
	color:#AAA;
}

#search {
	float:left;
	height:38px;
	padding-left:10px;
	width:80%;
	border-radius:0;
	border-top-left-radius:4px;
	border-bottom-left-radius:4px;
	border:1px solid rgba(0,128,0,0);
}

#search-button {
	float:right;
	border-top-left-radius:0;
	border-bottom-left-radius:0;
	width:20%;
}
	
@media screen and (max-width:1000px) {
	#search {
		width:65%;
	}
	#search-button {
		width:35%;
	}
}

.cat-link {
	width:400px;
	overflow:hidden;
	font-size:23px;
}

.cat-a {
	text-decoration:none;
}

.cat-a:hover {
	text-decoration:underline;
}
	
#subcats {
	display:flex;
	flex-flow:row wrap;
	justify-content:space-between;
	margin-bottom:25px;
	line-height:45px;
	margin:5px;
	margin-bottom:25px;
}

.pulldown-content {
	display:none;
	position:absolute;
	left:0;
	width:100%;
	color:black;
	z-index:100;
	line-height:40px;
	background-color:#e1e1e1;
	border:1px solid green;
	border-radius:4px;
	max-height:335px;
	overflow-y:auto;
	box-shadow:inset 0 0 1px 1px green;
	user-select:none;
}

.pulldown-content a {
	text-decoration:none;
}

.pulldown-text {
	float:left;
}

.pulldown-menu {
	position:relative;
	float:left;
	cursor:pointer;
	margin-top:8px;
	margin-bottom:-8px;
}

.clear-button {
	display:block;
	border:1px solid green;
	text-align:center;
	font-size:20px;
	background-color:#666;
	background-color:rgb(254,254,254,0.1);
	padding:5px;
	padding-left:20px;
	padding-right:20px;
	border-radius:4px;
	line-height:24px;
	height:36px;
}

.clear-button:hover {
	background-color:#00905a;
	cursor:pointer;
}

.arrow {
	border:solid yellow;
	border-width:0 3px 3px 0;
	display:inline-block;
	padding:4px;
	box-shadow:1px 1px 1px black;
}

.arrow-black {
	border-color:black !important;
	font-size:10px;
}

.right {
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
}

.left {
	transform:rotate(135deg);
	-webkit-transform:rotate(135deg);
}

.up {
	transform:rotate(-135deg);
	-webkit-transform:rotate(-135deg);
}

.down {
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
}

.slides-container {
	position: relative;
	height:200px;
	width:200px;
	background-color:#000;
	border-right:1px solid #004b00;
	border-bottom: 1px solid #004b00;
}

.slide {
	text-align:center;
	display:none;
	height:200px;
	width:200px;
}

.slide img {
	position:absolute;
	max-width:199px;
	max-height:199px;
	width:auto;
	height:auto;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}

.slide-prev, .slide-next {
	cursor:pointer;
	position:absolute;
	top:95px;
	margin-top:-22px;
	padding:10px;
	color:white;
	font-weight:bold;
	font-size:18px;
	user-select:none;
	background-color:#006741;
	background-color:#004100c7;
	border:2px solid #00800047;
}

.enlarge {
	position:absolute;
	right:5px;
	top:7px;
	width:16px;
	z-index:1;
	cursor:pointer;
}

.slide-next {
	right:0;
	border-radius:6px 0 0 6px;
	border-right:none;
	padding-left:8px;
}

.slide-prev {
	border-radius:0 6px 6px 0;
	border-left:none;
	padding-right:8px;
}

.slide-prev:hover, .slide-next:hover {
	background-color:#13744f;
	border-color:#009300;
}

.slide-prev:active, .slide-next:active {
	border-color:lightgreen;
}

.slide-text {
	color:white;
	background-color:#333;
	background-color:#000000a6;
	font-size:15px;
	padding:8px 12px;
	position:absolute;
	bottom:0;
	width:100%;
	text-align:center;
	text-shadow:1px 1px 1px black;
}

.slide-number {
	color:white;
	background-color:#333;
	background-color:#000000a6;
	font-size:12px;
	padding:7px;
	position:absolute;
	top:0;
	left:0;
 	z-index:1;
	text-shadow:1px 1px 1px black;
}

.img-magnifier-container {
	position:relative;
}

.img-magnifier-glass {
	position:absolute;
	border:1px solid white;
	border-radius:10%;
	cursor:none;
	width:100px;
	height:100px;
	box-shadow:3px 3px 6px 2px black;
}

#back-to-top {
	display:none;
	position:fixed;
	font-size:18px;
	padding-top:10px;
	padding-bottom:7px;
	padding-left:15px;
	padding-right:15px;
	text-align:center;
	background-color:black;
	border:1px solid grey;
	border-radius:4px;
	opacity:0.8;
	color:white;
	-webkit-backface-visibility:hidden;
	bottom:30px;
	right:30px;
	z-index:10;
	cursor:pointer;
}

#back-to-top:hover {
	border-color:green;
	color:white;
}

#back-to-top:active {
	border-color:#00e892;
}

#popup-text {
	position:absolute;
	display:none;
	font-size:17px !important;
	font-weight:normal;
	background-color:black;
	border:1px solid grey;
	color:white;
	text-align:center;
	border-radius:20px;
	line-height:30px;
	z-index:101;
	padding:5px 20px;
	margin-bottom:-10px;
}

#popup-text::after {
	content:"";
	position:absolute;
	top:100%;
	left:20px;
	margin-left:-8px;
	border-width:8px;
	border-style:solid;
	border-color:#BBB transparent transparent transparent;
	margin-bottom:-10px;
}

.arrow.down {
	float:left;
	margin-top:8px;
	margin-right:10px;
	border-color:#ffffa5 !important;
}

.arrow.up {
	border-color:#ffffa5 !important;
}

.small-input .arrow.down {
	margin-top:8px !important;
}

#content {
	min-height:calc(100vh - 100px);
//	padding-top:1vh;
//	padding-bottom:5vh;
}

::-webkit-scrollbar {
	width:15px;
	background-color:#333;
}

::-webkit-scrollbar-track {
	box-shadow:inset 0 0 3px grey; 
	background-color:#222;
}
 
::-webkit-scrollbar-thumb {
	background:#999;
}

::-webkit-scrollbar-thumb:hover {
	background:#04c5ff; 
}

.dot-pulse {
	position:relative;
	left:-9999px;
	width:10px;
	height:10px;
	border-radius:5px;
	background-color:grey;
	color:grey;
	box-shadow:9999px 0 0 -5px grey;
	animation:dotPulse 1.5s infinite linear;
	animation-delay:.25s;
}

.dot-pulse::before, .dot-pulse::after {
	content:'';
	display:inline-block;
	position:absolute;
	top:0;
	width:10px;
	height:10px;
	border-radius:5px;
	background-color:#9880ff;
	color:#9880ff;
}

.dot-pulse::before {
	box-shadow:9984px 0 0 -5px grey;
	animation:dotPulseBefore 1.5s infinite linear;
	animation-delay:0s;
}

.dot-pulse::after {
	box-shadow:10014px 0 0 -5px grey;
	animation:dotPulseAfter 1.5s infinite linear;
	animation-delay:.5s;
}

@keyframes dotPulseBefore {
	0% {
		box-shadow:9984px 0 0 -5px grey;
	}
	30% {
		box-shadow:9984px 0 0 2px grey;
	}
	60%,
	100% {
		box-shadow:9984px 0 0 -5px grey;
	}
}

@keyframes dotPulse {
	0% {
		box-shadow:9999px 0 0 -5px grey;
	}
	30% {
		box-shadow:9999px 0 0 2px grey;
	}
	60%,
	100% {
		box-shadow:9999px 0 0 -5px grey;
	}
}

@keyframes dotPulseAfter {
	0% {
		box-shadow:10014px 0 0 -5px grey;
	}
	30% {
		box-shadow:10014px 0 0 2px grey;
	}
	60%,
	100% {
		box-shadow:10014px 0 0 -5px grey;
	}
}

.north {
	transform:rotate(0deg);
	-ms-transform:rotate(0deg); 
	-webkit-transform:rotate(0deg);
}
.west {
	transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
}
.south {
	transform:rotate(180deg);
	-ms-transform:rotate(180deg);
	-webkit-transform:rotate(180deg);		
}
.east {
	transform:rotate(270deg);
	-ms-transform:rotate(270deg);
	-webkit-transform:rotate(270deg);
}

textarea:focus {
	outline:none !important;
	border-color:green;
}

i { 
	font-style:italic;
	color:#b7b7b7 ;
	text-decoration-color:#b7b7b7;
}

a {
	text-decoration-color:#b7b7b7;
}

a i:hover {
	color:#999 !important;
}

.book-section {
	background-color:#232323;
	background-color:rgb(255,255,255,0.04);
	margin-bottom:20px;
	border-radius:10px;
}

.book-title {
	padding-left:10px;
	line-height:40px;
	background-color:#3d3c3c;
	background-color:rgba(255,255,255,0.1);
	margin-bottom:10px;
	border-top-left-radius:7px;
	border-top-right-radius:7px;
}
.book-details {
	padding-left:10px;
	display:flex;
	padding-bottom:15px;
}
.book-item {
	flex:1;
}
.book {
	line-height:50px;
}
.small-optional {
	font-size:18px;
	color:#999;
}

#modal, #enlarge-window {
	display:none;
	position:fixed;
	padding-top:50px;
	z-index:1;
	left:0;
	top:0;
	width:100%;
	height:100%;
	overflow:hidden;
	background-color:#111;
	background-color:rgba(0,0,0,0.85);
	color:white;
}

#enlarge-window {
	text-align:center;
	background-color:#222;
}

#enlarge-img {
	max-height:100%;
	max-width:100%;
	border:1px solid white;
}

.pin-outer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  margin: 0;
}

.pin-entry {
  display: flex;
  justify-content: center;
}

.pin-input {
  width: 4rem;
  height: 4rem;
  font-size: 2rem;
  text-align: center;
  margin: 0 0.5rem;
  border: 2px solid #000;
  border-radius: 4px;
  outline: none;
}

.pin-input:focus {
  border-color: #444;
}


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance:none;
	margin:0;
}

.check-box {
	position:absolute;
	display:none; 
}
.check-box + label {
	position:relative;
	display:block;
	cursor:pointer;
	vertical-align:middle; 
}
.check-box + label:before {
	position:absolute;
	top:8px;
	display:inline-block;
	width:28px;
	height:28px;
	content:'';
	background-color:#00905A;
	background-color:#00905AAA;
	border:2px solid #009300;
}
.check-box + label:after {
	position:absolute;
	display:none;
	content:''; 
}
.check-box:checked + label:after {
	display:block; 
}
.check-box + label:before {
	border-radius:4px; 
}
.check-box + label:after {
	top:12px;
	left:11px;
	box-sizing:border-box;
	width:10px;
	height:20px;
	transform:rotate(45deg);
	border-width:3px;
	border-style:solid;
	border-color:#ffffa5;
	border-top:0;
	border-left:0; 
	box-shadow:1px 1px 1px black;
}
.check-box + label:hover:before {
	background-color:#006741;
	background-color:#006741AA;
	cursor:pointer;
}
.check-box + label:hover:before {
	background-color:#006741;
	background-color:#006741AA;
	cursor:pointer;
}
.check-box + label:active:before {
	border:2px solid lightgreen !important;
}

#modal-style {
	background-color:#202020;
	border: 1px solid white;
	color:#DDD;
}

#modal-content {
	margin-bottom:25px;
}

#modal-title {
	margin-bottom:20px;
}

.tick {
	box-sizing:border-box;
	width:10px;
	height:20px;
	transform:rotate(45deg);
	border-width:3px;
	border-style:solid;
	border-color:#ffffa5;
	border-top:0;
	border-left:0; 
	box-shadow:1px 1px 1px black;
}

.watch {
	position:absolute;
	top:10px;
	right:5px;
	min-width:46px;
	text-align:middle;
}

.watch-icon {
	position:absolute;
	right:9px;
	top:3px;
}

.bb-green {
	color:#00e892;
}

.bb-red {
	color:#ff9797;
}

.bb-orange {
	color:#ff9f3b;
}

#watch-list-disp {
	position:absolute;
	left:15px;
	top:1px;
	width:30px;
	text-align:center;
	color:yellow;
	font-size:18px;
	text-shadow:1px 1px black;
}

.subject {
	float:left;
	width:255px;
}
.sub {
	position:absolute;
	top:20px;
	left:0;
	font-size:17px;
	font-style:italic;
	color:#999;
}
.subsub {
	position:absolute;
	top:36px;
	left:0;
	font-size:17px;
	font-style:italic;
	color:#999;
}

.but-loader {
	display:none;
	width:26px;
	height:26px;
	margin:2px auto;
}

hr {
	border-color:#4f4f4f;
	margin-top:10px;
	margin-bottom:10px
}

label {cursor:pointer}

.but-text {
	margin-right:35px;
	font-style:italic;
	color:#d1d1d1;
	font-size:20px;
}

#browse-window {
	min-width:1180px;
}

#book-bid {
	float:left;
	margin-top:8px;
	margin-bottom:-8px;
}

.light-grey {
	color:#dadada;
}

.more-div {
	margin-top:20px;
	margin-bottom:25px;
}

.more-panel {
	padding:20px;
}

.magnify {
	position:absolute;
	right:0px;
	top:0px;
	opacity:0.5;
}
.slides-container:hover .magnify {
	#opacity:1;
}
.cust-col {
	display:inline-block;
	width:105px;
}
.cust-col2 {
	display:inline-block;
	width:125px;
}
.cust-col3 {
	display:inline-block;
	width:100px;
}

.loader {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: relative;
  border: 3px solid #Fff;
  top: 50%;
  animation: loader 2s infinite ease;
}

.loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: #018ccd;
  animation: loader-inner 2s infinite ease-in;
}

@keyframes loader {
  0% {
    transform: rotate(0deg);
  }
  
  25% {
    transform: rotate(180deg);
  }
  
  50% {
    transform: rotate(180deg);
  }
  
  75% {
    transform: rotate(360deg);
  }
  
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loader-inner {
  0% {
    height: 0%;
  }
  
  25% {
    height: 0%;
  }
  
  50% {
    height: 100%;
  }
  
  75% {
    height: 100%;
  }
  
  100% {
    height: 0%;
  }
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #23232329;
	caret-color:white;	
	font-size: 22px !important;
	font-family: monospace !important;
}