/************* DARK THEME ***************/

:root, .dark-theme {
	--background-tertiary: #121212;
	--background-primary: #282828;
	--background-secondary: #1f1f1f;
	--background-secondary-alt: #181818;
	--interactive-normal: #b9bbbe;
	--interactive-hover: #dcddde;
	--interactive-active: #fff;
	--background-modifier-hover: rgba(79,84,92,0.16);
	--background-modifier-active: rgba(79,84,92,0.24);
	--background-modifier-selected: rgba(79,84,92,0.32);
	--background-modifier-accent: hsla(0,0%,100%,0.06);
	--background-floating: #131416;
	--header-primary: #fff;
	--header-secondary: #b9bbbe;
	--text-link: #00b0f4;
	--text-normal: #ddd;
	--text-positive: #4fdc7b;
	--text-warning: #faa81a;
	--text-negative: #ee4145;
	--text-disabled: #72767d;
	--background-accent: #4f545c;
	--background-accent-alt: rgba(255, 255, 255, 0.35);
	--scrollbar-auto-thumb: #202225;
	--scrollbar-auto-track: transparent;
	--scrollbar-thin-thumb: #232323;
	--scrollbar-thin-track: transparent;
	--brand-color: #5865f2;
	--brand-color-1: #4752c4;
	--brand-color-2: #3639b3;
	--color-shadow: rgba(0, 0, 0, 0.24);
	--button-red-background: #ee4145;
	--button-red-background-hover: #aa2e30;
	--button-green-background: #22a559;
	--button-green-background-hover: #209551;
	--backdrop-color: #010101cf;
	--color-user-1: #e17076;
  --color-user-2: #7bc862;
  --color-user-3: #49af97;
  --color-user-4: #65aadd;
  --color-user-5: #a695e7;
  --color-user-6: #ee7aae;
  --color-user-7: #6ec9cb;
  --color-user-8: #faa774;
	--green-360: #23a559;
	--color-message-meta-own: #ffffff88;
	--color-accent-own: #fff;
}


/************* LIGHT THEME ***************/

:root.light-theme {
	--background-tertiary: #e3e5e8;
	--background-primary: #fff;
	--background-secondary: #f2f3f5;
	--background-secondary-alt: #dbdddf;
	--interactive-normal: #4f5660;
	--interactive-hover: #2e3338;
	--interactive-active: #060607;
	/*--background-modifier-selected:rgba(116,127,141,0.24);*/
	/*--background-modifier-accent:rgba(6,6,7,0.08);*/
	--background-modifier-hover: rgba(116,127,141,0.08);
	--background-modifier-active: rgba(116,127,141,0.16);
	--background-modifier-selected: rgba(116,127,141,0.24);
	--background-modifier-accent: rgba(6,6,7,0.08);
	--background-floating: #fff;
	--header-primary: #060607;
	--header-secondary: #4f5660;
	--text-link: #00b0f4;
	--text-normal: #2e3338;
	--text-positive: #4fdc7b;
	--text-warning: #faa81a;
	--text-negative: #ee4145;
	--text-disabled: #747f8d;
	--background-accent: #747f8d;
	--background-accent-alt: rgba(255, 255, 255, 0.35);
	--scrollbar-auto-thumb: #ccc;
	--scrollbar-auto-track: #f2f2f2;
	--scrollbar-thin-thumb: rgba(79, 84, 92, 0.3);
	--scrollbar-thin-track: transparent;
	--brand-color: #5865f2;
	--brand-color-1: #4752c4;
	--brand-color-2: #3639b3;
	--color-shadow: rgba(0,0,0,0.25098);
	--backdrop-color: #010101af;
	--color-message-meta-own: #ffffff88;
	--color-accent-own: #fff;
}

:root {
	--spinner-white-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iI2ZmZmZmZiIvPjwvc3ZnPg==);
	--spinner-white-thin-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTEyIDIzQzUuOSAyMyAxIDE4LjEgMSAxMlM1LjkgMSAxMiAxVjBDNS40IDAgMCA1LjQgMCAxMnM1LjQgMTIgMTIgMTIgMTItNS40IDEyLTEyaC0xYzAgNi4xLTQuOSAxMS0xMSAxMXoiLz48L3N2Zz4=);
	--spinner-blue-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzRlYTRmNiIvPjwvc3ZnPg==);
	--spinner-dark-blue-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzgzNzhEQiIvPjwvc3ZnPg==);
	--spinner-black-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzJlMzkzOSIvPjwvc3ZnPg==);
	--spinner-green-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzRmYWU0ZSIvPjwvc3ZnPg==);
	--spinner-gray-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzcwNzU3OSIvPjwvc3ZnPg==);
	--spinner-yellow-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iI0ZERDc2NCIvPjwvc3ZnPg==);
}

