*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*
! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

.visible {
  visibility: visible;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.inset-0 {
  inset: 0px;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.col-span-3 {
  grid-column: span 3 / span 3;
}

.col-span-5 {
  grid-column: span 5 / span 5;
}

.m-0 {
  margin: 0px;
}

.mb-0 {
  margin-bottom: 0px;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mb-16 {
  margin-bottom: 4rem;
}

.mb-24 {
  margin-bottom: 6rem;
}

.mb-32 {
  margin-bottom: 8rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-10 {
  margin-left: 2.5rem;
}

.mr-8 {
  margin-right: 2rem;
}

.mt-0 {
  margin-top: 0px;
}

.mt-24 {
  margin-top: 6rem;
}

.mt-32 {
  margin-top: 8rem;
}

.mt-48 {
  margin-top: 12rem;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.h-44 {
  height: 11rem;
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.w-44 {
  width: 11rem;
}

.w-8 {
  width: 2rem;
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes pingCustom {
  0% {
    transform: scale(0.55);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.animate-pingCustom {
  animation: pingCustom 1.2s cubic-bezier(0, 0, 0.3, 1) infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin-slow {
  animation: spin 2.4s linear infinite;
}

.resize {
  resize: both;
}

.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-12 {
  gap: 3rem;
}

.gap-24 {
  gap: 6rem;
}

.gap-8 {
  gap: 2rem;
}

.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.bg-\[\#262626\] {
  --tw-bg-opacity: 1;
  background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
}

.bg-\[\#D4D4D4\] {
  --tw-bg-opacity: 1;
  background-color: rgb(212 212 212 / var(--tw-bg-opacity, 1));
}

.bg-\[\#303030\] {
  --tw-bg-opacity: 1;
  background-color: rgb(48 48 48 / var(--tw-bg-opacity, 1));
}

.bg-body-bg {
  --tw-bg-opacity: 1;
  background-color: var(--body-bg);
}

.bg-\[conic-gradient\(from_150deg\2c _\#FFB7C0\2c _\#3793FF\2c _\#FFB7C0\)\] {
  background-image: conic-gradient(from 150deg, #FFB7C0, #3793FF, #FFB7C0);
}

.bg-\[linear-gradient\(150deg\2c _var\(--tw-gradient-stops\)\)\] {
  background-image: linear-gradient(150deg, var(--tw-gradient-stops));
}

.from-secondary {
  --tw-gradient-from: #FFB7C0 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 183 192 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-primary {
  --tw-gradient-to: #3793FF var(--tw-gradient-to-position);
}

.bg-clip-text {
  -webkit-background-clip: text;
          background-clip: text;
}

.p-4 {
  padding: 1rem;
}

.p-\[1px\] {
  padding: 1px;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.align-middle {
  vertical-align: middle;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.lowercase {
  text-transform: lowercase;
}

.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.text-dark-text-secondary {
  --tw-text-opacity: 1;
  color: rgb(168 168 170 / var(--tw-text-opacity, 1));
}

.text-primary {
  --tw-text-opacity: 1;
  color: rgb(55 147 255 / var(--tw-text-opacity, 1));
}

.text-transparent {
  color: transparent;
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(221 221 221 / var(--tw-text-opacity, 1));
}

.outline {
  outline-style: solid;
}

.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

/*--------------------------------------------------------------
# Root settings
--------------------------------------------------------------*/

:root {
  /* common */
  --navbar-bg: rgba(0, 0, 0, 0.2);
  --body-bg: radial-gradient(#393939, #d60404);
  --border: 0.5px solid rgb(255 255 255 / 0%);
  --msger-top: 50%;
  --msger-left: 50%;
  --msger-height: 680px;
  --msger-width: 420px;
  --msger-bubble-width: 85%;
  --caption-height: 680px;
  --caption-width: 420px;
  /* video iframe */
  --iframe-width: 640px;
  --iframe-height: 480px;
  /* whiteboard resize */
  --wb-width: 800px;
  --wb-height: 600px;
  /* my settings */
  --mySettings-select-w: 100%;
  /* btns hover scale 110% zoom */
  --btns-hover-scale: scale(1.1);
  --hover-color: grey;
  /* video elem border color */
  --elem-border-color: none;
  --tab-btn-active: rgb(30 29 29);
  /* --btn-bar-bg-color: #fff; */
  --btn-bar-color: #fff;
  /* left buttons bar vertical default */
  /* left buttons bar horizontal */
  --btns-top: 95%;
  --btns-right: 25%;
  --btns-left: 50%;
  --btns-margin-left: -330px;
  --btns-width: 660px;
  --btns-flex-direction: row;
  /* dark theme */
  --body-bg: #0a0a0a;
  --msger-bg: radial-gradient(#393939, #000000);
  --msger-private-bg: radial-gradient(#393939, #000000);
  --wb-bg: radial-gradient(#393939, #000000);
  --select-bg: #2c2c2c;
  --box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  /* chat msg boble */
  --left-msg-bg: #252d31;
  --right-msg-bg: #056162;
  --private-msg-bg: #6b1226;
  /* volume detected */
  --volume-up: 0px 8px 16px 0px rgb(249, 253, 0);
  /* video avatar img size */
  --vmi-wh: 15vw;
  /* 
        https://developer.mozilla.org/it/docs/Web/CSS/object-fit 
    */
  --video-object-fit: cover;
}

* {
  outline: none;
  font-family: 'Comfortaa';
  -webkit-user-select: none;
  /* Safari */
  /* IE 10 and IE 11 */
  -moz-user-select: none;
       user-select: none;
  /* Standard syntax */
}

/*--------------------------------------------------------------
# Body Html setup
--------------------------------------------------------------*/

html,
body {
  top: 0 !important;
  width: 100%;
  height: 100%;
  margin: auto;
  overflow: hidden;
  background: var(--body-bg);
  /* background: url('../images/bg.svg'); */
}

/*--------------------------------------------------------------
# Google Translate
--------------------------------------------------------------*/

.skiptranslate iframe,
.goog-te-banner-frame.skiptranslate {
  display: none !important;
}

#google_translate_element select {
  background: var(--select-bg) !important;
}

/*--------------------------------------------------------------
# Loading...
--------------------------------------------------------------*/

#loadingDiv {
  background-color: var(--body-bg);
  position: relative;
  color: #fff;
  padding: 40px;
  text-align: center;
  border-radius: 10px;
  box-shadow: var(--box-shadow);
  z-index: 2;
}

#loadingDiv h1 {
  font-size: 60px;
  font-family: 'Comfortaa';
}

#loadingDiv img {
  margin-top: 5px;
  margin-bottom: 5px;
}

#loadingDiv pre {
  padding: 5px;
  font-family: 'Comfortaa';
}

/*--------------------------------------------------------------
# Init User
--------------------------------------------------------------*/

.init-modal-size {
  width: 1024px !important;
  height: auto !important;
}

.init-user {
  display: flex;
  padding: 4px;
}

.init-video-container {
  position: relative;
  max-width: 160px;
  margin: 0 auto;
  /* Center horizontally */
}

.init-video-container video {
  z-index: 0;
  position: relative;
  height: 280px;
  display: block;
  margin: 0 auto;
  /* Center horizontally */
}

.initComands {
  width: 100%;
}

.initComands button {
  width: 50px;
  height: 50px;
}

@media screen and (max-width: 1024px) {
  .init-modal-size {
    width: auto !important;
  }

  .init-user {
    display: block;
  }

  .init-video-container {
    padding: 0px;
  }

  .init-modal-size {
    width: 480px !important;
  }
}

.init-user select {
  display: block;
  width: 100%;
  margin-top: 0px;
  padding: 10px;
  background: var(--select-bg);
  color: white;
  font-size: 0.75rem;
  border: var(--border);
  border-radius: 5px;
  box-shadow: none;
  cursor: pointer;
}

.init-user button {
  width: 50px;
  padding: 12px;
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 1rem;
  color: white;
  border: var(--border);
  border-radius: 5px;
  background-color: transparent;
}

.init-user button:hover {
  background-color: rgb(35, 35, 35);
  color: white;
  transform: scale(1);
}

/*--------------------------------------------------------------
# Left buttons
--------------------------------------------------------------*/

#buttonsBar {
  z-index: 20;
  display: none;
  position: fixed;
  padding: 10px;
  top: 90%;
  right: 0%;
  left: 0%;
  width: 100%;
  flex-direction: row;
  justify-content: center;
  grid-gap: 1.5rem;
  transform: translate(0%, -50%);
  /* background: var(--body-bg); */
  /* box-shadow: 0px 8px 16px 0px rgb(33 33 33); */
  /* border: var(--border); */
  /* border-radius: 10px; */
  overflow: hidden;
}

#buttonsBar button {
  padding: 12px;
  border: none;
  background: #00000080;
  color: var(--btn-bar-color);
  font-size: 1rem;
  border-radius: 10px;
  transition: all 0.3s ease-in-out;
}

#buttonsBar button:hover {
  color: var(--hover-color);
  transform: var(--btns-hover-scale);
}

#buttonsBar button:focus {
  outline: none;
}

#buttonsBar #leaveRoomBtn {
  color: #ff2d00;
}

.fa-microphone-slash,
.fa-video-slash {
  color: #e74c3c !important;
}

/*--------------------------------------------------------------

# Bottom buttons

--------------------------------------------------------------*/

#bottomButtons {
  z-index: 20;
  display: none;
  position: fixed;
  padding: 10px;
  top: var(--bottom-btns-top);
  left: var(--bottom-btns-left);
  bottom: var(--bottom-btns-bottom);
  transform: translate(var(--bottom-btns-translate-X), var(--bottom-btns-translate-Y));
  flex-direction: var(--bottom-btns-flex-direction);
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: var(--bottom-btns-margin-bottom);
  border-radius: 10px;
  border: none !important;
}

#bottomButtons button {
  width: 50px;
  height: 50px;
  padding: 10px;
  border: none !important;
  transition: all 0.3s ease-in-out;
}

#bottomButtons button:hover {
  transform: var(--btns-hover-scale);
}

#leftBottomButtons {
  z-index: 20;
  display: none;
  position: fixed;
  top: auto;
  right: 0;
  bottom: 0;
  transform: translate(0, 0);
  flex-direction: column;
  padding: 10px 2px;
  margin-right: 0;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 10px;
  border: none !important;
}

#leftBottomButtons button {
  width: 50px;
  height: 50px;
  border: none !important;
  transition: all 0.3s ease-in-out;
}

#leftBottomButtons button:hover {
  transform: var(--btns-hover-scale);
}

/*--------------------------------------------------------------
# Caption
--------------------------------------------------------------*/

.caption-draggable {
  z-index: 14;
  display: none;
  position: fixed;
  /* center screen */
  top: var(--caption-top);
  left: var(--caption-left);
  transform: translate(-50%, -50%);
  /* end center screen  */
  height: var(--caption-height);
  width: var(--caption-width);
  min-height: var(--caption-height);
  min-width: var(--caption-width);
  background: var(--msger-bg);
  border: var(--border);
  /* text-align: justify; */
  resize: both;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: var(--box-shadow);
}

.caption {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  background: var(--msger-bg);
}

.caption-header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: rgba(0, 0, 0, 0.2);
  color: #666;
  cursor: move;
}

.caption-header-title button,
.caption-header-options button {
  padding: 5px;
  /* border: var(--border); */
  border: none;
  font-size: 1.1rem;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
  transition: background 0.23s;
}

.caption-header-title button:hover,
.caption-header-options button:hover {
  color: var(--hover-color);
  transform: var(--btns-hover-scale);
  transition: all 0.3s ease-in-out;
}

.caption-chat {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  background: transparent;
  max-width: 95%;
}

.caption-chat::-webkit-scrollbar {
  width: 5px;
}

.caption-chat::-webkit-scrollbar-track {
  background: transparent;
}

.caption-chat::-webkit-scrollbar-thumb {
  background: black;
  /*aqua;*/
}

.caption-inputarea {
  display: inline-flex;
  padding: 10px;
  border: none;
  border: var(--border);
}

.caption-inputarea select {
  margin: 0 5px;
  cursor: pointer;
}

.left-msg .msg-caption-bubble {
  background: var(--left-msg-bg);
  border-bottom-left-radius: 0;
  color: #fff;
  width: var(--msger-bubble-width);
}

#captionMaxBtn,
#captionMinBtn {
  display: none;
}

