/** STYLE CONFIG **/

#nc-widget {
  --base-font: 'Frutiger Next Com', inherit;
  --base-font-weight: 400;

  --base-icon-font: 'Font Awesome 5 Pro', none;
  --base-icon-font-weight:900;

  --base-font-size: 18px;

  --font-size-small: 12px;
  --header-font-size: 30px;

  --base-color: #686868;
  --base-color-light: #A5A5A5;
  --base-back-color:#F7F7F7;
  --color-brand: #e63419;
  --color-brand-dark:#C71F1F;
  --on-color-brand: #fff;
  --color-online: #28A745;
  --color-offline: var(--base-color-light);

  --img-msg-remote:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='382.629' height='137.011' viewBox='0 0 382.629 137.011'%3E%3Cdefs%3E%3Cfilter id='Vereinigungsmenge_7' x='0' y='0' width='382.629' height='137.011' filterUnits='userSpaceOnUse'%3E%3CfeOffset dy='3' input='SourceAlpha'/%3E%3CfeGaussianBlur stdDeviation='3' result='blur'/%3E%3CfeFlood flood-opacity='0.161'/%3E%3CfeComposite operator='in' in2='blur'/%3E%3CfeComposite in='SourceGraphic'/%3E%3C/filter%3E%3C/defs%3E%3Cg transform='matrix(1, 0, 0, 1, 0, 0)' filter='url(%23Vereinigungsmenge_7)'%3E%3Cpath id='Vereinigungsmenge_7-2' data-name='Vereinigungsmenge 7' d='M9.463,119.011C4.24,119.011,0,115.138,0,110.354V8.657C0,3.874,4.24,0,9.463,0h335.98c5.227,0,9.463,3.874,9.463,8.657v5.532l9.723,6.071-9.723,6.068v84.027c0,4.783-4.236,8.657-9.463,8.657Z' transform='translate(373.63 125.01) rotate(180)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E");
  --img-msg-local:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='382.63' height='137.011' viewBox='0 0 382.63 137.011'%3E%3Cdefs%3E%3Cfilter id='Vereinigungsmenge_8' x='0' y='0' width='382.63' height='137.011' filterUnits='userSpaceOnUse'%3E%3CfeOffset dy='3' input='SourceAlpha'/%3E%3CfeGaussianBlur stdDeviation='3' result='blur'/%3E%3CfeFlood flood-opacity='0.161'/%3E%3CfeComposite operator='in' in2='blur'/%3E%3CfeComposite in='SourceGraphic'/%3E%3C/filter%3E%3C/defs%3E%3Cg transform='matrix(1, 0, 0, 1, 0, 0)' filter='url(%23Vereinigungsmenge_8)'%3E%3Cpath id='Vereinigungsmenge_8-2' data-name='Vereinigungsmenge 8' d='M9.464,119.011c-5.227,0-9.464-3.875-9.464-8.655V8.655C0,3.875,4.238,0,9.464,0H345.442c5.227,0,9.464,3.875,9.464,8.655V93.813l9.723,6.07-9.723,6.07v4.4c0,4.78-4.238,8.655-9.464,8.655Z' transform='translate(9 6)' fill='%23e63419'/%3E%3C/g%3E%3C/svg%3E%0A");
  --img-window:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='542.102' height='706.189' viewBox='0 0 542.102 706.189'%3E%3Cdefs%3E%3Cfilter id='Vereinigungsmenge_6' x='0' y='0' width='542.102' height='706.189' filterUnits='userSpaceOnUse'%3E%3CfeOffset input='SourceAlpha'/%3E%3CfeGaussianBlur stdDeviation='7' result='blur'/%3E%3CfeFlood flood-opacity='0.2'/%3E%3CfeComposite operator='in' in2='blur'/%3E%3CfeComposite in='SourceGraphic'/%3E%3C/filter%3E%3C/defs%3E%3Cg transform='matrix(1, 0, 0, 1, 0, 0)' filter='url(%23Vereinigungsmenge_6)'%3E%3Cpath id='Vereinigungsmenge_6-2' data-name='Vereinigungsmenge 6' d='M455.248,654.557H0V0H500.1V654.557H470.652l-7.393,9.63Z' transform='translate(21 21)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A");

  color:var(--base-color);
  font-family:var(--base-font);
  font-size:var(--base-font-size);
  font-weight:var(--base-font-weight);
  line-height:1.22em;
}