:root {
	--layer-transition: 300ms cubic-bezier(0.33, 1, 0.68, 1);
	--slide-transition: 300ms cubic-bezier(0.25, 1, 0.5, 1);
}

:root {
	--font-primary: "Segoe UI", Whitney, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-display: 'Open Sans', sans-serif; /* unused */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body,
html {
  height: 100%;
  text-rendering: optimizeLegibility !important;
  width: 100%;
  -webkit-font-smoothing: antialiased !important;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

html {
  background-color: var(--background-root);
  overflow: hidden;
}

body {
  color: var(--header-secondary);
  cursor: default;
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  min-width: 320px;
  /* -webkit-overflow-scrolling: touch !important; */
}

body {
  height: 100%;
  overflow-y: overlay;
}

#root,
body,
html {
	width: 100%;
	height: 100%;
}

#root,
body {
	background-color: var(--background-tertiary);
	text-rendering: optimizeLegibility;
}

#root {
	position: absolute;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	/* transition: .3s; */
}

ol,
ul {
  list-style: none
}

a {
  text-decoration: none;
}
a, button, input {
  outline: none;
	line-height: 1;
}

.clickable {
	cursor: pointer;
}
.clickable svg {
	color: var(--interactive-normal);
}
.clickable:hover * {
	color: var(--interactive-hover);
}

.disabled,
[disabled] {
  pointer-events: none !important;
  opacity: 0.6;
  /* color: var(--text-disabled)!important */
}

pre {
  user-select: text;
}

.disable-animation,
.disable-animation * {
  -moz-animation: none !important;
  -webkit-animation: none !important;
  -ms-animation: none !important;
  animation: none !important;
  -moz-transition: none !important;
  -webkit-transition: none !important;
  -ms-transition: none !important;
  transition: none !important
}

.hidden {
  visibility: hidden;
  opacity: 0;
  display: none
}

.nowrap {
	white-space: nowrap;
}

.h100 {
  height: 100%;
}

.w100 {
  width: 100%;
}


h2 {
	/* text-transform: uppercase; */
	font-size: 20px;
	font-weight: 700;
	line-height: normal;
	color: var(--header-primary);
}

h5 {
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
}

.overhiden {
  overflow-x: auto;
  overflow-y: hidden;
}

.text-overflow {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	position: relative;
	line-height: normal;
}
.acronym {
	font-weight: 600;
	font-size: 0.6rem;
	white-space: nowrap;
	text-overflow: clip;
}

.text-normal {
	color: var(--text-normal) !important;
}
.text-warning {
	color: var(--text-warning) !important;
}
.text-negative {
	color: var(--text-negative) !important;
}
.text-positive {
	color: var(--text-positive) !important;
}
.text-disabled {
	color: var(--text-disabled) !important;
}
.text-link {
	color: var(--text-link) !important;
}

.d-flex {
  display: flex !important;
}
.d-flex.horizontal {
	flex-direction: row;
}
.d-flex.vertical {
	flex-direction: column;
}
.d-flex.wrap {
	flex-wrap: wrap;
}
.d-flex.nowrap {
	flex-wrap: nowrap;
}

.d-flex.center {
  justify-content: center !important;
  align-items: center !important;
}

.d-flex.left {
  justify-content: flex-start !important;
  align-items: center !important;
}

.d-flex.right {
  justify-content: flex-end !important;
  align-items: center !important;
}


a.anchor {
	color: var(--text-link);
	text-decoration: none;
}

a.anchor:hover {
	color: var(--text-link);
	text-decoration: underline;
}


.flex-group.horizontal + .flex-group.horizontal {
	margin-top: 20px;
}
.flex-group {
	display: flex;
	align-items: baseline;
}
.flex-group.g-4 {
	gap: 4px;
}
.flex-group.g-8 {
	gap: 8px;
}

.flex-group.vertical {
	flex-direction: column;
}

.flex-group.horizontal {
	flex-direction: row;
}

.flex-group.a-c {
	align-items: center;
}

.flex-group>.flex-child {
	position: relative;
}
.flex-group.horizontal>.flex-child {
	flex: 1 1 50%;
}
.flex-group.vertical>.flex-child {
	flex: 1;
	width: 100%;
}

.flex-group.horizontal>.flex-child:first-child {
	margin-right: 8px;
}
.flex-group.horizontal>.flex-child + .flex-child {
	margin-left: 8px;
}
.flex-group.vertical>.flex-child:first-child {
	margin-bottom: 8px;
}
.flex-group.vertical>.flex-child + .flex-child {
	margin-top: 8px;
}


.VT-flex-box {
	margin: auto;
	box-sizing: border-box;
	flex: 1;
	overflow: hidden overlay;
	font-size: initial;
	width: 100%;
	text-align: initial;
	padding: 0 max(1rem, env(safe-area-inset-left)) 1rem max(1rem, env(safe-area-inset-right));
}

.VT-flex-box > input {
	width: 100%;
	margin: 5px 0;
}

.VT-flex-box label {
	padding: 0 2px;
	font-size: 12px !important;
	font-weight: 700 !important;
	text-transform: uppercase;
}

.VT-flex-box .children-zx1 {
	position: relative;
	margin: 1rem auto;
	/* min-width: 330px; */
	max-width: 525px;
}
.VT-flex-box .children-zx1 {
	margin-top: 0;
}
.VT-flex-box .children-zx1 + .children-zx1 {
	margin-bottom: 0.8rem;
}

.VT-flex-box .separator {
	max-width: calc(525px - 12px);
}

.VT-footer {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.pos-rel {
	position: relative;
}

.buttonContainer {
	display: flex;
	flex-direction: row;
	gap: 12px;
}

button {
	border: 0;
	outline: 0;
	/* border-width: 0px 0px 1px 0px; */
	border: none;
	border-radius: 0.375rem;
	background-color: transparent;
	color: var(--header-primary);
	font-family: var(--font-primary);
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	padding: 6px 16px;
	box-sizing: border-box;
	min-width: 96px;
	min-height: 38px;
	width: auto;
	cursor: pointer;
}

button.small { /* legacy */
	min-height: 32px;
	min-width: 38px;
	font-size: 14px;
	line-height: 16px;
}
button.size-small {
	min-height: 32px;
	min-width: 38px;
	font-size: 14px;
	line-height: 16px;
}
button.size-large {
	min-height: 38px;
	min-width: 42px;
	font-size: 14px;
	line-height: 16px;
}

button.filled {
	transition: background-color .1s ease;
	color: var(--header-primary);
	background-color: var(--background-modifier-accent);
}
button.filled:hover {
	background-color: var(--background-modifier-selected);
}

button.filled.primary {
	transition: background-color .1s ease;
	color: #111;
	background-color: var(--interactive-active);
}
button.filled.primary:hover {
	background-color: var(--interactive-hover);
}

button.filled.colorBrand {
	color: #fff !important;
	background-color: var(--brand-color);
}
button.filled.colorBrand:hover {
	background-color: var(--brand-color-1);
}
button.filled.colorBrand:disabled {
	color: #ccc !important;
	background-color: var(--brand-color-1);
}

button.colorRed:hover {
	color: var(--button-red-background);
}
button.colorRed {
	color: var(--button-red-background);
	/* border: 1px solid var(--button-red-background); */
}
button.filled.colorRed {
	color: #fff !important;
	background-color: var(--button-red-background);
}
button.filled.colorRed:hover {
	background-color: var(--button-red-background-hover);
}

button.filled.colorGreen {
	color: #fff !important;
	background-color: var(--button-green-background);
}
button.filled.colorGreen:hover {
	background-color: var(--button-green-background-hover);
}

button.center {
	border-radius: 50%;
	padding: 16px;
}

button:hover {
	background-color: var(--background-modifier-selected);
}

button:active {
	background-color: #3A3A3A;
}

button>.content {
	/* margin: 0 auto; */
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: visible;
	outline: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 4px;
}

button.lookBlank > .content {
	display: block;
}
button.lookBlank:hover {
	background-color: transparent;
}
button.lookBlank {
	min-width: unset;
	min-height: unset;
	display: block;
	background: transparent;
  color: currentColor;
  border: 0;
  padding: 0;
  margin: 0;
}


.button {
	line-height: 0;
	min-height: 0;
	min-width: 0;
	width: 32px;
	height: 32px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	position: relative;
	color: var(--interactive-normal);
	background: transparent;
	cursor: pointer;
	transition: all .2s;
}

.button:hover {
	color: var(--interactive-hover);
	background-color: var(--background-modifier-selected);
}

/* SIZES */


.size12 {
	font-size: 12px !important;
	line-height: 16px !important;
}

.size14 {
	font-size: 14px !important;
	line-height: 18px !important;
}

.size16 {
	font-size: 16px !important;
	line-height: 20px !important;
}

.size20 {
	font-size: 20px !important;
	line-height: 24px !important;
}

.size24 {
	font-size: 24px !important;
	line-height: 30px !important;
}

.sizeQ {
	font-size: 1em !important;
	line-height: normal;
}

.sizeW {
	font-size: 1.2em !important;
	line-height: normal;
}

.sizeE {
	font-size: 1.5em !important;
	line-height: normal;
}

.sizeR {
	font-size: 1.6em !important;
	line-height: normal;
}

.sizeT {
	font-size: 1.8em !important;
	line-height: normal;
}

.sizeY {
	font-size: 2em !important;
	line-height: normal;
}

.sizeZ {
	font-size: 3em !important;
	line-height: normal;
}


.colorNormal {
	color: var(--text-normal)
}

.colorHeaderPrimary {
	color: var(--header-primary)
}

.subtitle-p {
	white-space: nowrap;
	text-overflow: ellipsis;
	/* overflow: hidden; */
	line-height: 16px;
	color: var(--interactive-normal);
	font-weight: 600;
}

.text {
	text-transform: uppercase;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .02em;
  font-weight: 600;
}

.separator {
	margin: 8px 10px;
	height: 1px;
	background-color: var(--background-modifier-accent);
}

code {
	padding: 0.2em 0.4em;
	margin: 0;
	/* font-size: 85%; */
	white-space: break-spaces;
	background-color: var(--background-modifier-accent);
	border-radius: 6px;
}

.wrapper {
	margin: 0;
}

/* MAIN */

.app {
	position: relative;
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	z-index: auto;
	width: 100%;
	height: 100%;
}
.app-container {
	position: relative;
	height: 100%;
	background-color: var(--background-tertiary);
	z-index: 1;
}


.layers-container {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: none!important;
	pointer-events: none;
	z-index: 3005;
}

.container.auth {
	background-color: var(--background-tertiary);
	height: 100%;
}

.container {
	position: relative;
	width: auto;
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: row;
	/* flex-shrink: 0; */
}

.container .center-wrapper {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.container > .base {
	display: flex;
	flex-direction: column;
	position: relative;
	flex-grow: 1;
	overflow: hidden;
}

.base > .content {
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	min-width: 0;
	min-height: 0;
	flex: 1 1 auto;
}

.sidebar-main {
	display: flex;
  flex-direction: column;
  min-height: 0;
  width: 240px;
  flex: 0 0 auto;
  overflow: hidden;
  background: var(--background-secondary);
}
.sidebar-main > .container-3Wc7 {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--background-secondary);
	overflow: hidden;
	flex: 1;
}

.sidebar-main > .panels {
	flex: 0 0 auto;
  background-color: var(--background-secondary-alt);
  z-index: 2;
}
.sidebar-main > .panels .panel-call .connection .voiceButtons > button svg {
	width: 20px;
	height: 20px;
}
.sidebar-main > .panels .panel-call .connection .voiceButtons > button {
	line-height: 0;
	min-width: auto;
	min-height: auto;
  width: 32px;
  height: 32px;
	padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  position: relative;
  color: var(--interactive-normal);
}
.sidebar-main > .panels .panel-call .connection .voiceButtons {
	flex: 0 0 auto;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	margin-left: 10px;
}
.sidebar-main > .panels .panel-call .connection .inner .rtc-state {
	font-weight: 600;
}
.sidebar-main > .panels .panel-call .connection .inner a:hover {
	text-decoration: underline;
}
.sidebar-main > .panels .panel-call .connection .inner a {
	white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--header-secondary);
  line-height: 13px;
  font-size: 12px;
  font-weight: 400;
}
.sidebar-main > .panels .panel-call .connection .inner {
	flex: 1;
  min-width: 0;
}
.sidebar-main > .panels .panel-call .connection {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
}
.sidebar-main > .panels .panel-call {
	color: var(--header-primary);
  font-size: 14px;
  font-weight: 500;
  padding: 8px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--background-modifier-accent);
  background: var(--background-secondary-alt);
}
.sidebar-main > .panels .panel {
	flex: 0 0 auto;
	height: 48px;
	background-color: var(--background-secondary-alt);
}