#speechRecognitionStart,
#speechRecognitionStop {
  margin: 0 5px;
  border: none;
  border-radius: 5px;
  color: #fff;
  background-color: transparent;
}

#speechRecognitionStart:hover,
#speechRecognitionStop:hover {
  color: var(--hover-color);
  transform: var(--btns-hover-scale);
  transition: all 0.3s ease-in-out;
}

/*--------------------------------------------------------------
# Chat room aka msger
--------------------------------------------------------------*/

.msger-draggable {
  z-index: 14;
  display: none;
  position: fixed;
  /* center screen */
  top: var(--msger-top);
  left: var(--msger-left);
  transform: translate(-50%, -50%);
  /* end center screen  */
  height: var(--msger-height);
  width: var(--msger-width);
  min-height: var(--msger-height);
  min-width: var(--msger-width);
  background: var(--msger-bg);
  border: var(--border);
  /* text-align: justify; */
  resize: both;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: var(--box-shadow);
}

.msger {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  background: var(--msger-bg);
}

/*--------------------------------------------------------------
# Chat room header
--------------------------------------------------------------*/

.msger-header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: rgba(0, 0, 0, 0.2);
  color: #666;
  cursor: move;
}

.msger-private-header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: rgba(0, 0, 0, 0.2);
  color: #666;
}

