.ob-action.button_1 {
}
.ob-action.button_2 {
position: relative;
  right: 0px;
  float: right;
}
.floatItem {
  z-index: 1;
  max-width: 260px;
}

.aj_item.ob-input.qty {
	text-align: center;
}
.aj_item.ob-input.password, .aj_item.ob-input.trader_password {
  border-radius: 4px 0px 0px 4px;
  width: calc(80% - 28px);
  margin: 0px;
  height: 20px;
  position: relative;
  top: -1px;  }
  
.ob-action.ob-active {
	cursor: pointer;
}

.aj_item.ob-action.show_passw {
  background: #95ACDC;
  border-radius: 0px 5px 5px 0px;
  width: 28px;
  display: inline-block;
  color: #fff;
  text-align:center;
  position: relative;
  top: -1px;
}
.aj_item.ob-action.show_passw:hover {
background: #425F9C;
}
.aj_item.ob-action.show_passw i {
  padding: 10px 0px 10px 0px;
  font-size: 14px;
}
#categories {
display: block;
font-size: 28px;
margin-left: 2px;
float: left;
line-height: 33px;
}
#categories .fa-compass {
margin-right: 1px;
margin-left:1px;
margin-top: 3px;
}

.chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f2f2f2;
  position: absolute;
  width: 100%
}

.chat-header {
  display: flex;
  align-items: center;
  padding: 16px;
  background-color: #075e54;
  color: #fff;
}

.chat-header img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 16px;
}

.chat-messages {
  flex-grow: 1;
  overflow-y: scroll;
  padding: 16px;
}
.close_bottom_bar {
	width: 40px; height: 5px; background: #ccc; border-radius: 10px;
}
.message {
  margin: 0px 0px 8px 0px;
  display: flex;
  flex-direction: column;
  word-wrap: break-word;
  padding: 8px;
  border-radius: 16px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  background: #fff;
  text-align: left;
  display: inline-block;
  max-width: 78%;
}

.message.no-reply {
  width: calc(100% - 16px);
  max-width: 100%;
  text-align: center;

}

.message p {
  margin: 0;
}

#messageContainer {
  background: #fff;
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 3px;
  box-shadow: 2px 2px 2px #ccc;
  display: none;
}

.received {
  align-self: flex-start;
  background-color: #fff;
  margin-left: 9%;
}

.hidden {
	display: none;
}

.sent {
  align-self: flex-end;
  background-color: #dcf8c6;
}

.time {
  font-size: 12px;
  margin-top: 4px;
  align-self: flex-end;
}

.chat-input {
  display: flex;
  align-items: center;
  padding: 8px;
  background-color: #ededed;
}

.chat-input input {
  flex-grow: 1;
  border: none;
  padding: 8px;
  border-radius: 24px;
  margin-right: 8px;
  font-size: 16px;
  width: 100%;
  max-width: 100%;
}

.chat-input button {
  border: none;
  background-color: #25d366;
  color: #fff;
  padding: 8px 16px;
  border-radius: 24px;
  font-size: 16px;
}

.chat-input button:hover {
  cursor: pointer;
  background-color: #128c7e;
}

/* menu */

.menu {
position: absolute;
display: block;
width: 65%;
max-width: 840px;
min-width: 680px;
z-index: 10;
}
.visible {
	display:table;
}

.menu-container {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  display: none;
  padding: 0px 0;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
  width: 100%;
}

.menu-container > div.headerNavigation {
	display: block;
	padding:2px
}
.menu-container > div.table {
	width: 100%;
}
.menu-container > div.table > div {
	display: table-row;
	vertical-align: top;
}

.menu-container > div.table > div > div.base {
	display: table-cell;
	width:25%;
	vertical-align: top;
	margin-top: 4px;
}
.menu-container > div.table > div > div.submenu-container {
	display: table-cell;
	width:85%;
	vertical-align: top;
}

.menu-container.menu-open {
	display: table;
}

.menu-items {
  margin-top:5px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
}

.menu-items > li {
  margin-bottom: 5px;
  margin-right: 5px;
}
.menu-items > li i.fa {
	width: 18px;
	text-align: center;
}
.menu-items > li > a {
  display: block;
  padding: 5px;
  color: #333;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out;
}

