a {
	font-size: 120%;	
}


.buttonFind {
  display: inline-block;
  padding: 10px 10px;
  font-size: 16px;
  cursor: pointer;
  margin: 5px;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #0D96F0;
  border: none;
  border-radius: 10px;
  box-shadow: 0 5px darkkhaki;
}

.greenButton {
	background-color:#b8e356;
	border-radius:11px;
	border:3px solid #18ab29;
    vertical-align: middle;
    width: 65px;
    height: 36px;
	display:inline-block;
	cursor:pointer;
	color:Navy;
	font-family:Comic Sans MS;
	font-size:18px;
	font-weight:bold;
	padding-top:3px;
	padding-left:5px;
    padding-right:2px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
}
.greenButton:hover {
	background-color:#5cbf2a;
}
.greenButton:active {
	position:relative;
	top:1px;
}

.greenButtonWide {
	background-color:#b8e356;
	border-radius:11px;
	border:3px solid #18ab29;
    vertical-align: middle;
    width: 110px;
    height: 36px;
	display:inline-block;
	cursor:pointer;
	color:Navy;
	font-family:Comic Sans MS;
	font-size:18px;
	font-weight:bold;
	padding-top:3px;
	padding-left:5px;
    padding-right:2px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
}
.greenButtonWide:hover {
	background-color:#5cbf2a;
}
.greenButtonWide:active {
	position:relative;
	top:1px;
}

.blueButtonWide {
	background-color:#b8e356;
	border-radius:11px;
	border:3px solid #18ab29;
    vertical-align: middle;
    width: 150px;
    height: 36px;
	display:inline-block;
	cursor:pointer;
	color:Navy;
	font-family:Comic Sans MS;
	font-size:18px;
	font-weight:bold;
	padding-top:3px;
	padding-left:5px;
    padding-right:2px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
}
.blueButtonWide:hover {
	background-color:#5cbf2a;
}
.blueButtonWide:active {
	position:relative;
	top:1px;
}


.blueButton {
	background-color:#a5c2f5;
	border-radius:11px;
	border:3px solid #6a52f1;
    vertical-align: middle;
    width: 115px;
    height: 36px;
	display:inline-block;
	cursor:pointer;
	color:Navy;
	font-family:Comic Sans MS;
	font-size:18px;
	font-weight:bold;
	padding-top:3px;
	padding-left:5px;
    padding-right:2px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
}
.blueButton:hover {
	background-color:#5cbf2a;
}
.blueButton:active {
	position:relative;
	top:1px;
}

.blueButtonNarrow {
	background-color:#a5c2f5;
	border-radius:11px;
	border:3px solid #6a52f1;
    vertical-align: middle;
    width: 80px;
    height: 36px;
	display:inline-block;
	cursor:pointer;
	color:Navy;
	font-family:Comic Sans MS;
	font-size:18px;
	font-weight:bold;
	padding-top:3px;
	padding-left:5px;
    padding-right:2px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
}
.blueButtonNarrow:hover {
	background-color:#5cbf2a;
}
.blueButtonNarrow:active {
	position:relative;
	top:1px;
}

.orangeButtonNarrow {
	background-color:#f5b625;
	border-radius:11px;
	border:3px solid #6a52f1;
    vertical-align: middle;
    width: 100px;
    height: 36px;
	display:inline-block;
	cursor:pointer;
	color:Navy;
	font-family:Comic Sans MS;
	font-size:18px;
	font-weight:bold;
	padding-top:3px;
	padding-left:5px;
    padding-right:2px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
}
.orangeButtonNarrow:hover {
	background-color:#5cbf2a;
}
.orangeButtonNarrow:active {
	position:relative;
	top:1px;
}


.col_header {
font-family: serif;
font-weight: bold;
font-size: 120%;	
color: purple;
}

.title {
font-size: 200%;
font-family: Comic Sans MS;
font-style: italic;
font-weight: bold;
color: navy;
}

.sub_title {
font-size: 150%;
font-family: Comic Sans MS;
font-style: italic;
font-weight: bold;
color: navy;
}

.sub_title_purple {
font-size: 150%;
font-family: Comic Sans MS;
font-style: italic;
font-weight: bold;
color: purple;
}