.msger-header-title button,
.msger-header-options button {
  padding: 5px;
  /* border: var(--border); */
  border: none;
  font-size: 1.1rem;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
  transition: background 0.23s;
}

.msger-header-title button:hover,
.msger-header-options button:hover {
  color: var(--hover-color);
  transform: var(--btns-hover-scale);
  transition: all 0.3s ease-in-out;
}

#msgerMaxBtn,
#msgerMinBtn {
  display: none;
}

/*--------------------------------------------------------------
# Chat room output area
--------------------------------------------------------------*/

.msger-chat {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  background: transparent;
  max-width: 95%;
}

.msger-chat::-webkit-scrollbar {
  width: 5px;
}

.msger-chat::-webkit-scrollbar-track {
  background: transparent;
}

.msger-chat::-webkit-scrollbar-thumb {
  background: black;
  /*aqua;*/
}

.msg {
  display: flex;
  align-items: flex-end;
  font-size: 0.8rem;
  margin-bottom: 10px;
}

.msg:last-of-type {
  margin: 0;
}

/* left side */

.left-msg .msg-bubble {
  background: var(--left-msg-bg);
  border-bottom-left-radius: 0;
  color: #fff;
  width: var(--msger-bubble-width);
}

.left-msg .private-msg-bubble {
  background: var(--private-msg-bg);
  border-bottom-left-radius: 0;
  color: #fff;
  width: var(--msger-bubble-width);
}