/** POSITIONING **/
#nc-widget {
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:100000;
  overflow:hidden;
  max-width:100vw;
  max-height:100vh;
}

#nc-frame {
  display:none;
}

#nc-widget.nc-open #nc-window {
  right:24px;
  bottom:124px;
  opacity:1;
  pointer-events:all;
  max-width:calc(100vw - 2*24px);
  max-height:calc(100vh - 124px - 24px);
}

#nc-window {
  position:fixed;
  right:99999px;
  height:660px;
  width:500px;
  opacity:0;
  transition: opacity 0.2s ease;
  pointer-events:none;

  display:flex;
  flex-direction:column;
}

#nc-window .chat {
  flex:1;
}

#nc-window .chat-header {
  display:flex;
}

#nc-window .chat-header .displayname {
  flex:1;
}

/** STYLE **/

/** toggle & status display **/

#nc-widget #nc-toggle-chat,
#nc-widget #nc-status {
  font-size:0;
  display: flex;
  padding:0;
  margin:0;
  background-color:transparent;
}

#nc-widget #nc-toggle-chat {
  border:none;
  outline:none;
  cursor:pointer;
}

#nc-widget #nc-toggle-chat::before,
#nc-widget #nc-status::before {
  border-radius:50%;
}

#nc-widget #nc-toggle-chat::before {
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:25px;
  width:74px;
  height:74px;
  line-height:74px;
  content: "\f4b6";
  font-family: var(--base-icon-font);
  font-weight: var(--base-icon-font-weight);
  color:var(--on-color-brand);
  background-color:var(--color-brand);
}

#nc-widget #nc-status::before {
  width:18px;
  height:18px;
  line-height:18px;
  content: "&nbsp";
  overflow:hidden;
  background-color:var(--color-online);
  border:2px solid white;
  box-sizing:border-box;
  position:absolute;
  bottom:1px;
  left:1px;
}

/** window **/

#nc-widget.nc-open #nc-window {
  box-shadow:none;
  border-width:0;
  border-image-source:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='542.102' height='706.189' viewBox='0 0 542.102 706.189'%3E%3Cdefs%3E%3Cfilter id='Vereinigungsmenge_6' x='0' y='0' width='542.102' height='706.189' filterUnits='userSpaceOnUse'%3E%3CfeOffset input='SourceAlpha'/%3E%3CfeGaussianBlur stdDeviation='7' result='blur'/%3E%3CfeFlood flood-opacity='0.2'/%3E%3CfeComposite operator='in' in2='blur'/%3E%3CfeComposite in='SourceGraphic'/%3E%3C/filter%3E%3C/defs%3E%3Cg transform='matrix(1, 0, 0, 1, 0, 0)' filter='url(%23Vereinigungsmenge_6)'%3E%3Cpath id='Vereinigungsmenge_6-2' data-name='Vereinigungsmenge 6' d='M455.248,654.557H0V0H500.1V654.557H470.652l-7.393,9.63Z' transform='translate(21 21)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A");
  border-image-slice: 20 fill;
  border-image-repeat: round;
  border-image-width: 20px;
  border-image-outset: 20px 21px 30px 21px;
}

#nc-widget .offline-message {
  display:none;
}

#nc-window .chat-header {
  background-color:var(--color-brand);
  color: var(--on-color-brand);
  font-weight:bold;
  font-size:var(--header-font-size);
}

#nc-window button.startcall {
  font-size:0;
  border:0;
  padding:0;
  outline:none;
  cursor:pointer;
  display:flex;
}