.menu-items > li > a:hover {
background-color: #425F9C;
color: #fff;
border-radius: 3px;
transition: 1s cubic-bezier(.23,.41,.62,1);
}

#traders_viewport {
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    width: calc(100vw - 40px);
    height: calc(100% - 4px);
}
.trader_slide .shop_cart_item {
  height: 318px;
}
.shop_cart_item .actions input{
  width: 40%;
  height: 23px;
}
.shop_cart_item .actions button{
  padding:0px;
  background: transparent;
  border: 0px;
  font-size: 20px;
  padding:4px 4px 0px 4px;
  position: relative;
  top: 1px;
  color: #425F9C;
}

.cart_items_wrapper {
  height: 100%;
  overflow: scroll;
  -webkit-mask-image: linear-gradient(to bottom, black 2%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);

}

#traders_track {
    display: flex;
}

.trader_slide {
  width: 100%;
    flex-shrink: 0;
    scroll-snap-align: start;
}

.horizontal_scroller {
    -webkit-overflow-scrolling: touch; /* Scroll fluido su mobile */
    scrollbar-width: thin; /* Estetica per Firefox */
}

.products_track {
    display: flex;
    flex-wrap: nowrap; /* Fondamentale: impedisce ai prodotti di andare a capo */
}

/* switchfy */
label.switchify.switchify-label {
	display: inline-block;
   cursor:pointer;
   margin-top: 2px;
   margin-bottom: -2px;
}

label.switchify.switchify-label > input.switchified {
	display: none;
}

label.switchify.switchify-label > span.switchify-switch {
	display: block;
	background-color: #cecece;
	height: 1em;
	width: 1.6em;
	position: relative;
	border: 1px solid #cecece;
	border-radius: 1em;
	transition: background-color 0.25s, border-color 0.25s;
}

label.switchify.switchify-label > span.switchify-switch::after {
	content: "";
	background-color: #fff;
	display: block;
	height: 1em;
	width: 1em;
	position: absolute;
	border-radius: 1em;
	left: 0;
	transition: left 0.25s;
}

label.switchify.switchify-label > input.switchified:checked + span.switchify-switch {
	background-color: #4bcc23;
	border-color: #4bcc23;
}

label.switchify.switchify-label > input.switchified:checked + span.switchify-switch::after {
	left: calc(100% - 1em);
}
.switchify.switchify-label.switchified.disabled > input.switchified:checked + span.switchify-switch{
background: #f4f4f4;
  border-color: #f4f4f4;
  cursor:initial;
}

.cart_item {
    flex: 0 0 250px; /* Larghezza fissa per ogni prodotto */
    border: 1px solid #ddd;
}

.ai.keywords.selected {
	font-weight: bold;
}

.ai.small.tabs {
color: #CCC000;
font-size: 12px;
display: block;
border: 1px solid #CCC000;
border-radius: 5px;
float: left;
position: absolute;
margin-top: 1px;
width: 32px;
text-align: center;
line-height: 14px;
}

.ai.small.tabs i {
	margin: 1px 10px;
}

.ai.keywords {
display: inline-block;
margin-left: 40px;
line-height: 18px;
}

.ai.keywords:hover {
	font-weight: bold;
	cursor: pointer;
}

#suggestions {
margin-top: 6px;
color: #000;
top: -15px;
margin-left: 4px;
z-index: 2;
background: #fff;
padding: 2px 10px;
width: calc(100% - 30px);
border-radius: 4px;
border: 1px solid #ccc;
}

#suggestions > div {
	padding:4px 0px;
	font-size: 0.9rem;
}

.ui-slider {
	z-index: -1;
}

.submenu-items {
  left: 100%;
  z-index: 2;
  padding: 4px 0;
  background-color: #ffffff;
  width: 100%;
  min-height: 160px;
  display: block;
}

.submenu-items > li {
  margin-bottom: 5px;
  display: inline-block;
  width:50%;
}

.submenu-items > li > a {
  display: block;
  padding: 5px;
  color: #333;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out;
}

.submenu-items > li > a:hover {
background-color: #425F9C;
color: #fff;
border-radius: 3px;
transition: 1s cubic-bezier(.23,.41,.62,1);
}