.sidebar-main > .panels .panel>.container {
	display: flex;
	align-items: center;
	padding: 0 8px;
}


/* ==== SCROLLBARS ===== */

.scroller-x {
	position: relative;
	box-sizing: border-box;
	min-height: 0;
	flex: 1 1 auto;
	overflow: scroll hidden;
	user-select: none;
	padding-right: 0px;
}
.scroller {
	position: relative;
	box-sizing: border-box;
	min-height: 0;
	flex: 1 1 auto;
	overflow: hidden scroll;
	user-select: none;
	padding-right: 0px;
}
@supports (overflow: overlay) {
	.scroller.overlay {
		overflow: hidden overlay;
	}
	.scroller-x.overlay {
		overflow: overlay hidden;
	}
}
.scroller.padded {
	padding-top: 12px;
}
.scroller > .scrollerContent {
	overflow-anchor: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  min-height: 100%;
}
.scroller > .scrollerContent > .scrollerInner {
	min-height: 0;
  /* overflow: hidden; */
}
.scroller > .scrollerContent .scrollerSpacer {
	display: block;
  height: 30px;
  width: 1px;
  flex: 0 0 auto;
  pointer-events: none;
}

.no-scrollbar::-webkit-scrollbar {
	width: 0;
	height: 0
}


/* ==== auto scrollbar ==== */

