html {
	height:100%;
}

body {
	height:100%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #474A51;
	background-color: #7E8A92;
	margin: 0;
}

@media screen and (max-width: 420px) {
	body {
		 width: 100%; /* Full width for smaller devices */
		 height: auto; /* Adjust height proportionally if needed */
	}
}

body.big-mode {
	font-size: 14px;
}

body.dark-mode {
	color: #c8c8c8;
	background-color: #1e1f20;
}

a {
	color: #3d3e43;
	text-decoration: none;
}

.dark-mode a {
	color: #c8c8c8;
	text-decoration: none;
}

a:hover {
	color: #131313;
	background-color: rgba(204, 204, 204, 0.4);
}

.dark-mode a:hover {
	color: #ffffff;
	background-color: rgba(36, 36, 36, 0.4);
}

.testo {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	}

body.big-mode .testo {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	}

.titolo  {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
	text-shadow:
	/* slightly offset the shadow in all four directions */
	-1px -1px 0 #44444455,
	1px -1px 0 #44444455,
	-1px 1px 0 #44444455,
	1px 1px 0 #44444455;
	}

body.dark-mode .titolo {
	color: #e2e2e2;
}

body.big-mode .titolo {
	font-size: 13px;
}

.titolo a {
	background-color:transparent;
}

div.mainbody {
	width: 820px;
	-moz-column-count: 4;
	-webkit-column-count: 4;
	column-count: 4;
	-moz-column-gap: 0em;
	-webkit-column-gap: 0em;
	column-gap: 0em;
}

div.container {
	max-width: 820px;
	margin: 0px auto 0px;
	padding: 0px 0px 10px 0px;
	background-color: #F4F4F4;
	border:0px;
	background-repeat:repeat-x;
	border-radius: 10px;
	background-image: linear-gradient(rgba(218,219,222,1), rgba(218,219,222,1), rgba(218,219,222,0));
	background-size: 1px 70px;
}

div.muted {
	opacity: 0.6;
}

body.dark-mode .container {
	background-image: linear-gradient(rgb(41,41,41,1), rgba(41,41,41,1), rgba(218,219,222,0));
	background-color: #2b2c2d;
}

body.big-mode .container {
	max-width:1004px;
}

div.copyright {
	width:820px;
	padding-top:20px;
	text-align:center;
}

body.big-mode div.copyright {
	width:1004px;
	font-size:12px
}

div.news {
	background-color: #D9DADE;
	padding: 10px;
	margin: 5px 5px 5px 5px;
}

ul.ordinato {
	position: relative;
	padding:10px 0px 10px 0px;
	margin:0px 0px 0px 10px;
	min-height:10px;
	width:190px;
	display: inline-block;
	vertical-align: top;
	min-height: 40px;
}

body.big-mode ul.ordinato {
	padding:14px 0px 14px 0px;
	margin:0px 0px 0px 14px;
	min-height:14px;
	width:230px;
}

ul.ordinato:before {
	position: absolute;
	border: 1px solid #474A51;
	border-right: none;
	border-radius: 4px;
	opacity: 0.3;
	background-image: linear-gradient(90deg, rgba(218,221,223,0.6), rgba(218,221,223,0.6), rgba(218,219,222,0));
	content: '';
	bottom: 2px;
	right: 22px;
	left: 10px;
	top: -2px;
 }

body.dark-mode ul.ordinato:before {
	background-image: linear-gradient(90deg, rgba(47,49,47,0.6), rgba(47,49,47,0.6), rgba(218,219,222,0));
	opacity: 0.6;
}

li.item {
	list-style-type: none;
	padding:0px 0px 0px 0px;
}

ul.cat {
	padding:7px 0px 0px 0px;
	margin:0px;
	list-style-type:none;
}

li.ele {
	height:14px;
	margin:0px;
	padding-bottom: 2px;
}

body.big-mode li.ele {
	height:16px;
	margin:2px;
}

div.login_newuser {
	text-align: center;
	display: inline-flex;
}

