/* Inizio Template chat */
       
       .headerChat {
           position: fixed;
           top: 0;
           width: 100%;
           height: 60px;
           background-color: #333;
           color: #fff;
		border:0px;
		/*
           display: flex;
           align-items: center;
           justify-content: center;
		*/
           z-index: 2;
       }

       /* Sotto testata fissa */
       .subHeaderChat {
           position: fixed;
           top: 60px;
           /*left: 0;*/
           width: 100%;
           height: 40px;
           background-color: #333;
           color: #fff;
           /*
		display: flex;
		align-items: right;
           justify-content: right;
		*/
           z-index: 2;
       }
	
	
       /* Footer fisso */
       .footerChat {
           position: fixed;
           bottom: 0;
           /*left: 0;*/
           width: 100%;
           height: 100px;
		   background-color: #333;
           color: #fff;
			/*
           display: flex;
           align-items: center;
           justify-content: center;
			*/
           z-index: 9999999;
       }

       /* Contenuto centrale */
       .contentBody {
		padding:3px;
		margin-top: 100px;
           padding-top: 10px; /* Spazio per la testata */
           padding-bottom: 0px; /* Spazio per il footer */
           /*min-height: calc(100vh - 100px); / * Altezza finestra meno testata e footer */
           background-color: #fff;
		/*display: flex;
           align-items: center;
           justify-content: center;
		*/
		z-index:1;
      }
   
   .direct-chat-messages {
	  -webkit-transform: translate(0, 0);
	  transform: translate(0, 0);
	  min-height: calc(100vh - 170px); /* Altezza finestra meno testata e footer */
	  overflow: auto;
	  padding: 10px;
	  border:0px #c0c0c0 solid;
	}

   .direct-chat-users {
	  -webkit-transform: translate(0, 0);
	  transform: translate(0, 0);
	  min-height: 200px; /* Altezza finestra meno testata e footer */
	  overflow: auto;
	  padding: 0px;
	  border:0px #c0c0c0 solid;
	}

	body {
	  background-color: #f2f2f2; /* Grigio chiaro */
	  background-image: 
	    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Ctext x='20' y='35' font-size='8' font-family='Arial' fill='%23d0d0d0'%3EChatID%3C/text%3E%3C/svg%3E"),
	    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='5 0 50 50'%3E%3Ctext x='10' y='25' font-size='9' font-family='Arial' fill='%23ffb9ec'%3EChatID%3C/text%3E%3C/svg%3E"),
	    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Ctext x='15' y='15' font-size='7' font-family='Arial' fill='%23e0e0e0'%3EChatID%3C/text%3E%3C/svg%3E");
	  background-repeat: repeat;
	}
	
	
	.countdown {
		padding:2px;
	  	display: flex;
	  	font-size: 1em;
	}
	
	.countdown-item {
	  display: flex;
	}
	
	.separator {
		position:relative;
		top:0px;
	  	padding: 0px 0px 0px 0px;
		font-size: 1em;
	}
	
	.digit {
		border: 1px #c0c0c0 solid;
	  background-color: #fff;
	  border-radius: 5px;
	  padding: 10px;
	  margin: 0 2px;
	  position: relative;
	  width: 30px;
	  height: 30px;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	
	.digit.flip {
	  animation: flip 0.5s ease;
	}
	
	@keyframes flip {
	  0% { transform: rotateX(0); }
	  50% { transform: rotateX(-90deg); }
	  100% { transform: rotateX(-180deg); }
	}
	
/* Fine Template chat */
/* INIZIO sfondo ricerca messaggi */
#searchMessage {
    margin-bottom: 5px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    background-color: #eee;
    
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    font-size: 1.2em;
    transition: opacity 0.5s ease;
}
.msgSend {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    transition: opacity 0.5s ease;
}
.msgReceved {
    background-color: #eee;
    color: #155724;
    border: 1px solid #eee;
    transition: opacity 0.5s ease;
}
#messageContainer {
    height: 300px;
    overflow-y: auto;
    border: 0px solid black;
    padding: 10px;
}
.message {
    margin: 5px 0;
    padding: 10px;
    background-color: #e0e0e0;
    border-radius: 5px;
}
/* FINE sfondo ricerca messaggi */

/* Stile generale della scrollbar */
::-webkit-scrollbar {
  width: 8px; /* Larghezza della scrollbar */
}

/* Stile della "barra" della scrollbar */
::-webkit-scrollbar-thumb {
  background-color: #a8a8a8; /* Colore della scrollbar */
  border-radius: 6px; /* Arrotonda gli angoli della scrollbar */
}

/* Cambia il colore quando si passa sopra la scrollbar */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

/* Stile della "traccia" della scrollbar (l'area non coperta dalla scrollbar) */
::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* Colore della traccia della scrollbar */
}

.tb-scrollable {
	display: block;
	padding:0px;
	margin:0px;
	width: 100%;
  	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	max-height: 240px;	 
}
.tb-scrollable-240 {
	display: block;
	padding:0px;
	margin:0px;
	width: 100%;
  	overflow-y: auto; 
	-webkit-overflow-scrolling: touch;
	max-height: 240px;	 
}
.tb-scrollable-380 {
	display: block;
	padding:0px;
	margin:0px;
	width: 100%;
  	overflow-y: auto; 
	-webkit-overflow-scrolling: touch;
	max-height: 380px;	 
}
/* fine style scrool bar */

.timerMsg{
	position:absolute;
	bottom:0px;
	font-size:10px;
	right:5px;
}