/* http://meyerweb.com/eric/tools/css/reset/
   v5.0.1 | 20191019
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, menu, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
	display: block;
}
/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
    display: none;
}
body {
	line-height: 1;
}
menu, ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*
 * Copyright (c) 2015-2020, Isode Limited.
 * All rights reserved.
 */

html {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* Chat-Messages has also been added here since otherwise the scrollbar container also get selected in Safari
  this makes it look like you've selected more text than you actually have.
  This rule is then overidden in Chat.css to allow you to select messages from within the list */
.noselect, .Roster *:not(input):not(textarea), .chat > .header *, .Me *:not(input):not(textarea), .ChatInput, .Chat-Messages * {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */ /* Konqueror HTML */ /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.fill-and-center {
  width: 100vw;
  height: 100vh;
  line-height: 100vh;
  vertical-align: middle;
  text-align: center;
}

/* --- General styles ------------------------------------------------------- */

.root {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

*:focus {
  outline: none;
}

body, button, input, textarea {
  font-family: 'Open Sans', sans-serif;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #747474;
  opacity: 1;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: #747474;
  opacity: 1;
}

input::-ms-input-placeholder, textarea::-ms-input-placeholder {
  color: #747474;
  opacity: 1;
}

input::placeholder, textarea::placeholder {
  color: #747474;
  opacity: 1;
}

body {
  padding: 0;
  margin: 0;
  font-weight: 400;
  color: #545454;
  height: 100%;
  width: 100%;
}

button,
input {
  padding: 8px;
  border: 1px solid #e5e5e5;
  background: #fff;
  border-radius: 2px;
}

button:hover,
img.btn:hover,
input[type=button]:hover {
  cursor: pointer;
}

button:hover,
input[type=button]:hover {
  background: #e5e5e5;
}

.ErrorMessage {
  padding: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border-radius: .25rem;
  border-color: #ff725c;
  background-color: #ffdfdf;
  color: #e7040f;
}

.SignIn {
  background-color: #eee;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
}
.SignIn__container {
  padding: 2em;
  margin-left: auto;
  margin-right: auto;
  max-width: 30em;
  border: 1px solid #ccc;
  width: 100%;
  background-color: white;
  border-radius: 0.5rem;
}
.SignIn__container--loading {
  opacity: 0.5;
}
.SignIn__heading {
  font-size: 1.25rem;
  font-weight: 600;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}
.SignIn__field {
  margin: 1rem 0;
}
.SignIn__input {
  padding: 0.5rem;
  margin-top: 0.25rem;
  width: 100%;
}
.SignIn__label {
  font-weight: 600;
  display: block;
  font-size: 0.875rem;
}
.SignIn__submit {
  font-weight: bold;
  width: 100%;
  padding: 0.5rem 1rem;
  border: 1px solid #777;
  cursor: pointer;
  background-color: transparent;
  font-size: 0.875rem;
  display: inline-block;
}

.InfoBanner {
  height: 35px;
  line-height: 35px;
  background: rgba(183, 98, 55, 0.95);
  color: #fff;
  text-align: center;
  width: 100%;
  position: absolute;
  z-index: 10;
  cursor: default;
}


.Avatar {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  /* Konqueror HTML */
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                supported by Chrome, Edge, Opera and Firefox */
  border-radius: 0.25rem;
  height: 1.75rem;
  min-height: 1.75rem;
  width: 1.75rem;
  min-width: 1.75rem;
}
.Avatar--large {
  height: 3rem;
  width: 3rem;
}

.Roster__Item {
  list-style-type: none;
  margin: 0px;
  font-size: 75%;
}
.Roster__Item .unread {
  border-radius: 10px;
  border: 1px solid lightgray;
  padding: 2px;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: 5px;
}
.Roster__View .RosterViewItem {
  padding: 0.125rem 1rem;
  min-height: 24px;
  display: flex;
  color: inherit;
  align-items: center;
  text-decoration: inherit;
}
.Roster__View .RosterViewItem .status {
  height: 9px;
  width: 9px;
}
.Roster__View .RosterViewItem .name {
  flex: 1;
  margin-left: 10px;
  font-style: italic;
  font-weight: 200;
  width: 190px;
  line-height: 22px;
  vertical-align: middle;
}
.Roster__View .RosterViewItem .name span {
  white-space: nowrap;
}
.Roster__View .RosterViewItem .name .roomName {
  opacity: 0.7;
}
.Roster__View .RosterViewItem .name.name--withRoomName {
  line-height: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
}
.Roster__View .RosterViewItem--active {
  background-color: #203d57;
  cursor: default;
}
.Roster__View .RosterViewItem__avatar {
  margin-left: 5px;
}
.Roster__View .Roster__Header {
  position: relative;
  box-sizing: border-box;
  padding: 1rem 20px 0.625rem 20px;
  display: flex;
  text-transform: uppercase;
  font-size: 0.9em;
}
.Roster__View .section-menu-btn {
  width: 10px;
  height: 10px;
  position: absolute;
}
@-webkit-keyframes flickerAnimation {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes flickerAnimation {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.animate-flicker,
.joiningIndicator {
  -webkit-animation: flickerAnimation 2s infinite;
          animation: flickerAnimation 2s infinite;
}
.no-animation,
.joiningIndicator--hidden {
  -webkit-animation: none;
          animation: none;
}
.joiningIndicator {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 9px;
  background-color: #fff;
}
.joiningIndicator--hidden {
  opacity: 0;
}
.joinFailedBadge {
  width: 92px;
  height: 22px;
  border: 1px solid #ffffff44;
  border-radius: 10px;
  padding: 5px;
  font-style: normal;
  text-align: center;
}

[data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start}.simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit}.simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto!important;height:auto!important;z-index:0}.simplebar-offset{direction:inherit!important;box-sizing:inherit!important;resize:none!important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch}.simplebar-content-wrapper{direction:inherit;box-sizing:border-box!important;position:relative;display:block;height:100%;width:auto;max-width:100%;max-height:100%;scrollbar-width:none;-ms-overflow-style:none}.simplebar-content-wrapper::-webkit-scrollbar,.simplebar-hide-scrollbar::-webkit-scrollbar{width:0;height:0}.simplebar-content:after,.simplebar-content:before{content:' ';display:table}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none}.simplebar-height-auto-observer-wrapper{box-sizing:inherit!important;height:100%;width:100%;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0}.simplebar-height-auto-observer{box-sizing:inherit;display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden}[data-simplebar].simplebar-dragging .simplebar-content{pointer-events:none;-ms-user-select:none;user-select:none;-webkit-user-select:none}[data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all}.simplebar-scrollbar{position:absolute;left:0;right:0;min-height:10px}.simplebar-scrollbar:before{position:absolute;content:'';background:#000;border-radius:7px;left:2px;right:2px;opacity:0;transition:opacity .2s linear}.simplebar-scrollbar.simplebar-visible:before{opacity:.5;transition:opacity 0s linear}.simplebar-track.simplebar-vertical{top:0;width:11px}.simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px}.simplebar-track.simplebar-horizontal{left:0;height:11px}.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto}[data-simplebar-direction=rtl] .simplebar-track.simplebar-vertical{right:auto;left:0}.hs-dummy-scrollbar-size{direction:rtl;position:fixed;opacity:0;visibility:hidden;height:500px;width:500px;overflow-y:hidden;overflow-x:scroll}.simplebar-hide-scrollbar{position:fixed;left:0;visibility:hidden;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}

.components-scrollbars {
  width: 100%;
  height: 100%;
}
.components-scrollbars .components-scrollbars-innerContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

._1bcRR_gpNcQIQhew3uLK_j {
  position: fixed;
  z-index: 10;
}
._1iBChA9mJw96tRBxtTLXT_ {
  position: relative;
}

.Toggle {
  background: transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0.625rem 0.75rem;
  position: relative;
  font-size: 0.875rem;
  width: 100%;
}
.Toggle:hover {
  background-color: #f1f1f1;
}
.Toggle .Toggle__input:focus + .Toggle__slot {
  box-shadow: 0px 0px 0px 4px rgba(186, 186, 186, 0.35);
}
.Toggle--active .Toggle__input:focus + .Toggle__slot {
  box-shadow: 0px 0px 0px 4px rgba(102, 187, 106, 0.35);
}
.Toggle .Toggle__input:focus:not(:focus-visible) + .Toggle__slot {
  box-shadow: none;
}
.Toggle--active .Toggle__handle {
  color: #66BB6A;
  transform: translateX(12px);
}
.Toggle--active .Toggle__slot {
  border-color: #66BB6A;
  background-color: #66BB6A;
}
.Toggle--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.Toggle--disabled:hover {
  background-color: inherit;
  color: inherit;
}
.Toggle__input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.Toggle__label {
  line-height: 20px;
  vertical-align: middle;
}
.Toggle__slot {
  position: relative;
  border-radius: 20px;
  border: 2px solid #BABABA;
  width: 32px;
  height: 20px;
  display: inline-block;
  background-color: #BABABA;
  box-sizing: border-box;
  margin-right: 0.5rem;
}
.Toggle__handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 16px;
  background-color: white;
  position: absolute;
  left: 0;
  box-sizing: border-box;
  transition: transform 0.15s ease-out;
}

.TurnOnNotificationsButton {
  padding: 10px 15px 10px 15px;
  background-color: #8bb7d7;
  color: #19354a;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
  border: none;
}
.TurnOnNotificationsButton:hover {
  background-color: #8bb7d7;
  color: #265170;
}
.TurnOnNotificationsButton:hover svg {
  color: #336d96;
}
.TurnOnNotificationsButton svg {
  color: #265170;
}
.TurnOnNotificationsButton__icon {
  width: 28px;
  height: 28px;
  border-radius: 28px;
  background-color: #fff;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}
.TurnOnNotificationButton__chev {
  margin-left: 10px;
}
.TurnOnNotificationButton__message {
  font-size: 0.875rem;
}

.Roster {
  background: #265170;
  color: lightgray;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}
.Roster__Listing {
  position: relative;
  height: 100%;
}
.Roster__Listing section {
  padding-bottom: 25px;
}
.Roster__NoMatches {
  font-size: 0.9em;
  padding: 1em 20px;
  text-align: center;
}
.Roster__Nav {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #65879f;
  box-sizing: border-box;
  min-height: 50px;
  width: calc(100% - 1.5rem);
  margin: 0 0.75rem;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
.Roster__Tabs {
  list-style: none;
  color: #65879f;
  padding: 0;
  margin: 0;
  display: flex;
  align-self: stretch;
  min-height: 100%;
}
.Roster__Tab {
  transition: color 0.2s ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.25rem 0.625rem;
  position: relative;
}
.Roster__Tab:hover {
  cursor: pointer;
  color: white;
}
.Roster__Tab--selected {
  color: white;
}
.Roster__Tab--selected::after {
  content: '';
  display: block;
  width: 100%;
  bottom: 0;
  height: 2px;
  background: white;
  position: absolute;
}
.Roster-Icon {
  color: #65879f;
  cursor: pointer;
  transition: all 0.2s ease-out;
}
.Roster-Icon:hover {
  color: white;
}
.Roster__Actions {
  margin-left: auto;
  display: flex;
  flex-direction: row;
}
.Roster__Actions li {
  margin-left: 0.2rem;
  color: #65879f;
  transition: all 0.2s ease-out;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  border-radius: 3px;
  padding: 4px;
}
.Roster__Actions li:hover {
  color: white;
}
.Roster__Actions--searching {
  flex: 2;
}
.Roster__Actions--searching::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  height: 2px;
  width: 100%;
  background-color: white;
}
@-webkit-keyframes slide {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes slide {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
.Roster__SearchInput {
  border: none;
  outline: none;
  margin-right: 1em;
  background-color: transparent;
  padding: 0 0.5em;
  font-size: 0.8em;
  color: lightgray;
  width: 100%;
}
.Roster__SearchIcon {
  flex-shrink: 0;
}
.Roster__SearchIcon--selected {
  color: white;
  cursor: default;
}
@-webkit-keyframes showAfterSlide {
  from {
    display: none;
  }
  to {
    display: block;
  }
}
@keyframes showAfterSlide {
  from {
    display: none;
  }
  to {
    display: block;
  }
}
.Roster__CloseIcon {
  color: #65879f;
  cursor: pointer;
  transition: all 0.2s ease-out;
  flex-shrink: 0;
}
.Roster__CloseIcon:hover {
  color: white;
}
.Roster__MenuButton {
  color: #65879f;
  transition: all 0.2s ease-out;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 4px;
  border-radius: 3px;
}
.Roster__MenuButton:hover {
  color: white;
}
.Roster__MenuButton svg {
  width: 100%;
  height: 100%;
}
.Roster__MenuButton.Roster__MenuButton--active {
  background-color: #00000020;
  color: white;
}
.Roster__Menu {
  background: white;
  list-style: none;
  border-radius: 0.5rem;
  box-shadow: 0px 2px 40px 0px rgba(0, 0, 0, 0.35);
  padding: 0.375rem;
  min-width: 175px;
}
.Roster__UnreadChats {
  z-index: 1;
  position: absolute;
  background-color: #203d57;
  border-bottom: 1px solid #05304F;
  height: 34px;
  width: 100%;
  text-align: center;
  cursor: pointer;
}
.Roster__UnreadChats span {
  line-height: 34px;
  vertical-align: middle;
  font-size: 13px;
  color: #d3d3d3;
}
.Roster__UnreadChats span svg {
  margin-left: 8px;
  width: 14px;
  height: 14px;
}

.Overlay {
  background: rgba(38, 81, 112, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.Dialog {
  background-color: white;
  overflow: hidden;
  width: 100%;
  max-width: 512px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 1.5rem;
  justify-content: center;
  margin: auto 1rem;
  border-radius: 0.5rem;
}
.Dialog h3 {
  font-weight: 600;
  font-size: 1.25rem;
}
.Dialog .Dialog__actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.Dialog .Dialog__actions button {
  border: 0;
  margin-left: 0.3rem;
  border-radius: 0.3rem;
  box-shadow: 0px 2px 4px 0px rgb(0 0 0%);
  padding: 0.625rem 1.25rem;
  font-weight: 600;
  background-color: #e0e0e0;
  color: #545454;
}
.Dialog .Dialog__actions button:hover {
  background-color: #d3d3d3;
}
.Dialog .Dialog__actions button:focus {
  box-shadow: 0px 0px 0px 3px rgba(135, 135, 135, 0.3);
}
.Dialog .Dialog__actions button[type=submit] {
  background-color: #66BB6A;
  color: #fff;
}
.Dialog .Dialog__actions button[type=submit]:hover {
  background-color: #49a54e;
}
.Dialog .Dialog__actions button[type=submit]:focus {
  box-shadow: 0px 0px 0px 3px rgba(173, 218, 175, 0.3);
}
@media screen and (min-width: 840px) {
  .Dialog {
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
    width: calc(100% / 3 * 2);
    margin: auto;
  }
}

.AddRoomDialog em {
  border-radius: 0.25rem;
  border-color: #ff725c;
  background-color: #ffdfdf;
  color: #e7040f;
  height: 16px;
  min-height: 0;
  padding: 0 1em;
  box-sizing: border-box;
  opacity: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  transition: all 0.2s;
}
.AddRoomDialog em svg {
  flex: 0 0 32px;
}
.AddRoomDialog em span {
  flex: 1 1;
}
.AddRoomDialog em.shown {
  height: auto;
  min-height: 50px;
  padding: 1rem 1rem;
  opacity: 1;
  margin: 0.8rem 0;
}
.AddRoomDialog input {
  margin: 0.8rem 0 0 0;
  border-radius: 0.5rem;
  border: 1px solid #e0e0e0;
  background-color: #e0e0e0;
  color: #545454;
  box-sizing: border-box;
  font-size: 1rem;
  padding: 1rem 1rem;
}
.AddRoomDialog input:focus {
  background-color: #fff;
  border: 1px solid #4088bc;
  box-shadow: 0px 0px 0px 3px rgba(64, 136, 188, 0.3);
  transition: all 0.2s;
}

.Message {
  color: #6f6f78;
  text-decoration: inherit;
  word-wrap: break-word;
  word-break: break-word;
  box-sizing: border-box;
  padding-left: 40px;
  width: 100%;
  position: relative;
}
.Message--other {
  opacity: 0.6;
}
.message-continuation {
  margin-top: 0.3em !important;
}
.message-labelElided .security-label {
  display: none;
}
.message .body {
  display: flex;
  width: 100%;
}
.message .message-info {
  flex: 0 0;
  display: flex;
  padding: 1px 6px 1px 10px;
  flex-direction: row;
  justify-content: flex-start;
  align-content: flex-start;
}
.message .message-content {
  flex: 1 1;
}
.message .time {
  color: #9e9fad;
  font-size: 90%;
  font-weight: 200;
  text-align: right;
  word-wrap: none;
  word-break: keep-all;
  white-space: nowrap;
}
.message .edited {
  margin-left: 0.3em;
  color: #9e9fad;
  font-size: 90%;
  font-weight: 200;
  word-wrap: none;
  word-break: keep-all;
  white-space: nowrap;
}
.Message .avatar {
  min-width: 30px;
  position: absolute;
  left: 5px;
}
.chat .message {
  position: relative;
  display: flex;
  flex-direction: row;
  list-style-type: none;
  align-items: flex-start;
  padding: 0px;
  margin: 0px;
  margin-top: 1em;
  font-size: 0.9em;
}
.chat .message .body {
  line-height: 1.3em;
}
.message .text {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}
.message .header {
  align-items: center;
  display: flex;
  flex-direction: row;
  margin-bottom: 0.3em;
}
.message .name {
  color: #545454;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.message .name:hover {
  color: #212121;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.message .name.disabled {
  cursor: text;
}
.message .name.disabled:hover {
  color: #545454;
  text-decoration: none;
}
.message-meMessage {
  font-style: italic;
}
.message-firstNewMessageHandle {
  width: 0px;
  height: 0px;
  position: absolute;
  top: -51px;
  left: 0;
}

.messageList-newBar {
  margin: 0 10px 0 10px;
  box-sizing: border-box;
  opacity: 0.6;
}
.messageList-newBar div {
  position: relative;
  width: 100%;
}
.messageList-newBar span {
  position: absolute;
  top: 0;
  left: 0;
  line-height: 50px;
  vertical-align: middle;
  color: #fff;
  padding-right: 5px;
}
.messageList-newBar span em {
  background-color: #265170;
  border-radius: 5px;
  padding: 5px;
  text-transform: uppercase;
  font-size: 0.8em;
}
.messageList-newBar hr {
  position: absolute;
  width: 100%;
  top: 24px;
  margin: 0;
  background-color: #5d7c94;
  border-width: 1px 0 0 0;
  border-color: #94a9b8;
  border-style: solid;
  height: 1px;
}

.Loading {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 1.5em;
  line-height: 1.5;
}

.chat {
  margin: 0px;
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  overflow: hidden;
  max-width: 100%;
}

.chat__body {
  padding: 0 0;
  flex: 1;
  display: flex; 
  flex-direction: column;
  overflow: hidden;
}

.chat__main {
  flex: 1;
  display: flex;
  position: relative;
}

.Chat-Messages {
  padding: 0 0;
  flex: 1;
  position: relative;
  opacity: 0;
  transition: opacity .2s ease-out;
}

.Chat-Messages--visible {
  opacity: 1;
}

.Chat-Messages ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.chat-scroll-to-bottom {
  position: absolute;
  bottom: 5px;
  right: 5px;
  padding: 5px;
  cursor: pointer;
  height: 32px;
  width: 33px;
  border-radius: 40px;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
  background-color: #265170;
  border: 2px solid #fff;
}

.chat-scroll-to-bottom:hover {
  background-color: #204a68;
  border: 2px solid rgb(228, 228, 228);
}

.chat-unread-count {
  position: absolute;
  top: -10px;
  left: -10px;
  min-width: 21px;
  text-align: center;
  background-color: #ff0000;
  border-radius: 20px;
  font-size: 12px;
  border: 1px solid #ff0000;
  color: #fff;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
  line-height: 19px;
  vertical-align: middle;
}

.messageList {
  padding: 35px 1rem 0 1rem;
}

/* Safari patch: Since 'Chat-Messages *' is made unselectable in index.css
  (because otherwise the scrollbar container also get selected in Safari which
  makes it look like you've selected more text than you actually have).
  We have to add this rule here to allow you to select messages from within the list */
.messageList * {
  -webkit-touch-callout: default; /* iOS Safari */
  -webkit-user-select: text; /* Safari */ /* Konqueror HTML */ /* Old versions of Firefox */
      -ms-user-select: text; /* Internet Explorer/Edge */
          user-select: text; /* Non-prefixed version, currently
                                supported by Chrome, Edge, Opera and Firefox */
}

.UnreadBanner {
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, .25);
  position: absolute;
  border: none;
  border-bottom-left-radius: .25rem;
  border-bottom-right-radius: .25rem;
  width: calc(100% - 2rem);
  margin: 0 1rem;
  top: -1px;
  display: flex;
  background: #265170;
  color: #fff;
  font-size: .875rem;
  overflow: hidden;
  height: 2.25rem;
}

.UnreadBanner__markRead,
.UnreadBanner__scrollTo {
  background: inherit;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  padding: 0 1rem;
}

.UnreadBanner__markRead:hover,
.UnreadBanner__scrollTo:hover {
  background: #203d57;
}

.UnreadBanner__scrollTo {
  flex: 1 0 auto;
  text-align: left;
  border-right: 1px solid #65879f;
}

.UnreadBanner__markRead {
  display: flex;
  align-items: center;
  font-weight: bold;
}

.UnreadBanner__markRead svg {
  margin-right: .5rem;
}

.LabelBanner {
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: .75rem;
  border-top: 1px solid lightgray;
  border-bottom: 1px solid lightgray;
  margin-top: -1px;
}

/**
 * Draft v0.11.7
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
.DraftEditor-editorContainer,.DraftEditor-root,.public-DraftEditor-content{height:inherit;text-align:initial}.public-DraftEditor-content[contenteditable=true]{-webkit-user-modify:read-write-plaintext-only}.DraftEditor-root{position:relative}.DraftEditor-editorContainer{background-color:rgba(255,255,255,0);border-left:.1px solid transparent;position:relative;z-index:1}.public-DraftEditor-block{position:relative}.DraftEditor-alignLeft .public-DraftStyleDefault-block{text-align:left}.DraftEditor-alignLeft .public-DraftEditorPlaceholder-root{left:0;text-align:left}.DraftEditor-alignCenter .public-DraftStyleDefault-block{text-align:center}.DraftEditor-alignCenter .public-DraftEditorPlaceholder-root{margin:0 auto;text-align:center;width:100%}.DraftEditor-alignRight .public-DraftStyleDefault-block{text-align:right}.DraftEditor-alignRight .public-DraftEditorPlaceholder-root{right:0;text-align:right}.public-DraftEditorPlaceholder-root{color:#9197a3;position:absolute;width:100%;z-index:1}.public-DraftEditorPlaceholder-hasFocus{color:#bdc1c9}.DraftEditorPlaceholder-hidden{display:none}.public-DraftStyleDefault-block{position:relative;white-space:pre-wrap}.public-DraftStyleDefault-ltr{direction:ltr;text-align:left}.public-DraftStyleDefault-rtl{direction:rtl;text-align:right}.public-DraftStyleDefault-listLTR{direction:ltr}.public-DraftStyleDefault-listRTL{direction:rtl}.public-DraftStyleDefault-ol,.public-DraftStyleDefault-ul{margin:16px 0;padding:0}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listLTR{margin-left:1.5em}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listRTL{margin-right:1.5em}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listLTR{margin-left:3em}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listRTL{margin-right:3em}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listLTR{margin-left:4.5em}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listRTL{margin-right:4.5em}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listLTR{margin-left:6em}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listRTL{margin-right:6em}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listLTR{margin-left:7.5em}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listRTL{margin-right:7.5em}.public-DraftStyleDefault-unorderedListItem{list-style-type:square;position:relative}.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth0{list-style-type:disc}.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth1{list-style-type:circle}.public-DraftStyleDefault-orderedListItem{list-style-type:none;position:relative}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listLTR:before{left:-36px;position:absolute;text-align:right;width:30px}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listRTL:before{position:absolute;right:-36px;text-align:left;width:30px}.public-DraftStyleDefault-orderedListItem:before{content:counter(ol0) ". ";counter-increment:ol0}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth1:before{content:counter(ol1,lower-alpha) ". ";counter-increment:ol1}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth2:before{content:counter(ol2,lower-roman) ". ";counter-increment:ol2}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth3:before{content:counter(ol3) ". ";counter-increment:ol3}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth4:before{content:counter(ol4,lower-alpha) ". ";counter-increment:ol4}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-reset{counter-reset:ol0}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-reset{counter-reset:ol1}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-reset{counter-reset:ol2}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-reset{counter-reset:ol3}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-reset{counter-reset:ol4}
.m6zwb4v,.m6zwb4v:visited{color:#575f67;cursor:pointer;display:inline-block;background:#e6f3ff;padding-left:2px;padding-right:2px;border-radius:2px;-webkit-text-decoration:none;text-decoration:none;}.m6zwb4v:hover,.m6zwb4v:focus{color:#677584;background:#edf5fd;outline:0;}.m6zwb4v:active{color:#222;background:#455261;}
.mnw6qvm{border:1px solid #eee;position:absolute;min-width:220px;max-width:440px;background:#fff;border-radius:2px;box-shadow:0px 4px 30px 0px rgba(220,220,220,1);cursor:pointer;padding-top:8px;padding-bottom:8px;z-index:2;display:flex;flex-direction:column;box-sizing:border-box;transform:scale(0);}
.m1ymsnxd{opacity:0;transition:opacity 0.25s cubic-bezier(0.3,1.2,0.2,1);}
.m126ak5t{opacity:1;}
.mtiwdxc{padding:7px 10px 3px 10px;transition:background-color 0.4s cubic-bezier(.27,1.27,.48,.56);}.mtiwdxc:active{background-color:#cce7ff;}
.myz2dw1{padding:7px 10px 3px 10px;transition:background-color 0.4s cubic-bezier(.27,1.27,.48,.56);background-color:#e6f3ff;}.myz2dw1:active{background-color:#cce7ff;}
.mpqdcgq{display:inline-block;margin-left:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:368px;font-size:0.9em;margin-bottom:0.2em;}
.m1mfvffo{display:inline-block;width:24px;height:24px;border-radius:12px;}

.LabelSelector {
  color: inherit;
  display: flex;
  align-items: center;
  position: relative;
}
.LabelSelector__caret {
  pointer-events: none;
  position: absolute;
  right: 1rem;
}
.LabelSelector__select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
  background: transparent;
  border-radius: 0.5rem;
  color: inherit;
  border: none;
  padding: 0.75rem 2rem 0.75rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
  width: 100%;
}
.LabelSelector__select > option {
  text-transform: uppercase;
  padding: 0.5rem 1rem;
}

.ChatInput {
  background: #F7F7F7;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.875rem;
  align-items: flex-start;
  border-top: solid 1px #e5e5e5;
  max-height: 50%;
  overflow: hidden;
  padding: 0.75rem 1.25rem 0.5rem 1.25rem;
}
.ChatInput > *:first-child {
  flex: 1 0 auto;
}
.ChatInput > *:last-child {
  flex: 9999 0 330px;
}
.ChatInput__textControls {
  background: white;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
  border-radius: 0.5rem;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  max-height: 100%;
  position: relative;
  padding: 0.25rem 0.5rem;
}
.ChatInput .DraftEditor-root {
  overflow: hidden;
  width: 100%;
  background-color: white;
  margin: 0;
  padding: 0.5rem 0.75rem;
  font-family: 'Open Sans', sans-serif;
  font-size: inherit;
  min-width: 0;
  line-height: 1.25rem;
}
.ChatInput--updating .DraftEditor-root,
.ChatInput--updating .ChatInput__textControls {
  background-color: #fff8a2;
}
.ChatInput__buttons {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
.ChatInput__button {
  border: none;
  background: transparent;
  padding: 0.5rem;
  color: #545454;
}
.ChatInput__label {
  padding: 0.625rem 1rem;
}
.ChatInput__mentionChip {
  display: inline-block;
  background: #e6f3ff;
}
.ChatInput__mentionChip:active {
  background-color: #e6f3ff;
}
.TypingIndicator {
  background: #F7F7F7;
  padding: 0 1.25rem 0.5rem 1.25rem;
  font-size: 0.813rem;
  height: 1.5rem;
}
.TypingIndicator__text {
  color: #265170;
  margin-left: 0.313rem;
}
.TypingIndicator__text em {
  font-weight: 600;
}
.TypingIndicator__dots {
  display: inline-flex;
  align-items: center;
}
.TypingIndicator__dot {
  -webkit-animation: dotFlashing 1s infinite alternate;
          animation: dotFlashing 1s infinite alternate;
  background-color: #265170;
  border-radius: 50%;
  display: inline-block;
  height: 0.5rem;
  width: 0.5rem;
  margin: 0 0.063rem;
}
.TypingIndicator__dot:nth-child(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.TypingIndicator__dot:nth-child(2) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.TypingIndicator__dot:nth-child(3) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
@-webkit-keyframes dotFlashing {
  0% {
    background-color: #265170;
  }
  50%,
  100% {
    background-color: rgba(38, 81, 112, 0.3);
  }
}
@keyframes dotFlashing {
  0% {
    background-color: #265170;
  }
  50%,
  100% {
    background-color: rgba(38, 81, 112, 0.3);
  }
}

.OccupantsPanel {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  box-sizing: content-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.OccupantsPanel .OccupantsPanel__header {
  flex: 0 0 40px;
  box-sizing: border-box;
  padding: 0.3rem 0;
  margin: 0 1rem;
  display: flex;
  align-items: center;
}
.OccupantsPanel .OccupantsPanel__header .OccupantsPanel__title {
  flex: 1 1;
  font-weight: 600;
  font-size: 0.9rem;
}
.OccupantsPanel .OccupantsPanel__header .OccupantsPanel__closeButton {
  flex: 0 0;
  border: 0;
  border-radius: 0.25rem;
  padding: 0.5rem;
  cursor: pointer;
}
.OccupantsPanel .OccupantsPanel__header .OccupantsPanel__closeButton svg {
  color: #878787;
}
.OccupantsPanel .OccupantsPanel__header .OccupantsPanel__closeButton:hover svg {
  color: #545454;
}
.OccupantsPanel .OccupantsPanel__header--scrolled {
  border-bottom: 1px solid #d3d3d3;
}
.OccupantsPanel .OccupantsPanel__body {
  flex: 1 1;
  position: relative;
}
.OccupantsPanel .OccupantsPanel__body ul {
  padding-bottom: 1.5rem;
}
.OccupantsPanel .OccupantPanel__listTop {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
}
.OccupantsPanel .OccupantsPanel__item {
  min-height: 35px;
  display: flex;
  align-items: center;
  text-decoration: inherit;
  font-size: 0.75rem;
  padding: 0 1rem;
  color: #545454;
}
.OccupantsPanel .OccupantsPanel__item * {
  cursor: pointer;
}
.OccupantsPanel .OccupantsPanel__item:hover {
  background-color: #ededed;
}
.OccupantsPanel .OccupantsPanel__item label {
  flex: 1 0;
  margin-left: 10px;
  font-style: italic;
  font-weight: 200;
  line-height: 22px;
  vertical-align: middle;
}
.OccupantsPanel .OccupantsPanel__item label span {
  white-space: nowrap;
}
.OccupantsPanel .OccupantsPanel__item .status {
  height: 9px;
  width: 9px;
}
.OccupantsPanel .OccupantsPanel__item .badge {
  background: #d7e6f1;
  color: #265170;
  font-size: 0.5rem;
  text-transform: uppercase;
  padding: 7px;
  border-radius: 3px;
  margin-right: 8px;
  font-weight: 600;
}
.OccupantsPanel .OccupantsPanel__item .badge--green {
  background: #e2f2e2;
  color: #2a5e2c;
}
.OccupantsPanel__avatar {
  margin-left: 5px;
}
@media screen and (min-width: 1024px) {
  .OccupantsPanel {
    position: relative;
    border-left: 1px solid #d3d3d3;
  }
}

.toolbarButton {
  width: 80px;
  height: 100%;
  margin-left: 0.2rem;
  border: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  cursor: pointer;
  position: relative;
}
.toolbarButton .toolbarButton__icon path {
  fill: #b7b7b7;
}
.toolbarButton .toolbarButton__text {
  font-size: 0.8rem;
  color: #b7b7b7;
  margin-left: 3px;
}
.toolbarButton hr {
  position: absolute;
  width: 60px;
  bottom: 0;
  left: 10px;
  border-top: 0;
  border-bottom: 2px solid #265170;
  border-left: 0;
  border-right: 0;
  margin: 0;
  padding: 0;
  visibility: hidden;
}
.toolbarButton:hover,
.toolbarButton.toolbarButton--pressed {
  background-color: #eee;
}
.toolbarButton:hover .toolbarButton__icon path,
.toolbarButton.toolbarButton--pressed .toolbarButton__icon path {
  fill: #265170;
}
.toolbarButton:hover .toolbarButton__text,
.toolbarButton.toolbarButton--pressed .toolbarButton__text {
  color: #265170;
}
.toolbarButton.toolbarButton--active .toolbarButton__icon path {
  fill: #265170;
}
.toolbarButton.toolbarButton--active .toolbarButton__text {
  color: #265170;
}
.toolbarButton.toolbarButton--active hr {
  visibility: visible;
}

.ChatMenu {
  background: white;
  list-style: none;
  border-radius: 0.5rem;
  box-shadow: 0px 2px 40px 0px rgba(0, 0, 0, 0.35);
  padding: 0.375rem;
  min-width: 175px;
}
.ChatMenu__item {
  width: 200px;
  display: flex;
  border-radius: 0.25rem;
  align-items: center;
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-size: 0.875rem;
}
.ChatMenu__item svg {
  margin-right: 0.5rem;
}
.ChatMenu__item:hover {
  background-color: #eee;
}

.ChatDetails__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.75rem;
}
.ChatDetails__fieldset {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.ChatDetails__field {
  display: flex;
  align-items: flex-start;
  font-size: 0.875rem;
}
.ChatDetails__icon {
  display: flex;
  justify-content: center;
  width: 28px;
  margin-right: 0.75rem;
  margin-top: 0.25rem;
  flex-shrink: 0;
}
.ChatDetails__value {
  line-height: 1.5;
  word-break: bread-word;
}
.ChatDetails__value > a {
  color: inherit;
  text-decoration: underline;
}

.ChatHeader {
  align-items: center;
  display: flex;
  flex-direction: row;
  margin: 0 1rem;
  box-sizing: border-box;
  border-bottom-style: solid;
  border-color: lightgray;
  border-width: 1px;
  height: 50px;
}
@media (max-width: 767px) {
  .ChatHeader {
    padding: 0 1rem;
  }
}
.ChatHeader__availability {
  margin-right: 0.5rem;
}
.ChatHeader__headings {
  text-align: left;
  color: inherit;
  font-family: inherit;
  padding: 0.25rem 0.5rem;
  margin-right: 0.5rem;
  overflow: hidden;
  border: none;
  background: transparent;
  border-radius: 0.25rem;
  white-space: nowrap;
}
.ChatHeader__headings:hover {
  background-color: #f5f5f5;
}
.ChatHeader__topline {
  display: flex;
  align-items: baseline;
  line-height: 1.25;
}
.ChatHeader__name {
  flex-basis: auto;
  font-weight: 600;
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ChatHeader__details {
  flex: 1 1 20%;
  border: none;
  background: none;
  padding: 0 0.25rem;
  margin-left: -0.25rem;
  border-radius: 0.125rem;
  color: inherit;
  font-size: 0.875rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0.8;
}
.ChatHeader__sep {
  width: 1px;
  align-self: stretch;
  flex-shrink: 0;
  background: #e5e5e5;
  margin: 0 0.75rem;
}
.ChatHeader__roomname {
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.7;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ChatHeader__controls {
  margin-left: auto;
  height: 100%;
  flex: 0 0;
  display: flex;
  align-items: center;
}

.Home {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
.Home main {
  display: flex;
  flex: 2;
  overflow: hidden;
}
.Home-Chats {
  flex-basis: 300px;
  min-height: 100%;
}
.Home-Chat {
  min-height: 100%;
  flex: 1;
  padding: 0px;
  overflow: hidden;
  display: flex;
  border-top: 1px solid lightgray;
}
.Home .InfoBanner {
  position: absolute;
  top: 0;
  left: 0;
}
.Home-NoChat {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}
@media (max-width: 767px) {
  .Home-Chats {
    flex: 1;
  }
  .Home-Chat {
    display: none;
  }
  .Home-HasActiveChat .Home-Chats {
    display: none;
  }
  .Home-HasActiveChat .Home-Chat {
    display: block;
  }
}

.Overlay,
.OverlayMessage {
  background: rgba(38, 81, 112, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.LogHistory {
  background-color: white;
  overflow: hidden;
  height: 100%;
  width: 100%;
  max-width: 840px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
}
@media screen and (min-width: 840px) {
  .LogHistory {
    border-radius: 0.5rem;
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
    width: calc(100% / 3 * 2);
    height: calc(100% / 3 * 2);
    margin-top: 4rem;
  }
}
.LogHistory__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid lightgray;
  padding: 0.5rem 1.5rem;
}
.LogHistory__title {
  font-weight: 600;
  font-size: 1.25rem;
  display: inline-block;
}
.LogHistory__frontendVersion {
  font-size: 0.875rem;
  font-weight: 300;
  display: inline-block;
  margin-left: 5px;
}
.LogHistory__content {
  position: relative;
  flex: 1;
}
.LogHistory__textarea {
  background: #f5f9fb;
  font-family: 'Courier New', Courier, monospace;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 1.5rem;
  border: none;
  resize: none;
}
.LogHistory__closeButton,
.LogHistory__copyButton {
  border: none;
  border-radius: 0.25rem;
  font-weight: 600;
  transition: all 0.2s ease-out;
}
.LogHistory__closeButton {
  background: transparent;
  color: inherit;
  opacity: 0.6;
  padding: 0.5rem;
  margin-right: -0.5rem;
}
.LogHistory__closeButton:hover {
  background-color: #f1f1f1;
  opacity: 1;
}
.LogHistory__copyButton {
  background: #66bb6a;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
  color: white;
  position: absolute;
  bottom: 1.5rem;
  right: 1.75rem;
  padding: 0.625rem 1.25rem;
}
.LogHistory__copyButton:hover {
  background-color: #54b359;
}
.OverlayMessage {
  transition: all 0.2s ease-in;
  pointer-events: none;
  opacity: 0;
  z-index: 11;
}
.OverlayMessage__content {
  transition: all 0.2s ease-in;
  transform: scaleX(0.1) scaleY(0.1);
  width: auto;
  height: auto;
  margin: auto auto auto auto;
  max-width: 430px;
  max-height: 500px;
  color: #fff;
  align-items: flex-start;
}
.OverlayMessage--shown {
  transition: all 0.3s ease-in;
  pointer-events: auto;
  opacity: 1;
}
.OverlayMessage--shown .OverlayMessage__content {
  transition: all 0.3s ease-in;
  transform: scaleX(1) scaleY(1);
}
.OverlayMessage__heading {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 10px;
}
.OverlayMessage__body {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.OverlayMessage__button {
  margin-top: 2rem;
  border: 1px solid #ffffff66;
  background-color: transparent;
  color: #ffffffcc;
  padding: 0.6rem 1.25rem;
  font-weight: bold;
}
.OverlayMessage__button:hover {
  background-color: #ffffff09;
}

.WaitScreen {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: center;
}
.WaitScreen__actions {
  margin-top: 10px;
}
.WaitScreen__button {
  box-shadow: 0px 2px 4px 0px rgb(0 0 0%);
  padding: 0.625rem 1.25rem;
  border-radius: 5px;
  margin-right: 5px;
}
.WaitScreen__button--primary {
  background-color: #66BB6A;
  color: white;
}
.WaitScreen__button--primary:hover {
  background-color: #49a54e;
}
.WaitScreen__errorMessage {
  color: #f24726;
  margin-top: 0.625rem;
  font-size: 0.875rem;
  width: 300px;
  text-align: center;
}

.Overlay {
  background: rgba(38, 81, 112, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.LogHistory {
  background-color: white;
  overflow: hidden;
  height: 100%;
  width: 100%;
  max-width: 840px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
}
@media screen and (min-width: 840px) {
  .LogHistory {
    border-radius: 0.5rem;
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
    width: calc(100% / 3 * 2);
    height: calc(100% / 3 * 2);
    margin-top: 4rem;
  }
}
.LogHistory__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid lightgray;
  padding: 0.5rem 1.5rem;
}
.LogHistory__title {
  font-weight: 600;
  font-size: 1.25rem;
  display: inline-block;
}
.LogHistory__frontendVersion {
  font-size: 0.875rem;
  font-weight: 300;
  display: inline-block;
  margin-left: 5px;
}
.LogHistory__content {
  position: relative;
  flex: 1;
}
.LogHistory__textarea {
  background: #f5f9fb;
  font-family: 'Courier New', Courier, monospace;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 1.5rem;
  border: none;
  resize: none;
}
.LogHistory__closeButton,
.LogHistory__copyButton {
  border: none;
  border-radius: 0.25rem;
  font-weight: 600;
  transition: all 0.2s ease-out;
}
.LogHistory__closeButton {
  background: transparent;
  color: inherit;
  opacity: 0.6;
  padding: 0.5rem;
  margin-right: -0.5rem;
}
.LogHistory__closeButton:hover {
  background-color: #f1f1f1;
  opacity: 1;
}
.LogHistory__copyButton {
  background: #66bb6a;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
  color: white;
  position: absolute;
  bottom: 1.5rem;
  right: 1.75rem;
  padding: 0.625rem 1.25rem;
}
.LogHistory__copyButton:hover {
  background-color: #54b359;
}

.Me {
  display: flex;
  align-items: center;
}
.Me .status {
  width: 11px;
  height: 11px;
}
.Me__Menu {
  background: white;
  list-style: none;
  border-radius: 0.5rem;
  box-shadow: 0px 2px 40px 0px rgba(0, 0, 0, 0.35);
  padding: 0.375rem;
  min-width: 175px;
}
.Me__MenuHr {
  height: 1px;
  width: 100%;
  border: none;
  background-color: lightgray;
  opacity: 0.5;
  margin: 0.375rem 0;
}
.Me__MenuItem {
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-size: 0.875rem;
}
.Me__MenuItem:hover {
  background: #f1f1f1;
}
.Me__MenuItem .status,
.Me__MenuItem svg {
  margin-right: 0.5rem;
}
.Me__MenuItem--disabled {
  opacity: 0.62;
  cursor: not-allowed;
}
.Me__Icon {
  background: transparent;
  border: 1px solid lightgray;
  padding: 0;
  margin: 0;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  margin-right: 0.75rem;
}
.Me__StatusIcon {
  color: #d5d5d5;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 0.5rem;
}
.Me__NameStatus {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.Me__Name {
  font-weight: 600;
}
.Me__Status {
  cursor: pointer;
  display: flex;
  align-items: center;
  height: 1.5em;
}
.Me__Status svg {
  cursor: pointer;
  margin-left: 0.25rem;
  flex-shrink: 0;
  visibility: hidden;
}
.Me__Status:hover svg {
  visibility: visible;
}
.Me__StatusLabel,
.Me__StatusInput {
  border: 1px dashed transparent;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  padding: 0;
  margin: 0.25rem 0 0 0;
}
.Me__StatusInput::-webkit-input-placeholder {
  color: #545454;
  opacity: 0.9;
  font-style: italic;
}
.Me__StatusInput:-ms-input-placeholder {
  color: #545454;
  opacity: 0.9;
  font-style: italic;
}
.Me__StatusInput::-ms-input-placeholder {
  color: #545454;
  opacity: 0.9;
  font-style: italic;
}
.Me__StatusLabel--empty,
.Me__StatusInput::placeholder {
  color: #545454;
  opacity: 0.9;
  font-style: italic;
}
.Me__StatusLabel {
  width: 100%;
}
.Me__StatusInput {
  min-width: 8rem;
  border-bottom-color: #919191;
  cursor: text;
}

.Modal {
  background-color: white;
  overflow: hidden;
  height: 100%;
  width: 840px;
  max-width: 640px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
}
@media screen and (min-width: 840px) {
  .Modal {
    border-radius: 0.5rem;
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
    width: 480px;
    height: auto;
    margin-top: 4rem;
  }
}
.Modal__header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid lightgray;
  padding: 0.5rem 1.5rem;
}
.Modal__title {
  font-weight: 600;
  font-size: 1.25rem;
}
.Modal__content {
  position: relative;
  flex: 1;
  padding: 1.5rem;
}
.Modal__closeButton {
  border: none;
  border-radius: 0.25rem;
  font-weight: 600;
  transition: all 0.2s ease-out;
  background: transparent;
  color: inherit;
  opacity: 0.6;
  padding: 0.5rem;
  margin-left: auto;
  margin-right: -0.5rem;
}
.Modal__closeButton:hover {
  background-color: #f1f1f1;
  opacity: 1;
}
.Warning {
  background: rgba(240, 104, 100, 0.1);
  border-radius: 0.25rem;
  color: #83211e;
  font-size: 0.875rem;
  padding: 0.75rem 1.25rem;
  margin-top: 0.25rem;
  margin-bottom: 0.75rem;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
}
.Warning > svg {
  margin-top: 0.125rem;
  opacity: 0.8;
}
.Warning__text {
  margin-left: 0.75rem;
}
.Warning__heading {
  font-weight: 600;
}

.Search {
  max-width: 640px;
  position: relative;
  width: 100%;
}
.Search__control {
  align-items: center;
  background-color: white;
  border-radius: 0.5rem;
  display: flex;
  flex-shrink: 0;
  font-size: 0.875rem;
  gap: 1rem;
  line-height: 1rem;
  padding: 0 0 0 1rem;
  position: relative;
  text-align: left;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .Search__control {
    border: 1px solid transparent;
    height: 3rem;
    padding: 0 1rem;
  }
}
.Search__icon {
  align-items: center;
  color: #545454;
  display: flex;
  pointer-events: none;
}
.Search__input {
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: inherit;
  height: 100%;
  line-height: 1rem;
  margin: 0;
  padding: 0;
  width: 100%;
}
._Search__button {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  display: flex;
  font-size: 0.875rem;
  line-height: 1rem;
  padding: 1rem;
}
._Search__button:hover {
  background-color: white;
  border-color: #e5e5e5;
}
._Search__button:focus-visible {
  border-color: #60a5fa;
}
.Search__openbutton {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  display: flex;
  font-size: 0.875rem;
  line-height: 1rem;
  padding: 1rem;
}
.Search__openbutton:hover {
  background-color: white;
  border-color: #e5e5e5;
}
.Search__openbutton:focus-visible {
  border-color: #60a5fa;
}
@media screen and (min-width: 768px) {
  .Search__openbutton {
    background-color: #fbfbfb;
    border-color: #f1f1f1;
    gap: 1rem;
    height: 3rem;
    padding: 0 1rem;
    position: relative;
    text-align: left;
    width: 100%;
  }
  .Search__openbutton:focus-within {
    background-color: white;
  }
}
.Search__closebutton {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  display: flex;
  font-size: 0.875rem;
  line-height: 1rem;
  padding: 1rem;
}
.Search__closebutton:hover {
  background-color: white;
  border-color: #e5e5e5;
}
.Search__closebutton:focus-visible {
  border-color: #60a5fa;
}
@media screen and (min-width: 768px) {
  .Search__closebutton {
    display: none;
  }
}
.Search__placeholder {
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: inherit;
  height: 100%;
  line-height: 1rem;
  margin: 0;
  padding: 0;
  width: 100%;
  color: #747474;
  display: none;
}
@media screen and (min-width: 768px) {
  .Search__placeholder {
    align-items: center;
    display: flex;
  }
}
.Search__popover {
  background: white;
  display: flex;
  flex-direction: column;
  height: 100%;
  left: 0;
  overflow: hidden;
  padding: 1rem 1rem 0 1rem;
  position: fixed;
  top: 0;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .Search__popover {
    height: auto;
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
    max-height: calc(100vh - 120px);
    padding: 0;
    position: absolute;
  }
}
.Search__list {
  border-top: 1px solid #e9e9e9;
  flex: 2;
  list-style: none;
  margin: 0.875rem 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.Search__list ul {
  flex-shrink: 1;
  height: 100%;
  overflow: auto;
  padding: 0.75rem 0.5rem;
}
@media screen and (min-width: 768px) {
  .Search__list {
    margin-top: 0;
    max-height: 26.875rem;
  }
}
.Search__listheading {
  flex-shrink: 0;
  font-weight: 600;
  font-size: 0.75rem;
  padding: 1.25rem 1.5rem 0.25rem 1.5rem;
}
.Search__result {
  box-sizing: border-box;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  color: inherit;
  display: flex;
  font-size: 0.875rem;
  gap: 0.5rem;
  line-height: 1.25rem;
  padding: 0.5rem 1rem;
  position: relative;
  text-decoration: none;
}
.Search__result > .status {
  height: 0.625rem;
  width: 0.625rem;
}
.Search__result:hover:not(.Search__result--active) {
  background-color: #f5f5f5;
}
.Search__result--active {
  background-color: #f9fbfd;
  border-color: #60a5fa;
}
.Search__resultname {
  flex: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.Search__resultprompt {
  align-items: center;
  display: inline-flex;
  gap: 0.5rem;
}
.Search__keys {
  color: #545454;
  display: none;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .Search__keys {
    align-items: center;
    display: inline-flex;
    gap: 0.5rem;
  }
}
.Search__key {
  background: white;
  border: 1px solid #d5d5d5;
  border-radius: 0.25rem;
  cursor: default;
  display: none;
  font-family: monospace;
  font-size: 0.75rem;
  line-height: 1rem;
  padding: 0.25rem 0.5rem;
}
.Search__key--small {
  padding: 0.125rem 0.25rem;
}
@media (hover: hover) and (pointer: fine) {
  .Search__key {
    display: flex;
    gap: 0.25rem;
  }
}
.SearchHint {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 0.5rem;
  align-items: center;
  border-top: 1px solid #e9e9e9;
}
.SearchHint .SearchHint__text {
  font-size: 0.9rem;
}
@media screen and (min-width: 768px) {
  .SearchHint {
    padding: 0.75rem 1.375rem;
  }
}

.AppHeader {
  display: grid;
  align-items: center;
  background: #fff;
  height: 80px;
  position: relative;
  z-index: 5;
  grid-template-columns: auto -webkit-min-content -webkit-min-content;
  grid-template-columns: auto min-content min-content;
}
.AppHeader > * {
  padding: 1rem;
}
@media screen and (min-width: 768px) {
  .AppHeader {
    grid-template-columns: 300px auto -webkit-min-content;
    grid-template-columns: 300px auto min-content;
  }
}
@media screen and (min-width: 1200px) {
  .AppHeader {
    grid-template-columns: 300px auto 300px;
  }
}
.AppHeader__left {
  display: flex;
  justify-content: flex-start;
}
.AppHeader__center {
  display: flex;
  justify-content: center;
}
.AppHeader__right {
  display: flex;
  justify-content: flex-end;
}
.AppHeader__right:empty {
  padding: 0;
}
.AppHeader__back {
  display: none;
  border: none;
  margin-right: 1rem;
}
@media (max-width: 767px) {
  .AppHeader__back {
    display: inline-block;
  }
}
.AppHeader__error {
  background: #FDECEC;
  border: none;
  border-radius: 0.25rem;
  color: #E23F3F;
  padding: 0.625rem 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.AppHeader__error:hover {
  background: #fcdede;
}
.AppHeader__error > span {
  color: #AD2121;
  margin-left: 0.375rem;
}

@-webkit-keyframes slideIn {
  from {
    margin-top: -5rem;
  }
  to {
    margin-top: 0;
  }
}
@keyframes slideIn {
  from {
    margin-top: -5rem;
  }
  to {
    margin-top: 0;
  }
}
.UpdateBanner {
  -webkit-animation: slideIn 0.2s ease-out;
          animation: slideIn 0.2s ease-out;
  background: #f0f8f1;
  border: none;
  border-bottom: 1px solid #e8f4e9;
  color: #155018;
  cursor: pointer;
  display: flex;
  align-items: center;
  height: 80px;
  padding: 0 1rem;
  transition: all 0.2s ease-out;
}
.UpdateBanner:hover {
  background-color: #e8f4e9;
}
.UpdateBanner__text {
  display: flex;
  align-items: baseline;
  margin-left: 0.5rem;
}
.UpdateBanner__heading {
  font-weight: 600;
  font-size: 0.875rem;
}
.UpdateBanner__subheading {
  font-size: 0.75rem;
  margin-left: 0.5rem;
}
.UpdateBanner__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 0.5rem;
  color: #155018;
}