.left-msg .msg-img {
  margin: 0px 5px 5px 0px;
}

/* right side */

.right-msg {
  flex-direction: row-reverse;
}

.right-msg .msg-bubble {
  background: var(--right-msg-bg);
  border-bottom-right-radius: 0;
  color: #fff;
  width: var(--msger-bubble-width);
}

.right-msg .private-msg-bubble {
  background: var(--private-msg-bg);
  border-bottom-right-radius: 0;
  color: #fff;
  width: var(--msger-bubble-width);
}

.right-msg .msg-img {
  margin: 0px 0px 5px 5px;
}

/* common */

.msg-img {
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 50%;
}

.peer-img {
  width: 48px;
  height: 48px;
  border-radius: 50px !important;
}

.private-msg-bubble,
.msg-bubble {
  /* max-width: 200px; */
  padding: 15px;
  border-radius: 15px;
  overflow: auto;
}

.msg-caption-bubble {
  padding: 15px;
  border-radius: 15px;
}

.msg-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.msg-info-name {
  margin-right: 10px;
  font-weight: bold;
}

.msg-info-time {
  font-size: 0.85em;
}

.msg-text {
  /* https://css-tricks.com/almanac/properties/o/overflow-wrap/ */
  display: inline;
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
}

.msg-text iframe {
  width: 100%;
}

.msger-copy-txt {
  border: none;
  border-radius: 5px;
  color: #fff;
  background: transparent;
}

a {
  color: #fff;
}

a:hover {
  color: var(--hover-color);
  transition: all 0.3s ease-in-out;
}

#chat-msg-a {
  color: #fff;
}

button:hover {
  transform: var(--btns-hover-scale);
}

/*--------------------------------------------------------------
# Chat room input area
--------------------------------------------------------------*/

.msger-inputarea {
  display: flex;
  padding: 10px;
  background: var(--msger-bg);
}

.msger-input {
  flex: 1;
  padding: 10px;
  height: 15px;
  resize: none;
  color: #fff;
  font-size: 14px !important;
  background: rgba(0, 0, 0, 0.2);
  border-top-left-radius: 10px;
  transition: height 1s;
  border: var(--border);
}

.msger-input::-webkit-scrollbar {
  width: 5px;
}

.msger-input::-webkit-scrollbar-track {
  background: transparent;
}

.msger-input::-webkit-scrollbar-thumb {
  background: #404040;
}

/*--------------------------------------------------------------
# Chat room buttons area
--------------------------------------------------------------*/

.msger-input-buttons {
  padding: 10px;
  background: var(--msger-bg);
}

.msger-input-buttons button {
  padding: 5px;
  /* border: var(--border); */
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  color: #fff;
  background: var(--msger-bg);
  transition: background 0.23s;
}

.msger-input-buttons button:hover {
  color: var(--hover-color);
  transform: var(--btns-hover-scale);
  transition: all 0.3s ease-in-out;
}

.msger-input-buttons input {
  cursor: pointer;
}

#msgerSendBtn {
  float: right;
}

/*--------------------------------------------------------------
# Chat Connected Peers 
--------------------------------------------------------------*/

#msgerCP {
  z-index: 12;
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  cursor: default;
  background: var(--msger-private-bg);
  overflow: hidden;
}

#msgerCPChat {
  flex: 1;
  overflow-y: auto;
  background: transparent;
}

#msgerCPList {
  border: var(--border);
}

#msgerCPList textarea {
  height: auto;
}

#msgerCPList button {
  border: none;
  font-size: 1rem;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  border-radius: 5px;
}

#msgerCPList button:hover {
  color: var(--hover-color);
}

#searchPeerBarName {
  width: 94.5%;
  padding: 10px;
  font-size: 1rem;
  background-color: transparent;
  color: #ffffff;
  border: var(--border);
}

.msger-peer-inputarea {
  display: flex;
  padding: 10px;
  background: var(--msger-bg);
}

