.chatcontainer--wrapper {
    line-height: 140%;
    max-width: 500px;
    margin: auto;
    background-color: var(--mainbg);
    font-family: Arial, sans-serif;

    /* Defining default colors */
    --mainbg: transparent;
    --bgColorA: #e8ebed;
    --txtColorA: #000;
    --bgColorB: var(--mainColor, #006860);
    --txtColorB: #fff;
    --nameColor: #666;
    --dotTypingPrimaryColor: #666;
    --dotTypingSecondaryColor: #666;
    --bgTyping: #e8ebed;

    /* Animations settings */
    --animationDuration: 2s;
}

.chatcontainer--wrapper[data-theme="fbmessenger"] {
    --bgColorA: #e8ebed;
    --txtColorA: #000;
    --bgColorB: #0085FE;
    --txtColorB: #fff;
    --nameColor: #666;
    --dotTypingPrimaryColor: #666;
    --dotTypingSecondaryColor: #666;
    --bgTyping: #e8ebed
}

    /* WhatsApp */
.chatcontainer--wrapper[data-theme="whatsapp"] {
    width: calc(100% - 20px);
    padding: 10px;
    --mainbg: #E9E3DB;
    --bgColorA: #fff;
    --txtColorA: #000;
    --bgColorB: #E1FFC7;
    --txtColorB: #000;
    --nameColor: #666;
    --dotTypingPrimaryColor: #666;
    --dotTypingSecondaryColor: #666;
    --bgTyping: #fff
}

.chatcontainer--wrapper[data-theme="whatsapp"] .chatcontainer--header {
    color: #fff;
    background-color: #006258;
    margin-left: -10px;
    margin-top: -10px;
    width: calc(100% + 20px);
    padding: 5px 0px;
    margin-bottom: 10px;
}

.chatcontainer--wrapper[data-theme="tinder"] {
    --bgColorA: #E5E5E5;
    --txtColorA: #000;
    --bgColorB: #21B9FC;
    --txtColorB: #fff;
    --nameColor: #666;
    --dotTypingPrimaryColor: #666;
    --dotTypingSecondaryColor: #666;
    --bgTyping: #E5E5E5
}

.chatContent {
    max-width: 300px;
    margin: 5px;
    border-radius: 15px;
    font-size: 14px;
    padding: 7px 12px;
    text-align: left;
    line-height: 18px;
}

.chatcontainer--message {
    display: inline-block;
}

.chatcontainer--block[data-align="left"] {
    margin-left: 0;
    margin-right: auto;
    text-align: left;
    position: relative;
}

.chatcontainer--block[data-align="right"] {
    margin-left: auto;
    display: block;
    text-align: right;
}

.chatContent img {
    width: 100%;
    margin: 5px 0;
}

.chatcontainer--block[data-align="right"] .chatContent {
    color: var(--txtColorB);
    background-color: var(--bgColorB);
    margin-left: 30px;
    margin-right: 0;
}

.chatcontainer--block[data-align="left"] .chatContent {
    color: var(--txtColorA);
    background-color: var(--bgColorA);
    margin-right: 30px;
    margin-left: 0;
}

.chatName {
    color: var(--nameColor);
    font-size: 11px;
    font-family: arial;
    line-height: 12px;
    margin-top: 5px;
}

/* Styling header */
.chatcontainer--header {
    text-align: center;
}

.chatcontainer--name {
    font-weight: bold;
}

.chatcontainer--date {
    font-size: 80%
}

/* Typing animation */

.chatcontainer--dotWrapper {
    position: absolute;
    left:0;
    background-color: var(--bgTyping);
    padding: 10px 18px;
    -webkit-border-radius: 20px;
    -webkit-border-bottom-left-radius: 2px;
    -moz-border-radius: 20px;
    -moz-border-radius-bottomleft: 2px;
    border-radius: 20px;
    border-bottom-left-radius: 2px;
    display: inline-block;
    margin-top: 5px;
}

.chatcontainer--typing {
    align-items: center;
    display: flex;
    height: 17px;
}

.chatcontainer--typing .chatcontainer--dot {
    animation: typingAnimation 1.8s infinite ease-in-out;
    background-color: var(--dotTypingPrimaryColor);
    border-radius: 50%;
    height: 7px;
    margin-right: 4px;
    vertical-align: middle;
    width: 7px;
    display: inline-block;
}

.chatcontainer--typing .chatcontainer--dot:nth-child(1) {
    animation-delay: 200ms;
}

.chatcontainer--typing .chatcontainer--dot:nth-child(2) {
    animation-delay: 300ms;
}

.chatcontainer--typing .chatcontainer--dot:nth-child(3) {
    animation-delay: 400ms;
}

.chatcontainer--typing .chatcontainer--dot:last-child {
    margin-right: 0;
}

@keyframes typingAnimation {
    0% {
        transform: translateY(0px);
        background-color:var(--dotTypingSecondaryColor); 
    }

    28% {
        transform: translateY(-7px);
        background-color:var(--dotTypingSecondaryColor); 
    }

    44% {
        transform: translateY(0px);
        background-color:var(--dotTypingSecondaryColor); 
    }
}

/* chat animations delay */

.chatcontainer--animated.chatActivated .chatcontainer--message {
    animation: messageWrapperAnimation var(--animationDuration) forwards;
    animation-delay: inherit;

}

.chatcontainer--animated.chatActivated .chatcontainer--dotWrapper {
    animation: dotWrapperAnimation var(--animationDuration) forwards;
    visibility: hidden;
    animation-delay: inherit;

}

.chatcontainer--block[data-visibility="hidden"] {
    visibility: hidden;
}

.chatDeactivated {
    visibility: hidden;
}

/* deactivate animation where chat starts with sent message and delay = 0 */
.chatcontainer--animated .chatcontainer--block[data-align="right"][data-delay="0"] .chatcontainer--message {
    animation: none;
}



@keyframes dotWrapperAnimation {
    0% {
        visibility: visible;
    }

    90% {
        visibility: visible;
    }
    90% {
        visibility: hidden;
    }


    100% {
        visibility: hidden;
    }
}

@keyframes messageWrapperAnimation {
    0% {
        visibility: hidden;
    }

    99% {
        visibility: hidden;
    }

    100% {
        visibility: visible;
    }

}