div.login_error_box {
	margin: 0 auto;
	margin-top: 20px;
	width: 400px;
	text-align: center;
	background-color: #F4F4F4;
	border-radius: 10px;
	border-width: 1px;
	border-color: #60686e ;
}

p.login_error {
	color: #8C2013;
	font-size: 14px;
}

p.login_ok {
	color: #138c49;
	font-size: 14px;
}

div.ele_icon {
	float: left;
	margin-right: 5px;
	margin-top: 2px;
	width: 10px;
	height: 10px;
	background-repeat:no-repeat;
	border-color: rgba(43,44,45,0.2);
	border-width: 1px;
	border-style:solid;
	border-radius: 2px;
	background-size: 10px 10px;
}

body.big-mode div.ele_icon {
	margin-right: 7px;
	width: 14px;
	height: 14px;
	border-radius: 3px;
	border-color: rgba(43,44,45,0.4);
	border-width: 1px;
	border-style:solid;
	background-size: 14px 14px;
}

li.ele.spacer {
	border-radius: 4px;
	background-image: linear-gradient(150deg, rgba(184,184,184,0.3), rgba(184,184,184,0));
}

body.dark-mode li.ele.spacer {
	background-image: linear-gradient(150deg, rgba(56, 56, 56, 0.3), rgba(204,204,204,0));
}

span.spacerspan {
	padding-left: 13px;
}

li.strd {
	height:12px;
	width:156px;
	padding-left:14px;
	margin:0px;
	background-repeat:no-repeat;
	background-position:0px 0px;
}

div.handle {
	width: 100%;
	background-color: #5788AF;
	color:white;
	cursor: move;
}

div.header {
	width:820px;
	height:66px;
	margin: 0px auto 0px;
	overflow: visible;
	border:0px;
	padding-bottom: 10px;
}

body.big-mode .header {
	width:1004px;
	height:74px;
}

div.header_left {
	float:left;
	margin-left: 10px;
	padding-top: 10px;
}

div.header_right {
	float:right;
	text-align:right;
	margin-right:8px;
	padding-top: 8px;
	position: relative;
	display: flex; /* This enables flexbox */
	align-items: center; /* Aligns items vertically in the center */
	justify-content: flex-start; /* Aligns items to the start of the container */
}

div.header_right a {
	margin-left: 2pt;
}

span.logout {
	background-color: #474A51;
	color: #FFFFFF;
	text-decoration:none;
	padding: 2px 6px 2px 6px;
	border-radius: 4px;
}

span.logout i {
	opacity: 0.8;
}

span.logout i:hover {
	opacity: 1;
}

div.logo {
	min-height: 28px;
	background-color: #474A51;
	color: #fff;
	display: inline;
	padding: 4px 8px 4px 8px;
	border-radius: 4px;
	font-size: 18px;
}

body.big-mode .logo {
	min-height: 48px;
	margin-top: 4px;
	padding: 6px 10px 6px 10px;
	font-size: 20px;
	border-radius: 6px;
}

div.logohead {
	min-height: 28px;
	background-color: #474A51;
	color: #fff;
	display: inline;
	padding: 4px 8px 4px 8px;
	border-radius: 4px;
	font-size: 18px;
	margin: 0 auto;
}

div.user {
	display: inline;
	padding: 0px 0px 0px 4px;
}

div.main_admin {
	min-height: 28px;
	width: 400px;
	padding: 4px 8px 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	margin: 0 auto;
}

#main_content {
	min-height: 460px;
}

div.logo img {
	border-radius: 3px;
	border-color: rgba(43,44,45,0.5);
	border-width: 1px;
	border-style:solid;
	vertical-align: text-bottom;
}

div.userdet {
	padding-left: 4px;
	float:right;
	line-height:120%;
}

div.lock {
	display: none;
}

body.big-mode div.userdet {
	padding-left: 8px;
	margin-top: -2px;
}

div.header_right a {
	padding: 2px;
	margin-top: 4px;
	font-size: 14px;
}

div.maintop {
	height: 14px;
}

div.logintop {
	padding-top: 30px;
	height: 80px;
	width: 220px;
	margin: 0 auto;
}