.msger-peer-inputarea * {
  padding: 5px;
  border: none;
  border-radius: 3px;
  font-size: 1rem;
  margin: 1px;
  color: #fff;
}

/*--------------------------------------------------------------
# Chat/room/user emoji picker
--------------------------------------------------------------*/

.chatEmojiPicker {
  z-index: 12;
  position: absolute;
  bottom: 105px;
  left: 10px;
}

.roomEmoji {
  z-index: 18;
  position: absolute;
  display: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.userEmoji {
  z-index: 18;
  position: absolute;
  left: 80px;
  bottom: 60px;
}

.emojiPickerHeader {
  display: flex;
  justify-content: flex-start;
  background: #151616;
  border-radius: 10px;
  padding: 10px;
  color: #fff;
  cursor: move;
}

#closeEmojiPickerContainer {
  font-size: 1.3rem;
  color: #ffffff;
  background: transparent;
  border-radius: 10px;
  border: none;
}

/*--------------------------------------------------------------
# Data time picker
--------------------------------------------------------------*/

#datetimePicker {
  padding: 10px;
  text-align: center;
  color: white;
  background: black;
  border: none;
  border-radius: 5px;
}

/*--------------------------------------------------------------
# Room QR
--------------------------------------------------------------*/

#qrRoomContainer {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*--------------------------------------------------------------
# My settings
--------------------------------------------------------------*/

#mySettings {
  z-index: 16;
  position: absolute;
  display: none;
  margin: auto;
  padding: 10px;
  width: 50%;
  min-height: 480px;
  background: var(--body-bg);
  box-shadow: var(--box-shadow);
  border: var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.mySettingsMain {
  display: flex;
}

@media screen and (max-width: 1030px) {
  #mySettings {
    width: 75%;
  }
}

@media screen and (max-width: 830px) {
  #mySettings {
    width: 80%;
    min-height: auto;
  }

  .mySettingsMain {
    flex-direction: column;
  }
}

@media screen and (max-width: 500px) {
  #mySettings {
    width: 90%;
  }
}

#mySettingsHeader {
  height: 25px;
  cursor: move;
}

#mySettings i,
#mySettings p {
  display: inline-flex;
  margin: auto;
  color: #fff;
  padding: 5px;
  background: transparent;
}

#mySettings select {
  display: block;
  padding: 10px;
  min-width: 150px;
  max-width: 310px;
  margin-top: 10px;
  /* height: 40px; */
  background: var(--select-bg) !important;
  color: #fff;
  border: var(--border);
  border-radius: 5px;
  box-shadow: none;
  cursor: pointer;
}

#mySettingsCloseBtn {
  font-size: 1.4rem;
  color: #fff;
  border: none;
  border-radius: 5px;
  float: right;
  background: transparent;
  transition: background 0.23s;
}

#mySettingsCloseBtn:hover {
  color: var(--hover-color);
  transform: var(--btns-hover-scale);
  transition: all 0.3s ease-in-out;
}

.form-check-input {
  cursor: pointer;
}

.title {
  display: inline-table;
  width: auto;
  color: white;
  font-size: 14px;
  /* font-weight: bold; */
}

.inline-check-box {
  margin-bottom: 20px;
  display: inline-flex;
  justify-content: center;
  /* Vertical centering */
  align-items: center;
  /* Horizontal centering */
  text-align: left;
  color: white;
}

#themeColorPicker {
  z-index: 6;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
  width: 130px;
  border: var(--border);
  border-radius: 5px;
  background: var(--select-bg);
  color: white;
  cursor: pointer;
}

#keepCustomTheme {
  margin-bottom: 10px;
}

.buttons {
  padding: 10px;
  float: left;
  text-align: left;
  color: #fff;
  width: auto !important;
  border: var(--border);
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.2);
  outline: none;
  cursor: pointer;
  transition: 0.3s;
}

.buttons:hover {
  background-color: var(--select-bg) !important;
  transform: scale(0.95);
  transition: all 0.3s ease-in-out;
}

/*--------------------------------------------------------------
# Settings buttons
--------------------------------------------------------------*/

#myPeerNameSet {
  width: 50%;
  padding: 10px;
  border: var(--border);
  border-radius: 5px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.2);
}

#tabRoomSecurity button {
  width: 100%;
  margin-bottom: 5px;
}

#myProfileAvatar {
  margin-top: 10px;
  width: 64px;
  height: 64px;
  border-radius: 50px;
}

#myPeerNameSetBtn,
#muteEveryoneBtn,
#hideEveryoneBtn,
#ejectEveryoneBtn,
#roomSendEmailBtn,
#lockRoomBtn,
#unlockRoomBtn {
  padding: 10px;
  border: var(--border);
  border-radius: 5px;
  color: #fff;
  background-color: transparent;
}

