@media (min-width: 825px) {
    .conversation {
        height: calc(100% - 12px);
        position: relative;
        z-index: 0;
        width:50%;
    }
}

@media (max-width: 824px) {
    .conversation {
        height: calc(100% - 12px);
        position: relative;
        z-index: 0;
        width:100%;
    }
}

.message {
    color: #000;
    clear: both;
    line-height: 18px;
    font-size: 15px;
    padding: 8px;
    position: relative;
    margin: 8px 0;
    max-width: 85%;
    word-wrap: break-word;
    z-index: -1;
    width:30rem;
}

.message:after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
}

.metadata {
    display: inline-block;
    float: right;
    padding: 0 0 0 7px;
    position: relative;
    bottom: -4px;
}

.metadata .time {
    color: rgba(0, 0, 0, .45);
    font-size: 11px;
    display: inline-block;
}

.metadata .tick {
    display: inline-block;
    margin-left: 2px;
    position: relative;
    top: 4px;
    height: 16px;
    width: 16px;
}

.metadata .tick svg {
    position: absolute;
    transition: .5s ease-in-out;
}

.metadata .tick svg:first-child {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: perspective(800px) rotateY(180deg);
    transform: perspective(800px) rotateY(180deg);
}

.metadata .tick svg:last-child {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: perspective(800px) rotateY(0deg);
    transform: perspective(800px) rotateY(0deg);
}

.metadata .tick-animation svg:first-child {
    -webkit-transform: perspective(800px) rotateY(0);
    transform: perspective(800px) rotateY(0);
}

.metadata .tick-animation svg:last-child {
    -webkit-transform: perspective(800px) rotateY(-179.9deg);
    transform: perspective(800px) rotateY(-179.9deg);
}

.message:first-child {
    margin: 16px 0 8px;
}

.message.received {
    /*background: #fff;*/
    background: #202C32;
    border-radius: 0px 5px 5px 5px;
    float: left;
    color:white;
}

.message.received .metadata {
    padding: 0 0 0 16px;
}

.message.received:after {
    border-width: 0px 10px 10px 0;
    /*border-color: transparent #fff transparent transparent;*/
    border-color: transparent #202C32 transparent transparent;
    top: 0;
    left: -10px;
}

.message.sent {
    background: #128c7e;
    color:white;
    /*background: #DCF8C6;*/
    border-radius: 5px 0px 5px 5px;
    float: right;
}

.message.sent:after {
    border-width: 0px 0 10px 10px;
    border-color: transparent transparent transparent #128c7e;
    /*border-color: transparent transparent transparent #DCF8C6;*/
    top: 0;
    right: -10px;
}

.message.bg-danger.sent:after {
    border-color: transparent transparent transparent var(--bs-danger);
}

.message.bg-primary.sent:after {
    border-color: transparent transparent transparent var(--bs-primary);
}