.submenu-container {
  display: table-cell;
  padding: 10px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.menu-container:hover .submenu-container {
  display: table-cell;
}

.submenu-container a {
  display: block;
  padding: 5px;
  color: #333;
  text-decoration: none;
}

.submenu-container a:hover {
  background-color: #e5e5e5;
}

#suggestions {
position: relative;
color: #000;
font-size: 14px;
margin-left: 4px;
z-index: 2;
background: #fff;
width: 100%
}

.float_box {
  background: #fff;
  padding: 4px;
  border-radius: 4px;
  box-shadow: 0px 0px 3px aliceblue;
  border: 1px solid aliceblue;
  font-size: 19px;
  color: #ccc;
  border: 1px solid #ccc;
}
.float_box > span.fbutton > a {
  display: inline-block;
  width: 24px;
  text-align: center;
  color: steelblue;
  padding: 2px 0px 0px 0px;
  border: 2px solid steelblue;
  height: 22px;
  border-radius: 50%;
}
.float_box > span.fbutton > a:hover {
	color: #fff;
	background: steelblue;
}
input, select, textarea {
  border-radius: 4px;
  font-size: 14px;
  font-family: "Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  padding: 6px;
  border: 1px solid #ccc;
  box-shadow: 0px 0px 2px #ccc inset;
  margin-right: 4px;
}
/* action button */
.trash_button {
  position: relative;
  display: block;
  width: 27px;
  color: #fff;
  background: #ccc;
  padding: 3px 0px;
  border-radius: 48%;
  float: right;
  margin-right: 10px;
  top: -30px;
}
.trash_button i {
margin: 5px 0px;
}
.trash_button:hover {
  background: #C6000D;
  animation: shake 0.8s infinite;
}

@keyframes shake {
   0% { transform: scale(1) rotate(0); }
   25% { transform: scale(1.20) rotate(-10deg); }
   50% { transform: scale(1.00) rotate(10deg); }
   75% { transform: scale(1.20) rotate(-10deg); }
   100% { transform: scale(1) rotate(0); }
}

.content.list.right > .user {
  float: right;
  margin-left: 5px;
  margin-right: 0px;
}

.content.list.right.reply {
position: relative;
margin-bottom:0px;
}

.write_box button {
	color: #ABC6FF;
}
.content.list.left .aj_item.ob-action.reply{
  position: relative;
  left: -20px;
  color: #ABC6FF;
}
.content.list.left .aj_item.ob-action.reply:hover, .write_box button:hover {
  color: #425F9C;
}
.content.list.left .message {
background: #e9feff;
padding: 8px 24px 8px 8px;
}

.float_box .reply.intro {
	color: #ABC6FF;
  margin-bottom: 0px;
  font-size: 14px;
}

.float_box .commands {
	margin-top: 0px;
}
.write_box.floatItem .commands textarea, .write_box .commands input {
  margin: 0px;
  width: 100%;
  border: 1px solid #ABC6FF;
}
.ui-tabs .ui-tabs-panel {
	padding:0px;
}

/* switchfy */
label.switchify.switchify-label {
	display: inline-block;
   cursor:pointer;
   margin-top: 2px;
   margin-bottom: -2px;
}

label.switchify.switchify-label > input.switchified {
	display: none;
}

label.switchify.switchify-label > span.switchify-switch {
	display: block;
	background-color: #cecece;
	height: 1em;
	width: 1.6em;
	position: relative;
	border: 1px solid #cecece;
	border-radius: 1em;
	transition: background-color 0.25s, border-color 0.25s;
}

label.switchify.switchify-label > span.switchify-switch::after {
	content: "";
	background-color: #fff;
	display: block;
	height: 1em;
	width: 1em;
	position: absolute;
	border-radius: 1em;
	left: 0;
	transition: left 0.25s;
}

label.switchify.switchify-label > input.switchified:checked + span.switchify-switch {
	background-color: #4bcc23;
	border-color: #4bcc23;
}

label.switchify.switchify-label > input.switchified:checked + span.switchify-switch::after {
	left: calc(100% - 1em);
}
.switchify.switchify-label.switchified.disabled > input.switchified:checked + span.switchify-switch{
background: #f4f4f4;
  border-color: #f4f4f4;
  cursor:initial;
}

.range {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 16px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
  height: 0px;
  margin: 11px 2px;
  padding:3px;
}

.vertical.range {
	height: initial;
   width: 0px; /* Full-width */
	margin: 2px 11px;
}