#recImage {
  width: 128px;
  height: auto;
  margin-bottom: 10px;
  margin-top: 5px;
  border-radius: 30px;
  cursor: pointer;
}

#recImage:hover {
  box-shadow: 0px 4px 8px 0px rgba(255, 255, 255, 0.2);
  transform: scale(0.95);
  transition: all 0.3s ease-in-out;
}

#myPeerNameSetBtn:hover,
#roomSendEmailBtn:hover,
#lockRoomBtn:hover,
#unlockRoomBtn:hover {
  color: var(--hover-color);
  transform: scale(0.95);
  transition: all 0.3s ease-in-out;
}

#muteEveryoneBtn:hover,
#hideEveryoneBtn:hover,
#ejectEveryoneBtn:hover {
  color: #ff2d00;
  transform: scale(0.95);
  transition: all 0.3s ease-in-out;
}

/*--------------------------------------------------------------
# Settings Table
--------------------------------------------------------------*/

#mySettingsTable {
  /* margin-top: 5px; */
  width: 100%;
  color: #fff;
  border-collapse: collapse;
  border-style: hidden;
  /* border-radius: 5px; */
  /* box-shadow: 0 0 0 1px #666; */
}

#mySettingsTable td,
th {
  padding: 5px;
}

#mySettingsTable tr td {
  text-align: left;
}

#mySettingsTable tr:nth-child(even) {
  /* background-color: #2b2b2b; */
}

.width-130 {
  width: 130px;
}

.width-180 {
  width: 160px;
}

/*--------------------------------------------------------------
# Style the tab
--------------------------------------------------------------*/

.tab {
  padding: 10px;
  overflow: hidden;
  border-radius: 5px;
  width: 35%;
  background-color: var(--body-bg);
  min-height: 480px;
  display: flex;
  flex-direction: column;
  border-right: var(--border);
}

.tabActions {
  position: relative;
  width: 65%;
  background-color: var(--body-bg);
  min-height: 500px;
  max-height: 500px;
  overflow-x: none;
  overflow-y: auto;
}

@media screen and (max-width: 830px) {
  .tab {
    width: 100%;
    min-height: auto;
    flex-direction: row;
    border-right: none !important;
  }

  .tabActions {
    width: 100%;
    border-radius: 10px;
  }

  .tabButtonText {
    display: none !important;
  }
}

/* Style the buttons inside the tab */

.tab button {
  margin: 3px;
  padding: 11px;
  float: left;
  text-align: left;
  color: #fff;
  border: var(--border);
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.2);
  outline: none;
  cursor: pointer;
  transition: 0.3s;
}

/* Change background color of buttons on hover */

.tab button:hover {
  background-color: transparent;
  transform: scale(0.95);
}

/* Create an active/current tablink class */

.tab button.active {
  background-color: var(--tab-btn-active);
}

/* Style the tab content */

.tabcontent {
  display: none;
  padding: 6px 12px;
  border-top: none;
}

.tabcontent button {
  margin-top: 10px;
  width: 100%;
  text-align: left;
}

.tabcontent button:hover {
  background-color: rgba(0, 0, 0, 0.2);
  transform: scale(1);
}

/* on open display devices tab */

#tabRoom {
  display: block;
}

/*--------------------------------------------------------------
# Settings - microphone volume indicator
--------------------------------------------------------------*/

.volume-container {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: var(--body-bg);
  border-radius: 8px;
}

.volume-bar {
  flex: 1;
  height: 5px;
  margin: 0 2px;
  background-color: #ddd;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.active {
  background-color: limegreen;
}

/*--------------------------------------------------------------
# Input slider UI
--------------------------------------------------------------*/

.switch {
  position: relative;
  display: inline-block;
  width: 41px;
  height: 19px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: '';
  height: 17px;
  width: 17px;
  left: 0px;
  bottom: 1px;
  background-color: white;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: green;
}

input:focus + .slider {
  box-shadow: 0 0 1px green;
}

input:checked + .slider:before {
  transform: translateX(24px);
}

/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/*--------------------------------------------------------------
# Swal2
--------------------------------------------------------------*/

.swal2-validation-message,
.swal2-title,
.swal2-content,
.swal2-input {
  text-align: center;
  color: white !important;
  background-color: transparent !important;
}

.swal2-input {
  border: var(--border) !important;
  box-shadow: none !important;
}

.swal2-file {
  color: white !important;
  background-color: transparent !important;
}

.swal2-html-container {
  color: rgb(165, 165, 165) !important;
  background-color: transparent !important;
}

.swal2-popup {
  /* border: var(--border) !important; */
}

.swal2-popup .swal2-styled:focus {
  box-shadow: none !important;
}

.swal2-select {
  background-color: var(--select-bg) !important;
  color: white !important;
  border-radius: 6px !important;
}