div.loginformout {
	width: 220px;
	margin: 0 auto;
	background-image: linear-gradient(150deg, rgba(218,221,223,1), rgba(186,189,192,1));
	border-radius: 10px;
	border-width: 1px;
	border-color: #60686e ;
}

div.loginformoutnu {
	width: 220px;
	margin: 0 auto;
	background-image: linear-gradient(150deg, rgba(218,221,223,1), rgba(186,189,192,1));
	border-radius: 10px;
	border-width: 1px;
	border-color: #60686e ;
}

div.loginformin {
	width: 200px;
	margin: 0 auto;
	padding-top: 9px;
	line-height: normal;
}

div.loginleft {
	width: 135px;
	float:left;
}

div.loginright {
	float:right;
	padding-top: 7px;
}

div.modal-left {
	width: 250px;
	float: left;
}

div.modal-right {
	width: 192px;
	float: right;
	align-content: right;
}

td.testo_bg {
	height: 16px;
	width: 16px;
}

div.cat {
	width: 190px;
	list-style-type: none;
	border-radius: 4px;
	opacity: 0.9;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
   background-blend-mode: overlay;
	animation: bg 20s ease infinite;
}

div.cat:not(.strd) {
	border-left-width: 1px;
	border-left-style: solid;
}

body.big-mode div.cat {
	width: 230px;
	border-radius: 6px;
}

div.cat_ttl {
	background-image: linear-gradient(180deg, rgba(218,221,223,0.1), rgba(218,221,223,0));
	height:20px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
	padding-left:10px;
	line-height:18px;
}

body.big-mode div.cat_ttl {
	height:24px;
	font-size:14px;
	line-height:22px;
	padding-left:14px;
}

body.dark-mode div.cat_ttl {
	color: #e2e2e2;
	background-image: linear-gradient(180deg, rgba(24, 24, 24, 0.2), rgba(30, 30, 30, 0.3), rgba(30, 30, 30, 0.2));
}

div.cat_ttl:hover .editable {
	opacity: 1;
}

span.divspace-s {
	display: inline-block;
	width: 3pt;
}

span.divspace-m {
	display: inline-block;
	width: 6pt;
}

span.divspace-l {
	display: inline-block;
	width: 11pt;
}

div.editable {
	height: 16px;
	float: right;
	opacity: 0.7;
	margin-top: 1px;
	margin-right: 4px;
}

body.big-mode div.editable {
	margin-top: 0px;
}

.editable a {
	color: #FFFFFF;
	background-color: rgba(204, 204, 204, 0);
}

.editable:hover {
	opacity: 1;
}

li.ele .editable {
	display: none;
	float: none;
}

li.ele:hover .editable {
	display: inline;
	animation: fade 1s;
	opacity: 1;
}

li.ele:hover .editable a {
	color: #474A51;
	background-color: rgba(204, 204, 204, 0);
}

body.dark-mode li.ele:hover .editable a {
	color: #afb6c6;
	background-color: rgba(204, 204, 204, 0);
}

body.bog-mode li.ele:hover .editable a {
	font-size: 11px;
}