#nc-window button.startcall::before {
  content: "\f03d";
  font-family: var(--base-icon-font);
  font-weight: var(--base-icon-font-weight);
  font-size:30px;
  width:74px;
  height:100%;
  line-height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  background-color:var(--color-brand-dark);
  color:var(--on-color-brand);
}

#nc-window .chat-header .displayname,
#nc-window .chat,
#nc-window .compose,
#nc-window .offline-message {
  padding:25px 38px 20px 38px;
}

#nc-window .chat {
  flex:1;
  overflow-y:auto;
  padding-bottom:0.5em;
  background-color:var(--base-back-color);
}

#nc-window .compose form {
  display:flex;
  align-items: center;
  justify-content: center;
}

#nc-window .compose input {
  flex:1;
  width:100%;
  display:inline-block;
  border:none;
  background-color:transparent;
  font-size:20px;
  outline:none;
  color:var(--base-color);
}

#nc-window .compose button[type="submit"] {
  font-size:0;
  border:0;
  padding:0;
  outline:none;
  cursor:pointer;
  color:var(--base-color-light);
  background-color:transparent;
  margin-right:-2px;
}

#nc-window .compose button[type="submit"] div::before {
  content: "\f1d8";
  font-family: var(--base-icon-font);
  font-weight: var(--base-icon-font-weight);
  font-size:39px;
  line-height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}

#nc-window .message {
  margin-bottom:34px;
}
#nc-window .chat .message:last-child {
  margin-bottom:calc(34px - 20px);
}

#nc-window .message > div {
  display:grid;
  column-gap:24px;
  grid-template-columns:auto auto;
  grid-template-rows:auto auto;
  align-items: flex-start;
}

#nc-window .message.remote > div {
  justify-content: flex-start;
  grid-template-areas: "user content"
                       "empty time";
}

#nc-window .message.local > div {
  justify-content: flex-end;
  grid-template-areas: "content user"
                       "time empty";
}

#nc-window .message .author {
  grid-area:user;
  align-self:flex-end;
  justify-self: center;
  font-size:0;
  display: flex;
}

#nc-window .message .author::before {
  content: "\f007";
  font-family: var(--base-icon-font);
  font-weight: var(--base-icon-font-weight);
  font-size:19px;
  margin-bottom:-6px;
  width:44px;
  height:44px;
  line-height:44px;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:50%;
  background-color:var(--on-color-brand);
  color:var(--color-brand);
}

#nc-window .message.remote .author::before {
  content: "e";
  font-family: var(--base-font);
  font-size:29px;
  font-weight:bold;
  color:var(--on-color-brand);
  background-color:var(--color-brand);
}

#nc-window .message .content {
  grid-area:content;
  text-align:left;
  word-break:break-word;
  hyphens:auto;
}

#nc-window .message .time {
  grid-area:time;
  font-size:var(--font-size-small);
  margin-top:8px;
}

#nc-window .message.remote .time {
  justify-self: flex-start;
}

#nc-window .message.local .time {
  justify-self: flex-end;
}

#nc-window .message.remote .author {
  display:flex;
}

.message.local + .message.local .author {
  display:flex!important;
}

#nc-window .message .content {
  padding:14px 20px 10px 20px;
  border-image-repeat: round;
  border-image-width:40px;
  border-image-slice: 40 40 40 40 fill;
}

#nc-window .message.remote .content {
  border-image-outset:10px 10px 16px 22px;
  padding-left:20px;
  border-image-source:var(--img-msg-remote);
}

#nc-window .message.local .content {
  color:var(--on-color-brand);
  padding-right:20px;
  border-image-outset:11px 22px 16px 10px;
  border-image-source:var(--img-msg-local);
}

/** OFFLINE STYLE **/

#nc-widget.nc-offline .offline-message {
  display:flex;
  flex:1;
  align-items: flex-start;
  justify-content: flex-start;
}

#nc-widget.nc-offline #nc-status::before {
  background-color:var(--color-offline);
}

#nc-widget.nc-offline .chat-header .startcall,
#nc-widget.nc-offline .compose,
#nc-widget.nc-offline .chat {
  display:none;
}