.swal2-timer-progress-bar-container {
  background: #376df9;
}

.img-about {
  margin: 0 !important;
}

.swal2-confirm-custom {
  background-color: #4caf50 !important;
  /* Change this to your desired color */
  color: white !important;
  /* Change this to your desired text color */
  border: none;
  border-radius: 4px;
  padding: 15px 60px;
  font-size: 16px;
}

.swal2-confirm-custom-2 {
  height: 3.5rem;
  width: 20rem;
  border-radius: 0.5rem;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(55 109 249 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(221 221 221 / var(--tw-text-opacity, 1));
}

/* bg-gradient-to-r from-[#FFB7C0] to-[#3793FF] */

.relative-confirm-button {
  background-color: #4caf50 !important;
  /* Change this to your desired color */
  color: white !important;
  /* Change this to your desired text color */
  border: none;
  border-radius: 4px;
  width: 50%;
  /* Adjust size relative to your preference */
  position: relative;
  font-size: 16px;
}

/*--------------------------------------------------------------
# Fade in page on load 
--------------------------------------------------------------*/

.fadein {
  animation: fadeIn ease-in 1;
  animation-fill-mode: forwards;
  animation-duration: 1s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/*--------------------------------------------------------------
# Pulse class effect
--------------------------------------------------------------*/

.pulsate {
  animation: pulsate 3s ease-out;
  animation-iteration-count: infinite;
  -webkit-animation: pulsate 3s ease-out;
  -webkit-animation-iteration-count: infinite;
  opacity: 0.5;
}

@keyframes pulsate {
  0% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.5;
  }
}

/*--------------------------------------------------------------
# Send File
--------------------------------------------------------------*/

#sendFileDiv,
#receiveFileDiv {
  z-index: 17;
  display: none;
  min-width: 320px;
  border-radius: 5px;
  margin: auto;
  padding: 10px;
  color: #fff;
  font-size: 1rem;
  background: var(--body-bg);
  box-shadow: var(--box-shadow);
  overflow: hidden;
}

#sendAbortBtn,
#receiveAbortBtn,
#receiveHideBtn {
  padding: 5px;
  border-radius: 5px;
  font-size: 1rem;
  color: #fff;
  background-color: transparent;
  transition: background 0.23s;
}

#sendAbortBtn:hover,
#receiveAbortBtn:hover,
#receiveHideBtn:hover {
  color: rgb(255, 0, 0);
  transform: var(--btns-hover-scale);
  transition: all 0.3s ease-in-out;
}

progress {
  width: 0;
  min-width: 100%;
}

#imgShareSend:hover,
#imgShareReceive:hover {
  cursor: move;
}

#dropArea {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 2px dashed #ccc;
  padding: 20px;
  text-align: center;
}

#dropArea p {
  margin: 0;
}

/*--------------------------------------------------------------
# Video Audio IFrame
--------------------------------------------------------------*/

#videoAudioUrlCont,
#videoUrlCont {
  z-index: 15;
  display: none;
  width: var(--iframe-width);
  height: var(--iframe-height);
  border: var(--border);
  box-shadow: var(--box-shadow);
  border-radius: 5px;
}

#videoAudioUrlHeader,
#videoUrlHeader {
  z-index: 15;
  position: absolute;
  display: flex;
  left: 0px;
  top: 0px;
  width: 100%;
  cursor: move;
  border-radius: 5px;
}

#videoAudioUrlHeader button,
#videoUrlHeader button {
  height: 30px;
  width: 30px;
  font-size: 1.2rem;
  margin-top: 10px;
  margin-left: 10px;
  border: none;
  color: #fff;
  background: black;
}

#videoAudioUrlHeader button:hover,
#videoUrlHeader button:hover {
  color: var(--hover-color);
  transform: var(--btns-hover-scale);
  transition: all 0.3s ease-in-out;
}

#videoUrlIframe {
  width: var(--iframe-width);
  height: var(--iframe-height);
  border-radius: 5px;
}

#videoAudioUrlElement {
  width: var(--iframe-width);
  height: var(--iframe-height) - 20px;
  border-radius: 5px;
}

/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/

#about {
  cursor: default;
  /*text-decoration: none;*/
}

#about a {
  color: #fff;
  text-decoration: none;
}

#about a:hover {
  color: var(--hover-color);
  transition: all 0.3s ease-in-out;
}

#about img {
  cursor: pointer;
  border-radius: 10px;
}

#about button {
  border: none;
  width: 170px;
  height: 40px;
  font-size: 1.2rem;
  background: linear-gradient(100deg, #376df9 0, #ff5fa0 var(--msger-bubble-width), #ffc55a 100%);
  box-shadow: 0 0 6px 0 rgb(251 255 0 / 82%);
  color: #ffffff;
  transition: background 0.23s;
  cursor: pointer;
}