.message {
font-size: 100%;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
color: #800069;
}

.error_message {
font-size: 100%;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
color: #dc0e0e;
}

.button {
  border: none;
  color: white;
  background-color: #008CBA; /* Blue */
  padding: 5px 5px;
  font-family: Comic Sans MS;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button_green {background-color: #04AA6D;} /* Green */
.button_blue {background-color: #008CBA;} /* Blue */

.label {
font-family: serif;
font-weight: bold;
font-size: 120%;	
color: navy;
}

.line {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 100%;	
color: rgb(41, 128, 0);
}

.line_right {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 100%;	
text-align: right;	
color: rgb(41, 128, 0);
}

.align_right{
text-align: right;			
}

.line_blue {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;	
color: hsl(243, 100%, 25%);
}

.numeric_data {
font-family: serif;
font-size: 100%;
text-align: right;		
color:#450571;
}

.alpha_data_right {
font-family: serif;
font-size: 100%;
text-align: right;		
font-weight: bold;
color: rgb(41, 128, 0);
}

.alpha_data {
font-family: serif;
font-size: 100%;
text-align: left;		
font-weight: bold;
color:#450571;
}

.numeric_data_green {
font-family: serif;
font-size: 100%;
font-weight: bold;
text-align: right;		
color:hsl(138, 92%, 23%);
}

.numeric_data_black {
font-family: serif;
font-size: 100%;
text-align: right;		
color:#0e0e0f;
}

.product_name {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;		
text-align: left;
font-weight: bold;
color: rgb(26, 132, 16);
}

.category_name {
font-family: Comic Sans MS;
font-size: 200%;		
text-align: left;
color: navy;
}

.data {
font-family: serif;
font-size: 100%;		
justify-content: start;
color: #034f03;
}

.cell_blue {
	border: 2px solid #02213f; 
	background-color: hsl(198, 66%, 84%);
}

.cell_blue_no_border {	
	background-color: #d0ebf7;
}

.cell_yellow {
	border: 2px solid #076012; 
	background-color: #f5f4ce;
}

.cell_green {
	border: 2px solid #076012; 
	background-color: #a9f1bb;
}

.header {
color: #450571;
text-align: center;
font-family: serif;
font-size: 150%;
}

.fit-content {
    width: 1%;
    white-space: nowrap;
}

.body {
  background-image: url('http://anastlandia.nano-bio-tek.com/images/lala.png');
  background-repeat: no-repeat;
}

.dialog_left {
  margin-left: 50;
  width: 600px; 
  left: 50;	
  border: 8px solid #3b82f6;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Styles the darkened background behind the pop-up */
.dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

.dialog_blue {
  margin-left: 50;
  margin-right: auto;
  left: 50;	
  border: 8px solid #3b82f6;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.dialog_red {
  margin-left: 50;
  margin-right: auto;
  left: 50;	
  border: 8px solid #ba0c0c;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.input[type="radio"]:disabled {
  background-color: #e0e0e0; /* Background color when disabled */
  border-color: #999;        /* Border color when disabled */
  opacity: 0.7;              /* Optional transparency */
  cursor: not-allowed;       /* Changes mouse pointer */
}
.scroll-box {
  height: 200px;         /* Set the visible height */
  width: 300px;
  overflow-y: auto;      /* Show a vertical scrollbar when needed */
  border: 1px solid #ccc;  /* Optional border */
  padding: 10px;         /* Optional inner spacing */
}

.delete-btn {
  /* Layout & Sizing */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  
  /* Borders & Background */
  background-color: #e0e0e0; /* Light grey */
  border: none;
  border-radius: 50%; /* Makes it a perfect circle */
  
  /* Text / Icon Styling */
  color: #666666; /* Darker grey for the X */
  font-family: sans-serif;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  
  /* Interactive Elements */
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* Hover effect for better UX */
.delete-btn:hover {
  background-color: #d0d0d0; /* Slightly darker grey on hover */
  color: #333333;
}

/* Accessibility focus state */
.delete-btn:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

.rotate-90 {
  display: inline-block; /* Required for transforms to work on inline text */
  transform: rotate(-90deg); 
  transform-origin: center center; /* Changes the pivot point of the rotation */
}