.content-window {
  border-radius: $chat-wrapper-border-radius; /*$chat-wrapper-border-radius*/
  background: $background-theme; /*$background-theme*/
}

.chat-header-border {
    border-top: $chat-border-top; /*$chat-border-top*/
}

.ng-scrollbar-thumb {
  background-color: $scrollbar-color; /*$scrollbar-color*/
}

.ng-scrollbar-thumb:hover,
.ng-scrollbar-thumb:active {
  background-color: $scrollbar-color-active; /*$scrollbar-color-active*/
}

app-chat-input {
    border-top: $chat-border-bottom; /*$chat-border-bottom*/
}

.component {
  width: $width; /*$width*/
  height: $height; /*$height*/
}

.agent-info .name {
  color: $agent-info-name; /*$agent-info-name*/
}

.agent-info .position {
  color: $agent-info-position; /*$agent-info-position*/
}

.circle-with-icon {
  background: $additional-message-background; /*$additional-message-background*/
}

.light-btn {
    border: $light-button-border; /*$light-button-border*/
    color: $typing-dots; /*$typing-dots*/
    background: $background-theme; /*$background-theme*/
}

.light-btn:hover {
    color: $background-theme; /*$background-theme*/
    background: $typing-dots; /*$typing-dots*/
}

.light-btn:focus {
    color: $background-theme; /*$background-theme*/
    background: $typing-dots; /*$typing-dots*/
}

.typing-dots {
  background: $typing-dots; /*$typing-dots*/
}

.incoming .message-content {
  background: $incoming-message-background; /*$incoming-message-background*/
  color: $incoming-message-color; /*$incoming-message-color*/
  border-radius: $chat-border-radius; /*$chat-border-radius*/
}

.incoming .url-content {
   color: $incoming-message-color; /*$incoming-message-color*/
}

.new-message-block .message-content {
  border-radius: $chat-border-radius; /*$chat-border-radius*/
  background: $background-theme; /*$background-theme*/
  color: $agent-info-name; /*$agent-info-name*/
}

.messages .date {
  color: $agent-info-position; /*$agent-info-position*/
}

.outgoing .message-content {
  background: $outgoing-message-background; /*$outgoing-message-background*/
  color: $outgoing-message-text-color; /*$outgoing-message-text-color*/
  border-radius: $chat-border-radius; /*$chat-border-radius*/
}

.outgoing .url-content {
  color: $outgoing-message-text-color; /*$outgoing-message-text-color*/
}

.send-msg-textarea {
  background: $background-theme; /*$background-theme*/
  color: $send-msg-textarea-text-color; /*$send-msg-textarea-text-color*/
}

.send-msg-textarea::placeholder {
  color: $agent-info-position; /*$agent-info-position*/
}

.send-msg-btn {
  fill: $send-msg-btn; /*$send-msg-btn*/
}

.send-msg-btn:disabled {
  fill: $send-msg-btn-disabled; /*$send-msg-btn-disabled*/
}

.close-chat button {
  fill: $close-chat-button-cross; /*$close-chat-button-cross*/
  background: $close-chat-button-background; /*$close-chat-button-background*/
  box-shadow: 0 12px 14px -6px $close-chat-btn-background-shadow; /*$close-chat-btn-background-shadow*/
}

.cross-close-btn {
  fill: $typing-dots; /*$typing-dots*/
  background: $background-theme; /*$background-theme*/
}

circle.moving {
  stroke: $spinner-moving; /*$spinner-moving*/
}

circle.static {
  stroke: #cccfd2; /*$spinner-background*/
  opacity: $spinner-background-opacity; /*$spinner-background-opacity*/
}

app-data-collection-form {
  background: $additional-message-background; /*$additional-message-background*/
  border-radius: $chat-border-radius; /*$chat-border-radius*/
}

.control-label {
  color: $additional-message-text-color; /*$additional-message-text-color*/
}

.submit-group .btn.m-submit {
  border-color: $additional-message-text-color; /*$additional-message-text-color*/
  color: $additional-message-text-color; /*$additional-message-text-color*/
  background: $additional-message-background; /*$additional-message-background*/
}

.submit-group .btn.m-submit:hover {
  color: $additional-message-background; /*$additional-message-background*/
  background: $additional-message-text-color; /*$additional-message-text-color*/
}

.form-comment {
  color: $additional-message-text-color; /*$additional-message-text-color*/
}

.select-icon svg {
  fill: $additional-message-background; /*$additional-message-background*/
}

.no-agents-block .text{
  color: $agent-info-name; /*$agent-info-name*/
}

.queue .text{
  color: $agent-info-name; /*$agent-info-name*/
}

.queue .annotation{
  color: $agent-info-name; /*$agent-info-name*/
}

.queue-hint {
  color: $agent-info-position; /*$agent-info-position*/
}

.send-chat-history {
    background: $additional-message-background; /*$additional-message-background*/
    border-radius: $chat-border-radius; /*$chat-border-radius*/
}

.end-chat-block {
    background: $additional-message-background; /*$additional-message-background*/
    border-radius: $chat-border-radius; /*$chat-border-radius*/
}

.send-history-heading {
  color: $outgoing-message-text-color; /*$outgoing-message-text-color*/
}

z-tooltip-window {
  max-width: $max-tooltip-width; /*$max-tooltip-width*/
}

.interactive-message {
  color: $typing-dots; /*$typing-dots*/
  border: $icr-border; /*$icr-border*/
  border-color: $typing-dots; /*$typing-dots*/
  background: $background-theme; /*$background-theme*/
}

.interactive-message:hover {
  color: $background-theme; /*$background-theme*/
  background: $typing-dots; /*$typing-dots*/
  border: $icr-border-hover; /*$icr-border-hover*/
}