#about button:hover {
  font-weight: bold;
}

/*--------------------------------------------------------------
# Speech bar
--------------------------------------------------------------*/

.speechbar {
  z-index: 9;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 2px;
  width: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.bar {
  width: 6px;
  border-radius: 6px;
  background: rgba(#19bb5c, 0.65);
  transition-property: height background-color;
  transition-duration: 0.25s;
  /*box-shadow: var(--box-shadow);*/
}

.speaking {
  box-shadow: 0 0 1px 1px rgb(255 255 255 / 32%);
  /* lightblue */
}

/*--------------------------------------------------------------
# speech recognition languages
--------------------------------------------------------------*/

#recognitionDialect,
#recognitionLanguage {
  background-color: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  font-size: small;
  max-width: 135px;
  border-radius: 5px;
}

/*--------------------------------------------------------------
# Other
--------------------------------------------------------------*/

#webRTCSeo {
  /* just for SEO */
  display: none;
}

#videoAudioCloseBtn,
#videoUrlCloseBtn {
  border: none;
  border-radius: 10px;
}

/*--------------------------------------------------------------
# Common
--------------------------------------------------------------*/

select {
  height: 40px;
  line-height: 40px;
  box-shadow: none;
}

hr {
  border: 0;
  display: block;
  height: 1px;
  background: #dbdbdb;
  margin-top: 15px;
  margin-bottom: 15px;
}

button {
  cursor: pointer;
}

.hidden {
  display: none;
}

.show {
  display: block;
}

.center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
}

.center-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.fadein {
  animation: fadeIn ease-in 1;
  animation-fill-mode: forwards;
  animation-duration: 1s;
}

.clw {
  color: #ffffff;
}

.mic-input-range {
  width: 85px;
  cursor: pointer;
}

/*--------------------------------------------------------------
# Toggle button 
# https://danklammer.com/articles/simple-css-toggle-switch/
--------------------------------------------------------------*/

.toggle {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 55px;
  height: 24px;
  display: inline-block;
  position: relative;
  border-radius: 50px;
  overflow: hidden;
  outline: none;
  border: var(--border);
  cursor: pointer;
  background-color: #000000;
  transition: background-color ease 0.3s;
}

.toggle:before {
  content: 'on off';
  display: block;
  position: absolute;
  z-index: 2;
  width: 20px;
  height: 18px;
  background: #fff;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  font: 10px/20px Helvetica;
  text-transform: uppercase;
  font-weight: bold;
  text-indent: -25px;
  word-spacing: 35px;
  color: #fff;
  text-shadow: -1px -1px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
}

.toggle:checked {
  background-color: green;
}

.toggle:checked:before {
  left: 32px;
}

/*--------------------------------------------------------------
# DropDown menu
--------------------------------------------------------------*/

/* Styles for the dropdown button */

.dropdown-toggle {
  background-color: var(--body-bg);
  /* Change this to your desired button background color */
  color: #fff;
  /* Change this to your desired text color */
  border: none;
  border-radius: 5px;
  /* padding: 10px 20px; */
  cursor: pointer;
}

/* Styles for the dropdown menu container */

.dropdown-menu {
  display: none;
  background-color: var(--body-bg);
  /* Change this to your desired menu background color */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  border: none;
  margin-bottom: 20px;
}

/* Styles for table cell with title (td) */

.microphone-table-width {
  width: 50%;
}

/* Styles for the Apply Options button */

#applyAudioOptionsBtn {
  margin: 5px;
  width: 100%;
  background-color: #0077ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  cursor: pointer;
}

#applyAudioOptionsBtn:hover {
  background-color: var(--select-bg) !important;
  transform: scale(0.95);
  transition: all 0.3s ease-in-out;
}

/*--------------------------------------------------------------
# Webkit-Scrollbar Styles
--------------------------------------------------------------*/

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--body-bg);
  border-radius: 5px;
  cursor: pointer;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--body-bg);
}

::-webkit-scrollbar-track {
  background: #1a1b1f;
}

/*--------------------------------------------------------------
# Common
--------------------------------------------------------------*/

.ml-10 {
  margin: 10px;
}

.cp {
  cursor: pointer;
}

.trow {
  display: table-row;
}

#initVideo {
  pointer-events: none;
  -o-object-fit: cover;
     object-fit: cover;
  /* height: 100%; */
}

.videoTest {
  max-width: 100%;
  height: 100%;
}

#audioMediaContainer,
#pauseRecBtn,
#resumeRecBtn {
  display: none;
}

/*
z-index
6 theme custom picker
7 video avatar img
8 video nav bar 
8 peer name
9 speech bar
10 left buttons
11 whiteboard
12 chat emoji
13 chat peers private msg
14 chat room
14 caption
15 video iframe
16 settings
17 send File Div
18 room Emoji reaction
*/