/* Version 2026.02.20 */

@import url('normalize.css');

body {
  background: #efefef;
  font-family: Verdana, Tahoma, sans-serif;
  font-size: 12pt;
  padding: 0;
  text-align: center;
}

.bulk_price_error {
	color: red;
}

.bulk_total_price {
	font-weight: bold;
}

.bulknotice {
  background: #efefef;
  border: 2px solid black;
  margin: 0 0 1em 0;
  padding: 5px;
}

.bulkerror {
  border: 2px solid red;
  color: red;
  font-size: 200%;
  margin: 0 0 1em 0;
  padding: 5px;
  text-align: center;
}

button, input, select {
	font-size: 10pt;
}

button, input[type="button"], input[type="reset"], input[type="submit"] {
	background-color: #e0e0e0;
	border-color: rgb(216,216,216) rgb(209,209,209) rgb(186,186,186);
	border-style: solid;
	border-width: 1px;
	padding: 1px 7px 2px;
}

/* Toggle switch from https://www.w3schools.com/howto/howto_css_switch.asp but using a button instead of a checkbox, and switching
   state via script */

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

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

.switch .slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.switch input.switch_on + .slider {
  background-color: #2196F3;
}

.switch input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

.switch input.switch_on + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.switch .slider.round {
  border-radius: 24px;
}

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


/* Checkbox customization from https://www.w3schools.com/howto/howto_css_custom_checkbox.asp ---- */

/* Customize the label (the container) */
/*checkbox_container {
  display: inline;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}*/

/* Hide the browser's default checkbox */
/*.checkbox_container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}*/

/* Create a custom checkbox */
/*.checkbox_container .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: white;
  border: 1px solid darkgray;
}*/

/* On mouse-over, add a grey background color */
/*.checkbox_container:hover input ~ .checkmark {
  background-color: #ccc;
}*/

/* When the checkbox is checked, add a blue background */
/*.checkbox_container input:checked ~ .checkmark {
  background-color: #67b9ce;
}*/

/* Create the checkmark/indicator (hidden when not checked) */
/*.checkbox_container .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}*/

/* Show the checkmark when checked */
/*.checkbox_container input:checked ~ .checkmark:after {
  display: block;
}*/

/* Style the checkmark/indicator */
/*.checkbox_container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}*/

/* ---------------------------------------------------------------------------------------------- */

.colorcell {
	border: 1px solid black;
	display: inline-block;
	float:left;
	height: 1em;
	margin: 0 3px 0 0;
	width: 1em;
}

.colorcellcontainer {
	display: inline-flex;
	margin: 0;
	white-space: nowrap;
	width: 100%;
}

.colorcellname {
	display: inline-block;
	margin: 0;
	white-space: nowrap;
}

.colorcellspace {
	clear: both;
}

.colors_table {
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
}

.colors_table td {
	border: 1px solid #d0d0d0;
	padding: 5px;
}

.colors_table tr.color_row td:first-child {
	border-left: 2px solid black;
}

.colors_table tr.color_row td:last-child {
	border-right: 2px solid black;
}

.colors_table tr.color_category_tr {
	background: silver;
	border-bottom: none;
	border-left: 2px solid black;
	border-right: 2px solid black;
	border-top: 2px solid black;
	font-size: 14pt;
	font-weight: bold;
}

.colors_table td.color_category_name {
}

.colors_table td.color_category_visible {
	text-align: center;
}

.colors_table td.colors_table_space_bottom {
	background: white;
	border-bottom: none;
	border-left: none;
	border-right: none;
	border-top: 2px solid black;
	height: 20px;
}

.fieldLimitation {
	font-size: 10pt;
	font-style: italic;
	margin: 0em 0em 0.5em 0em;
}

.item_quantity_field {
	width: 100px;
}

.item_name {
	font-style: italic;
}

#fieldOptionsTable {
	border: none;
	border-spacing: 0px;
	font-size: 10pt;
}

#fieldOptionsTable td {
	border: none;
}

#fieldOptionsTable th {
	background: none;
	border: none;
	color: black;
	font-weight: bold;
	text-align: left;
}

input[type="password"], input[type="text"], textarea {
	border: 1px solid darkgray;
	font-size: 12pt;
}

.inventory_table {
	border: 2px solid black;
	border-collapse: collapse;
	border-spacing: 0px;
}

.inventory_table td {
	border: 1px solid #d0d0d0;
	padding: 5px;
}

.inventory_table th {
	background-color: #67b9ce;
	border: 1px solid #d0d0d0;
	color: white;
	padding: 5px;
}

.inventory_table_container {
	margin-bottom: 1em;
	overflow: auto;
}

.notice {
  background: #efefef;
  border: 2px solid black;
  font-weight: bold;
  margin: 0 0 1em 0;
  padding: 10px;
}

.notice_error {
  border: 2px solid red;
  color: red;
  font-weight: bold;
  margin: 0 0 1em 0;
  padding: 10px;
}

.notice_error ul {
  margin: 0;
  padding-left: 10px;
}

.notice_error ul li {
  list-style-position: inside;
}

/* #pabTablesContainer {
	margin-bottom: 1em;
}

#pabTablesContainer td {
	padding-right: 20px;
	vertical-align: top;
} */

.pagebrowser {
  float: left;
  list-style-type: none;
  margin-bottom: 0.5em;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  padding: 0;
  width: 100%;
}

.pagebrowser a {
  background: #efefef;
  border: 1px solid black;
  color: black;
  float: left;
  margin-bottom: 0.5em;
  margin-left: 0;
  margin-top: 0;
  margin-right: 0.5em;
  padding: 0.5em;
  text-decoration: none;
}

.pagebrowser a:hover {
  background: white;
  color: black;
}