.auto-s::-webkit-scrollbar {
	width: 16px;
	height: 16px;
	/*background: transparent;*/
}

.auto-s::-webkit-scrollbar-corner {
	background: transparent;
}

.auto-s::-webkit-scrollbar-thumb {
	background-color: var(--scrollbar-auto-thumb);
	min-height: 40px;
}

.auto-s::-webkit-scrollbar-thumb,
.auto-s::-webkit-scrollbar-track {
	border: 4px solid transparent;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	border-radius: 8px;
}

.auto-s::-webkit-scrollbar-track {
	background-color: var(--scrollbar-auto-track);
}


/* ==== thin scrollbar ==== */

.thin-s::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.thin-s::-webkit-scrollbar-corner {
	background: transparent;
}

.thin-s::-webkit-scrollbar-thumb {
	background-color: var(--scrollbar-thin-thumb);
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	border: 2px solid transparent;
	border-radius: 4px;
	min-height: 40px;
}

.thin-s::-webkit-scrollbar-track {
	border-color: var(--scrollbar-thin-track);
	background-color: var(--scrollbar-thin-track);
	border: 2px solid var(--scrollbar-thin-track);
}


.container-main {
	width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg-overlay-chat, var(--background-primary));
}

@media (max-width: 600px) {
	.container.main.middleShown .sidebar-main {
		transform: translate3d(-20vw, 0, 0);
	}
	.sidebar-main {
		width: 100%;
		transition: 300ms cubic-bezier(0.33, 1, 0.68, 1);
		transform: translate3d(0, 0, 0);
	 }
	.container-main {
		z-index: 99;
		position: absolute;
		left: 0;
		bottom: 0;
		top: 0;
		right: 0;
		transition: 300ms cubic-bezier(0.33, 1, 0.68, 1);
		transform: translate3d(100vw, 0, 0);
	}
	.container.main.middleShown .container-main {
		transform: translate3d(0, 0, 0);
	}
}


