.containerMessageTemplate {
    max-width: 300px; /* Larghezza massima del messaggio */
    padding: 10px 20px; /* Padding interno */
    margin: 10px; /* Margine esterno */
    background-color: #F0F0F0; /* #0084ff Colore di sfondo */
    color: black; /* Colore del testo */
    /*border-radius: 20px;*/ /* Angoli arrotondati */
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombra */
    position: relative; /* Per la freccia */
    word-wrap: break-word; /* Adatta il testo all'interno del div */
    margin: auto;
}

    .containerMessageTemplate::after {
        content: ''; /* Freccia */
        position: absolute;
        top: 0%; /* Posiziona la freccia verticalmente al centro */
        left: -16px; /* Posiziona la freccia a sinistra del div */
        width: 0;
        height: 0;
        /*border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #0084ff;*/ /* Colore della freccia */
        /*transform: translateY(-50%); */ /* Centra verticalmente la freccia */
        border-left: 20px solid transparent;
        border-top: 20px solid #F0F0F0; /* #0084ff Colore del triangolo */
        border-radius: 5px;
    }

div[name='testo'] {
}

div[name='media'] {
}

div[name='mediaAudio'] {
    width: 100%;
    min-width: 200px;
}

div[name='document'] {
    width:100%;
    min-width:200px;
}

div[name='reaction'] {
}

img[name='mediaImg'] {
    max-height:150px;
    width:auto;
}

img[name='productImg'] {
    max-height: 80px;
    width: auto;
}

div[name='contenitoreTemplate'] {
    max-width: 250px;
}

div[name='headerTemplate'] {
    text-align:center;
}

video[name='mediaVideo'] {
    width: 100%;
}

audio[name='mediaAudio'] {
    width: 100%;
}

audio[name='mediaAudio'] source {
    width: 100%;
}

a[name='mediaDocument'] {
    width: 100%;
}

div[name='mediaDocIcon'] {
    float: left;
    width: 15%
}

div[name='mediaDocName'] {
    float: left;
    width: 70%
}

div[name='footerTemplate'] {
    opacity: 50%
}

table[name="tableBtn"] 
{
    border-collapse:collapse;
    width:100%;
}

tr[name='btnTemplate'] {
    width: 100%;
    border-bottom: 1px solid lightgray;
}

tr[name='btnTemplate'] td {
    width: 100%;
    border-bottom: 1px solid lightgray;
    text-align:center;
}

tr[name='btnTemplate'] td[name='btnIcon'] {
    padding-right:5px;
    text-align:right;
    width:40%;
}

tr[name='btnTemplate'] td[name='btnSpan'] {
    padding-left: 5px;
    text-align: left;
    width: 60%;
}

.msgRepliedToIn {
    padding: 5px;
    background-color: #F5F6F6;
    border-left: 4px solid #006400;
    border-radius: 10px
}

.msgRepliedToOut {
    padding: 5px;
    background-color:#D1F4CC;
    border-left: 4px solid #006400;
    border-radius: 10px
}

.msgOrderIn 
{
    padding: 5px;
    background-color: #F5F6F6;
    border-radius: 10px
}

.msgOrderIn table {
    width:100%;
}

.msgOrderCol1 {
    width: 30%;
}

.msgOrderCol1 img {
    max-height:80px;
    width:auto;
}

.msgOrderCol2 {
    width: 70%;
    padding: 5px;
    font-weight: bold
}

.msgOrderCol2 span {
    opacity:50%
}

.conteninerReactions {
    position: absolute;
    /*bottom: 10px;*/ /* Posizionamento relativo al contenitore */
   /* right: 10px;*/
   /* height: 50px;*/
    padding:5px;
    background-color: #ffffff;
    border-radius:10px; /* Forma circolare */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    /*font-size: 24px;*/
    z-index: 10; /* Assicura che sia sopra il contenitore */
    color:black;
}

.contentReaction {
    overflow:initial;
    margin-bottom:30px;
}