.pagebrowser li {
  display: inline;
}

.pagebrowser_current {
  background: white;
  border: 1px solid black;
  color: black;
  float: left;
  font-weight: bold;
  margin-bottom: 0.5em;
  margin-left: 0;
  margin-top: 0;
  margin-right: 0.5em;
  padding: 0.5em;
}

.pagebrowser_label {
  background: #efefef;
  border: 1px solid black;
  color: black;
  float: left;
  margin-bottom: 0.5em;
  margin-left: 0;
  margin-top: 0;
  margin-right: 0.5em;
  padding: 0.5em;
  text-decoration: none;
}

.td_ec {
  text-align: center;
  vertical-align: middle;
}

.td_el {
  text-align: left;
  vertical-align: middle;
}

.td_er {
  text-align: right;
  vertical-align: middle;
}

.td_oc {
  background: #efefef;
  text-align: center;
  vertical-align: middle;
}

.td_ol {
  background: #efefef;
  text-align: left;
  vertical-align: middle;
}

.td_or {
  background: #efefef;
  text-align: right;
  vertical-align: middle;
}

.th_oc {
  background: #efefef;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
}

.th_ol {
  background: #efefef;
  font-weight: bold;
  text-align: left;
  vertical-align: middle;
}

.th_or {
  background: #efefef;
  font-weight: bold;
  text-align: right;
  vertical-align: middle;
}

.totalItemPrice {
	font-weight: bold;
}

#bottommenu {
  border-top: 1px solid #808080;
  color: #808080;
  font-size: 8pt;
  margin: 1em 0 0 0;
  overflow: hidden;
  width: 100%;
}

#category_info {
  font-size: 10pt;
  margin: 0 0 1em 0;
}

#content {
  margin: 0;
  padding: 10px;
}

#content h1 {
  font-size: 20pt;
  margin: 0 0 1em 0;
}

#content h2 {
  font-size: 14pt;
  margin: 0 0 1em 0;
}

#content h3 {
  font-size: 12pt;
  margin: 0 0 1em 0;
}

#main {
  background: white;
  margin: 0 auto 0 auto;
  padding: 0;
  text-align: left;
  width: 100%;
}

#topmenu {
  background: #67b9ce;
  padding: 0;
  width: 100%;
}

#topmenu ul {
  list-style-type: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

#topmenu ul li {
  float: left;
}

#topmenu ul li a:link,
#topmenu ul li a:visited
{
  color: #ffffff;
  display: block;
  font-size: 14pt;
  font-weight: bold;
  padding: 5px 20px 5px 20px;
  text-decoration: none;
  text-transform: uppercase;
}

#topmenu ul li a:active,
#topmenu ul li a:hover
{
  color: #67b9ce;
  background-color: #ffffff;
}

/* ------------------------------------------------------------------------------------------------------------------------------ */

 /* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 250px; /* Set a default minimum width */
  margin-left: -125px; /* Divide value of min-width by 2 */
  background-color: #333; /* Black background color */
  color: #fff; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 5px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 1; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 4.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.6s 4.5s;
  animation: fadein 0.5s, fadeout 0.6s 4.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
} 

#popup {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #f9f9f9;
	padding: 20px;
	border-radius: 5px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	z-index: 1000;
}
#popup-content {
	text-align: center;
}
#popup-buttons {
	margin-top: 15px;
}
#popup-buttons button {
	margin: 0 5px;
	padding: 5px 10px;
}
#popup-message {
	margin: 0;
}
#overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 999;
}

/* ------------------------------------------------------------------------------------------------------------------------------ */

@media (prefers-color-scheme: dark)
{
	a {
		color: #a1c0db;
	}
	
	a:visited {
		color: #b9a1db;
	}
	
	body {
		background-color: #333333;
		color: #e0e0e0;
	}
	
	#main {
		background-color: #333333;
	}
	
	#popup-message {
		color: black;
	}

	#snackbar {
		background-color: #e0e0e0;
		color: black;
	}
	
	#topmenu {
		background: #256373;
	}
	
	#topmenu ul li a:link,
	#topmenu ul li a:visited
	{
		color: #e0e0e0;
	}
	
	#topmenu ul li a:active,
	#topmenu ul li a:hover
	{
		color: #256373;
		background-color: #e0e0e0;
	}
	
	.colors_table td {
		border: 1px solid #7d7d7d;
	}

	.colors_table tr.color_row td:first-child {
		border-left: 2px solid #7d7d7d;
	}

	.colors_table tr.color_row td:last-child {
		border-right: 2px solid #7d7d7d;
	}

	.colors_table tr.color_category_tr {
		background: silver;
		border-left: 2px solid #7d7d7d;
		border-right: 2px solid #7d7d7d;
		border-top: 2px solid #7d7d7d;
		color: black;
	}

	.colors_table td.colors_table_space_bottom {
		background: #333333;
		border-top: 2px solid #7d7d7d;
	}
	
	.inventory_table {
		border-color: #7d7d7d;
	}

	.inventory_table td {
		border-color: #7d7d7d;
	}

	.inventory_table th {
		background-color: #256373;
		border-color: #7d7d7d;
		color: #e0e0e0;
	}
	
	.notice {
		background: #4d4d4d;
		border-color: #7d7d7d;
	}
	
	.bulknotice {
		background: #4d4d4d;
		border-color: #7d7d7d;
	}

	.bulkerror {
		border-color: red;
		color: red;
	}

	.td_oc {
		background: #4d4d4d;
	}

	.td_ol {
		background: #4d4d4d;
	}

	.td_or {
		background: #4d4d4d;
	}

	.th_oc {
		background: #4d4d4d;
	}

	.th_ol {
		background: #4d4d4d;
	}

	.th_or {
		background: #4d4d4d;
	}
}