/* Mouse-over effects */
.range:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.range::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #04AA6D; /* Green background */
  cursor: pointer; /* Cursor on hover */
  border-radius: 50%;
}

.range::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #04AA6D; /* Green background */
  cursor: pointer; /* Cursor on hover */
  border-radius: 50%;
}

.action_menu {
  background: #ccc;
  border: 1px solid #ccc;
  padding: 2px;
  font-size: 14px;
  box-shadow: 0px 0px 2px;
  min-height: 16px;
}
.action_menu > i {
	display: none;
}
.action_menu > div {
	background: #fff;
	color:#000;
	border-radius: 4px 4px 0px 0px;
	display: block;
	padding: 0px 4px;
	border-radius: 4px;
}

.action_menu > div.submenu > .action_submenu {
	display: none
}
.action_menu a {
	display: inline-block;
	width:100%;
}
.action_menu > div.submenu i {
	display: inline-block;
	width:20px;
	text-align: center;
}
.action_menu > div.submenu > .action_submenu.ob-level_1 {
  position: absolute;
  min-width: 160px;
  max-width: 220px;
  padding: 3px;
  border-radius: 0px 4px 4px 4px;
  background: #fff;
  margin-top: 18px;
  margin-left:-4px;
}

.action_menu.ob-vertical {
  height: 100%;
  min-width: 165px;
  position: fixed;
  z-index: 2;
}
.page_contents .contents {
  margin-left: 204px;
/*  width: calc(100% - 184px); */
  padding: 4px;
}

.aj_item.ob-action.table {
	border:0.5px solid #638FEB;
	border-radius: 4px;
	background: #638FEB;
   width: calc(100% - 4px);
   margin: 2px;

}

.aj_item.ob-action.table .row {
	background: #638FEB;
	color: #fff;
}

.aj_item.ob-action.table .row.header {
	font-weight: bold;
	text-transform: uppercase;
}
.aj_item.ob-action.table .row .cell .cell_content {
  float: left;
  width: calc(100% - 18px);
  margin: 2px auto 2px 2px;
}
.aj_item.ob-action.table .row.header .cell .label {
display: inline-block;
}

.aj_item.ob-action.table .row .cell{
  border: 0.5px solid #638FEB;
  max-width: 200px;
  padding: 1px 1px 1px 1px;
  border-radius: 3px;
  background: #E0E9FC;
  color: #638FEB;
  overflow: hidden;
  cursor: default;
}
.aj_item.ob-action.table .row .cell.edit{
  min-width: 60px;
}
  
.aj_item.ob-action.ob-icon {
  margin: 2px 0px;
  display: inline-block;
}

.ob-left {
	text-align: left;
}

.ob-center {
	text-align: center;
	padding:0px
}

.ob-right {
	text-align: right;
}

.aj_item.ob-action.table .row.header .cell{
	background: #638FEB;
	color: #fff;
}
.table .row .aj_item.ob-action.ob-active.cell {
	cursor:pointer;
	background: #fff;
}

.table, .ob-table {
	display: table;
}

.table .row .cell .cell_actions {
  display: block;
  float: right;
  position: relative;
  margin-right: -2px;
  width: 18px;
  height: 18px;
  font-size: 10px;
}
.table .row .cell .cell_actions i:hover {
	color: #fff;
}
.table .row .cell.edit {
  display: block;
  position: absolute;
  height: 39px;
  width: 30%;
  margin-right: 16%;
  right: -15%;
  margin-top: 4px;
  max-width: none;
  box-shadow: 4px -4px 4px aliceblue;
  background: #fff;
}
.float_box {
	color: #638FEB;
	font-size: 14px;
	border-block-color: #638FEB;
}
.float_box .cell.edit span {
  height: 100%;
  display: block;
  width: 20px;
  float: right;
  margin-top: 6px;
}
.table_actions button {
  width: 100%;
  text-align: left;
  color: #638FEB;
  background: #fff;
  border: 0px;
}
.green {
  color: #4BCC23;
}
.hidden, .cell.hidden {
	visibility: hidden;
}

.cell .ob-fieldset {
  padding: 2px 4px 2px 0px;
  border-radius: 3px;
  border: 0px solid #ccc;
}
.aj_item.ob-action.table .row.ob-header_action.filters .cell{
	background: #fff;
}

