/*HW Wonen*/
/*@color-primary: #a61f7d;
@color-background-button: @color-primary;
@color-background-button-hover: @color-primary;
@color-border-primary: #a61f7d;
@color-border-agent: #a61f7d;
@color-text: #fff;
@color-text-button-hover: @color-text;
@color-chat-background: #fff;
@color-border: #d6d5d5;
@color-border-user: #F6E9F2;
@color-background-user: #F6E9F2;
@color-background-agent: #fff;
@color-text-user-name: #591B46;
@color-text-agent-name: darkgrey;
@color-text-user: #212529;
@color-text-agent: #212529;
@border-radius-chat: 15px;
@border-radius-speech-bubble: .4em;
@border-radius-button: .25rem;
@border-color-chat-popup: none;
@color-outline-text: #212529;
@color-icon: #591B46;
@font-family: "Source Sans Pro",sans-serif;
@color-background-dropzone: #ECFFBB;
@color-background-footer: #f2f2f2; //#40363a #91C60F
@color-footer: #000;
@color-disabled-input: #e9ecef;
*/
/*Thuisvester*/
/*@color-primary: #8682bb;
@color-background-button: #7db928;
@color-background-button-hover: @color-background-button;
@color-border-primary: #7db928;
@color-border-agent: #3d2770;
@color-text: #fff;
@color-text-button-hover: @color-text;
@color-chat-background: #fff;
@color-border: #d6d5d5;
@color-border-user: none;
@color-background-user: rgba(134,130,187,0.2);
@color-background-agent: #fff;
@color-text-user-name: darkgrey;
@color-text-agent-name: darkgrey;
@color-text-user: #212529;
@color-text-agent: #212529;
@border-radius-chat: 8px;
@border-radius-speech-bubble: 8px;
@border-radius-button: 8px;
@border-color-chat-popup: none;
@color-outline-text: #3d2770;
@color-icon: #3d2770;
@font-family: "Source Sans Pro",sans-serif;
@color-background-dropzone: #ECFFBB;
@color-background-footer: #3d2770;
@color-footer: #fff;
@color-disabled-input: #e9ecef;*/
/*Woonpartners Helmond*/
/*@color-primary: #6F2082;
@color-background-button: #4C6711;
@color-background-button-hover: @color-background-button;
@color-border-primary: #4C6711;
@color-border-agent: #4C6711;
@color-text: #fff;
@color-text-button-hover: @color-text;
@color-chat-background: #fff;
@color-border: #d6d5d5;
@color-border-user: #B3C69D;
@color-background-user: #B3C69D;
@color-background-agent: #fff;
@color-text-user-name: #4C6711;
@color-text-agent-name: darkgrey;
@color-text-user: #212529;
@color-text-agent: #212529;
@border-radius-chat: 15px;
@border-radius-speech-bubble: .4em;
@border-radius-button: .25rem;
@border-color-chat-popup: none;
@color-outline-text: #212529;
@color-icon: #212529;
@font-family: "Source Sans Pro",sans-serif;
@color-background-dropzone: #ECFFBB;
@color-background-footer: #3e363a; 
@color-footer: #fff;
@color-disabled-input: #e9ecef;*/
/*Gemeente Barneveld*/
/*@color-primary: #007377;
@color-background-button: @color-primary;
@color-background-button-hover: @color-background-button;
@color-border-primary: #007377;
@color-border-agent: #007377;
@color-text: #fff;
@color-text-button-hover: @color-text;
@color-chat-background: #fff;
@color-border: #d6d5d5;
@color-border-user: #f1f7f8;
@color-background-user: #f1f7f8;
@color-background-agent: #fff;
@color-text-user-name: #4D4D4D;
@color-text-agent-name: #4D4D4D;
@color-text-user: #000;
@color-text-agent: #212529;
@border-radius-chat: 0;
@border-radius-speech-bubble: 0;
@border-radius-button: 3px;
@border-color-chat-popup: none;
@color-outline-text: #212529;
@color-icon: #c4541c;
@font-family: "Source Sans Pro",sans-serif;
@color-background-dropzone: #80af08;
@color-background-footer: #007377;
@color-footer: #fff;
@color-disabled-input: #e9ecef;

.chat-content {
    .btn-primary:focus {
        outline-color: black !important;
    }
}*/
/*ZoWonen*/
/*@color-primary: #FF3B5B;
@color-background-button: @color-primary;
@color-background-button-hover: @color-background-button;
@color-border-primary: #FF3B5B;
@color-border-agent: #FF3B5B;
@color-text: #fff;
@color-text-button-hover: @color-text;
@color-chat-background: #fff;
@color-border: #d6d5d5;
@color-border-user: #f0f2f5;
@color-background-user: #f0f2f5;
@color-background-agent: #fff;
@color-text-user-name: darkgrey;
@color-text-agent-name: darkgrey;
@color-text-user: #1c293b;
@color-text-agent: #212529;
@border-radius-chat: 12px;
@border-radius-speech-bubble: .4em;
@border-radius-button: .25rem;
@border-color-chat-popup: none;
@color-outline-text: #212529;
@color-icon: #212529;
@font-family: "Source Sans Pro",sans-serif;
@color-background-dropzone: #ECFFBB;
@color-background-footer: #3e363a; //#40363a #91C60F
@color-footer: #fff;
@color-disabled-input: #e9ecef;
*/
/*Ymere*/
/*@color-primary: #4d0071;
@color-background-button: @color-primary;
@color-background-button-hover: @color-background-button;
@color-border-primary: #4d0071;
@color-border-agent: #4d0071;
@color-text: #fff;
@color-text-button-hover: @color-text;
@color-chat-background: #fff;
@color-border: #d6d5d5;
@color-border-user: #d8222a;
@color-background-user: #d8222a;
@color-background-agent: #fff;
@color-text-user-name: #fff;
@color-text-agent-name: darkgrey;
@color-text-user: #fff;
@color-text-agent: #212529;
@border-radius-chat: 6px;
@border-radius-speech-bubble: 6px;
@border-radius-button: 6px;
@border-color-chat-popup: solid 1px #4d0071;
@color-outline-text: #212529;
@color-icon: #d8222a;
@font-family: "Source Sans Pro",sans-serif;
@color-background-dropzone: #ECFFBB;
@color-background-footer: #3e363a;
@color-footer: #fff;
@color-disabled-input: #e9ecef;
*/
/*Ons huis Apeldoorn*/
/*@color-primary: #e2001a;
@color-background-button: #0d4291;
@color-background-button-hover: @color-background-button;
@color-border-primary: #0d4291;
@color-border-agent: #e2001a;
@color-text: #fff;
@color-text-button-hover: @color-text;
@color-chat-background: #fff;
@color-border: #d6d5d5;
@color-border-user: #ddd;
@color-background-user: #fff;
@color-background-agent: #fff;
@color-text-user-name: darkgrey;
@color-text-agent-name: darkgrey;
@color-text-user: #212529;
@color-text-agent: #212529;
@border-radius-chat: 10px;
@border-radius-speech-bubble: 4px;
@border-radius-button: 4px;
@border-color-chat-popup: none;
@color-outline-text: #212529;
@color-icon: #212529;
@font-family: "Source Sans Pro",sans-serif;
@color-background-dropzone: yellow;
@color-background-footer: #0d4291;
@color-footer: #fff;
@color-disabled-input: #e9ecef;
*/
/*Gemeente Venlo*/
/*@color-primary: #00807F;
@color-background-button: #014D53;
@color-background-button-hover: @color-background-button;
@color-border-primary: #014D53;
@color-border-agent: #E7F1F3;
@color-text: #fff;
@color-text-button-hover: @color-text;
@color-chat-background: #fff;
@color-border: #d6d5d5;
@color-border-user: #014D53;
@color-background-user: #fff;
@color-background-agent: #E7F1F3;
@color-text-user-name: #676767;
@color-text-agent-name: #676767;
@color-text-user: #333333;
@color-text-agent: #333333;
@border-radius-chat: 10px;
@border-radius-speech-bubble: 0;
@border-radius-button: 0;
@border-color-chat-popup: none;
@color-outline-text: #014D53;
@color-icon: #00807F;
@font-family: 'Host Grotesk', Arial, sans-serif;
@color-background-dropzone: #E7F1F3;
@color-background-footer: #00807F;
@color-footer: #fff;
@color-disabled-input: #e9ecef;

@font-face {
    font-family: 'Host Grotesk';
    src: url('/fonts/HostGrotesk-Regular.ttf') format('truetype');
}

.btn-primary:focus, .btn:focus {
    outline: auto !important;
    box-shadow: none !important;
}*/
/*Vesteda*/
/*@color-primary: #da5f06;
@color-background-button: @color-primary;
@color-background-button-hover: @color-background-button;
@color-border-primary: #da5f06;
@color-border-agent: #da5f06;
@color-text: #fff;
@color-text-button-hover: @color-text;
@color-chat-background: #fff;
@color-border: #d6d5d5;
@color-border-user: #009aa3;
@color-background-user: #eef8f9;
@color-background-agent: #fdf6f0;
@color-text-user-name: darkgrey;
@color-text-agent-name: darkgrey;
@color-text-user: #212529;
@color-text-agent: #212529;
@border-radius-chat: 15px;
@border-radius-speech-bubble: .4em;
@border-radius-button: .25rem;
@border-color-chat-popup: none;
@color-outline-text: #212529;
@color-icon: #212529;
@font-family: "Source Sans Pro",sans-serif;
@color-background-dropzone: #ECFFBB;
@color-background-footer: #3e363a; //#40363a #91C60F
@color-footer: #fff;
@color-disabled-input: #e9ecef;

.received {
    .user {
        display: none;
    }
}

.sent {
    .user {
        small {
            visibility: hidden;
        }

        small:before {
            content: "Jij";
            visibility: visible;
        }
    }
}*/
/*Jesper*/
/*@color-primary: #FF500A;
@color-background-button: @color-primary;
@color-background-button-hover: @color-background-button;
@color-border-primary: #FF500A;
@color-border-agent: #FF500A;
@color-text: #fff;
@color-text-button-hover: @color-text;
@color-chat-background: #fff;
@color-border: #d6d5d5;
@color-border-user: #40363A;
@color-background-user: #fff;
@color-background-agent: #fff;
@color-text-user-name: darkgrey;
@color-text-agent-name: darkgrey;
@color-text-user: #212529;
@color-text-agent: #212529;
@border-radius-chat: 15px;
@border-radius-speech-bubble: .4em;
@border-radius-button: .25rem;
@border-color-chat-popup: none;
@color-outline-text: #212529;
@color-icon: #212529;
@font-family: "Source Sans Pro",sans-serif;
@color-background-dropzone: #FF5D33;
@color-background-footer: #3e363a; 
@color-footer: #fff;
@color-disabled-input: #e9ecef;
*/
/*Dunavie*/
/*
@color-primary: #F19300;
@color-background-button: @color-primary;
@color-background-button-hover: @color-background-button;
@color-border-primary: #F19300;
@color-border-agent: #F19300;
@color-text: #fff;
@color-text-button-hover: @color-text;
@color-chat-background: #fff;
@color-border: #d6d5d5;
@color-border-user: #6a1b7e;
@color-background-user: #fff;
@color-background-agent: #fff;
@color-text-user-name: darkgrey;
@color-text-agent-name: darkgrey;
@color-text-user: #212529;
@color-text-agent: #212529;
@border-radius-chat: 5px;
@border-radius-speech-bubble: .4em;
@border-radius-button: 3px;
@border-color-chat-popup: none;
@color-outline-text: #212529;
@color-icon: #9F359B;
@font-family: "Source Sans Pro",sans-serif;
@color-background-dropzone: #ebebeb;
@color-background-footer:#F19300;
@color-footer: #fff;
@color-disabled-input: #e9ecef;
*/
/*Intermaris*/
/*@color-primary: #ef4d64;
@color-background-button: @color-primary;
@color-background-button-hover: @color-background-button;
@color-border-primary: #ef4d64;
@color-border-agent: #ef4d64;
@color-text: #fff;
@color-text-button-hover: @color-text;
@color-chat-background: #fff;
@color-border: #d6d5d5;
@color-border-user: #4d263b;
@color-background-user: #fff;
@color-background-agent: #fff;
@color-text-user-name: darkgrey;
@color-text-agent-name: darkgrey;
@color-text-user: #212529;
@color-text-agent: #212529;
@border-radius-chat: 0;
@border-radius-speech-bubble: 0;
@border-radius-button: 0;
@border-color-chat-popup: none;
@color-outline-text: #4d263b;
@color-icon: #4d263b;
@font-family: "Source Sans Pro",sans-serif;
@color-background-dropzone: #f58c9b;
@color-background-footer: #ef4d64;
@color-footer: #fff;
@color-disabled-input: #e9ecef;
*/
/*Centrada*/
/*@color-primary: #60195d;
@color-background-button: @color-primary;
@color-background-button-hover: @color-background-button;
@color-border-primary: #60195d;
@color-border-agent: #60195d;
@color-text: #fff;
@color-text-button-hover: @color-text;
@color-chat-background: #fff;
@color-border: #d6d5d5;
@color-border-user: #86c2e6;
@color-background-user: #86c2e6;
@color-background-agent: #fff;
@color-text-user-name: #fff;
@color-text-agent-name: #60195d;
@color-text-user: #fff;
@color-text-agent: #60195d;
@border-radius-chat: 5px;
@border-radius-speech-bubble: 3px;
@border-radius-button: 3px;
@border-color-chat-popup: solid 1px #d6d5d5;
@color-outline-text: #60195d;
@color-icon: #da322a;
@font-family: Roboto,sans-serif;
@color-background-dropzone: #f3f9fd;
@color-background-footer: #60195d;
@color-footer: #fff;
@color-disabled-input: #e9ecef;
*/
/*Gemeente Oss*/
/*@color-primary: #265a6f;
@color-background-button: @color-primary;
@color-background-button-hover: #cf8b28;
@color-border-primary: #265a6f;
@color-border-agent: #265a6f;
@color-text: #fff;
@color-text-button-hover: #000;
@color-chat-background: #fff;
@color-border: #d6d5d5;
@color-border-user: #984650;
@color-background-user: #fff;
@color-background-agent: #fff;
@color-text-user-name: #757575;
@color-text-agent-name: #757575;
@color-text-user: #212529;
@color-text-agent: #212529;
@border-radius-chat: 15px;
@border-radius-speech-bubble: .4em;
@border-radius-button: .25rem;
@border-color-chat-popup: none;
@color-outline-text: #212529;
@color-icon: #4c480e;
@font-family: "Source Sans Pro",sans-serif;
@color-background-dropzone: #bfb323;
@color-background-footer: #b2bfbc;
@color-footer: #053e50;
@color-disabled-input: #e9ecef;

.btn:disabled, .btn.disabled, fieldset:disabled .btn {
    opacity: 0.8 !important;
}

.btn-primary:focus, .btn:focus {
    outline: auto !important;
    box-shadow: none !important;
}*/
/*WoonWenz*/
/*@color-primary: #f63;
@color-background-button: @color-primary;
@color-background-button-hover: @color-background-button;
@color-border-primary: #f63;
@color-border-agent: #f63;
@color-text: #fff;
@color-text-button-hover: @color-text;
@color-chat-background: #fff;
@color-border: #d6d5d5;
@color-border-user: #007087;
@color-background-user: #007087;
@color-background-agent: #fff;
@color-text-user-name: #fff;
@color-text-agent-name: darkgrey;
@color-text-user: #fff;
@color-text-agent: #212529;
@border-radius-chat: .3125rem;
@border-radius-speech-bubble: .3125rem;
@border-radius-button: .3125rem;
@border-color-chat-popup: none;
@color-outline-text: #212529;
@color-icon: #212529;
@font-family: MetaOT-CondMedi,sans-serif;
@color-background-dropzone: #d8e3e6;
@color-background-footer: #007087; //#40363a #91C60F
@color-footer: #fff;
@color-disabled-input: #e9ecef;

.chat-content {
    .alert-warning {
        display: none;
    }
}
*/
.btn-primary:focus,
.btn:focus {
  outline: auto !important;
  box-shadow: none !important;
}
html,
body {
  font-family: "Source Sans Pro", sans-serif !important;
  background-color: transparent;
}
/*
@color-background-button: @color-primary;
@color-border-primary: #96bd0d;
@color-border-agent: #96bd0d;
@color-text: #fff;
@color-background: #fff;
@color-border-user: #40363A;
@color-background-user: #fff;
@color-background-agent: #fff;
@color-text-user-name: darkgrey;
@color-text-agent-name: darkgrey;
@color-text-user: #212529;
@color-text-agent: #212529;
@border-radius-chat: 4px;
@border-radius-speech-bubble: .4em;
@border-radius-button: .25rem;
@border-color-chat-popup: #b3b3b3;
@color-outline-text: #212529;
@color-icon: #212529;
@color-background-dropzone: #ECFFBB;*/
.btn-primary,
.btn-primary:active,
.btn-primary:visited {
  color: #fff !important;
  background-color: #96bd0d !important;
  border-color: #96bd0d !important;
  border-radius: 0.25rem;
}
.btn-primary:hover,
.btn-primary:focus {
  color: #fff !important;
  background-color: #96bd0d !important;
  border-color: #96bd0d !important;
  border-radius: 0.25rem;
}
.speech-bubble {
  overflow-wrap: break-word;
  margin: 20px auto;
  padding: 10px;
  position: relative;
  border-radius: 0.4em;
  display: table;
  word-break: break-word;
}
.speech-bubble img {
  max-width: 200px;
}
.speech-bubble .btn-primary,
.speech-bubble .btn-primary:active,
.speech-bubble .btn-primary:visited {
  color: #fff !important;
  background-color: #96bd0d !important;
  border-color: #96bd0d !important;
  border-radius: 0.25rem;
}
.speech-bubble .btn-primary:hover,
.speech-bubble .btn-primary:focus {
  color: #fff !important;
  background-color: #96bd0d !important;
  border-color: #96bd0d !important;
  border-radius: 0.25rem;
}
.sent {
  border: 1px solid #40363A;
  background-color: #fff;
  color: #212529;
  text-align: left;
  margin-right: 15px;
}
.sent .user {
  color: darkgrey;
}
.received {
  border: 1px solid #96bd0d;
  background-color: #fff;
  color: #212529;
  text-align: left;
  margin-left: 15px;
}
.received .user {
  color: darkgrey;
}
.message {
  color: #212529;
  resize: none;
  outline-offset: -5px;
  border-width: initial;
  border-style: none;
  border-color: initial;
  border-image: initial;
  border-radius: 0 0 0 15px;
  transition: background-color 200ms ease 0s, box-shadow 200ms ease 0s;
  outline: none;
  padding-left: 10px;
  height: 49px;
  width: 100%;
  background-color: inherit;
}
.message button[disabled] {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}
.edit-message {
  border-radius: 4px;
  border: solid 1px none;
  position: relative;
  background-color: #fff;
}
.edit-message i {
  color: #212529;
}
.edit-message .right-border {
  border-right: solid 1px none;
}
.edit-message.disabled {
  background-color: #f7f7f7;
}
.edit-message.disabled .rz-html-editor-toolbar {
  background-color: #f7f7f7;
}
.edit-message.disabled .rz-html-editor-toolbar button {
  background-color: #f7f7f7;
}
.edit-message.disabled .rz-html-editor-content {
  background-color: #f7f7f7;
}
.edit-message .rz-html-editor-content {
  word-break: break-word;
}
.chat-content {
  color: #fff;
  background-color: #fff;
  border-radius: 15px;
}
.chat-content i {
  color: #212529;
}
.chat-panel {
  border: solid 1px #fff;
  border-radius: 8px;
  background-color: #fff;
}
.text-input {
  border: var(--rz-input-border);
  border-bottom: solid 1px #96bd0d;
  width: 100%;
}
.text-input:focus {
  border-color: #40363A;
  outline: 0 none;
}
.dropzone {
  /*    &:hover {
        background-color: #f7f7f7;
        color: #333;
    }*/
}
.dropzone > input[type=file] {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.dropzone .file-upload-control {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.dropzone .file-upload-hidden {
  visibility: hidden;
}
.dropzone-drag {
  background-color: #ECFFBB;
}
/*site.css*/
.h-flex-box {
  display: flex;
  flex-direction: row;
}
.h-flex-container {
  flex: 1 1 auto;
  height: 100%;
}
.h-flex-button {
  width: 3rem;
}
.btn-chat-input {
  cursor: pointer;
}
.btn-chat-input[disabled] {
  cursor: default;
}
/*.btn-file-upload[disabled] {
    background-color: rgb(250,250,250);
}*/
.typing-message {
  position: absolute;
  top: -24px;
  font-style: italic;
  background-color: white;
  color: #6c6c6c;
}
.msg {
  white-space: pre-wrap;
}
.msg > p {
  margin: 0;
}
.msg > blockquote {
  padding-top: 12px;
}
.audio-control {
  display: none;
}
.custom-tooltip {
  position: relative;
  display: inline-block;
}
.custom-tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}
.custom-tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}
.custom-tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
.textblock-list {
  position: absolute;
  left: 27px;
  top: 16px;
  font-size: 11px;
}
.text-interaction-input {
  height: 142px;
}
.text-interaction-input #editableDiv {
  height: 100%;
}
.chat-input {
  height: 50px;
}
.chat-popup {
  display: none;
  position: fixed;
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
  border-radius: 15px;
  z-index: 9;
  background-color: white;
  border: none;
}
.chat-header {
  color: #fff;
  background-color: #96bd0d;
  border-radius: 15px 15px 0 0;
  position: relative;
  max-height: 45vh;
}
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #96bd0d;
  width: 70px;
  height: 70px;
  -webkit-animation: spin 2s linear infinite;
  /* Safari */
  animation: spin 2s linear infinite;
  margin: auto;
}
.inline-spinner-box {
  display: flex;
  justify-content: center;
  margin: 1rem auto auto auto;
}
.spinner-border {
  border: 0.5rem solid #96bd0d;
  border-right-color: transparent !important;
  width: 70px;
  height: 70px;
}
/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.footer {
  display: none;
}
.typing-message {
  top: -27px;
}
.file-upload-control {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.file-upload-hidden {
  visibility: hidden;
}
@media screen and (min-width: 401px) {
  .chat-popup {
    display: none;
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    border: none;
    border-radius: 0;
  }
  .chat-header,
  .btn-chat-input,
  .btn-file-upload,
  .edit-message {
    border-radius: 0;
  }
  .edit-message {
    border: none;
    border-top: solid 1px #d6d5d5;
  }
  .edit-message .typing-message {
    top: -28px;
  }
  .footer {
    display: block;
    text-align: center;
    width: 100%;
    background-color: #3e363a;
    color: #fff;
    flex: 0 1 auto;
  }
  .footer a {
    color: #fff;
  }
}
.edit-message.disabled {
  background-color: #e9ecef;
}
.msg > blockquote {
  padding-top: 14px;
}
.chat-header .btn-primary,
.chat-header .btn-primary:active,
.chat-header .btn-primary:visited {
  color: inherit !important;
  background-color: inherit !important;
  border-color: transparent !important;
}
.edit-message .spinner-border {
  width: 32px;
  height: 32px;
}
.file-upload-width {
  width: calc(100% - 125px);
}