@keyframes fade {
	0% {
		opacity: 0;
	}
	75% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

div.cat_ele {
	background-color: rgba(228,231,233,0.8);
	padding-left: 4px;
	padding-bottom: 8px;
	height: inherit;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}

body.dark-mode .cat_ele {
	background-color: rgba(60, 60, 60, 0.96);
}

body.big-mode .cat_ele {
	padding-bottom: 12px;
}

li.citem {
	margin-bottom: 11px;
}

body.big-mode li.citem {
	margin-bottom: 17px;
}

img.li_std {
	border:0px;
}

img.bot_adm {
	border:0px;
	padding-bottom:10px;
}

img.bot_mob {
	border:0px;
	padding-bottom:10px;
}

img.bot_off {
	border:0px;
	padding-left:25px;
	padding-bottom:10px;
}

img.lock {
	border:0px;
	padding-right:5px;
	padding-top:7px;
}

img.option {
	border:0px;
	padding-right:3px;
	padding-top:7px;
}

.sat0 {
	opacity: 0.3;
	margin: 1px;
	font-size: 0.7rem;
}

body.big-mode .sat0 {
	opacity: 0.2;
	margin: 0.5px;
	font-size: 0.7rem;
}

.sat1 a {
	color: #dec90a;
	opacity: 1;
	font-size: 0.7rem;
}

.sat2 {
	opacity: 1;
	margin: 1px;
}

.sat2 {
	margin: 0.5px;
}

.sat0:hover {
	opacity: 1;
}

body.big-mode .sat0:hover {
	opacity: 1;
}

.sat0 a:hover {
	background-color: unset;
}

.sat1 a:hover {
	background-color: unset;
}


li.ui-sortable-placeholder {
	 background-image: linear-gradient(150deg, rgba(211,211,211,0.8), rgba(211,211,211,0.2));
    border-radius: 10px;
    opacity: 0.5;
    visibility:visible !important;
    margin-bottom: 11px;
}

body.dark-mode li.ui-sortable-placeholder {
	background-image: linear-gradient(150deg, rgba(87, 87, 87, 0.8), rgba(14, 14, 14, 0.2));
}

body.big-mode li.ui-sortable-placeholder {
	margin-bottom: 17px;
}

body.dark-mode .modal-content {
	background-color: #2b2c2d;
}

body.dark-mode input {
	background-color: #1e1f20;
	border-color: #222222;
	border: 1 solid;
	color: #c8c8c8;
}

body.dark-mode textarea {
	background-color: #1e1f20;
	border-color: #222222;
	border: 1 solid;
	color: #c8c8c8;
}

body.dark-mode input[type=checkbox]:checked::before {
	background-color: #1e1f20;
	accent-color: #1e1f20;
	color: #c8c8c8;
}

a.close-modal:hover {
	background-color: unset;
}

input[type=submit] {
	padding:5px 15px;
	background-color: rgb(70, 171, 70);
	border:0 none;
   cursor:pointer;
   -webkit-border-radius: 4px;
   border-radius: 4px;
	color: white;
}

body.dark-mode input[type=submit] {
	background-color: rgb(47, 114, 47);
}
	
input[type=button] {
	padding:5px 15px;
	border:0 none;
	cursor:pointer;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	color: white;
}

input.cancel {
	background-color: #333;
}

input.login {
	background-color: #474A51;
}

input[type=reset] {
	padding:5px 15px;
	background-color: rgb(171, 70, 70);
	border:0 none;
   cursor:pointer;
   -webkit-border-radius: 4px;
   border-radius: 4px;
	color: white;
	margin-left: 42px;
}

body.dark-mode input[type=reset] {
	background-color: rgb(114, 47, 47);
}

body.big-mode input[type=reset] {
	margin-left: 22px;
}

div.ele_icon.lh-1 {
	border: none;
}

div.li_pnd1 {
	background-image: linear-gradient(340deg, rgb(164, 160, 25), rgba(169, 165, 29,0.8), rgba(169, 165, 42,0), rgba(169, 165, 42,0));
	background-size: 15% 6px;
	background-repeat:no-repeat;
	background-position:right;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	width: calc(100% + 2px);
}

body.dark-mode div.li_pnd1 {
	background-image: linear-gradient(340deg, rgb(93, 90, 19), rgba(100, 97, 22, 0.8), rgba(119, 116, 29,0), rgba(119, 116, 29,0));
}

body.big-mode div.li_pnd1 {
	background-size: 13% 8px;
	width: calc(100% + 4px);
}

i.fa-star {
	margin-top: 2px;
}

i.fa-note-sticky {
	margin-top: 2px;
}

body.big-mode i.fa-star {
	margin-top: 4px;
}

body.big-mode i.fa-note-sticky {
	margin-top: 4px;
}

label {
	padding-right: 4px;
}

div.test {
	border: 1px solid #eee;
 }

form > p > label {
	width: 58px;
	text-align: right;
	vertical-align: text-top;
 }
 
i.fa-circle-info {
	opacity: 50%;
	font-size: 9px;
}
 
body.big-mode i.fa-circle-info {
	opacity: 50%;
	font-size: 11px;
}

div.strd {
	border: 1px solid rgba(112, 111, 61, 0.6);	
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	background-color: #A9A52A;
	background: 
	 linear-gradient(
		-45deg,
		#FFD700,
		#957218,
		#F0D58C,
		#E8C547,
		#D4AF37,
		#C69E3C
	 ),
	 repeating-radial-gradient(
		circle at 0 0,
		transparent 0,
		#706e3177 10px );
   background-blend-mode: overlay;
	background-size: 400% 400%, 100% 100%;
	animation: bg 18s ease infinite;
}

div.ntts {
	border: 1px solid rgba(118, 134, 146, 0.9);
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	background-color: #768692;
	background:
	 linear-gradient(
		-45deg,
		#DEDEDE,
		#C4C4C4,
		#ACACAC,
		#969696,
		#737373,
		#CCCCCC
	 ),
	 repeating-linear-gradient(
		45deg,
		#919ea7 0,
		#919ea7 1.1px,
		#768692 0,
		#768692 50%);
   background-blend-mode: overlay;
	background-size: 400% 400%, 11px 11px;
	animation: bg 18s ease infinite;
}

@keyframes bg{
	0% {
		background-position: 0% 50%, 0 0;
	}
	50% {
		background-position: 100% 100%, 0 0;
	}
	100% {
		background-position: 0% 50%, 0 0;
	}
}

div.pages {
	margin: 0px 10px 0px 10px;
}

div.pages ul {
		display: flex;         /* Enables Flexbox */
		flex-direction: row;   /* Arranges the li elements in a row */
		align-items: center;
}

.nav-pills .nav-link {
	border: 1px solid rgba(120, 120, 130, 0.4);
	color:#1e1f20;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	background-color: rgba(190, 190, 200, 0.4);
	margin: 0px 4px 4px 0px;
	padding: 4px 8px 4px 8px;
	box-shadow: 0 0 1px rgb(190, 190, 200) inset;
}

body.dark-mode .nav-pills .nav-link {
	color: rgb(220, 220, 220);
	background-color: rgba(120, 120, 130, 0.4);
	border: 1px solid rgba(190, 190, 200, 0.3);
	box-shadow: 0 0 1px rgba(120, 120, 130, 0.3) inset;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
	color: white;
	background-color: rgb(70, 105, 171);
}

body.dark-mode .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
	color: white;
	background-color: rgb(70, 105, 171);
}

.nav-pills .nav-link.shared {
	background-color: rgba(200, 200, 190, 0.4);
}

body.dark-mode .nav-pills .nav-link.shared {
	background-color: rgba(130, 130, 120, 0.4);
}

.nav-pills .nav-link.active.shared, .nav-pills .show > .nav-link {
	color: white;
	background-color: rgb(171,136,70);
}

body.dark-mode .nav-pills .nav-link.active.shared, .nav-pills .show > .nav-link {
	background-color: rgb(171,136,70);
}

.nav-pills .nav-link.shareded {
	background-color: rgba(200, 190, 190, 0.4);
}

body.dark-mode .nav-pills .nav-link.shareded {
	background-color: rgba(130, 120, 120, 0.4);
}

.nav-pills .nav-link.active.shareded, .nav-pills .show > .nav-link {
	color: white;
	background-color: rgb(171, 87, 70);
}

body.dark-mode .nav-pills .nav-link.active.shareded, .nav-pills .show > .nav-link {
	background-color: rgb(171,87,70);
}

/* Hide text in the navigation tabs by default */
.nav-item span {
	display: none;
 }
 /* Show the one that's active */
 .nav-item .active span {
	display: inline-block;
 }

 .nav-item .nampage {
	display: inline-block;
	margin-left: 6px;
 }

 .nav-item .active .nampage {
	font-weight: bold;
	margin-left: 10px;
	margin-right: 6px;
 }

 .nav-item .usrpage {
	display: inline-block;
	background-color: rgba(244, 244, 244, 0.642);
	border: 0px;
	border-radius: 3px;
 }

 body.dark-mode .nav-item .usrpage {
	background-color: rgba(200,200,200,0.3);
 }

 .nav-item .active .usrpage {
	background-color: rgba(30,31,32,0.3);
	border: 1px solid rgba(30,31,32,0.4);
 }

 body.dark-mode .nav-item .active .usrpage {
	background-color: rgba(30,31,32,0.2);
	border: 1px solid rgba(30,31,32,0.3);
 }
 
 .form-check {
	min-height: auto;
 }

textarea.form-control {
	min-height: 200px;
}

textarea.form-control.long {
	min-height: 400px;
}

.form-control {
	background-color:#e2e4e5;
}

.form-select {
	background-color:#e2e4e5;
}

body.dark-mode .form-select {
  background-color: #1e1f20;
  color: #c8c8c8;
  border: none;
}

body.dark-mode .form-select:focus {
	border: 1px solid #86b7fe;
} 

body.dark-mode .form-control:focus {
	background-color: #1e1f20;
	color: #c8c8c8;
}

.highlight {
	border: 2px solid red; /* or any other 'light up' style you prefer */
	transition: border 0.5s ease-in-out; /* Smooth transition for the border */
}

/* Styling the slider */
.custom-range {
	-webkit-appearance: none; /* Override default CSS styles */
	appearance: none;
	width: 26px; /* Same width as your switch */
	height: 8px; /* Same height as your switch */
	background: #ddd; /* Track color */
	outline: none; /* Remove outline */
	opacity: 0.7; /* Partial transparency */
	transition: opacity 0.2s;
	border:0px;
	border-radius: 4px;
	--thumb-color: grey; /* Default color */
}

/* Styling the thumb */
.custom-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 12px; /* Thumb width */
	height: 8px; /* Thumb height */
	cursor: pointer; /* Cursor on hover */
	border:0px;
	border-radius: 4px;
	background: var(--thumb-color);
}

.custom-range::-moz-range-thumb {
	width: 12px; 
	height: 8px;
	cursor: pointer;
	border:0px;
	border-radius: 4px;
	background: var(--thumb-color);
}

/* Hover effects */
.custom-range:hover {
	opacity: 1; /* Fully opaque on hover */
}

.search-container {
	position: relative; /* Needed for positioning the results */
	margin-top: 4px;
}

#searchBox {
	width: 20em; /* Adjust as needed */
	/* Additional styling for the search box */
}

