body {
    margin: 0;
    font-family: "Titillium Web";
}

.webChatButton {
    border: 1px solid white;
    width: 50px;
    height: 50px;
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 33px;
    color: white;
    border-radius: 50px;
    cursor: pointer;
    user-select: none;
}

.webChatWindow {
    z-index: 1000;
    position: fixed;
    right: 10px;
    bottom: 80px;
    height: 522px;
    width: 330px;
    background: white;
    border: 2px solid #262626;
    display: flex;
    flex-direction: column;
}

.webChatWindowHeader {
    text-align: center;
    border-bottom: 2px solid #262626;
    color: white;
}

.webChatWindowContent {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.webChatWindowContentAnswer {
    margin: 5px;
    text-align: left;
}

.webChatWindowContentAnswer span {
    color: white;
    border-radius: 4px;
    display: inline-block;
    max-width: 60%;
    padding: 10px;
}

.webChatWindowContentQuestion {
    margin: 5px;
    text-align: right;
}

.webChatWindowContentQuestion span {
    background: #575858;
    color: white;
    border-radius: 4px;
    display: inline-block;
    max-width: 60%;
    padding: 10px;
    text-align: left;
}

.webChatWindowContentDisabled {
    margin: 5px;
    text-align: left;
    white-space: break-spaces;
}

.webChatWindowContentDisabled span {
    background: #999999;
    color: white;
    border-radius: 4px;
    display: inline-block;
    max-width: calc(100% - 20px);
    padding: 10px;
}

.webChatWindowContentMessages {
    height: 100%;
    overflow: auto;
    max-height: 394px;
}

.webChatWindowContentChatInput {
    height: 81px;
    display: flex;
    flex-direction: column;
}

.webChatWindowContentChatTextarea {
    font-family: "Titillium Web";
    width: 100%;
    height: 50px;
    font-size: 15px;
    border: 1px solid #d4d4d4;
    border-radius: 0;
    resize: none;
    outline: none;
}

.webChatWindowContentChatNameInput {
    font-size: 15px;
    padding: 5px;
    height: 50px;
    border-top: 2px solid #d4d4d4;
    border-bottom: 1px solid #d4d4d4;
    border-right: 1px solid #d4d4d4;
    border-left: 1px solid #d4d4d4;
    border-radius: 0;
    resize: none;
    outline: none;
}

.webChatWindowContentChatSend {
    width: 50px;
    height: 50px;
    justify-content: center;
    justify-items: center;
    display: flex;
    align-items: center;
    border: 1px solid #d4d4d4;
    font-size: 27px;
    cursor: pointer;
}

.webChatWindowFooter {
    text-align: center;
    border-top: 2px solid #1a1a1a;
    background: #1a1a1a;
    color: white;
}

.webChatWindowFooter a {
    color: white;
}

#chatClearHistory {
    text-decoration: underline;
}


.webChatWindowBounceIn{
    -webkit-animation: bounceIn 0.5s forwards;
    -moz-animation: bounceIn 0.5s forwards;
    animation: bounceIn 0.5s forwards;
}
 

@keyframes bounceIn {
    0% { 
       opacity: 0; 
       transform: scale(.3);
    }
    50% { 
       opacity: 1;
       transform: scale(1.05);
    }
    70% {
       transform: scale(.9);
    }
    100% {
       transform: scale(1);
    }
  }