.table-action-menu.after { 
margin-bottom: 2px;
}
.table-action-menu.after#table_menu_pages_after {
	float: right;
	margin-top: 0px;
}
.ob-table-container {
	margin-bottom: 30px;
}

.aj_item.ob-action.ob-button.ob-current {
	background: #fff;
}

.search.condition.group {
	border:1px solid #ccc;
	margin: 2px;
	padding: 4px;
	border-radius: 4px;
	display: table;
	width: 100%;
   text-align: left;
}

.search.condition.group > div {
	display: table-cell;
}

.actions {
	display: flex;
}
 .actions div {
  display: block;
  width: 50%;
}
 .actions div.action_right {
	text-align: right; 
 }
.action_menu.ob-vertical.ob-static > .submenu {
	width: calc(100% - 6px);
	display: block;
}

/* Container principale (da applicare al div che racchiude tutto) */
.messages_history {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 600px;
  margin: 0 auto;
  background: #f9f9f9;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

/* Area dei messaggi */
.top-area {
  flex-grow: 1;
  padding: 20px;
  overflow-y: auto;
  background-color: #ffffff;
  min-height: 400px;
}

/* Area di input in basso */
.bottom-area {
  display: flex;
  align-items: flex-end;
  padding: 15px;
  background: #fff;
  border-top: 1px solid #eee;
  gap: 10px;
}

/* La Textarea */
.chat-message {
  flex-grow: 1;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  padding: 12px 18px;
  font-family: inherit;
  font-size: 15px;
  resize: none;
  height: 45px;
  outline: none;
  transition: border-color 0.3s ease;
}

.chat-message:focus {
  border-color: #8d7530;
}

/* Il Bottone (Paper Plane) */
.ob-button.paper-plane {
  background: #8d7530;
  color: white;
  border: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease;
  /* Animazione automatica */
  animation: gentle-pulse 4s infinite ease-in-out;
}

.customer_image img, .trader_image img{
  width: 100%;
}

@keyframes gentle-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(141, 117, 48, 0.4); }
  50% { transform: scale(1.08); box-shadow: 0 0 15px 5px rgba(141, 117, 48, 0.1); }
}

/* Icona all'interno */
.fa-paper-plane {
  font-size: 18px;
  margin-left: -2px; /* Bilanciamento ottico dell'icona */
}

/* Container principale della cronologia */
.chat-history {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 15px;
    background-color: #f4f7f6;
    border-radius: 8px;
    max-width: 500px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Stile comune per tutti i messaggi */
.message_customer, .message_trader {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.4;
    position: relative;
    word-wrap: break-word;
}

/* Messaggi del CLIENTE (allineati a DESTRA) */
.message_customer {
    align-self: flex-end;
    background-color: #8d7530; /* Il tuo colore dorato */
    color: #ffffff;
    border-bottom-right-radius: 4px; /* Punta del fumetto */
    box-shadow: 0 2px 4px rgba(141, 117, 48, 0.2);
}

/* Messaggi del TRADER (allineati a SINISTRA) */
.message_trader {
    align-self: flex-start;
    background-color: #ffffff;
    color: #333333;
    border-bottom-left-radius: 4px; /* Punta del fumetto */
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.message-date {
  text-align: center;
  margin-bottom: 5px;
  font-size: 10px;
}

.message-date .date {
  padding: 2px 6px;
  background: #ccc;
  width: 25%;
  font-size: 10px;
  text-align: center;
  border-radius: 9px;
  display: inline-block;
}

/* Rende i div cliccabili e pronti per l'input sovrapposto */
#traders_logo, #traders_banner {
    border: 2px dashed transparent;
}

#traders_logo {
	z-index: 100;
}

/* Nasconde l'input ma lo espande su tutta l'area */
.upload_zone input[type="file"] {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 100%;
    height: 100%;
    opacity: 0; /* Invisibile */
    cursor: pointer;
    z-index: 10; /* Sopra l'immagine */
}

/* Stile per la scritta "Max kb" */
.upload_zone .small-text {
display: none;
}

/* Feedback visivo al passaggio del mouse */
#traders_logo:hover, #traders_banner:hover {
    filter: brightness(0.9);
    border-color: #007bff;
}