body:not(.dark-mode) #searchbox {
	background-color: #F4F4F4;
}

body.dark-mode .form-control::placeholder {
	color: #c8c8c8;
}

#results {
	position: absolute;
	top: 100%; /* Positioned right below the search box */
	left: 0;
	min-width: 20em; /* Match the width of the search box */
	background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white */
	border: 1px solid #ccc; /* Optional border */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional shadow for a floating effect */
	z-index: 1000; /* Ensures it floats above other content */
	display: none; /* Initially hidden */
	max-height: 300px; /* Maximum height before scrolling */
	overflow-y: auto; /* Enables scrolling within the div */
	padding-bottom: 4pt;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	padding-right: 9pt;
}

body.dark-mode #results {
	background-color: rgba(30, 31, 32, 0.9); /* Semi-transparent white */
	color: #c8c8c8;
	border: 1px solid #272727; /* Optional border */
}

.result-item {
	padding: 2px;
	cursor: pointer;
	/* Additional styling for each result item */
}

.result-item:hover {
	background-color: #f0f0f0; /* Highlight on hover */
}

body.dark-mode .result-item:hover {
	background-color: #3a3a3a; /* Highlight on hover */
}

.result-highlight {
	background-color: #f0f0f0;
}

body.dark-mode .result-highlight {
	background-color: #3a3a3a; /* Highlight on hover */
}

#clearSearch {
	position: absolute;
	right: 10px; /* Adjust as needed */
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	opacity: .7;
	/* Additional styling (size, color, etc.) */
}