/* HOME */
.headerDiscover > span {
	margin-right: 8px;
}
.headerDiscover {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 16px 0 16px 16px;
	font-weight: 700;
	color: var(--header-primary);
}
.channelContainer {
	color: var(--header-secondary);
	display: block;
	padding: 1px 0;
	border-radius: 4px;
	transition: none;
}
.channelContainer:hover {
	color: var(--interactive-hover);
}
.channelContainer > .interactive > .link > .layout > .content {
	flex: 1 1 auto;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	min-width: 0;
}
.nameAndDecorators {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}
.channelContainer .subtitle {
	font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
	margin-top: -2px;
}
.nameAndDecorators .name {
	font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  flex: 0 1 auto;
}
.nameAndDecorators .decorator {
	display: flex;
	margin-left: .25rem;
}
.nameAndDecorators .decorator svg {
	width: 16px;
	height: 16px;
}
.channelContainer > .interactive > .link > .layout {
	min-width: 0;
  display: flex;
  align-items: center;
  border-radius: 4px;
  height: 42px;
  padding: 0 8px;
}
.channelContainer > .interactive > .link {
	display: flex;
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  align-items: center;
  color: inherit;
  border-radius: inherit;
}
.channelContainer > .interactive {
	display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
	cursor: pointer;
	border-radius: inherit;
}
.channelContainer > .interactive:hover {
	background: var(--background-modifier-hover);
	cursor: pointer;
}
.channelContainer > .interactive.selected {
	color: #fff;
}
.channelContainer > .interactive.selected {
	background: var(--brand-color);
}
.channelContainer > .interactive > .closeButton > svg {
	display: block;
  width: 16px;
  height: 16px;
}
.channelContainer > .interactive > .closeButton {
	display: none;
  width: 16px;
  height: 16px;
  opacity: .7;
  margin: 2px;
  padding-right: 8px;
	box-sizing: content-box;
}
.channelContainer > .interactive > .closeButton:hover {
	opacity: 1;
}
.channelContainer > .interactive:hover > .closeButton {
	display: block;
}
.channelContainer .innerItem {
	width: 100%;
	height: auto;
	padding: 5px 8px;
	display: flex;
	align-items: center;
	border-radius: 4px;
}
.channelContainer .innerItem .avatarWithText {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.channelContainer .innerItem .avatarWithText .avatar {
	color: inherit;
}
.channelContainer .innerItem > .avatarWithText .content {
	white-space: nowrap;
	text-overflow: ellipsis;
	/* overflow: hidden; */
	min-width: 0;
	flex: 1 1 auto;
}

.channelContainer.muted .unreadCounter {
	background-color: var(--background-accent);
}
.channelContainer .unreadCounter {
	flex: 0 0 auto;
	margin-right: 4px;
  height: 20px;
	min-height: 20px;
	min-width: 18px;
  background-color: var(--brand-color);
  border-radius: .75rem;
	padding: 0 7px;
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.4;
  text-transform: uppercase;
}
.channelContainer > .interactive:hover .unreadCounter {
	display: none;
}
/* == */



.nameTag {
	user-select: text;
	flex-grow: 1;
	margin-right: 4px;
	min-width: 0;
	line-height: 16px;
}

.nameTag>.title {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	color: var(--header-primary);
	line-height: 18px;
	font-weight: 600;
	font-size: 14px;
}

.nameTag>.subtitle {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	color: var(--header-secondary);
	line-height: 13px;
	font-size: 12px;
	font-weight: 600;
}

.tabBody {
  padding: 8px;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}


.Loading {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.button-1w5pas {
	position: relative;
	top: 3px;
	opacity: .8;
	-webkit-transition: stroke-dasharray .2s ease-out, -webkit-transform .2s ease-out !important;
	transition: transform .2s ease-out, stroke-dasharray .2s ease-out !important;
	-webkit-transform: translate3d(0, 0, 0) rotate(0deg);
	transform: translate3d(0, 0, 0) rotate(0deg);
}
.button-1w5pas.open {
	-webkit-transform: translate3d(0, -3px, 0) rotate(-90deg);
	transform: translate3d(0, -3px, 0) rotate(-90deg);
}
.button-1w5pas.open path {
	stroke-dasharray: 14
}
.button-1w5pas path {
	stroke-width: 2px;
	stroke-dasharray: 7;
	stroke-dashoffset: 1;
	-webkit-transition: stroke-dasharray .2s ease !important;
	transition: stroke-dasharray .2s ease !important;
}


.main-content {
	min-width: 0;
	min-height: 0;
	flex: 1 1 auto;
	display: flex;
	/* flex-direction: row;
	justify-content: stretch;
	align-items: stretch; */
	position: relative;
}

.chat-members {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 240px;
	background: var(--background-secondary);
}

/* ===== SidebarView ===== */


.sidebarView {
	display: flex;
	flex-direction: row;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}

.sidebar-region {
	background-color: var(--background-secondary);
	display: flex;
	flex-direction: row;
	user-select: none;
	overflow: hidden scroll;
}

.sidebarView .sidebar-region {
	flex: 1 0 220px;
	justify-content: flex-end;
}

.sidebar-region::-webkit-scrollbar {
	width: 4px;
}

.sidebar-region::-webkit-scrollbar-thumb {
	background-color: transparent;
}

.sidebar-region:hover::-webkit-scrollbar-thumb {
	background-color: rgb(170, 170, 170, 0.7);
}

.sidebar-region .sidebar {
	width: 220px;
	padding: 60px 6px 60px 20px;
}

.sidebar .item,
.content .item {
	display: flex;
	align-items: center;
	white-space: nowrap;
	text-overflow: ellipsis;
	/* overflow: hidden; */
	border-radius: 8px;
	flex-shrink: 0;
	font-weight: 500;
	text-align: start;
	font-family: var(--font-primary);
}

.sidebar .item span,
.content .item span {
	white-space: inherit;
	text-overflow: inherit;
	overflow: inherit;
	font-weight: inherit;
}

/* === navItem === */


.navItem {
	border-radius: 2px;
	transition: 0.2s all;
	padding: 6px 10px;
	position: relative;
	font-size: 16px;
	line-height: 20px;
	cursor: pointer;
	color: var(--interactive-normal);
	min-height: 28px;
	margin-bottom: 1px;
	margin-left: 8px;
	visibility: visible;
}

.navItem:hover {
	transition: all .2s;
	color: var(--interactive-hover);
	background-color: var(--background-modifier-hover);
}

.navItem.selected {
	cursor: default;
	color: var(--interactive-active) !important;
	background-color: var(--background-modifier-selected) !important;
}
.item.header {
	padding: 6px 10px;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 16px;
	text-transform: uppercase;
	flex: 0 0 auto;
	color: #8e9297;
}
.item.separator {
	margin: 8px 10px;
	height: 1px;
	background-color: var(--background-modifier-accent);
}

.sidebarView .content-region {
	background: var(--background-primary);
	flex: 1 1 800px;
	display: flex;
	align-items: flex-start;
	overflow: hidden;
}

.sidebarView .content-region .transitionWrap {
	flex: 1;
	height: 100%;
	width: 100%;
}

.sidebarView .content-region .transitionWrap > .content {
	height: 100%;
	overflow: hidden overlay;
}


.sidebarView .content-region .transitionWrap > .content h2 {
	margin-bottom: 20px;
	color: var(--header-primary);
}

.sidebarView .content-region .transitionWrap > .content h4 {
	margin-bottom: 8px;
	color: var(--header-secondary);
}


.sidebarView .content-region .transitionWrap > .content .tab {
	position: relative;
	padding: 60px 40px 70px;
	flex: 1 1 auto;
	max-width: 740px;
	min-width: 460px;
	min-height: 100%;
	margin: 0;
}
.sidebarView .content-region .transitionWrap > .content.centred .tab {
	margin: 0 calc(15% - 75px);
}

.sidebarView .content .separator {
	margin: 40px 0;
}


@media (max-width: 600px) {
	.sidebarView.mainShown .sidebar-region {
		transform: translate3d(-20vw, 0, 0);
	}
	.sidebarView .sidebar-region .sidebar {
		width: 100%;
	}
	.sidebarView .sidebar-region {
		width: 100%;
		transition: var(--layer-transition);
		transform: translate3d(0, 0, 0);
	 }
	 .sidebarView .content-region {
		z-index: 99;
		position: absolute;
		left: 0;
		bottom: 0;
		top: 0;
		right: 0;
		transition: var(--layer-transition);
		transform: translate3d(100vw, 0, 0);
	}
	.sidebarView.mainShown .content-region {
		transform: translate3d(0, 0, 0);
	}
}

.u-box {
	display: flex;
  align-items: center;
  border-radius: 4px;
  height: 42px;
  padding: 0 8px;
}
.u-box:hover {
	background-color: var(--background-modifier-hover);
	cursor: pointer;
}
.u-box > .content {
	min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}