/*
z-index: range
0-100    - base page content
100-200  - base modal content
200+     - equivalent to !important. you're a bad person.

If two elements of the same context need to overlay eachother, use something like:
  my-action {
    z-index: @layer-actions;
    &.overlap {
      z-index: @layer-actions + 5;
    }
  }

*/
/*
  Layers:
*/
/* Static page content - titles, descriptions, etc */
/* Interactable content - clickable divs / inputs */
/*
  Containers:

  Combine containers and layers for consistency
  IE:

  .my-modal-submit-class {
    z-index: @layer-modal + @layer-actions;
  }
*/
/* Form content or inputs that should be handled above baseline page content, but below overlaid content. */
/* Modal content + things that should be beneath side bar content. */
/* Tooltips, left-side activity/search overlays */
/* Show-stopper alerts that take precedent over all others. Reserved for nuclear air raid or lack of javascript */
.typography-introductory {
  font-size: 2em;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  text-decoration: none;
}
.typography-modal-title {
  font-size: 1.5em;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  text-decoration: none;
}
.typography-modal-subtitle {
  font-size: 1.2em;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  text-decoration: none;
}
.text-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  position: relative;
  font-family: inherit;
  font-weight: 500;
  line-height: 18px;
  transition: background-color 0.3s, color 0.3s;
  gap: 10px;
}
.text-button .tooltip-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
}
.text-button.primary {
  background-color: #3ebfc2;
  color: white;
}
.text-button.primary:hover {
  background-color: #31999c;
}
.text-button.primary:focus-visible {
  outline: 2px solid #31999c;
}
.text-button.primary-tint {
  background-color: #e4f6f7;
  color: #3ebfc2;
}
.text-button.primary-tint:hover {
  background-color: #bde9eb;
}
.text-button.primary-tint:focus-visible {
  outline: 2px solid #bde9eb;
}
.text-button.secondary {
  background-color: #f4f6f6;
  color: #333333;
}
.text-button.secondary:hover {
  background-color: #d8dfdf;
}
.text-button.secondary:focus-visible {
  outline: 2px solid #d8dfdf;
}
.text-button.secondary-tint {
  background-color: #f4f6f6;
  color: #8a9292;
}
.text-button.secondary-tint:hover {
  background-color: #d8dfdf;
}
.text-button.secondary-tint:focus-visible {
  outline: 2px solid #d8dfdf;
}
.text-button.danger {
  background-color: #ff585d;
  color: white;
}
.text-button.danger:hover {
  background-color: #ff252c;
}
.text-button.danger:focus-visible {
  outline: 2px solid #ffbec0;
}
.text-button.danger-tint {
  background-color: #ffe6e7;
}
.text-button.danger-tint:hover {
  background-color: #ffb3b6;
}
.text-button.danger-tint:focus-visible {
  outline: 2px solid #ffb3b6;
}
.text-button.transparent {
  background-color: transparent;
  color: #333333;
}
.text-button.transparent:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.text-button.transparent:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.2);
}
.text-button.transparent-primary {
  background-color: transparent;
  color: #3ebfc2;
}
.text-button.transparent-primary:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.text-button.transparent-primary:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.2);
}
.text-button.transparent-dashed {
  border: 2px dashed #ebf0f0;
  background-color: transparent;
  color: #3ebfc2;
}
.text-button.transparent-dashed:hover {
  border-color: #3ebfc2;
}
.text-button.transparent-dashed:focus-visible {
  border-color: #3ebfc2;
}
.text-button.dark {
  background-color: #333333;
  color: #ffffff;
}
.text-button.dark:hover {
  background-color: #1a1a1a;
}
.text-button.dark:focus-visible {
  outline: 2px solid #666666;
}
.text-button.dark-tint {
  background-color: #474747;
  color: #ffffff;
}
.text-button.dark-tint:hover {
  background-color: #2e2e2e;
}
.text-button.dark-tint:focus-visible {
  outline: 2px solid #7a7a7a;
}
.text-button.medium {
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 8px;
}
.text-button.medium.only-icon {
  padding: 10px;
}
.text-button.pill {
  line-height: normal;
  font-size: 12px;
  padding: 3px 11px;
  border-radius: 10px;
}
.text-button.pill.only-icon {
  padding: 0px 6px;
}
.text-button.small {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 8px;
}
.text-button.large {
  font-size: 13px;
  padding: 10px 24px;
  border-radius: 10px;
}
.text-button:disabled,
.text-button.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.text-button .spinner {
  position: absolute;
  border: 2px dotted rgba(255, 255, 255, 0.6);
  border-top: 2px dotted #ffffff;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  animation: spin 1s linear infinite;
  right: 6px;
}
.text-button .icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.text-button .button-text {
  visibility: visible;
}

/*
z-index: range
0-100    - base page content
100-200  - base modal content
200+     - equivalent to !important. you're a bad person.

If two elements of the same context need to overlay eachother, use something like:
  my-action {
    z-index: @layer-actions;
    &.overlap {
      z-index: @layer-actions + 5;
    }
  }

*/
/*
  Layers:
*/
/* Static page content - titles, descriptions, etc */
/* Interactable content - clickable divs / inputs */
/*
  Containers:

  Combine containers and layers for consistency
  IE:

  .my-modal-submit-class {
    z-index: @layer-modal + @layer-actions;
  }
*/
/* Form content or inputs that should be handled above baseline page content, but below overlaid content. */
/* Modal content + things that should be beneath side bar content. */
/* Tooltips, left-side activity/search overlays */
/* Show-stopper alerts that take precedent over all others. Reserved for nuclear air raid or lack of javascript */
.typography-introductory {
  font-size: 2em;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  text-decoration: none;
}
.typography-modal-title {
  font-size: 1.5em;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  text-decoration: none;
}
.typography-modal-subtitle {
  font-size: 1.2em;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  text-decoration: none;
}
.scroll-to-button {
  font-size: 12px;
  padding: 12px 8px;
  border-radius: 36px;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.3s ease-out;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 18px;
  overflow: hidden;
}
.scroll-to-button.theme-dark {
  color: white;
  background-color: #333333;
}
.scroll-to-button.theme-brand {
  color: #3ebfc2;
  background-color: #e4f6f7;
}
.scroll-to-button.hidden {
  opacity: 0;
  pointer-events: none;
}
.scroll-to-button .scroll-to-button-icon {
  font-size: 26px;
  transition: margin 0.2s ease-in;
}
.scroll-to-button .scroll-to-button-text {
  max-width: 0;
  transition: max-width 0.2s ease-in;
}
.scroll-to-button .scroll-to-button-text span {
  white-space: nowrap;
  margin-left: 12px;
}
.scroll-to-button:hover .scroll-to-button-text {
  max-width: 150px;
}

/*
z-index: range
0-100    - base page content
100-200  - base modal content
200+     - equivalent to !important. you're a bad person.

If two elements of the same context need to overlay eachother, use something like:
  my-action {
    z-index: @layer-actions;
    &.overlap {
      z-index: @layer-actions + 5;
    }
  }

*/
/*
  Layers:
*/
/* Static page content - titles, descriptions, etc */
/* Interactable content - clickable divs / inputs */
/*
  Containers:

  Combine containers and layers for consistency
  IE:

  .my-modal-submit-class {
    z-index: @layer-modal + @layer-actions;
  }
*/
/* Form content or inputs that should be handled above baseline page content, but below overlaid content. */
/* Modal content + things that should be beneath side bar content. */
/* Tooltips, left-side activity/search overlays */
/* Show-stopper alerts that take precedent over all others. Reserved for nuclear air raid or lack of javascript */
.typography-introductory {
  font-size: 2em;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  text-decoration: none;
}
.typography-modal-title {
  font-size: 1.5em;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  text-decoration: none;
}
.typography-modal-subtitle {
  font-size: 1.2em;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  text-decoration: none;
}
.circle-spinner {
  display: inline-block;
}
.circle-spinner.small {
  width: 20px;
  height: 20px;
}
.circle-spinner.medium {
  width: 40px;
  height: 40px;
}
.circle-spinner.large {
  width: 60px;
  height: 60px;
}
.circle-spinner img {
  width: 100%;
  height: 100%;
}

/*
z-index: range
0-100    - base page content
100-200  - base modal content
200+     - equivalent to !important. you're a bad person.

If two elements of the same context need to overlay eachother, use something like:
  my-action {
    z-index: @layer-actions;
    &.overlap {
      z-index: @layer-actions + 5;
    }
  }

*/
/*
  Layers:
*/
/* Static page content - titles, descriptions, etc */
/* Interactable content - clickable divs / inputs */
/*
  Containers:

  Combine containers and layers for consistency
  IE:

  .my-modal-submit-class {
    z-index: @layer-modal + @layer-actions;
  }
*/
/* Form content or inputs that should be handled above baseline page content, but below overlaid content. */
/* Modal content + things that should be beneath side bar content. */
/* Tooltips, left-side activity/search overlays */
/* Show-stopper alerts that take precedent over all others. Reserved for nuclear air raid or lack of javascript */
.typography-introductory {
  font-size: 2em;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  text-decoration: none;
}
.typography-modal-title {
  font-size: 1.5em;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  text-decoration: none;
}
.typography-modal-subtitle {
  font-size: 1.2em;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  text-decoration: none;
}

/*
z-index: range
0-100    - base page content
100-200  - base modal content
200+     - equivalent to !important. you're a bad person.

If two elements of the same context need to overlay eachother, use something like:
  my-action {
    z-index: @layer-actions;
    &.overlap {
      z-index: @layer-actions + 5;
    }
  }

*/
/*
  Layers:
*/
/* Static page content - titles, descriptions, etc */
/* Interactable content - clickable divs / inputs */
/*
  Containers:

  Combine containers and layers for consistency
  IE:

  .my-modal-submit-class {
    z-index: @layer-modal + @layer-actions;
  }
*/
/* Form content or inputs that should be handled above baseline page content, but below overlaid content. */
/* Modal content + things that should be beneath side bar content. */
/* Tooltips, left-side activity/search overlays */
/* Show-stopper alerts that take precedent over all others. Reserved for nuclear air raid or lack of javascript */
.typography-introductory {
  font-size: 2em;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  text-decoration: none;
}
.typography-modal-title {
  font-size: 1.5em;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  text-decoration: none;
}
.typography-modal-subtitle {
  font-size: 1.2em;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  text-decoration: none;
}
.close-header {
  display: flex;
  flex-direction: row;
  place-content: flex-end;
  padding: 3px;
}
.close-header.absolute {
  position: absolute;
  top: 0;
  right: 0;
}

/*
z-index: range
0-100    - base page content
100-200  - base modal content
200+     - equivalent to !important. you're a bad person.

If two elements of the same context need to overlay eachother, use something like:
  my-action {
    z-index: @layer-actions;
    &.overlap {
      z-index: @layer-actions + 5;
    }
  }

*/
/*
  Layers:
*/
/* Static page content - titles, descriptions, etc */
/* Interactable content - clickable divs / inputs */
/*
  Containers:

  Combine containers and layers for consistency
  IE:

  .my-modal-submit-class {
    z-index: @layer-modal + @layer-actions;
  }
*/
/* Form content or inputs that should be handled above baseline page content, but below overlaid content. */
/* Modal content + things that should be beneath side bar content. */
/* Tooltips, left-side activity/search overlays */
/* Show-stopper alerts that take precedent over all others. Reserved for nuclear air raid or lack of javascript */
.typography-introductory {
  font-size: 2em;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  text-decoration: none;
}
.typography-modal-title {
  font-size: 1.5em;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  text-decoration: none;
}
.typography-modal-subtitle {
  font-size: 1.2em;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  text-decoration: none;
}
.block-list {
  padding: 6px 0;
}

/*
z-index: range
0-100    - base page content
100-200  - base modal content
200+     - equivalent to !important. you're a bad person.

If two elements of the same context need to overlay eachother, use something like:
  my-action {
    z-index: @layer-actions;
    &.overlap {
      z-index: @layer-actions + 5;
    }
  }

*/
/*
  Layers:
*/
/* Static page content - titles, descriptions, etc */
/* Interactable content - clickable divs / inputs */
/*
  Containers:

  Combine containers and layers for consistency
  IE:

  .my-modal-submit-class {
    z-index: @layer-modal + @layer-actions;
  }
*/
/* Form content or inputs that should be handled above baseline page content, but below overlaid content. */
/* Modal content + things that should be beneath side bar content. */
/* Tooltips, left-side activity/search overlays */
/* Show-stopper alerts that take precedent over all others. Reserved for nuclear air raid or lack of javascript */
.typography-introductory {
  font-size: 2em;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  text-decoration: none;
}
.typography-modal-title {
  font-size: 1.5em;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  text-decoration: none;
}
.typography-modal-subtitle {
  font-size: 1.2em;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  text-decoration: none;
}
.member-list-builder-container .member-selector .member-selector-input-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 6px;
}
.member-list-builder-container .member-selector .member-selector-input-container .member-selector-filter {
  padding: 12px;
  width: 100%;
  border-radius: 6px;
  border: 1px solid #ebf0f0;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
}
.member-list-builder-container .member-selector .member-selector-input-container .member-selector-filter:disabled {
  background-color: #f4f6f6;
}
.member-list-builder-container .member-selector .member-selector-input-container .member-selector-filter.opened.top {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
.member-list-builder-container .member-selector .member-selector-input-container .member-selector-filter.opened.bottom {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.member-list-builder-container .member-selector .member-selector-input-container .member-selector-limit-indicator {
  position: absolute;
  width: 0;
  top: 18px;
  right: 65px;
  font-size: 13px;
  white-space: nowrap;
  color: #8a9292;
}
.member-list-builder-container .member-selector .member-selector-input-container .member-selector-limit-indicator.member-list-builder-input-error {
  color: #ef5455;
}
.member-list-builder-container .member-list-builder {
  height: auto;
  overflow-y: auto;
}
.member-list-builder-container .member-list-builder .member-list-container {
  max-height: 400px;
}
.member-list-builder-container .member-list-builder .member-list-container .member-list-item {
  display: flex;
  flex-direction: row;
  width: 100%;
  place-content: space-between;
  margin: 12px 0;
}
.member-list-builder-container .member-list-builder .member-list-container .member-list-item .member-list-item-right-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: auto 6px;
}
.member-list-builder-container .member-list-builder .scrollable-page-body {
  height: auto;
}
.member-list-builder-container .member-list-builder.small {
  max-height: 150px;
}
.member-list-builder-container .member-list-builder.medium {
  max-height: 300px;
}

@charset "UTF-8";
/*
z-index: range
0-100    - base page content
100-200  - base modal content
200+     - equivalent to !important. you're a bad person.

If two elements of the same context need to overlay eachother, use something like:
  my-action {
    z-index: @layer-actions;
    &.overlap {
      z-index: @layer-actions + 5;
    }
  }

*/
/*
  Layers:
*/
/* Static page content - titles, descriptions, etc */
/* Interactable content - clickable divs / inputs */
/*
  Containers:

  Combine containers and layers for consistency
  IE:

  .my-modal-submit-class {
    z-index: @layer-modal + @layer-actions;
  }
*/
/* Form content or inputs that should be handled above baseline page content, but below overlaid content. */
/* Modal content + things that should be beneath side bar content. */
/* Tooltips, left-side activity/search overlays */
/* Show-stopper alerts that take precedent over all others. Reserved for nuclear air raid or lack of javascript */
.typography-introductory {
  font-size: 2em;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  text-decoration: none;
}
.typography-modal-title {
  font-size: 1.5em;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  text-decoration: none;
}
.typography-modal-subtitle {
  font-size: 1.2em;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  text-decoration: none;
}
.str-video *,
.str-video *::before,
.str-video *::after {
  box-sizing: border-box;
}
.str-video {
  --str-video__brand-color1: #005fff;
  --str-video__brand-color2: #69e5f6;
  --str-video__brand-color3: #00e2a1;
  --str-video__brand-color4: #ffd646;
  --str-video__brand-color5: #dc433b;
  --str_video__brand-color6: #b38af8;
  --str-video__base-color1: #e3e4e5;
  --str-video__base-color2: #979ca0;
  --str-video__base-color3: #4c535b;
  --str-video__base-color4: #000000;
  --str-video__base-color5: #0c0d0e;
  --str-video__base-color6: #19232d;
  --str-video__base-color7: #101213;
  --str-video__backdrop1: rgba(0, 0, 0, 0.5);
  --str-video__button-default-base: #19232d;
  --str-video__button-default-hover: #323b44;
  --str-video__button-default-pressed: #0c0d0e;
  --str-video__button-default-active: #19232d;
  --str-video__button-default-disabled: #1e262e;
  --str-video__button-primary-base: #19232d;
  --str-video__button-primary-hover: #4c8fff;
  --str-video__button-primary-pressed: #0c48ab;
  --str-video__button-primary-active: #005fff;
  --str-video__button-secondary-base: #19232d;
  --str-video__button-secondary-hover: #e96962;
  --str-video__button-secondary-pressed: #6a3233;
  --str-video__button-secondary-active: #dc433b;
  --str-video__button-tertiary-base: #dc433b;
  --str-video__button-tertiary-hover: #e96962;
  --str-video__button-tertiary-pressed: #6a3233;
  --str-video__button-tertiary-active: #31292f;
  --str-video__icon-default: #eff0f1;
  --str-video__icon-hover: #eff0f1;
  --str-video__icon-pressed: #656b72;
  --str-video__icon-active: #e3e4e5;
  --str-video__icon-alert: #e3e4e5;
  --str-video__icon-disabled: #7e8389;
  --str-video__alert-success: #00e2a1;
  --str-video__alert-caution: #ffd646;
  --str-video__alert-warning: #dc433b;
  --str-video__alert-success-background: rgba(0, 226, 161, 0.5);
  --str-video__alert-caution-background: rgba(255, 214, 70, 0.5);
  --str-video__alert-warning-background: rgba(220, 67, 59, 0.5);
  --str-video__font-size-xxs: 0.625rem;
  --str-video__font-size-xs: 0.75rem;
  --str-video__font-size-sm: 0.875rem;
  --str-video__font-size-md: 1rem;
  --str-video__font-size-lg: 1.125rem;
  --str-video__font-size-xl: 1.25rem;
  --str-video__font-size-xxl: 1.5rem;
  --str-video__border-radius-xxs: 4px;
  --str-video__border-radius-xs: 8px;
  --str-video__border-radius-sm: 12px;
  --str-video__border-radius-md: 18px;
  --str-video__border-radius-lg: 24px;
  --str-video__border-radius-xl: 30px;
  --str-video__border-radius-xxl: 48px;
  --str-video__border-radius-circle: 999px;
  --str-video__spacing-xxs: 4px;
  --str-video__spacing-xs: 6px;
  --str-video__spacing-sm: 8px;
  --str-video__spacing-md: 12px;
  --str-video__spacing-lg: 16px;
  --str-video__spacing-xl: 20px;
  --str-video__primary-color: #005fff;
  --str-video__secondary-color: #669fff;
  --str-video__text-color1: #ffffff;
  --str-video__text-color2: #b4b7bb;
  --str-video__text-color3: #72767e;
  --str-video__text-color4: #f7f7f8;
  --str-video__info-color: #4ce68c;
  --str-video__info-color--accent: #20e070;
  --str-video__danger-color: #ff3742;
  --str-video__danger-color--accent: #ff000e;
  --str-video__background-color0: #000000;
  --str-video__background-color1: #1c1e22;
  --str-video__background-color2: #272a30;
  --str-video__background-color3: #f4f4f5;
  --str-video__background-color4: #121416;
  --str-video__background-color5: #1d2938;
  --str-video__background-color6: #b4b7bb;
  --str-video__background-color7: #72767e;
  --str-video__overlay-color: rgba(39, 42, 48, 0.75);
  --str-video__livestream-overlay-color: rgba(39, 42, 48, 0.25);
  --str-video__livestream-overlay-color-hovered: rgba(39, 42, 48, 0.5);
  --str-video__icon--call-accept: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOSAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xNy41MSAxMi4zODJDMTYuMjggMTIuMzgyIDE1LjA5IDEyLjE4MiAxMy45OCAxMS44MjJDMTMuNjMgMTEuNzAyIDEzLjI0IDExLjc5MiAxMi45NyAxMi4wNjJMMTEuNCAxNC4wMzJDOC41NyAxMi42ODIgNS45MiAxMC4xMzIgNC41MSA3LjIwMTk1TDYuNDYgNS41NDE5NUM2LjczIDUuMjYxOTUgNi44MSA0Ljg3MTk1IDYuNyA0LjUyMTk1QzYuMzMgMy40MTE5NSA2LjE0IDIuMjIxOTUgNi4xNCAwLjk5MTk1M0M2LjE0IDAuNDUxOTUzIDUuNjkgMC4wMDE5NTMxMyA1LjE1IDAuMDAxOTUzMTNIMS42OUMxLjE1IDAuMDAxOTUzMTIgMC41IDAuMjQxOTUzIDAuNSAwLjk5MTk1M0MwLjUgMTAuMjgyIDguMjMgMTguMDAyIDE3LjUxIDE4LjAwMkMxOC4yMiAxOC4wMDIgMTguNSAxNy4zNzIgMTguNSAxNi44MjJWMTMuMzcyQzE4LjUgMTIuODMyIDE4LjA1IDEyLjM4MiAxNy41MSAxMi4zODJaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K);
  --str-video__icon--call-end: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTQuNTgwMSAxNi4wMzA0TDYuNTgwMSAxNC40NDA0QzcuMDYwMSAxNC4wNjA0IDcuMzQwMSAxMy40ODA0IDcuMzQwMSAxMi44NzA0VjEwLjI3MDRDMTAuMzYwMSA5LjI5MDQgMTMuNjMwMSA5LjI4MDQgMTYuNjYwMSAxMC4yNzA0VjEyLjg4MDRDMTYuNjYwMSAxMy40OTA0IDE2Ljk0MDEgMTQuMDcwNCAxNy40MjAxIDE0LjQ1MDRMMTkuNDEwMSAxNi4wMzA0QzIwLjIxMDEgMTYuNjYwNCAyMS4zNTAxIDE2LjYwMDQgMjIuMDcwMSAxNS44ODA0TDIzLjI5MDEgMTQuNjYwNEMyNC4wOTAxIDEzLjg2MDQgMjQuMDkwMSAxMi41MzA0IDIzLjI0MDEgMTEuNzgwNEMxNi44MzAxIDYuMTIwNCA3LjE3MDEgNi4xMjA0IDAuNzYwMTAzIDExLjc4MDRDLTAuMDg5ODk3IDEyLjUzMDQgLTAuMDg5ODk3IDEzLjg2MDQgMC43MTAxMDMgMTQuNjYwNEwxLjkzMDEgMTUuODgwNEMyLjY0MDEgMTYuNjAwNCAzLjc4MDEgMTYuNjYwNCA0LjU4MDEgMTYuMDMwNFoiIGZpbGw9IiNCMEI0QjciLz4KPC9nPgo8L3N2Zz4K);
  --str-video__icon--camera: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3IDEwLjVWN0MxNyA2LjQ1IDE2LjU1IDYgMTYgNkg0QzMuNDUgNiAzIDYuNDUgMyA3VjE3QzMgMTcuNTUgMy40NSAxOCA0IDE4SDE2QzE2LjU1IDE4IDE3IDE3LjU1IDE3IDE3VjEzLjVMMTkuMjkgMTUuNzlDMTkuOTIgMTYuNDIgMjEgMTUuOTcgMjEgMTUuMDhWOC45MUMyMSA4LjAyIDE5LjkyIDcuNTcgMTkuMjkgOC4yTDE3IDEwLjVaIiBmaWxsPSIjQjBCNEI3Ii8+Cjwvc3ZnPgo=);
  --str-video__icon--camera-off: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIxLjI5MTUgMTQuNzY5OVY5LjQ3OTlDMjEuMjkxNSA4LjU4OTkgMjAuMjExNSA4LjEzOTkgMTkuNTgxNSA4Ljc2OTlMMTcuMjkxNSAxMS4wNjk5VjcuNTY5OUMxNy4yOTE1IDcuMDE5OSAxNi44NDE1IDYuNTY5OSAxNi4yOTE1IDYuNTY5OUgxMC42ODE1TDE5LjU5MTUgMTUuNDc5OUMyMC4yMTE1IDE2LjEwOTkgMjEuMjkxNSAxNS42NTk5IDIxLjI5MTUgMTQuNzY5OVpNMy4wMDE0OCAzLjEyOTlDMi42MTE0OCAzLjUxOTkgMi42MTE0OCA0LjE0OTkgMy4wMDE0OCA0LjUzOTlMNS4wMjE0OCA2LjU2OTlINC4yOTE0OEMzLjc0MTQ4IDYuNTY5OSAzLjI5MTQ4IDcuMDE5OSAzLjI5MTQ4IDcuNTY5OVYxNy41Njk5QzMuMjkxNDggMTguMTE5OSAzLjc0MTQ4IDE4LjU2OTkgNC4yOTE0OCAxOC41Njk5SDE2LjI5MTVDMTYuNTAxNSAxOC41Njk5IDE2LjY4MTUgMTguNDg5OSAxNi44NDE1IDE4LjM4OTlMMTkuMzIxNSAyMC44Njk5QzE5LjcxMTUgMjEuMjU5OSAyMC4zNDE1IDIxLjI1OTkgMjAuNzMxNSAyMC44Njk5QzIxLjEyMTUgMjAuNDc5OSAyMS4xMjE1IDE5Ljg0OTkgMjAuNzMxNSAxOS40NTk5TDQuNDExNDggMy4xMjk5QzQuMDIxNDggMi43Mzk5IDMuMzkxNDggMi43Mzk5IDMuMDAxNDggMy4xMjk5WiIgZmlsbD0iI0IwQjRCNyIvPgo8L3N2Zz4K);
  --str-video__icon--caret: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuMjU0ODggMTAuNDg4NUw5LjQxMzIxIDguMzMwMThDOS43MzgyMSA4LjAwNTE4IDEwLjI2MzIgOC4wMDUxOCAxMC41ODgyIDguMzMwMThMMTIuNzQ2NSAxMC40ODg1QzEzLjI3MTUgMTEuMDEzNSAxMi44OTY1IDExLjkxMzUgMTIuMTU0OSAxMS45MTM1SDcuODM4MjFDNy4wOTY1NCAxMS45MTM1IDYuNzI5ODggMTEuMDEzNSA3LjI1NDg4IDEwLjQ4ODVaIiBmaWxsPSIjRTNFNEU1Ii8+Cjwvc3ZnPgo=);
  --str-video__icon--caret-down: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuMjU0ODggMTAuNDg4NUw5LjQxMzIxIDguMzMwMThDOS43MzgyMSA4LjAwNTE4IDEwLjI2MzIgOC4wMDUxOCAxMC41ODgyIDguMzMwMThMMTIuNzQ2NSAxMC40ODg1QzEzLjI3MTUgMTEuMDEzNSAxMi44OTY1IDExLjkxMzUgMTIuMTU0OSAxMS45MTM1SDcuODM4MjFDNy4wOTY1NCAxMS45MTM1IDYuNzI5ODggMTEuMDEzNSA3LjI1NDg4IDEwLjQ4ODVaIiBmaWxsPSIjRTNFNEU1Ii8+Cjwvc3ZnPgo=);
  --str-video__icon--caret-up: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuMjU0ODggMTAuNDg4NUw5LjQxMzIxIDguMzMwMThDOS43MzgyMSA4LjAwNTE4IDEwLjI2MzIgOC4wMDUxOCAxMC41ODgyIDguMzMwMThMMTIuNzQ2NSAxMC40ODg1QzEzLjI3MTUgMTEuMDEzNSAxMi44OTY1IDExLjkxMzUgMTIuMTU0OSAxMS45MTM1SDcuODM4MjFDNy4wOTY1NCAxMS45MTM1IDYuNzI5ODggMTEuMDEzNSA3LjI1NDg4IDEwLjQ4ODVaIiBmaWxsPSIjRTNFNEU1Ii8+Cjwvc3ZnPgo=);
  --str-video__icon--chevron-down: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuNDEgOC4yOTUwNEwxMiAxMi44NzVMMTYuNTkgOC4yOTUwNEwxOCA5LjcwNTA0TDEyIDE1LjcwNUw2IDkuNzA1MDRMNy40MSA4LjI5NTA0WiIgZmlsbD0iI0IwQjRCNyIvPgo8L3N2Zz4K);
  --str-video__icon--chevron-up: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuNDEgMTUuNzA1TDEyIDExLjEyNUwxNi41OSAxNS43MDVMMTggMTQuMjk1TDEyIDguMjk1MDRMNiAxNC4yOTVMNy40MSAxNS43MDVaIiBmaWxsPSIjRTNFNEU1Ii8+Cjwvc3ZnPgo=);
  --str-video__icon--chevron-right: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTYuOTk3NjcgMjEuMDE0OUM3LjQ4NzY3IDIxLjUwNDkgOC4yNzc2NyAyMS41MDQ5IDguNzY3NjcgMjEuMDE0OUwxNy4wNzc3IDEyLjcwNDlDMTcuNDY3NyAxMi4zMTQ5IDE3LjQ2NzcgMTEuNjg0OSAxNy4wNzc3IDExLjI5NDlMOC43Njc2NyAyLjk4NDkzQzguMjc3NjcgMi40OTQ5MyA3LjQ4NzY3IDIuNDk0OTMgNi45OTc2NyAyLjk4NDkzQzYuNTA3NjcgMy40NzQ5MyA2LjUwNzY3IDQuMjY0OTMgNi45OTc2NyA0Ljc1NDkzTDE0LjIzNzcgMTIuMDA0OUw2Ljk4NzY3IDE5LjI1NDlDNi41MDc2NyAxOS43MzQ5IDYuNTA3NjcgMjAuNTM0OSA2Ljk5NzY3IDIxLjAxNDlaIiBmaWxsPSIjQjBCNEI3Ii8+CjwvZz4KPC9zdmc+Cg==);
  --str-video__icon--call-latency: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyLjAwMjkgMTcuOTk4OEMxMi41NTUyIDE3Ljk5ODggMTMuMDAyOSAxNy41NTExIDEzLjAwMjkgMTYuOTk4OEMxMy4wMDI5IDE2LjQ0NjUgMTIuNTU1MiAxNS45OTg4IDEyLjAwMjkgMTUuOTk4OEMxMS40NTA2IDE1Ljk5ODggMTEuMDAyOSAxNi40NDY1IDExLjAwMjkgMTYuOTk4OEMxMS4wMDI5IDE3LjU1MTEgMTEuNDUwNiAxNy45OTg4IDEyLjAwMjkgMTcuOTk4OFoiIGZpbGw9IiNFM0U0RTUiLz4KPHBhdGggZD0iTTcuMDAyOTMgMTIuOTk4OEM3LjU1NTIxIDEyLjk5ODggOC4wMDI5MyAxMi41NTExIDguMDAyOTMgMTEuOTk4OEM4LjAwMjkzIDExLjQ0NjUgNy41NTUyMSAxMC45OTg4IDcuMDAyOTMgMTAuOTk4OEM2LjQ1MDY0IDEwLjk5ODggNi4wMDI5MyAxMS40NDY1IDYuMDAyOTMgMTEuOTk4OEM2LjAwMjkzIDEyLjU1MTEgNi40NTA2NCAxMi45OTg4IDcuMDAyOTMgMTIuOTk4OFoiIGZpbGw9IiNFM0U0RTUiLz4KPHBhdGggZD0iTTE3LjAwMjkgMTIuOTk4OEMxNy41NTUyIDEyLjk5ODggMTguMDAyOSAxMi41NTExIDE4LjAwMjkgMTEuOTk4OEMxOC4wMDI5IDExLjQ0NjUgMTcuNTU1MiAxMC45OTg4IDE3LjAwMjkgMTAuOTk4OEMxNi40NTA2IDEwLjk5ODggMTYuMDAyOSAxMS40NDY1IDE2LjAwMjkgMTEuOTk4OEMxNi4wMDI5IDEyLjU1MTEgMTYuNDUwNiAxMi45OTg4IDE3LjAwMjkgMTIuOTk4OFoiIGZpbGw9IiNFM0U0RTUiLz4KPHBhdGggZD0iTTEyLjAwMjkgMi45OTg3OEMxMS40NTI5IDIuOTk4NzggMTEuMDAyOSAzLjQ0ODc4IDExLjAwMjkgMy45OTg3OFY1Ljk5ODc4QzExLjAwMjkgNi41NDg3OCAxMS40NTI5IDYuOTk4NzggMTIuMDAyOSA2Ljk5ODc4QzEyLjU1MjkgNi45OTg3OCAxMy4wMDI5IDYuNTQ4NzggMTMuMDAyOSA1Ljk5ODc4VjUuMDc4NzhDMTYuMzEyOSA1LjU1ODc4IDE4Ljg3MjkgOC4zMjg3OCAxOS4wMDI5IDExLjczODhDMTkuMTQyOSAxNS41ODg4IDE1Ljk3MjkgMTguOTM4OCAxMi4xMjI5IDE4Ljk5ODhDOC4xOTI5MyAxOS4wNTg4IDUuMDAyOTMgMTUuOTA4OCA1LjAwMjkzIDExLjk5ODhDNS4wMDI5MyAxMC4zMTg4IDUuNTkyOTMgOC43Nzg3OCA2LjU4MjkzIDcuNTc4NzhMMTEuMjkyOSAxMi4yOTg4QzExLjY4MjkgMTIuNjg4OCAxMi4zMTI5IDEyLjY4ODggMTIuNzAyOSAxMi4yOTg4QzEzLjA5MjkgMTEuOTA4OCAxMy4wOTI5IDExLjI3ODggMTIuNzAyOSAxMC44ODg4TDcuMjYyOTMgNS40NTg3OEM2Ljg4MjkzIDUuMDc4NzggNi4yNjI5MyA1LjA2ODc4IDUuODYyOTMgNS40Mzg3OEM0LjEwMjkzIDcuMDY4NzggMy4wMDI5MyA5LjM5ODc4IDMuMDAyOTMgMTEuOTk4OEMzLjAwMjkzIDE3LjAzODggNy4xNDI5MyAyMS4xMTg4IDEyLjIxMjkgMjAuOTk4OEMxNi45MTI5IDIwLjg4ODggMjAuODQyOSAxNi45ODg4IDIwLjk5MjkgMTIuMjg4OEMyMS4xNjI5IDcuMTg4NzggMTcuMDcyOSAyLjk5ODc4IDEyLjAwMjkgMi45OTg3OFoiIGZpbGw9IiNFM0U0RTUiLz4KPC9zdmc+Cg==);
  --str-video__icon--close: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTE4LjI5OTcgNS43MDk5N0MxNy45MDk3IDUuMzE5OTcgMTcuMjc5NyA1LjMxOTk3IDE2Ljg4OTcgNS43MDk5N0wxMS45OTk3IDEwLjU5TDcuMTA5NzMgNS42OTk5N0M2LjcxOTczIDUuMzA5OTcgNi4wODk3MyA1LjMwOTk3IDUuNjk5NzMgNS42OTk5N0M1LjMwOTczIDYuMDg5OTcgNS4zMDk3MyA2LjcxOTk3IDUuNjk5NzMgNy4xMDk5N0wxMC41ODk3IDEyTDUuNjk5NzMgMTYuODlDNS4zMDk3MyAxNy4yOCA1LjMwOTczIDE3LjkxIDUuNjk5NzMgMTguM0M2LjA4OTczIDE4LjY5IDYuNzE5NzMgMTguNjkgNy4xMDk3MyAxOC4zTDExLjk5OTcgMTMuNDFMMTYuODg5NyAxOC4zQzE3LjI3OTcgMTguNjkgMTcuOTA5NyAxOC42OSAxOC4yOTk3IDE4LjNDMTguNjg5NyAxNy45MSAxOC42ODk3IDE3LjI4IDE4LjI5OTcgMTYuODlMMTMuNDA5NyAxMkwxOC4yOTk3IDcuMTA5OTdDMTguNjc5NyA2LjcyOTk3IDE4LjY3OTcgNi4wODk5NyAxOC4yOTk3IDUuNzA5OTdaIiBmaWxsPSIjQjBCNEI3Ii8+CjwvZz4KPC9zdmc+Cg==);
  --str-video__icon--connection-quality-poor: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzMiIGhlaWdodD0iMzMiIHZpZXdCb3g9IjAgMCAzMyAzMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuMjU0ODgzIDYuMjVDMC4yNTQ4ODMgMi45MzYyOSAyLjk0MTE3IDAuMjUgNi4yNTQ4OCAwLjI1SDMyLjI1NDlWMjYuMjVDMzIuMjU0OSAyOS41NjM3IDI5LjU2ODYgMzIuMjUgMjYuMjU0OSAzMi4yNUgwLjI1NDg4M1Y2LjI1WiIgZmlsbD0iIzBDMEQwRSIgZmlsbC1vcGFjaXR5PSIwLjY1Ii8+CjxwYXRoIGQ9Ik0xNi4yNTQ5IDIwLjI1TDE2LjI1NDkgMTUuMjUiIHN0cm9rZT0iI0UzRTRFNSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTExLjI1NDkgMjAuMjVMMTEuMjU0OSAxOC4yNSIgc3Ryb2tlPSIjREM0MzNCIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMjEuMjU0OSAyMC4yNUwyMS4yNTQ5IDEyLjI1IiBzdHJva2U9IiNFM0U0RTUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=);
  --str-video__icon--connection-quality-good: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzMiIGhlaWdodD0iMzMiIHZpZXdCb3g9IjAgMCAzMyAzMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuOTI0ODA1IDYuMjVDMC45MjQ4MDUgMi45MzYyOSAzLjYxMTEgMC4yNSA2LjkyNDggMC4yNUgzMi45MjQ4VjI2LjI1QzMyLjkyNDggMjkuNTYzNyAzMC4yMzg1IDMyLjI1IDI2LjkyNDggMzIuMjVIMC45MjQ4MDVWNi4yNVoiIGZpbGw9IiMwQzBEMEUiIGZpbGwtb3BhY2l0eT0iMC42NSIvPgo8cGF0aCBkPSJNMTYuOTI0OCAyMC4yNUwxNi45MjQ4IDE1LjI1IiBzdHJva2U9IiMwMEUyQTEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0xMS45MjQ4IDIwLjI1TDExLjkyNDggMTguMjUiIHN0cm9rZT0iIzAwRTJBMSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTIxLjkyNDggMjAuMjVMMjEuOTI0OCAxMi4yNSIgc3Ryb2tlPSIjRTNFNEU1IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K);
  --str-video__icon--connection-quality-excellent: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzMiIGhlaWdodD0iMzMiIHZpZXdCb3g9IjAgMCAzMyAzMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuMjU0ODgzIDYuMjVDMC4yNTQ4ODMgMi45MzYyOSAyLjk0MTE3IDAuMjUgNi4yNTQ4OCAwLjI1SDMyLjI1NDlWMjYuMjVDMzIuMjU0OSAyOS41NjM3IDI5LjU2ODYgMzIuMjUgMjYuMjU0OSAzMi4yNUgwLjI1NDg4M1Y2LjI1WiIgZmlsbD0iIzBDMEQwRSIgZmlsbC1vcGFjaXR5PSIwLjY1Ii8+CjxwYXRoIGQ9Ik0xNi4yNTQ5IDIwLjI1TDE2LjI1NDkgMTUuMjUiIHN0cm9rZT0iIzAwRTJBMSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTExLjI1NDkgMjAuMjVMMTEuMjU0OSAxOC4yNSIgc3Ryb2tlPSIjMDBFMkExIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMjEuMjU0OSAyMC4yNUwyMS4yNTQ5IDEyLjI1IiBzdHJva2U9IiMwMEUyQTEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=);
  --str-video__icon--download: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyOCAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjA2MDcgNi4zMzM1SDE2LjAwMDdWMy4wMDAxNkMxNi4wMDA3IDIuNjMzNSAxNS43MDA3IDIuMzMzNSAxNS4zMzQgMi4zMzM1SDEyLjY2NzNDMTIuMzAwNyAyLjMzMzUgMTIuMDAwNyAyLjYzMzUgMTIuMDAwNyAzLjAwMDE2VjYuMzMzNUgxMC45NDA3QzEwLjM0NzMgNi4zMzM1IDEwLjA0NzMgNy4wNTM1IDEwLjQ2NzMgNy40NzM1TDEzLjUyNzMgMTAuNTMzNUMxMy43ODczIDEwLjc5MzUgMTQuMjA3MyAxMC43OTM1IDE0LjQ2NzMgMTAuNTMzNUwxNy41MjczIDcuNDczNUMxNy45NDczIDcuMDUzNSAxNy42NTQgNi4zMzM1IDE3LjA2MDcgNi4zMzM1Wk05LjMzMzk4IDEzLjAwMDJDOS4zMzM5OCAxMy4zNjY4IDkuNjMzOTggMTMuNjY2OCAxMC4wMDA3IDEzLjY2NjhIMTguMDAwN0MxOC4zNjczIDEzLjY2NjggMTguNjY3MyAxMy4zNjY4IDE4LjY2NzMgMTMuMDAwMkMxOC42NjczIDEyLjYzMzUgMTguMzY3MyAxMi4zMzM1IDE4LjAwMDcgMTIuMzMzNUgxMC4wMDA3QzkuNjMzOTggMTIuMzMzNSA5LjMzMzk4IDEyLjYzMzUgOS4zMzM5OCAxMy4wMDAyWiIgZmlsbD0iI0UzRTRFNSIvPgo8L3N2Zz4K);
  --str-video__icon--ellipsis: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgMTBDNC45IDEwIDQgMTAuOSA0IDEyQzQgMTMuMSA0LjkgMTQgNiAxNEM3LjEgMTQgOCAxMy4xIDggMTJDOCAxMC45IDcuMSAxMCA2IDEwWk0xOCAxMEMxNi45IDEwIDE2IDEwLjkgMTYgMTJDMTYgMTMuMSAxNi45IDE0IDE4IDE0QzE5LjEgMTQgMjAgMTMuMSAyMCAxMkMyMCAxMC45IDE5LjEgMTAgMTggMTBaTTEyIDEwQzEwLjkgMTAgMTAgMTAuOSAxMCAxMkMxMCAxMy4xIDEwLjkgMTQgMTIgMTRDMTMuMSAxNCAxNCAxMy4xIDE0IDEyQzE0IDEwLjkgMTMuMSAxMCAxMiAxMFoiIGZpbGw9IiNFM0U0RTUiLz4KPC9zdmc+Cg==);
  --str-video__icon--film-roll: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTMgNkMyLjQ1IDYgMiA2LjQ1IDIgN1YyMEMyIDIxLjEgMi45IDIyIDQgMjJIMTdDMTcuNTUgMjIgMTggMjEuNTUgMTggMjFDMTggMjAuNDUgMTcuNTUgMjAgMTcgMjBINUM0LjQ1IDIwIDQgMTkuNTUgNCAxOVY3QzQgNi40NSAzLjU1IDYgMyA2Wk0yMCAySDhDNi45IDIgNiAyLjkgNiA0VjE2QzYgMTcuMSA2LjkgMTggOCAxOEgyMEMyMS4xIDE4IDIyIDE3LjEgMjIgMTZWNEMyMiAyLjkgMjEuMSAyIDIwIDJaTTEyIDE0LjVWNS41TDE3LjQ3IDkuNkMxNy43NCA5LjggMTcuNzQgMTAuMiAxNy40NyAxMC40TDEyIDE0LjVaIiBmaWxsPSIjQjBCNEI3Ii8+CjwvZz4KPC9zdmc+Cg==);
  --str-video__icon--filter: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSI+CiAgICA8cGF0aCBkPSJNMSAzLjc1QS43NS43NSAwIDAgMSAxLjc1IDNoMTIuNWEuNzUuNzUgMCAwIDEgMCAxLjVIMS43NUEuNzUuNzUgMCAwIDEgMSAzLjc1em0yLjUgNEEuNzUuNzUgMCAwIDEgNC4yNSA3aDcuNWEuNzUuNzUgMCAwIDEgMCAxLjVoLTcuNWEuNzUuNzUgMCAwIDEtLjc1LS43NXpNNi43NSAxMWEuNzUuNzUgMCAwIDAgMCAxLjVoMi41YS43NS43NSAwIDAgMCAwLTEuNWgtMi41eiIgZmlsbD0iY3VycmVudENvbG9yIi8+XAo8L3N2Zz4K);
  --str-video__icon--fullscreen: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzNiAzNiIgd2lkdGg9IjM2IiBoZWlnaHQ9IjM2IiBmaWxsPSJ3aGl0ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0ibSAxMCwxNiAyLDAgMCwtNCA0LDAgMCwtMiBMIDEwLDEwIGwgMCw2IDAsMCB6Ii8+CjxwYXRoIGQ9Im0gMjAsMTAgMCwyIDQsMCAwLDQgMiwwIEwgMjYsMTAgbCAtNiwwIDAsMCB6Ii8+CjxwYXRoIGQ9Im0gMjQsMjQgLTQsMCAwLDIgTCAyNiwyNiBsIDAsLTYgLTIsMCAwLDQgMCwwIHoiLz4KPHBhdGggZD0iTSAxMiwyMCAxMCwyMCAxMCwyNiBsIDYsMCAwLC0yIC00LDAgMCwtNCAwLDAgeiIvPgo8L3N2Zz4=);
  --str-video__icon--info-icon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjRweCIgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTExIDdoMnYyaC0yem0wIDRoMnY2aC0yem0xLTlDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTAgMThjLTQuNDEgMC04LTMuNTktOC04czMuNTktOCA4LTggOCAzLjU5IDggOC0zLjU5IDgtOCA4eiIvPjwvc3ZnPg==);
  --str-video__icon--kick-user: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCI+PGc+PHJlY3QgZmlsbD0ibm9uZSIgaGVpZ2h0PSIyNCIgd2lkdGg9IjI0Ii8+PC9nPjxnPjxwYXRoIGQ9Ik0xNCw4YzAtMi4yMS0xLjc5LTQtNC00UzYsNS43OSw2LDhzMS43OSw0LDQsNFMxNCwxMC4yMSwxNCw4eiBNMTcsMTB2Mmg2di0ySDE3eiBNMiwxOHYyaDE2di0yYzAtMi42Ni01LjMzLTQtOC00IFMyLDE1LjM0LDIsMTh6Ii8+PC9nPjwvc3ZnPg==);
  --str-video__icon--livestream-viewers: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzg2OTdfMjU1NykiPgo8cGF0aCBkPSJNOC4zNzc0NCA0LjU2MjVDMTAuNzQ2MiA0LjU2MjUgMTIuODU4NyA1Ljg5Mzc1IDEzLjg4OTkgOEMxMi44NTg3IDEwLjEwNjIgMTAuNzQ2MiAxMS40Mzc1IDguMzc3NDQgMTEuNDM3NUM2LjAwODY5IDExLjQzNzUgMy44OTYxOSAxMC4xMDYyIDIuODY0OTQgOEMzLjg5NjE5IDUuODkzNzUgNi4wMDg2OSA0LjU2MjUgOC4zNzc0NCA0LjU2MjVaTTguMzc3NDQgMy4zMTI1QzUuMjUyNDQgMy4zMTI1IDIuNTgzNjkgNS4yNTYyNSAxLjUwMjQ0IDhDMi41ODM2OSAxMC43NDM4IDUuMjUyNDQgMTIuNjg3NSA4LjM3NzQ0IDEyLjY4NzVDMTEuNTAyNCAxMi42ODc1IDE0LjE3MTIgMTAuNzQzOCAxNS4yNTI0IDhDMTQuMTcxMiA1LjI1NjI1IDExLjUwMjQgMy4zMTI1IDguMzc3NDQgMy4zMTI1Wk04LjM3NzQ0IDYuNDM3NUM5LjIzOTk0IDYuNDM3NSA5LjkzOTk0IDcuMTM3NSA5LjkzOTk0IDhDOS45Mzk5NCA4Ljg2MjUgOS4yMzk5NCA5LjU2MjUgOC4zNzc0NCA5LjU2MjVDNy41MTQ5NCA5LjU2MjUgNi44MTQ5NCA4Ljg2MjUgNi44MTQ5NCA4QzYuODE0OTQgNy4xMzc1IDcuNTE0OTQgNi40Mzc1IDguMzc3NDQgNi40Mzc1Wk04LjM3NzQ0IDUuMTg3NUM2LjgyNzQ0IDUuMTg3NSA1LjU2NDk0IDYuNDUgNS41NjQ5NCA4QzUuNTY0OTQgOS41NSA2LjgyNzQ0IDEwLjgxMjUgOC4zNzc0NCAxMC44MTI1QzkuOTI3NDQgMTAuODEyNSAxMS4xODk5IDkuNTUgMTEuMTg5OSA4QzExLjE4OTkgNi40NSA5LjkyNzQ0IDUuMTg3NSA4LjM3NzQ0IDUuMTg3NVoiIGZpbGw9IiNGQ0ZDRkMiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF84Njk3XzI1NTciPgo8cmVjdCB4PSIwLjg3NzQ0MSIgeT0iMC41IiB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHJ4PSI0IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=);
  --str-video__icon--loading: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzEiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAzMSAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzAuOTIxMyAxNUMzMC45MjEzIDIzLjI4NDMgMjQuMjA1NiAzMCAxNS45MjEzIDMwQzEwLjcxNTQgMzAgNi4xMjg5OSAyNy4zNDggMy40MzkyMSAyMy4zMjE0TDUuMTAzNDkgMjIuMjExOUM3LjQzNDYzIDI1LjcwMTYgMTEuNDA5NiAyOCAxNS45MjEzIDI4QzIzLjEwMSAyOCAyOC45MjEzIDIyLjE3OTcgMjguOTIxMyAxNUMyOC45MjEzIDcuODIwMyAyMy4xMDEgMiAxNS45MjEzIDJMMTUuOTIxMyAwQzI0LjIwNTYgMCAzMC45MjEzIDYuNzE1NzMgMzAuOTIxMyAxNVoiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcl8xODYwXzExMDYyMykiLz4KICAgIDxkZWZzPgogICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl8xODYwXzExMDYyMyIgeDE9IjMuNDM5MjEiIHkxPSIwIiB4Mj0iMy40MzkyMSIgeTI9IjMwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgICAgICAgIDxzdG9wIGlkPSJzdG9wLXNlbWl0cmFuc3BhcmVudCIgc3RvcC1vcGFjaXR5PSIwLjAxIi8+CiAgICAgICAgICAgIDxzdG9wIGlkPSJzdG9wLW9wYXF1ZSIgb2Zmc2V0PSIxIiAvPgogICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8L2RlZnM+Cjwvc3ZnPg==);
  --str-video__icon--logout: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNSAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuMDA2NTEgMi45MTY2N0g2LjUwNjUxQzYuODI3MzQgMi45MTY2NyA3LjA4OTg0IDIuNjU0MTcgNy4wODk4NCAyLjMzMzMzQzcuMDg5ODQgMi4wMTI1IDYuODI3MzQgMS43NSA2LjUwNjUxIDEuNzVIMy4wMDY1MUMyLjM2NDg0IDEuNzUgMS44Mzk4NCAyLjI3NSAxLjgzOTg0IDIuOTE2NjdWMTEuMDgzM0MxLjgzOTg0IDExLjcyNSAyLjM2NDg0IDEyLjI1IDMuMDA2NTEgMTIuMjVINi41MDY1MUM2LjgyNzM0IDEyLjI1IDcuMDg5ODQgMTEuOTg3NSA3LjA4OTg0IDExLjY2NjdDNy4wODk4NCAxMS4zNDU4IDYuODI3MzQgMTEuMDgzMyA2LjUwNjUxIDExLjA4MzNIMy4wMDY1MVYyLjkxNjY3WiIgZmlsbD0iI0UzRTRFNSIvPgo8cGF0aCBkPSJNMTIuMTM1NyA2Ljc5NTgzTDEwLjUwODIgNS4xNjgzM0MxMC4zMjE1IDQuOTgxNjcgMTAuMDA2NSA1LjExIDEwLjAwNjUgNS4zNzI1VjYuNDE2NjdINS45MjMxOEM1LjYwMjM0IDYuNDE2NjcgNS4zMzk4NCA2LjY3OTE3IDUuMzM5ODQgN0M1LjMzOTg0IDcuMzIwODMgNS42MDIzNCA3LjU4MzMzIDUuOTIzMTggNy41ODMzM0gxMC4wMDY1VjguNjI3NUMxMC4wMDY1IDguODkgMTAuMzIxNSA5LjAxODMzIDEwLjUwMjMgOC44MzE2N0wxMi4xMjk4IDcuMjA0MTdDMTIuMjQ2NSA3LjA5MzMzIDEyLjI0NjUgNi45MDY2NyAxMi4xMzU3IDYuNzk1ODNaIiBmaWxsPSIjRTNFNEU1Ii8+Cjwvc3ZnPgo=);
  --str-video__icon--low-bandwidth: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0Ij48cGF0aCBkPSJNMjQgMEgwdjI0aDI0eiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik04LjEgNWMuMTcgMCAuMzIuMDkuNDEuMjNsLjA3LjE1IDUuMTggMTEuNjVjLjE2LjI5LjI2LjYxLjI2Ljk2IDAgMS4xMS0uOSAyLjAxLTIuMDEgMi4wMS0uOTYgMC0xLjc3LS42OC0xLjk2LTEuNTlsLS4wMS0uMDNMNy42IDUuNWMwLS4yOC4yMi0uNS41LS41TTIzIDlsLTIgMmExMi42NiAxMi42NiAwIDAgMC0xMC41My0zLjYyTDkuMjggNC43YzQuODMtLjg2IDkuOTguNTcgMTMuNzIgNC4zTTMgMTEgMSA5YTE1LjQgMTUuNCAwIDAgMSA1LjU5LTMuNTdsLjUzIDIuODJDNS42MiA4Ljg3IDQuMjIgOS43OCAzIDExbTQgNC0yLTJjLjgtLjggMS43LTEuNDIgMi42Ni0xLjg5bC41NSAyLjkyYy0uNDIuMjctLjgzLjU5LTEuMjEuOTdtMTItMi0yIDJhNy4xIDcuMSAwIDAgMC00LjAzLTJsLTEuMjgtMi44OGMyLjYzLS4wOCA1LjMuODcgNy4zMSAyLjg4Ii8+PC9zdmc+);
  --str-video__icon--magnifier-glass: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik04LjQ4NDkxIDcuODYwM0g3Ljk1NTk3TDcuNzY4NSA3LjY3OTUyQzguNTcxOTUgNi43NDIxNiA4Ljk4NzA2IDUuNDYzMzQgOC43NTk0MiA0LjEwNDE4QzguNDQ0NzMgMi4yNDI4NSA2Ljg5MTQgMC43NTY0NzQgNS4wMTY2OSAwLjUyODgzQzIuMTg0NTMgMC4xODA2NjkgLTAuMTk5MDMxIDIuNTY0MjMgMC4xNDkxMyA1LjM5NjM5QzAuMzc2Nzc0IDcuMjcxMSAxLjg2MzE1IDguODI0NDMgMy43MjQ0OCA5LjEzOTEyQzUuMDgzNjQgOS4zNjY3NiA2LjM2MjQ2IDguOTUxNjUgNy4yOTk4MiA4LjE0ODJMNy40ODA2IDguMzM1NjdWOC44NjQ2MUwxMC4zMjYxIDExLjcxMDJDMTAuNjAwNyAxMS45ODQ3IDExLjA0OTIgMTEuOTg0NyAxMS4zMjM4IDExLjcxMDJDMTEuNTk4MyAxMS40MzU2IDExLjU5ODMgMTAuOTg3IDExLjMyMzggMTAuNzEyNUw4LjQ4NDkxIDcuODYwM1pNNC40Njc2NiA3Ljg2MDNDMi44MDA1MSA3Ljg2MDMgMS40NTQ3MyA2LjUxNDUyIDEuNDU0NzMgNC44NDczNkMxLjQ1NDczIDMuMTgwMjEgMi44MDA1MSAxLjgzNDQzIDQuNDY3NjYgMS44MzQ0M0M2LjEzNDgyIDEuODM0NDMgNy40ODA2IDMuMTgwMjEgNy40ODA2IDQuODQ3MzZDNy40ODA2IDYuNTE0NTIgNi4xMzQ4MiA3Ljg2MDMgNC40Njc2NiA3Ljg2MDNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K);
  --str-video__icon--mic: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTExLjk5OSAxNC41QzEzLjY1OSAxNC41IDE0Ljk5OSAxMy4xNiAxNC45OTkgMTEuNVY1LjVDMTQuOTk5IDMuODQgMTMuNjU5IDIuNSAxMS45OTkgMi41QzEwLjMzOSAyLjUgOC45OTkwMSAzLjg0IDguOTk5MDEgNS41VjExLjVDOC45OTkwMSAxMy4xNiAxMC4zMzkgMTQuNSAxMS45OTkgMTQuNVpNMTcuOTA5IDExLjVDMTcuNDE5IDExLjUgMTcuMDA5IDExLjg2IDE2LjkyOSAxMi4zNUMxNi41MTkgMTQuNyAxNC40NjkgMTYuNSAxMS45OTkgMTYuNUM5LjUyOTAxIDE2LjUgNy40NzkwMSAxNC43IDcuMDY5MDEgMTIuMzVDNi45ODkwMSAxMS44NiA2LjU3OTAxIDExLjUgNi4wODkwMSAxMS41QzUuNDc5MDEgMTEuNSA0Ljk5OTAxIDEyLjA0IDUuMDg5MDEgMTIuNjRDNS41NzkwMSAxNS42NCA3Ljk3OTAxIDE3Ljk5IDEwLjk5OSAxOC40MlYyMC41QzEwLjk5OSAyMS4wNSAxMS40NDkgMjEuNSAxMS45OTkgMjEuNUMxMi41NDkgMjEuNSAxMi45OTkgMjEuMDUgMTIuOTk5IDIwLjVWMTguNDJDMTYuMDE5IDE3Ljk5IDE4LjQxOSAxNS42NCAxOC45MDkgMTIuNjRDMTkuMDA5IDEyLjA0IDE4LjUxOSAxMS41IDE3LjkwOSAxMS41WiIgZmlsbD0iI0IwQjRCNyIvPgo8L3N2Zz4K);
  --str-video__icon--mic-off: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTE0LjkyMDQgMTEuMVY1LjVDMTQuOTIwNCAzLjg0IDEzLjU4MDQgMi41IDExLjkyMDQgMi41QzEwLjM4MDQgMi41IDkuMTMwMzkgMy42NiA4Ljk2MDM5IDUuMTVMMTQuOTIwNCAxMS4xWk0xOC4wMDA0IDExLjVDMTcuNTkwNCAxMS41IDE3LjIzMDQgMTEuOCAxNy4xNzA0IDEyLjIxQzE3LjEyMDQgMTIuNTMgMTcuMDUwNCAxMi44NSAxNi45NTA0IDEzLjE0TDE4LjIyMDQgMTQuNDFDMTguNTIwNCAxMy44MSAxOC43NDA0IDEzLjE2IDE4Ljg1MDQgMTIuNDdDMTguOTIwNCAxMS45NiAxOC41MjA0IDExLjUgMTguMDAwNCAxMS41Wk0zLjYzMDM5IDQuMDZDMy4yNDAzOSA0LjQ1IDMuMjQwMzkgNS4wOCAzLjYzMDM5IDUuNDdMOC45MjAzOSAxMC43N1YxMS4yQzguOTIwMzkgMTIuMzkgOS41MjAzOSAxMy41MiAxMC41NTA0IDE0LjExQzExLjMwMDQgMTQuNTQgMTEuOTYwNCAxNC41NSAxMi41NzA0IDE0LjQyTDE0LjIzMDQgMTYuMDhDMTMuNTIwNCAxNi40MSAxMi43MzA0IDE2LjYgMTEuOTIwNCAxNi42QzkuMzgwMzkgMTYuNiA3LjA0MDM5IDE0LjgzIDYuNjcwMzkgMTIuMjFDNi42MTAzOSAxMS44IDYuMjUwMzkgMTEuNSA1Ljg0MDM5IDExLjVDNS4zMjAzOSAxMS41IDQuOTIwMzkgMTEuOTYgNC45OTAzOSAxMi40N0M1LjQ1MDM5IDE1LjQzIDcuOTUwMzkgMTcuNzcgMTAuOTIwNCAxOC4yMlYyMC41QzEwLjkyMDQgMjEuMDUgMTEuMzcwNCAyMS41IDExLjkyMDQgMjEuNUMxMi40NzA0IDIxLjUgMTIuOTIwNCAyMS4wNSAxMi45MjA0IDIwLjVWMTguMjJDMTMuODMwNCAxOC4wOSAxNC42OTA0IDE3Ljc3IDE1LjQ3MDQgMTcuMzJMMTguOTYwNCAyMC44MUMxOS4zNTA0IDIxLjIgMTkuOTgwNCAyMS4yIDIwLjM3MDQgMjAuODFDMjAuNzYwNCAyMC40MiAyMC43NjA0IDE5Ljc5IDIwLjM3MDQgMTkuNEw1LjA0MDM5IDQuMDZDNC42NTAzOSAzLjY3IDQuMDIwMzkgMy42NyAzLjYzMDM5IDQuMDZaIiBmaWxsPSIjQjBCNEI3Ii8+CjwvZz4KPC9zdmc+Cg==);
  --str-video__icon--network-quality: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuNCA5LjJINi42QzcuMzcgOS4yIDggOS44MyA4IDEwLjZWMTcuNkM4IDE4LjM3IDcuMzcgMTkgNi42IDE5SDYuNEM1LjYzIDE5IDUgMTguMzcgNSAxNy42VjEwLjZDNSA5LjgzIDUuNjMgOS4yIDYuNCA5LjJaTTEyIDVDMTIuNzcgNSAxMy40IDUuNjMgMTMuNCA2LjRWMTcuNkMxMy40IDE4LjM3IDEyLjc3IDE5IDEyIDE5QzExLjIzIDE5IDEwLjYgMTguMzcgMTAuNiAxNy42VjYuNEMxMC42IDUuNjMgMTEuMjMgNSAxMiA1Wk0xNy42IDEzQzE4LjM3IDEzIDE5IDEzLjYzIDE5IDE0LjRWMTcuNkMxOSAxOC4zNyAxOC4zNyAxOSAxNy42IDE5QzE2LjgzIDE5IDE2LjIgMTguMzcgMTYuMiAxNy42VjE0LjRDMTYuMiAxMy42MyAxNi44MyAxMyAxNy42IDEzWiIgZmlsbD0iI0UzRTRFNSIvPgo8L3N2Zz4K);
  --str-video__icon--reactions: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTIzIDQuNUMyMyA1LjA1IDIyLjU1IDUuNSAyMiA1LjVIMjFWNi41QzIxIDcuMDUgMjAuNTUgNy41IDIwIDcuNUMxOS40NSA3LjUgMTkgNy4wNSAxOSA2LjVWNS41SDE4QzE3LjQ1IDUuNSAxNyA1LjA1IDE3IDQuNUMxNyAzLjk1IDE3LjQ1IDMuNSAxOCAzLjVIMTlWMi41QzE5IDEuOTUgMTkuNDUgMS41IDIwIDEuNUMyMC41NSAxLjUgMjEgMS45NSAyMSAyLjVWMy41SDIyQzIyLjU1IDMuNSAyMyAzLjk1IDIzIDQuNVpNMjAuNTIgOS40NUMyMC44MyAxMC40MSAyMSAxMS40NCAyMSAxMi41QzIxIDE4LjAyIDE2LjUyIDIyLjUgMTEgMjIuNUM1LjQ4IDIyLjUgMSAxOC4wMiAxIDEyLjVDMSA2Ljk4IDUuNDggMi41IDExIDIuNUMxMi41IDIuNSAxMy45MiAyLjg0IDE1LjIgMy40NEMxNS4wOCAzLjc3IDE1IDQuMTIgMTUgNC41QzE1IDUuODUgMTUuOSA3IDE3LjEzIDcuMzdDMTcuNSA4LjYgMTguNjUgOS41IDIwIDkuNUMyMC4xOCA5LjUgMjAuMzUgOS40OCAyMC41MiA5LjQ1Wk02IDEwQzYgMTAuODMgNi42NyAxMS41IDcuNSAxMS41QzguMzMgMTEuNSA5IDEwLjgzIDkgMTBDOSA5LjE3IDguMzMgOC41IDcuNSA4LjVDNi42NyA4LjUgNiA5LjE3IDYgMTBaTTE1LjMxIDE0LjVINi42OUM2LjMxIDE0LjUgNi4wNiAxNC45MiA2LjI1IDE1LjI1QzcuMiAxNi44OSA4Ljk3IDE4IDExIDE4QzEzLjAzIDE4IDE0LjggMTYuODkgMTUuNzUgMTUuMjVDMTUuOTQgMTQuOTIgMTUuNyAxNC41IDE1LjMxIDE0LjVaTTE2IDEwQzE2IDkuMTcgMTUuMzMgOC41IDE0LjUgOC41QzEzLjY3IDguNSAxMyA5LjE3IDEzIDEwQzEzIDEwLjgzIDEzLjY3IDExLjUgMTQuNSAxMS41QzE1LjMzIDExLjUgMTYgMTAuODMgMTYgMTBaIiBmaWxsPSIjQjBCNEI3Ii8+CjwvZz4KPC9zdmc+Cg==);
  --str-video__icon--recording-off: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPGcgaWQ9IlZlY3RvciI+CjxwYXRoIGQ9Ik0xMiAyQzYuNDggMiAyIDYuNDggMiAxMkMyIDE3LjUyIDYuNDggMjIgMTIgMjJDMTcuNTIgMjIgMjIgMTcuNTIgMjIgMTJDMjIgNi40OCAxNy41MiAyIDEyIDJaTTEyIDIwQzcuNTggMjAgNCAxNi40MiA0IDEyQzQgNy41OCA3LjU4IDQgMTIgNEMxNi40MiA0IDIwIDcuNTggMjAgMTJDMjAgMTYuNDIgMTYuNDIgMjAgMTIgMjBaIiBmaWxsPSIjQjBCNEI3Ii8+CjxwYXRoIGQ9Ik0xMiAxN0MxNC43NjE0IDE3IDE3IDE0Ljc2MTQgMTcgMTJDMTcgOS4yMzg1OCAxNC43NjE0IDcgMTIgN0M5LjIzODU4IDcgNyA5LjIzODU4IDcgMTJDNyAxNC43NjE0IDkuMjM4NTggMTcgMTIgMTdaIiBmaWxsPSIjQjBCNEI3Ii8+CjwvZz4KPC9nPgo8L3N2Zz4K);
  --str-video__icon--recording-on: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwIDBDNC40OCAwIDAgNC40OCAwIDEwQzAgMTUuNTIgNC40OCAyMCAxMCAyMEMxNS41MiAyMCAyMCAxNS41MiAyMCAxMEMyMCA0LjQ4IDE1LjUyIDAgMTAgMFpNMTMgMTRIN0M2LjQ1IDE0IDYgMTMuNTUgNiAxM1Y3QzYgNi40NSA2LjQ1IDYgNyA2SDEzQzEzLjU1IDYgMTQgNi40NSAxNCA3VjEzQzE0IDEzLjU1IDEzLjU1IDE0IDEzIDE0WiIgZmlsbD0iI0UzRTRFNSIvPgo8L3N2Zz4K);
  --str-video__icon--refresh: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOTIwIDE5MjAiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTk2MCAwdjIxMy4zMzNjNDExLjYyNyAwIDc0Ni42NjcgMzM0LjkzNCA3NDYuNjY3IDc0Ni42NjdTMTM3MS42MjcgMTcwNi42NjcgOTYwIDE3MDYuNjY3IDIxMy4zMzMgMTM3MS43MzMgMjEzLjMzMyA5NjBjMC0xOTcuMDEzIDc4LjQtMzgyLjUwNyAyMTMuMzM0LTUyMC43NDd2MjU0LjA4SDY0MFYxMDYuNjY3SDUzLjMzM1YzMjBoMTkxLjA0Qzg4LjY0IDQ5NC4wOCAwIDcyMC45NiAwIDk2MGMwIDUyOS4yOCA0MzAuNjEzIDk2MCA5NjAgOTYwczk2MC00MzAuNzIgOTYwLTk2MFMxNDg5LjM4NyAwIDk2MCAwIi8+PC9zdmc+Cg==);
  --str-video__icon--screen-share-off: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTIwIDE4QzIxLjEgMTggMjIgMTcuMSAyMiAxNlY2QzIyIDQuOSAyMS4xIDQgMjAgNEg0QzIuOSA0IDIgNC45IDIgNlYxNkMyIDE3LjEgMi44OSAxOCA0IDE4SDFDMC40NSAxOCAwIDE4LjQ1IDAgMTlDMCAxOS41NSAwLjQ1IDIwIDEgMjBIMjNDMjMuNTUgMjAgMjQgMTkuNTUgMjQgMTlDMjQgMTguNDUgMjMuNTUgMTggMjMgMThIMjBaTTEzIDE0LjQ3VjEyLjI4QzEwLjIyIDEyLjI4IDguMzkgMTMuMTMgNyAxNUM3LjU2IDEyLjMzIDkuMTEgOS42NyAxMyA5LjEzVjdMMTYuNjEgMTAuMzZDMTYuODIgMTAuNTYgMTYuODIgMTAuODkgMTYuNjEgMTEuMDlMMTMgMTQuNDdaIiBmaWxsPSIjQjBCNEI3Ii8+CjwvZz4KPC9zdmc+Cg==);
  --str-video__icon--screen-share-on: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPU91dGxpbmVkIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTIwIDE4QzIxLjEgMTggMjEuOTkgMTcuMSAyMS45OSAxNkwyMiA2QzIyIDQuODkgMjEuMSA0IDIwIDRINEMyLjg5IDQgMiA0Ljg5IDIgNlYxNkMyIDE3LjEgMi44OSAxOCA0IDE4SDBWMjBIMjRWMThIMjBaTTQgMTZWNkgyMFYxNi4wMUw0IDE2Wk0xMyA5LjEzQzkuMTEgOS42NyA3LjU2IDEyLjMzIDcgMTVDOC4zOSAxMy4xMyAxMC4yMiAxMi4yOCAxMyAxMi4yOFYxNC40N0wxNyAxMC43M0wxMyA3VjkuMTNaIiBmaWxsPSIjQjBCNEI3Ii8+CjwvZz4KPC9zdmc+Cg==);
  --str-video__icon--settings: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTE5LjQ5OTcgMTJDMTkuNDk5NyAxMS43NyAxOS40ODk3IDExLjU1IDE5LjQ2OTcgMTEuMzJMMjEuMzI5NyA5LjkxQzIxLjcyOTcgOS42MSAyMS44Mzk3IDkuMDUgMjEuNTg5NyA4LjYxTDE5LjcxOTcgNS4zOEMxOS40Njk3IDQuOTQgMTguOTI5NyA0Ljc2IDE4LjQ2OTcgNC45NkwxNi4zMTk3IDUuODdDMTUuOTQ5NyA1LjYxIDE1LjU1OTcgNS4zOCAxNS4xNDk3IDUuMTlMMTQuODU5NyAyLjg4QzE0Ljc5OTcgMi4zOCAxNC4zNjk3IDIgMTMuODY5NyAySDEwLjEzOTdDOS42Mjk2NyAyIDkuMTk5NjcgMi4zOCA5LjEzOTY3IDIuODhMOC44NDk2NyA1LjE5QzguNDM5NjcgNS4zOCA4LjA0OTY2IDUuNjEgNy42Nzk2NyA1Ljg3TDUuNTI5NjcgNC45NkM1LjA2OTY3IDQuNzYgNC41Mjk2NyA0Ljk0IDQuMjc5NjcgNS4zOEwyLjQwOTY3IDguNjJDMi4xNTk2NyA5LjA2IDIuMjY5NjcgOS42MSAyLjY2OTY3IDkuOTJMNC41Mjk2NyAxMS4zM0M0LjUwOTY3IDExLjU1IDQuNDk5NjcgMTEuNzcgNC40OTk2NyAxMkM0LjQ5OTY3IDEyLjIzIDQuNTA5NjcgMTIuNDUgNC41Mjk2NyAxMi42OEwyLjY2OTY3IDE0LjA5QzIuMjY5NjcgMTQuMzkgMi4xNTk2NyAxNC45NSAyLjQwOTY3IDE1LjM5TDQuMjc5NjcgMTguNjJDNC41Mjk2NyAxOS4wNiA1LjA2OTY3IDE5LjI0IDUuNTI5NjcgMTkuMDRMNy42Nzk2NyAxOC4xM0M4LjA0OTY2IDE4LjM5IDguNDM5NjcgMTguNjIgOC44NDk2NyAxOC44MUw5LjEzOTY3IDIxLjEyQzkuMTk5NjcgMjEuNjIgOS42Mjk2NyAyMiAxMC4xMjk3IDIySDEzLjg1OTdDMTQuMzU5NyAyMiAxNC43ODk3IDIxLjYyIDE0Ljg0OTcgMjEuMTJMMTUuMTM5NyAxOC44MUMxNS41NDk3IDE4LjYyIDE1LjkzOTcgMTguMzkgMTYuMzA5NyAxOC4xM0wxOC40NTk3IDE5LjA0QzE4LjkxOTcgMTkuMjQgMTkuNDU5NyAxOS4wNiAxOS43MDk3IDE4LjYyTDIxLjU3OTcgMTUuMzlDMjEuODI5NyAxNC45NSAyMS43MTk3IDE0LjQgMjEuMzE5NyAxNC4wOUwxOS40NTk3IDEyLjY4QzE5LjQ4OTcgMTIuNDUgMTkuNDk5NyAxMi4yMyAxOS40OTk3IDEyWk0xMi4wMzk3IDE1LjVDMTAuMTA5NyAxNS41IDguNTM5NjcgMTMuOTMgOC41Mzk2NyAxMkM4LjUzOTY3IDEwLjA3IDEwLjEwOTcgOC41IDEyLjAzOTcgOC41QzEzLjk2OTcgOC41IDE1LjUzOTcgMTAuMDcgMTUuNTM5NyAxMkMxNS41Mzk3IDEzLjkzIDEzLjk2OTcgMTUuNSAxMi4wMzk3IDE1LjVaIiBmaWxsPSIjQjBCNEI3Ii8+CjwvZz4KPC9zdmc+Cg==);
  --str-video__icon--speaker: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTMgMTAuMDAxOFYxNC4wMDE4QzMgMTQuNTUxOCAzLjQ1IDE1LjAwMTggNCAxNS4wMDE4SDdMMTAuMjkgMTguMjkxOEMxMC45MiAxOC45MjE4IDEyIDE4LjQ3MTggMTIgMTcuNTgxOFY2LjQxMTc5QzEyIDUuNTIxNzkgMTAuOTIgNS4wNzE3OSAxMC4yOSA1LjcwMTc5TDcgOS4wMDE3OUg0QzMuNDUgOS4wMDE3OSAzIDkuNDUxNzkgMyAxMC4wMDE4Wk0xNi41IDEyLjAwMThDMTYuNSAxMC4yMzE4IDE1LjQ4IDguNzExNzkgMTQgNy45NzE3OVYxNi4wMjE4QzE1LjQ4IDE1LjI5MTggMTYuNSAxMy43NzE4IDE2LjUgMTIuMDAxOFpNMTQgNC40NTE3OVY0LjY1MTc5QzE0IDUuMDMxNzkgMTQuMjUgNS4zNjE3OSAxNC42IDUuNTAxNzlDMTcuMTggNi41MzE3OSAxOSA5LjA2MTc5IDE5IDEyLjAwMThDMTkgMTQuOTQxOCAxNy4xOCAxNy40NzE4IDE0LjYgMTguNTAxOEMxNC4yNCAxOC42NDE4IDE0IDE4Ljk3MTggMTQgMTkuMzUxOFYxOS41NTE4QzE0IDIwLjE4MTggMTQuNjMgMjAuNjIxOCAxNS4yMSAyMC40MDE4QzE4LjYgMTkuMTExOCAyMSAxNS44NDE4IDIxIDEyLjAwMThDMjEgOC4xNjE3OSAxOC42IDQuODkxNzkgMTUuMjEgMy42MDE3OUMxNC42MyAzLjM3MTc5IDE0IDMuODIxNzkgMTQgNC40NTE3OVoiIGZpbGw9IiNCMEI0QjciLz4KPC9nPgo8L3N2Zz4K);
  --str-video__icon--stats: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTEzLjg5MTEgMTAuNTQ3NUwxMi44MzExIDEwLjA1NzVDMTIuNDQxMSA5Ljg3NzQ2IDEyLjQ0MTEgOS4zMjc0NiAxMi44MzExIDkuMTQ3NDZMMTMuODkxMSA4LjY1NzQ2TDE0LjM4MTEgNy42MDc0NkMxNC41NjExIDcuMjE3NDYgMTUuMTExMSA3LjIxNzQ2IDE1LjI5MTEgNy42MDc0NkwxNS43ODExIDguNjY3NDZMMTYuODMxMSA5LjE1NzQ2QzE3LjIyMTEgOS4zMzc0NiAxNy4yMjExIDkuODg3NDYgMTYuODMxMSAxMC4wNjc1TDE1Ljc3MTEgMTAuNTU3NUwxNS4yODExIDExLjYwNzVDMTUuMTAxMSAxMS45OTc1IDE0LjU1MTEgMTEuOTk3NSAxNC4zNzExIDExLjYwNzVMMTMuODkxMSAxMC41NDc1Wk00LjI4MTA3IDEzLjYwNzVMNC43NzEwNyAxMi41NDc1TDUuODMxMDcgMTIuMDU3NUM2LjIyMTA3IDExLjg3NzUgNi4yMjEwNyAxMS4zMjc1IDUuODMxMDcgMTEuMTQ3NUw0Ljc3MTA3IDEwLjY1NzVMNC4yODEwNyA5LjYwNzQ2QzQuMTExMDcgOS4yMTc0NiAzLjU1MTA3IDkuMjE3NDYgMy4zODEwNyA5LjYwNzQ2TDIuODkxMDcgMTAuNjY3NUwxLjgzMTA3IDExLjE1NzVDMS40NDEwNyAxMS4zMzc1IDEuNDQxMDcgMTEuODg3NSAxLjgzMTA3IDEyLjA2NzVMMi44OTEwNyAxMi41NTc1TDMuMzgxMDcgMTMuNjA3NUMzLjU1MTA3IDEzLjk5NzUgNC4xMTEwNyAxMy45OTc1IDQuMjgxMDcgMTMuNjA3NVpNOC43OTEwNyA4LjU5NzQ2TDkuNDIxMDcgNy4xOTc0NkwxMC44MjExIDYuNTY3NDZDMTEuMjExMSA2LjM4NzQ2IDExLjIxMTEgNS44Mzc0NiAxMC44MjExIDUuNjU3NDZMOS40MjEwNyA1LjAyNzQ2TDguNzkxMDcgMy42Mjc0NkM4LjYxMTA3IDMuMjM3NDYgOC4wNjEwNyAzLjIzNzQ2IDcuODgxMDcgMy42Mjc0Nkw3LjI1MTA3IDUuMDI3NDZMNS44NTEwNyA1LjY1NzQ2QzUuNDYxMDcgNS44Mzc0NiA1LjQ2MTA3IDYuMzg3NDYgNS44NTEwNyA2LjU2NzQ2TDcuMjUxMDcgNy4xOTc0Nkw3Ljg4MTA3IDguNTk3NDZDOC4wNTEwNyA4Ljk4NzQ2IDguNjExMDcgOC45ODc0NiA4Ljc5MTA3IDguNTk3NDZaTTIyLjE3MTEgOC44Nzc0NkMyMS43NzExIDguNDc3NDYgMjEuMTAxMSA4LjQ4NzQ2IDIwLjcyMTEgOC45MTc0NkwxNC4zMzExIDE2LjA5NzVMMTEuMDQxMSAxMi44MDc1QzEwLjY1MTEgMTIuNDE3NSAxMC4wMjExIDEyLjQxNzUgOS42MzEwNyAxMi44MDc1TDMuNTkxMDcgMTguODU3NUMzLjE4MTA3IDE5LjI2NzUgMy4xODEwNyAxOS45NDc1IDMuNTkxMDcgMjAuMzU3NUM0LjAwMTA3IDIwLjc2NzUgNC42ODEwNyAyMC43Njc1IDUuMDkxMDcgMjAuMzU3NUwxMC4zNDExIDE1LjA5NzVMMTMuNTkxMSAxOC4zNDc1QzE0LjAwMTEgMTguNzU3NSAxNC42NjExIDE4LjczNzUgMTUuMDQxMSAxOC4zMDc1TDIyLjIxMTEgMTAuMjM3NUMyMi41NjExIDkuODQ3NDYgMjIuNTQxMSA5LjI0NzQ2IDIyLjE3MTEgOC44Nzc0NloiIGZpbGw9IiNCMEI0QjciLz4KPC9nPgo8L3N2Zz4K);
  --str-video__icon--pin: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xOSAxMi44N0MxOSAxMi40IDE4LjY2IDEyLjAyIDE4LjIgMTEuODlDMTYuOTMgMTEuNTQgMTYgMTAuMzggMTYgOVY0SDE3QzE3LjU1IDQgMTggMy41NSAxOCAzQzE4IDIuNDUgMTcuNTUgMiAxNyAySDdDNi40NSAyIDYgMi40NSA2IDNDNiAzLjU1IDYuNDUgNCA3IDRIOFY5QzggMTAuMzggNy4wNyAxMS41NCA1LjggMTEuODlDNS4zNCAxMi4wMiA1IDEyLjQgNSAxMi44N1YxM0M1IDEzLjU1IDUuNDUgMTQgNiAxNEgxMC45OEwxMSAyMUMxMSAyMS41NSAxMS40NSAyMiAxMiAyMkMxMi41NSAyMiAxMyAyMS41NSAxMyAyMUwxMi45OCAxNEgxOEMxOC41NSAxNCAxOSAxMy41NSAxOSAxM1YxMi44N1oiIGZpbGw9IiNFM0U0RTUiLz4KPC9zdmc+Cg==);
  --str-video__icon--no-audio: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAyMCAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05LjMzNjI5IDAuNzcyNzA5TDkuNzQ5MjQgMC40NDI2MTNDOS45MzYxNCAwLjI5MjkyOSAxMC4yMTE5IDAuMzE5NTk2IDEwLjM2NTEgMC41MDIxNzZDMTAuNDI5MyAwLjU3ODY3NyAxMC40NjQ0IDAuNjc0NTYzIDEwLjQ2NDMgMC43NzM0ODdWMS4zMzU0NlYxLjMzNzE1VjEuODY0NDdWMS45MjUyM1YxMy4yMDcyVjEzLjI2ODFWMTMuNzk1NVYxMy43OTcxVjE0LjM1OUMxMC40NjQ0IDE0LjU5NTEgMTAuMjY4NiAxNC43ODY2IDEwLjAyNjkgMTQuNzg2OEM5LjkyNTY4IDE0Ljc4NjggOS44Mjc1MyAxNC43NTI2IDkuNzQ5MjIgMTQuNjg5OUw5LjMzNjI2IDE0LjM1OTdMOS4zMzUzOSAxNC4zNTlMOC45MDg2MSAxNC4wMTc4TDguODU5NzMgMTMuOTc4N0w1LjExNjcyIDEwLjk4NjFMNS4xMTU4NSAxMC45ODYxSDEuNzEyMTNDMS4yMjg3NiAxMC45ODYxIDAuODM2OTE0IDEwLjYwMzMgMC44MzY5MTQgMTAuMTMxMlY1LjAwMTMzQzAuODM2OTE0IDQuNTI5MTQgMS4yMjg3NiA0LjE0NjM1IDEuNzEyMTMgNC4xNDYzNUg1LjExNTg1TDguODU5NzMgMS4xNTM2NUw4LjkwOTY0IDEuMTEzNzVMOS4zMzUzMiAwLjc3MzQ4N0w5LjMzNjI5IDAuNzcyNzA5Wk02LjExNzcyIDUuMzk5N0w4Ljg1OTczIDMuMjA3ODVWMTEuOTI0M0w2LjExODcxIDkuNzMyODhMNS42Nzg2NSA5LjM4MTA1TDUuMTE1ODUgOS4zODE1N0g1LjExNTIzTDUuMTE0MzYgOS4zODE1N0wyLjQ0MTQ4IDkuMzgxNTdWNS43NTA5Mkg1LjExNTg1SDUuNjc4MzRMNi4xMTc3MiA1LjM5OTdaTTE5LjUyNDQgOS44NjQ0NkwxNy4yMjYyIDcuNTY2MjRMMTkuNTI0NCA1LjI2ODAxQzE5LjgzNzcgNC45NTQ3IDE5LjgzMiA0LjQ0MTA4IDE5LjUxODcgNC4xMjc3N0MxOS4yMDU0IDMuODE0NDYgMTguNjkxOCAzLjgwODgyIDE4LjM3ODUgNC4xMjIxM0wxNi4wODAzIDYuNDIwMzVMMTMuNzgyIDQuMTIyMTNDMTMuNDY4NyAzLjgwODgyIDEyLjk1NTEgMy44MTQ0NiAxMi42NDE4IDQuMTI3NzdDMTIuMzI4NSA0LjQ0MTA4IDEyLjMyMjggNC45NTQ3IDEyLjYzNjIgNS4yNjgwMUwxNC45MzQ0IDcuNTY2MjRMMTIuNjM2MiA5Ljg2NDQ2QzEyLjMyMjggMTAuMTc3OCAxMi4zMjg1IDEwLjY5MTQgMTIuNjQxOCAxMS4wMDQ3QzEyLjk1NTEgMTEuMzE4IDEzLjQ2ODcgMTEuMzIzNyAxMy43ODIgMTEuMDEwM0wxNi4wODAzIDguNzEyMTJMMTguMzc4NSAxMS4wMTAzQzE4LjY5MTggMTEuMzIzNyAxOS4yMDU0IDExLjMxOCAxOS41MTg3IDExLjAwNDdDMTkuODMyIDEwLjY5MTQgMTkuODM3NyAxMC4xNzc4IDE5LjUyNDQgOS44NjQ0NloiIGZpbGw9IiM3Mjc2N0UiLz4KPC9zdmc+Cg==);
  --str-video__icon--camera-off-outline: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNyAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuODUxMzggNS41MDk5OUw1LjI0NjgyIDMuOTA1NDNMMS45MTczNSAwLjU4Mzk4NEwwLjc4NjEzMyAxLjcxNTJMMi45NzYzNiAzLjkwNTQzSDIuMzkwN0MxLjk0OTQ0IDMuOTA1NDMgMS41ODg0MSA0LjI2NjQ2IDEuNTg4NDEgNC43MDc3MVYxMi43MzA1QzEuNTg4NDEgMTMuMTcxOCAxLjk0OTQ0IDEzLjUzMjggMi4zOTA3IDEzLjUzMjhIMTIuMDE4MUMxMi4xODY2IDEzLjUzMjggMTIuMzMxIDEzLjQ2ODYgMTIuNDU5MyAxMy4zODg0TDE1LjAxMDYgMTUuOTM5N0wxNi4xNDE4IDE0LjgwODRMOS4wMzM1OSA3LjcwMDIyTDYuODUxMzggNS41MDk5OVpNMy4xOTI5OCAxMS45MjgyVjUuNTA5OTlINC41ODA5MkwxMC45OTkyIDExLjkyODJIMy4xOTI5OFpNMTEuMjE1OCA1LjUwOTk5VjcuNjAzOTVMMTYuMDI5NSAxMi40MTc2VjQuMzA2NTdMMTIuODIwNCA3LjUxNTdWNC43MDc3MUMxMi44MjA0IDQuMjY2NDYgMTIuNDU5MyAzLjkwNTQzIDEyLjAxODEgMy45MDU0M0g3LjUxNzI4TDkuMTIxODQgNS41MDk5OUgxMS4yMTU4WiIgZmlsbD0iIzcyNzY3RSIvPgo8L3N2Zz4K);
  --str-video__icon--not-allowed: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxNyAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguNDY0MjIgMC45MzU1NDdDNC4wMzU2MyAwLjkzNTU0NyAwLjQ0MTQwNiA0LjUyOTc3IDAuNDQxNDA2IDguOTU4MzZDMC40NDE0MDYgMTMuMzg3IDQuMDM1NjMgMTYuOTgxMiA4LjQ2NDIyIDE2Ljk4MTJDMTIuODkyOCAxNi45ODEyIDE2LjQ4NyAxMy4zODcgMTYuNDg3IDguOTU4MzZDMTYuNDg3IDQuNTI5NzcgMTIuODkyOCAwLjkzNTU0NyA4LjQ2NDIyIDAuOTM1NTQ3Wk0yLjA0NTk3IDguOTU4MzZDMi4wNDU5NyA1LjQxMjI4IDQuOTE4MTQgMi41NDAxMSA4LjQ2NDIyIDIuNTQwMTFDOS45NDg0NCAyLjU0MDExIDExLjMxMjMgMy4wNDU1NSAxMi4zOTU0IDMuODk1OTdMMy40MDE4MyAxMi44ODk1QzIuNTUxNDEgMTEuODA2NSAyLjA0NTk3IDEwLjQ0MjYgMi4wNDU5NyA4Ljk1ODM2Wk04LjQ2NDIyIDE1LjM3NjZDNi45OCAxNS4zNzY2IDUuNjE2MTIgMTQuODcxMiA0LjUzMzA0IDE0LjAyMDhMMTMuNTI2NiA1LjAyNzE4QzE0LjM3NyA2LjExMDI2IDE0Ljg4MjUgNy40NzQxNCAxNC44ODI1IDguOTU4MzZDMTQuODgyNSAxMi41MDQ0IDEyLjAxMDMgMTUuMzc2NiA4LjQ2NDIyIDE1LjM3NjZaIiBmaWxsPSIjNzI3NjdFIi8+Cjwvc3ZnPgo=);
}
.str-video__avatar {
  width: 2rem;
  height: 2rem;
  object-fit: cover;
}
.str-video__avatar--initials-fallback {
  width: 2rem;
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.str-video {
  /* The font color applied inside the component */
  --str-video__avatar--color: var(--str-video__text-color1);
  /* The background color of the component */
  --str-video__avatar--background-color: var(--str-video__background-color1);
  /* The border radius used for the borders of the component */
  --str-video__avatar--border-radius: var(--str-video__border-radius-circle);
}
.str-video__avatar {
  background: var(--str-video__avatar--background-color);
  color: var(--str-video__avatar--color);
  box-shadow: var(--str-video__avatar--box-shadow);
  border-radius: var(--str-video__avatar--border-radius);
  border-block-start: var(--str-video__avatar--border-block-start);
  border-block-end: var(--str-video__avatar--border-block-end);
  border-inline-start: var(--str-video__avatar--border-inline-start);
  border-inline-end: var(--str-video__avatar--border-inline-end);
}
.str-video__avatar--initials-fallback {
  background-color: var(--str-video__primary-color);
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--str-video__border-radius-circle);
  text-transform: uppercase;
}
.str-video__button {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--str-video__border-radius-md);
  padding: var(--str-video__spacing-sm) var(--str-video__spacing-lg);
  text-align: center;
  min-width: 120px;
  width: 100%;
  font-size: var(--str-video__font-size-md);
  font-weight: 500;
  border: 1px solid transparent;
  color: var(--str-video__text-color1);
  background-color: var(--str-video__button-primary-base);
}
.str-video__button:not([disabled]):hover {
  background-color: var(--str-video__button-primary-hover);
  cursor: pointer;
}
.str-video__button__icon {
  margin-inline-end: var(--str-video__spacing-xs);
  background-color: var(--str-video__text-color1);
}
.str-video__button:disabled {
  background-color: var(--str-video__button-default-disabled);
  cursor: not-allowed;
}
.str-video__composite-button--caption {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 0.25rem;
}
.str-video__composite-button .str-video__composite-button__button-group {
  display: flex;
  align-items: center;
}
.str-video__composite-button .str-video__composite-button__button-group .str-video__composite-button__button {
  all: unset;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 0.5rem;
}
.str-video__composite-button .str-video__composite-button__button-group .str-video__composite-button__button:not([disabled]):hover {
  cursor: pointer;
}
.str-video__composite-button .str-video__composite-button__button-group .str-video__menu-toggle-button {
  padding: 0;
  margin-inline-start: -30px;
  margin-inline-end: 8px;
}
.str-video__composite-button .str-video__composite-button__button-group .str-video__loading-indicator__icon {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
.str-video__composite-button.str-video__composite-button--menu .str-video__composite-button__button {
  padding-inline-end: 2.5rem;
}
.str-video__call-controls__button {
  padding: 0.5rem;
}
.str-video__call-controls__button[disabled] {
  cursor: not-allowed;
}
.str-video__call-controls__button:hover,
.str-video__call-controls__button:hover > *:hover {
  cursor: pointer;
}
.str-video__text-button {
  all: unset;
  padding: 5px;
  font-size: 12px;
  border-radius: var(--str-video__participant-list-header__close-button--border-radius);
  background: var(--str-video__participant-list-header__close-button--background-color);
}
.str-video__call-recording-list-item__action-button {
  border: none;
}
.str-video {
  /* The font color applied inside the component */
  --str-video__composite-button__button-group--color: var(--str-video__text-color1);
  /* The background color of the component */
  --str-video__composite-button__button-group--background-color: var(--str-video__button-primary-base);
  /* The active background color of the component */
  --str-video__composite-button__button-group-active--background-color: var(--str-video__button-primary-active);
  --str-video__composite-button__button-group-active-primary--background-color: var(--str-video__button-primary-active);
  --str-video__composite-button__button-group-active-secondary--background-color: var(--str-video__button-secondary-active);
  --str-video__composite-button__button-group-active-secondary-hover--background-color: var(--str-video__button-secondary-hover);
  /* The hover background color of the component */
  --str-video__composite-button__button-group-hover--background-color: var(--str-video__button-default-hover);
  /* The border radius used for the borders of the component */
  --str-video__composite-button__button-group--border-radius: var(--str-video__border-radius-xs);
}
.str-video__composite-button__button-group {
  background: var(--str-video__composite-button__button-group--background-color);
  color: var(--str-video__composite-button__button-group--color);
  box-shadow: var(--str-video__composite-button__button-group--box-shadow);
  border-radius: var(--str-video__composite-button__button-group--border-radius);
  border-block-start: var(--str-video__composite-button__button-group--border-block-start);
  border-block-end: var(--str-video__composite-button__button-group--border-block-end);
  border-inline-start: var(--str-video__composite-button__button-group--border-inline-start);
  border-inline-end: var(--str-video__composite-button__button-group--border-inline-end);
  background-color: var(--str-video__composite-button__button-group--background-color);
  border-radius: var(--str-video__border-radius-circle);
}
.str-video__composite-button__button-group .str-video__call-controls__button.str-video__menu-toggle-button {
  background-color: var(--str-video__button-primary-base);
}
.str-video__composite-button__button-group .str-video__call-controls__button.str-video__menu-toggle-button:hover {
  background-color: var(--str-video__button-default-hover);
}
.str-video__composite-button__button-group .str-video__call-controls__button.str-video__menu-toggle-button--active {
  background-color: var(--str-video__composite-button__button-group-hover--background-color);
  color: white;
}
.str-video__composite-button__button-group .str-video__call-controls__button.str-video__menu-toggle-button--active:hover {
  background-color: var(--str-video__composite-button__button-group-hover--background-color);
}
.str-video__composite-button__button-group .str-video__call-controls__button.str-video__menu-toggle-button--active:disabled {
  background-color: var(--str-video__composite-button__button-group-hover--background-color);
}
.str-video__composite-button__button-group.str-video__composite-button__button-group--active {
  background-color: var(--str-video__composite-button__button-group-active--background-color);
}
.str-video__composite-button__button-group.str-video__composite-button__button-group--active:hover {
  background-color: var(--str-video__button-primary-hover);
}
.str-video__composite-button__button-group.str-video__composite-button__button-group--active .str-video__icon {
  background-color: var(--str-video__icon-active);
}
.str-video__composite-button__button-group.str-video__composite-button__button-group--active-primary {
  background-color: var(--str-video__composite-button__button-group-active-primary--background-color);
}
.str-video__composite-button__button-group.str-video__composite-button__button-group--active-secondary {
  background-color: var(--str-video__composite-button__button-group-active-secondary--background-color);
}
.str-video__composite-button__caption {
  font-size: 12px;
  line-height: 15px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
}
.str-video__composite-button__button-group:not(.str-video__composite-button__button-group--disabled):hover {
  background-color: var(--str-video__composite-button__button-group-hover--background-color);
}
.str-video__composite-button__button-group:not(.str-video__composite-button__button-group--disabled):hover.str-video__composite-button__button-group--active-secondary:hover {
  background-color: var(--str-video__composite-button__button-group-active-secondary-hover--background-color);
}
.str-video__composite-button__button-group:not(.str-video__composite-button__button-group--disabled):hover .str-video__icon {
  background-color: var(--str-video__icon-hover);
}
.str-video__call-controls__button {
  border-radius: var(--str-video__border-radius-circle);
  text-decoration: none;
  box-shadow: none;
  border: none;
  background-color: var(--str-video__button-primary-base);
}
.str-video__call-controls__button:hover {
  text-decoration: none;
  background-color: var(--str-video__composite-button__button-group-hover--background-color);
}
.str-video__call-controls__button:hover .str-video__icon {
  background-color: var(--str-video__icon-hover);
}
.str-video__call-controls__button--variant-danger {
  background-color: var(--str-video__button-tertiary-base);
}
.str-video__call-controls__button--variant-danger .str-video__icon {
  background-color: white;
}
.str-video__call-controls__button--variant-danger:hover {
  background-color: var(--str-video__button-tertiary-hover);
}
.str-video__call-controls__button--variant-success {
  background-color: var(--str-video__info-color);
}
.str-video__call-controls__button--variant-success:hover {
  background-color: var(--str-video__info-color--accent);
}
.str-video__call-controls__button--variant-active {
  background-color: var(--str-video__button-primary-active);
}
.str-video__call-controls__button--variant-active:hover {
  background-color: var(--str-video__button-primary-hover);
}
.str-video__call-controls__button--enabled {
  background: var(--str-video__background-color7);
}
.str-video__background-filters {
  position: absolute;
  bottom: 0;
  right: calc(100% - 1px);
  overflow: hidden;
  opacity: 0;
}
.str-video__background-filters .str-video__background-filters__video {
  top: 0;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.str-video__background-filters .str-video__background-filters__video--tall {
  object-fit: contain;
}
.str-video__background-filters .str-video__background-filters__background-image {
  top: 5px;
  width: 100%;
  height: auto;
}
.str-video__background-filters .str-video__background-filters__target-canvas {
  top: 10px;
  width: 100%;
  height: auto;
}
.str-video__call-controls {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 1rem 0;
}
.str-video__call-controls .str-video__reactions-menu {
  background-color: var(--str-video__base-color6);
  display: flex;
  padding: var(--str-video__spacing-sm);
  gap: 0.5rem;
  border-radius: var(--str-video__border-radius-lg);
}
.str-video__call-controls .str-video__reactions-menu--horizontal {
  flex-direction: row;
}
.str-video__call-controls .str-video__reactions-menu--vertical {
  flex-direction: column;
}
.str-video__call-controls .str-video__reactions-menu .str-video__reactions-menu__button {
  font-family: "Twemoji Mozilla", Apple Color Emoji, "Segoe UI Emoji", "Noto Color Emoji", "EmojiOne Color";
  font-size: 1.2rem;
  height: 38px;
  width: 38px;
  background-color: var(--str-video__button-primary-base);
  border-radius: var(--str-video__border-radius-circle);
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.str-video__call-controls .str-video__reactions-menu .str-video__reactions-menu__button:hover {
  background-color: var(--str-video__button-primary-hover);
  cursor: pointer;
}
.str-video__no-media-permission,
.str-video__pending-permission {
  position: absolute;
  height: 12px;
  width: 12px;
  outline: 1px solid var(--str-video__base-color6);
  border-radius: var(--str-video__border-radius-circle);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--str-video__font-size-xxs);
  cursor: pointer;
  font-weight: 600;
  top: 0;
  right: -3px;
}
.str-video__no-media-permission {
  background-color: var(--str-video__alert-caution);
  color: var(--str-video__base-color4);
}
.str-video__pending-permission {
  background-color: var(--str-video__button-secondary-active);
  color: var(--str-video__text-color1);
}
.str-video__composite-button.str-video__device-unavailable .str-video__composite-button__button-group {
  background-color: var(--str-video__button-default-disabled);
}
.str-video__composite-button.str-video__device-unavailable .str-video__composite-button__button-group:hover {
  background-color: var(--str-video__button-default-hover);
}
.str-video__end-call__confirmation {
  padding: var(--str-video__spacing-lg);
  gap: var(--str-video__spacing-md);
  display: flex;
  flex-direction: column;
}
.str-video__end-call__leave,
.str-video__end-call__end {
  min-width: 196px;
  color: var(--str-video__text-color1);
  border: 1px solid transparent;
  padding: calc(var(--str-video__spacing-sm) - 1px) var(--str-video__spacing-lg);
}
.str-video__end-call__leave-icon,
.str-video__end-call__end-icon {
  background-color: var(--str-video__text-color1);
}
.str-video__end-call__leave {
  background-color: var(--str-video__button-tertiary-base);
}
.str-video__end-call__leave:hover {
  background-color: var(--str-video__button-tertiary-hover);
}
.str-video__end-call__end {
  background-color: var(--str-video__button-primary-base);
  border-color: var(--str-video__button-default-hover);
}
.str-video__end-call__end:hover {
  background-color: var(--str-video__button-tertiary-hover);
  border-color: transparent;
}
.str-video__end-call.str-video__end-call__leave-icon,
.str-video__icon.str-video__end-call__end-icon {
  background-color: var(--str-video__text-color1);
}
.str-video__end-recording__confirmation {
  background-color: var(--str-video__base-color7);
  border-radius: var(--str-video__border-radius-lg);
  padding: var(--str-video__spacing-xl);
  gap: var(--str-video__spacing-lg);
  display: flex;
  flex-direction: column;
}
.str-video__end-recording__header {
  display: flex;
  flex-direction: row;
  gap: var(--str-video__spacing-md);
}
.str-video__end-recording__heading {
  font-size: var(--str-video__font-size-lg);
  font-weight: 600;
  margin: 0;
}
.str-video__end-recording__description {
  margin: 0;
  color: var(--str-video__text-color2);
  font-size: var(--str-video__font-size-sm);
}
.str-video__end-recording__actions {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: var(--str-video__spacing-md);
}
.str-video__end-recording__actions .str-video__composite-button {
  width: 100%;
  gap: var(--str-video__spacing-md);
}
.str-video__end-recording__actions .str-video__composite-button:first-of-type {
  background-color: transparent;
}
.str-video__end-recording__actions .str-video__composite-button:first-of-type .str-video__composite-button__button-group {
  background-color: transparent;
  border: 1px solid var(--str-video__base-color2);
  width: 100%;
  justify-content: center;
}
.str-video__end-recording__actions .str-video__composite-button:first-of-type .str-video__composite-button__button-group:hover {
  background-color: var(--str-video__button-default-hover);
}
.str-video__end-recording__actions .str-video__composite-button .str-video__composite-button__button-group {
  background-color: var(--str-video__button-tertiary-base);
  width: 100%;
  justify-content: center;
}
.str-video__end-recording__actions .str-video__composite-button .str-video__composite-button__button-group .str-video__text-button {
  display: flex;
  align-items: center;
  gap: 5px;
}
.str-video__end-recording__actions .str-video__composite-button .str-video__composite-button__button-group:hover {
  background-color: var(--str-video__button-tertiary-hover);
}
.str-video__livestream-layout__wrapper {
  flex-grow: 1;
  overflow-y: hidden;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
}
.str-video__livestream-layout__wrapper .str-video__livestream-layout__screen-share {
  max-width: 100%;
}
.str-video__livestream-layout__wrapper .str-video__livestream-layout__screen-share .str-video__video {
  object-fit: contain;
}
.str-video__livestream-layout__wrapper .str-video__livestream-layout__floating-participant {
  position: absolute;
  width: 240px;
  height: 135px;
  box-shadow: var(--str-video__background-color1) 0 0 3px 0;
}
.str-video__livestream-layout__wrapper .str-video__livestream-layout__floating-participant--top-right {
  top: 8px;
  right: 8px;
}
.str-video__livestream-layout__wrapper .str-video__livestream-layout__floating-participant--top-left {
  top: 8px;
  left: 8px;
}
.str-video__livestream-layout__wrapper .str-video__livestream-layout__floating-participant--bottom-right {
  bottom: 8px;
  right: 8px;
}
.str-video__livestream-layout__wrapper .str-video__livestream-layout__floating-participant--bottom-left {
  bottom: 8px;
  left: 8px;
}
.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
}
.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay:hover .str-video__livestream-layout__overlay__bar {
  background-color: var(--str-video__livestream-overlay-color-hovered);
}
.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__overlay__bar {
  height: 10%;
  min-height: 40px;
  max-height: 70px;
  position: relative;
  bottom: 0;
  border-bottom-left-radius: var(--str-video__border-radius-sm);
  border-bottom-right-radius: var(--str-video__border-radius-sm);
  background-color: var(--str-video__livestream-overlay-color);
  display: flex;
  align-items: center;
  padding: 0 20px;
}
.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__live-badge {
  padding: 4px 8px;
  border-radius: var(--str-video__border-radius-xxs);
  background-color: var(--str-video__primary-color);
  color: var(--str-video__text-color1);
}
.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__viewers-count::before {
  content: var(--str-video__icon--livestream-viewers);
  margin-right: 3px;
  vertical-align: middle;
}
.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__viewers-count {
  padding: 4px 8px;
}
.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__speaker-name {
  flex: 1;
  font-size: 13px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__duration {
  flex: 1;
  text-align: center;
}
.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__go-fullscreen {
  background: var(--str-video__icon--fullscreen) center no-repeat;
  border-radius: var(--str-video__border-radius-xxs);
  cursor: pointer;
  width: 32px;
  height: 32px;
}
.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__go-fullscreen:hover {
  background-color: var(--str-video__overlay-color);
}
.str-video__livestream-layout__wrapper .str-video__livestream-layout__backstage {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.str-video__livestream-layout__wrapper .str-video__livestream-layout__backstage .str-video__livestream-layout__starts-at {
  padding: 4px 8px;
}
.str-video__livestream-layout__wrapper .str-video__livestream-layout__backstage .str-video__livestream-layout__early-viewers-count::before {
  content: var(--str-video__icon--livestream-viewers);
  margin-right: 3px;
  vertical-align: middle;
}
.str-video__livestream-layout__wrapper .str-video__livestream-layout__backstage .str-video__livestream-layout__early-viewers-count {
  padding: 4px 8px;
}
.str-video__paginated-grid-layout__wrapper {
  flex-grow: 1;
}
.str-video__paginated-grid-layout {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
}
.str-video__paginated-grid-layout .str-video__paginated-grid-layout__group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 110vh;
  padding-inline: 1.25rem;
  margin: auto;
  width: 100%;
}
.str-video__paginated-grid-layout .str-video__paginated-grid-layout__group .str-video__participant-view {
  flex: 0 1 calc(25% - 6px);
}
.str-video__paginated-grid-layout .str-video__paginated-grid-layout__group.str-video__paginated-grid-layout--one .str-video__participant-view {
  flex: 0 1 calc(100% - 6px);
}
.str-video__paginated-grid-layout .str-video__paginated-grid-layout__group.str-video__paginated-grid-layout--two-four .str-video__participant-view {
  flex: 0 1 calc(50% - 6px);
}
.str-video__paginated-grid-layout .str-video__paginated-grid-layout__group.str-video__paginated-grid-layout--five-nine .str-video__participant-view {
  flex: 0 1 calc(33% - 6px);
}
.str-video__speaker-layout__wrapper {
  flex-grow: 1;
  overflow-y: hidden;
}
.str-video__speaker-layout {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  width: 100%;
  gap: 1rem;
  padding-inline: 2px;
  padding: 2px;
}
.str-video__speaker-layout .str-video__participant-view {
  aspect-ratio: 16/9;
}
.str-video__speaker-layout .str-video__speaker-layout__spotlight {
  display: flex;
  justify-content: center;
  min-height: 0;
  height: 100%;
}
.str-video__speaker-layout .str-video__speaker-layout__spotlight .str-video__participant-view--speaking:has(.str-video__video--screen-share) {
  outline: none;
}
.str-video__speaker-layout .str-video__speaker-layout__spotlight .str-video__video {
  height: 100%;
  width: 100%;
}
.str-video__speaker-layout .str-video__speaker-layout__spotlight .str-video__participant-details,
.str-video__speaker-layout .str-video__speaker-layout__spotlight .str-video__call-controls__button {
  opacity: 1;
}
.str-video__speaker-layout .str-video__speaker-layout__participants-bar-buttons-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.str-video__speaker-layout .str-video__speaker-layout__participants-bar-buttons-wrapper > .str-video__call-controls__button .str-video__icon {
  width: 1rem;
  height: 1rem;
}
.str-video__speaker-layout .str-video__speaker-layout__participants-bar-buttons-wrapper .str-video__speaker-layout__participants-bar--button-left {
  position: absolute;
  left: 0.5rem;
}
.str-video__speaker-layout .str-video__speaker-layout__participants-bar-buttons-wrapper .str-video__speaker-layout__participants-bar--button-right {
  position: absolute;
  right: 0.5rem;
}
.str-video__speaker-layout .str-video__speaker-layout__participants-bar-buttons-wrapper .str-video__speaker-layout__participants-bar--button-top {
  position: absolute;
  top: 0.5rem;
}
.str-video__speaker-layout .str-video__speaker-layout__participants-bar-buttons-wrapper .str-video__speaker-layout__participants-bar--button-bottom {
  position: absolute;
  bottom: 0.5rem;
}
.str-video__speaker-layout .str-video__speaker-layout__participants-bar-wrapper {
  scrollbar-width: none;
}
.str-video__speaker-layout .str-video__speaker-layout__participants-bar-wrapper::-webkit-scrollbar {
  display: none;
}
.str-video__speaker-layout .str-video__speaker-layout__participants-bar-wrapper .str-video__speaker-layout__participants-bar {
  display: flex;
  align-items: center;
}
.str-video__speaker-layout .str-video__speaker-layout__participants-bar-wrapper .str-video__speaker-layout__participants-bar .str-video__speaker-layout__participant-tile {
  width: 280px;
  min-width: 280px;
  max-width: 25vh;
  padding: 5px;
}
.str-video__speaker-layout--variant-top {
  flex-direction: column-reverse;
}
.str-video__speaker-layout--variant-left {
  flex-direction: row-reverse;
}
.str-video__speaker-layout--variant-right {
  flex-direction: row;
}
.str-video__speaker-layout--variant-left .str-video__speaker-layout__participants-bar-wrapper,
.str-video__speaker-layout--variant-right .str-video__speaker-layout__participants-bar-wrapper {
  overflow-y: auto;
  max-height: 100%;
}
.str-video__speaker-layout--variant-left .str-video__speaker-layout__participants-bar,
.str-video__speaker-layout--variant-right .str-video__speaker-layout__participants-bar {
  flex-direction: column;
}
.str-video__speaker-layout--variant-left .str-video__speaker-layout__spotlight,
.str-video__speaker-layout--variant-right .str-video__speaker-layout__spotlight {
  width: 100%;
}
.str-video__speaker-layout--variant-left .str-video__participant-view,
.str-video__speaker-layout--variant-right .str-video__participant-view {
  max-width: unset;
}
.str-video__speaker-layout--variant-top .str-video__speaker-layout__participants-bar-wrapper,
.str-video__speaker-layout--variant-bottom .str-video__speaker-layout__participants-bar-wrapper {
  overflow-x: auto;
}
.str-video__speaker-layout--variant-top .str-video__speaker-layout__participants-bar,
.str-video__speaker-layout--variant-bottom .str-video__speaker-layout__participants-bar {
  flex-direction: row;
}
.str-video__speaker-layout--variant-top .str-video__participant-view,
.str-video__speaker-layout--variant-bottom .str-video__participant-view {
  max-width: 110vh;
}
@media (min-width: 600px) {
  .str-video__speaker-layout .str-video__speaker-layout__spotlight {
    align-items: center;
    height: auto;
  }
  .str-video__speaker-layout .str-video__speaker-layout__spotlight .str-video__video {
    object-fit: contain;
  }
}
.str-video__pip-layout {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  overflow: hidden;
  justify-content: center;
  gap: 1rem;
  padding-inline: 1rem;
  height: 100%;
}
.str-video__pip-screen-share-local {
  display: flex;
  gap: var(--str-video__spacing-sm);
  border-radius: var(--str-video__border-radius-sm);
  padding: var(--str-video__spacing-md);
  font-size: var(--str-video__font-size-sm);
}
.str-video__pip-screen-share-local .str-video__icon {
  width: 1rem;
  height: 1rem;
}
.str-video__pip-screen-share-local {
  background: var(--str-video__background-color5);
}
.str-video__participant-list {
  display: flex;
  flex-direction: column;
}
.str-video__participant-list .str-video__participant-list-header {
  display: flex;
  align-items: center;
}
.str-video__participant-list .str-video__participant-list-header .str-video__participant-list-header__title {
  flex: 1;
  font-size: var(--str-video__font-size-sm);
}
.str-video__participant-list .str-video__participant-list-header .str-video__participant-list-header__close-button > span {
  height: 15px;
  width: 15px;
}
.str-video__participant-list .str-video__search-input__container {
  margin-top: var(--str-video__spacing-md);
}
.str-video__participant-list .str-video__participant-list__content-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--str-video__spacing-md);
  justify-content: flex-end;
}
.str-video__participant-list .str-video__participant-list__content-header .str-video__participant-list__content-header-title {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.str-video__participant-list .str-video__participant-list__content-header .str-video__call-controls__button {
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  padding: unset;
  align-items: center;
  justify-content: center;
}
.str-video__participant-list .str-video__participant-list__content-header .str-video__call-controls__button .str-video__icon--filter {
  width: 1rem;
  height: 1rem;
}
.str-video__participant-list .str-video__participant-list__content {
  height: auto;
  flex-grow: 1;
  overflow-y: auto;
  margin-top: var(--str-video__spacing-xl);
}
.str-video__participant-list .str-video__participant-list__footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 0.5rem;
}
.str-video__participant-list .str-video__search-results--loading {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.str-video__participant-list .str-video__search-results--loading .str-video__loading-indicator__icon {
  height: 3rem;
  width: 3rem;
  -webkit-mask-size: 3rem;
  mask-size: 3rem;
}
.str-video__participant-list .str-video__participant-list--empty {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--str-video__spacing-md);
  font-size: var(--str-video__font-size-sm);
}
.str-video__invite-link-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: 100%;
  position: relative;
  padding-block: 0.5rem;
}
.str-video__invite-link-button .str-video__invite-link-tooltip {
  position: absolute;
  bottom: 110%;
}
.str-video__invite-link-button .str-video__invite-participant-icon {
  height: 20px;
  width: 20px;
}
.str-video__participant-listing-item {
  display: flex;
  justify-content: space-between;
  gap: var(--str-video__spacing-sm);
  padding-block: 0.5rem;
  width: 100%;
  align-items: center;
}
.str-video__participant-listing-item .str-video__call-controls__button {
  padding: unset;
}
.str-video__participant-listing-item .str-video__participant-listing-item__display-name {
  flex: 1;
  white-space: nowrap;
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  text-overflow: ellipsis;
}
.str-video__participant-listing-item .str-video__participant-avatar {
  display: flex;
  align-items: center;
  gap: var(--str-video__spacing-sm);
}
.str-video__participant-listing-item .str-video__participant-listing-item__media-indicator-group {
  display: flex;
  align-items: center;
  gap: var(--str-video__spacing-sm);
}
.str-video__participant-listing-item .str-video__participant-listing-item__media-indicator-group .str-video__participant-listing-item__icon {
  width: 0.75rem;
  height: 0.75rem;
}
.str-video__participant-listing-item .str-video__participant-listing-item__display-name {
  font-size: 13px;
}
.str-video__participant-listing-item .str-video__participant-listing-item__media-indicator-group .str-video__participant-listing-item__icon-mic {
  -webkit-mask-image: var(--str-video__icon--mic);
  mask-image: var(--str-video__icon--mic);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--str-video__text-color1);
}
.str-video__participant-listing-item .str-video__participant-listing-item__media-indicator-group .str-video__participant-listing-item__icon-mic-off {
  -webkit-mask-image: var(--str-video__icon--mic-off);
  mask-image: var(--str-video__icon--mic-off);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--str-video__danger-color);
}
.str-video__participant-listing-item .str-video__participant-listing-item__media-indicator-group .str-video__participant-listing-item__icon-camera {
  -webkit-mask-image: var(--str-video__icon--camera);
  mask-image: var(--str-video__icon--camera);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--str-video__text-color1);
}
.str-video__participant-listing-item .str-video__participant-listing-item__media-indicator-group .str-video__participant-listing-item__icon-camera-off {
  -webkit-mask-image: var(--str-video__icon--camera-off);
  mask-image: var(--str-video__icon--camera-off);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--str-video__danger-color);
}
.str-video__participant-listing-item .str-video__participant-listing-item__media-indicator-group .str-video__participant-listing-item__icon-pinned {
  -webkit-mask-image: var(--str-video__icon--pin);
  mask-image: var(--str-video__icon--pin);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--str-video__text-color1);
}
.str-video__call-preview {
  width: 100%;
  height: auto;
  display: inline-block;
  object-fit: contain;
}
.str-video__call-recording-list__list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}
.str-video__call-recording-list__list:first-of-type .str-video__call-recording-list__item {
  font-weight: 600;
}
.str-video__call-recording-list__item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: var(--str-video__font-size-xs);
  border-bottom: 1px solid var(--str-video__base-color2);
  padding: var(--str-video__spacing-sm) 0;
  gap: var(--str-video__spacing-sm);
}
.str-video__call-recording-list__item:last-of-type {
  border-bottom: none;
}
.str-video__call-recording-list__filename {
  width: 200px;
}
.str-video__call-recording-list__time {
  width: 100px;
}
.str-video__call-recording-list__download {
  display: flex;
  justify-content: flex-end;
  width: 100px;
}
.str-video__call-recording-list__filename,
.str-video__call-recording-list__time {
  text-overflow: ellipsis;
  overflow: hidden;
}
.str-video__call-recording-list-item__action-button--download .str-video__icon--download {
  height: 32px;
  width: 32px;
}
.str-video__call-recording-list-item__action-button--download:hover .str-video__icon--download {
  cursor: pointer;
  background-color: var(--str-video__brand-color1);
}
.str-video__call-recording-list__title {
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.25rem;
}
.str-video__call-controls__button--icon-call-recordings {
  -webkit-mask-image: var(--str-video__icon--film-roll);
  mask-image: var(--str-video__icon--film-roll);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 2px;
  mask-size: 2px;
  background-color: var(--str-video__text-color1);
}
.str-video__call-recordings__toggle-button--active {
  background-color: var(--str-video__background-color7);
}
.str-video__refresh-button {
  background-color: transparent;
  cursor: pointer;
  border-radius: 4px;
}
.str-video__refresh-button:hover {
  background-color: var(--str-video__background-color7);
}
.str-video__refresh-button:active {
  background-color: var(--str-video__background-color5);
  transition: background-color 0.2s ease-out;
}
.str-video__refresh-button .str-video__refresh-button--icon {
  -webkit-mask-image: var(--str-video__icon--refresh);
  mask-image: var(--str-video__icon--refresh);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--str-video__text-color1);
}
.str-video__call-recording-list__listing--icon-empty {
  -webkit-mask-image: var(--str-video__icon--film-roll);
  mask-image: var(--str-video__icon--film-roll);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--str-video__text-color1);
}
.str-video__call-stats {
  border-radius: var(--str-video__border-radius-lg);
  background-color: var(--str-video__base-color7);
  padding: var(--str-video__spacing-md);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.str-video__call-stats h3 {
  margin: unset;
}
.str-video__call-stats .str-video__call-stats__header {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--str-video__spacing-md);
}
.str-video__call-stats .str-video__call-stats__heading {
  display: flex;
  align-items: center;
}
.str-video__call-stats .str-video__call-stats__icon {
  margin-right: var(--str-video__spacing-sm);
  height: 18px;
  width: 18px;
}
.str-video__call-stats .str-video__call-stats__description {
  font-size: var(--str-video__font-size-sm);
  margin-bottom: var(--str-video__spacing-sm);
  font-weight: 600;
}
.str-video__call-stats .str-video__call-stats__card-container {
  --gap: 1rem;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: var(--gap);
}
.str-video__call-stats .str-video__call-stats__card {
  display: flex;
  justify-content: space-between;
  background-color: var(--str-video__background-color4);
  border-radius: var(--str-video__border-radius-xs);
  width: calc(50% - var(--gap) / 2);
  padding: 0.5rem 0.5rem;
}
.str-video__call-stats .str-video__call-stats__card .str-video__call-stats__card-content {
  display: flex;
  flex-direction: column;
}
.str-video__call-stats .str-video__call-stats__card .str-video__call-stats__card-label {
  display: flex;
  color: var(--str-video__text-color2);
  font-size: 0.5625rem;
  font-weight: 500;
  text-transform: uppercase;
}
.str-video__call-stats .str-video__call-stats__card .str-video__call-stats__card-value {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.25rem;
}
.str-video__call-stats .str-video__call-explanation__icon {
  height: 12px;
  width: 12px;
  margin-left: var(--str-video__spacing-xs);
}
.str-video__call-stats .str-video__call-explanation__icon:hover {
  cursor: pointer;
}
.str-video__call-stats .str-video__call-explanation__description {
  background-color: var(--str-video__base-color3);
  padding: var(--str-video__spacing-xs);
  font-size: var(--str-video__font-size-xs);
  border-radius: var(--str-video__border-radius-xs);
}
.str-video__call-stats .str-video__call-stats-line-chart-container {
  position: relative;
  margin: auto;
  height: 170px;
  width: 100%;
}
.str-video__call-stats .str-video__call-stats__tag {
  border-radius: var(--str-video__border-radius-sm);
  padding: var(--str-video__spacing-xs);
  font-size: var(--str-video__font-size-sm);
  font-weight: 600;
  height: 30px;
}
.str-video__call-stats .str-video__call-stats__tag--good {
  color: var(--str-video__alert-success);
  background-color: var(--str-video__alert-success-background);
}
.str-video__call-stats .str-video__call-stats__tag--ok {
  color: var(--str-video__alert-caution);
  background-color: var(--str-video__alert-caution-background);
}
.str-video__call-stats .str-video__call-stats__tag--bad {
  color: var(--str-video__alert-warning);
  background-color: var(--str-video__alert-warming-background);
}
.str-video__device-settings__button .str-video__call-controls__button--icon-device-settings {
  width: 1.25rem;
  height: 1.25rem;
}
.str-video__device-settings {
  padding: 0.625rem;
  z-index: 1;
  font-family: "Inter";
}
.str-video__device-settings__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 16px 0px 16px;
  margin-bottom: 33px;
}
.str-video__icon.str-video__device-settings__settings-icon {
  height: 24px;
  width: 24px;
  color: var(--str-video__base-color1);
}
.str-video__device-settings__heading {
  width: 100%;
  justify-self: start;
  margin: unset;
  margin-left: 8px;
  color: var(--str-video__base-color1);
  font-size: 24;
  font-weight: 500;
  word-wrap: "break-word";
}
.str-video__device-settings__close-button {
  color: var(--str-video__base-color1);
  background-color: transparent;
}
.str-video__device-settings__device-kind {
  padding: var(--str-video__spacing-lg);
}
.str-video__device-settings__device-kind .str-video__device-settings__device-selector-title {
  font-size: var(--str-video__font-size-xs);
  line-height: 1.25rem;
  padding-bottom: 0.5rem;
  font-size: 13px;
  margin-bottom: 8px;
}
.str-video__device-settings__device-kind .str-video__option,
.str-video__device-settings__device-kind .str-video__device-settings__option {
  display: flex;
  align-items: center;
  border-radius: var(--str-video__border-radius-lg);
  background-color: var(--str-video__button-primary-base);
  padding: var(--str-video__spacing-sm) var(--str-video__spacing-lg);
  gap: 8px;
  font-weight: 600;
  font-size: var(--str-video__font-size-sm);
  line-height: var(--str-video__spaging-lg);
}
.str-video__device-settings__device-kind .str-video__option:not(:first-of-type),
.str-video__device-settings__device-kind .str-video__device-settings__option:not(:first-of-type) {
  margin-top: 8px;
}
.str-video__device-settings__device-kind .str-video__option__icon--selected,
.str-video__device-settings__device-kind .str-video__device-settings__option__icon--selected {
  background-color: var(--str-video__brand-color1);
}
.str-video__device-settings__device-kind .str-video__option:hover,
.str-video__device-settings__device-kind .str-video__device-settings__option:hover {
  background-color: var(--str-video__button-default-hover);
  cursor: pointer;
}
.str-video__device-settings__device-kind .str-video__option--selected,
.str-video__device-settings__device-kind .str-video__option--active,
.str-video__device-settings__device-kind .str-video__device-settings__option--selected,
.str-video__device-settings__device-kind .str-video__device-settings__option--active {
  background-color: var(--str-video__button-default-hover);
}
.str-video__device-settings__device-kind .str-video__option input[type=radio],
.str-video__device-settings__device-kind .str-video__device-settings__option input[type=radio] {
  margin: 0;
  height: 1rem;
  width: 1rem;
  display: grid;
  place-content: center;
}
.str-video__device-settings__device-kind .str-video__option input[type=radio]::before,
.str-video__device-settings__device-kind .str-video__device-settings__option input[type=radio]::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  transform: scale(0);
}
.str-video__device-settings__device-kind .str-video__option input[type=radio]:checked::before,
.str-video__device-settings__device-kind .str-video__device-settings__option input[type=radio]:checked::before {
  transform: scale(1);
}
.str-video__device-settings__device-kind .str-video__option input[type=radio]:checked,
.str-video__device-settings__device-kind .str-video__device-settings__option input[type=radio]:checked {
  border-color: var(--str-video__primary-color);
}
.str-video__dropdown {
  position: relative;
}
.str-video__dropdown-selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--str-video__base-color4);
  border-radius: var(--str-video__border-radius-lg);
  border: 1px solid var(--str-video__base-color6);
}
.str-video__dropdown-selected__label {
  display: flex;
  align-items: center;
  font-weight: 600;
  padding: var(--str-video__spacing-sm);
  font-size: var(--str-video__font-size-xs);
}
.str-video__dropdown-selected__icon {
  margin-right: var(--str-video__spacing-sm);
}
.str-video__dropdown-selected__chevron {
  margin-right: var(--str-video__spacing-md);
}
.str-video__dropdown-selected > *:hover,
.str-video__dropdown-selected:hover {
  cursor: pointer;
}
.str-video__dropdown-selected:hover {
  border: 1px solid var(--str-video__brand-color1);
}
.str-video__dropdown-list {
  display: flex;
  flex-direction: column;
  position: absolute;
  z-index: 2;
  width: 100%;
  margin-top: var(--str-video__spacing-sm);
  background-color: var(--str-video__base-color6);
  border-radius: var(--str-video__border-radius-lg);
  padding: var(--str-video__spacing-md);
  gap: var(--str-video__spacing-sm);
  box-shadow: 0 0 24px -4px rgba(0, 0, 0, 0.64);
}
.str-video__dropdown-option {
  display: flex;
  align-items: center;
  border-radius: var(--str-video__border-radius-lg);
  padding: 8px 16px;
  gap: 8px;
  font-weight: 600;
  font-size: var(--str-video__font-size-sm);
}
.str-video__dropdown-option:hover {
  background-color: var(--str-video__button-default-hover);
  cursor: pointer;
}
.str-video__dropdown-option--selected {
  background-color: var(--str-video__button-primary-active);
  color: var(--str-video__text-color1);
}
.str-video__dropdown-option--selected:hover {
  background-color: var(--str-video__button-primary-hover);
}
.str-video__dropdown-icon {
  background-color: var(--str-video__icon-default);
}
.str-video__dropdown__option:hover .str-video__dropdown-icon {
  background-color: var(--str-video__icon-hover);
}
.str-video__dropdown-option--selected .str-video__dropdown-icon {
  background-color: var(--str-video__text-color1);
}
.str-video__dropdown-label {
  font-size: var(--str-video__font-size-xs);
}
.str-video__dropdown__option:hover .str-video__dropdown-label {
  color: var(--str-video__base-color1);
}
@media (min-width: 600px) {
  .str-video__dropdown-selected__label {
    font-size: var(--str-video__font-size-sm);
  }
}
.str-video__icon {
  background-color: var(--str-video__icon-default);
}
.str-video__icon--reactions {
  -webkit-mask-image: var(--str-video__icon--reactions);
  mask-image: var(--str-video__icon--reactions);
}
.str-video__icon--call-latency {
  -webkit-mask-image: var(--str-video__icon--call-latency);
  mask-image: var(--str-video__icon--call-latency);
}
.str-video__icon--network-quality {
  -webkit-mask-image: var(--str-video__icon--network-quality);
  mask-image: var(--str-video__icon--network-quality);
}
.str-video__icon--recording-on {
  -webkit-mask-image: var(--str-video__icon--recording-on);
  mask-image: var(--str-video__icon--recording-on);
}
.str-video__icon--caret-up {
  -webkit-mask-image: var(--str-video__icon--caret-up);
  mask-image: var(--str-video__icon--caret-up);
}
.str-video__icon--download {
  -webkit-mask-image: var(--str-video__icon--download);
  mask-image: var(--str-video__icon--download);
}
.str-video__icon--caret-down {
  -webkit-mask-image: var(--str-video__icon--caret-down);
  mask-image: var(--str-video__icon--caret-down);
  transform: rotate(180deg);
}
.str-video__icon--chevron-right {
  -webkit-mask-image: var(--str-video__icon--chevron-right);
  mask-image: var(--str-video__icon--chevron-right);
}
.str-video__icon--recording-off {
  -webkit-mask-image: var(--str-video__icon--recording-off);
  mask-image: var(--str-video__icon--recording-off);
}
.str-video__icon--loading {
  -webkit-mask-image: var(--str-video__icon--loading);
  mask-image: var(--str-video__icon--loading);
  transform: rotate(360deg);
  transition-duration: 1s;
  transition-delay: now;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.str-video__icon--logout {
  -webkit-mask-image: var(--str-video__icon--logout);
  mask-image: var(--str-video__icon--logout);
}
.str-video__icon--chevron-up {
  -webkit-mask-image: var(--str-video__icon--chevron-up);
  mask-image: var(--str-video__icon--chevron-up);
}
.str-video__icon--chevron-down {
  -webkit-mask-image: var(--str-video__icon--chevron-down);
  mask-image: var(--str-video__icon--chevron-down);
}
.str-video__icon--screen-share-on {
  -webkit-mask-image: var(--str-video__icon--screen-share-on);
  mask-image: var(--str-video__icon--screen-share-on);
}
.str-video__icon--screen-share-off {
  -webkit-mask-image: var(--str-video__icon--screen-share-off);
  mask-image: var(--str-video__icon--screen-share-off);
}
.str-video__icon--caret-down {
  transform: rotate(180deg);
  -webkit-mask-image: var(--str-video__icon--caret);
  mask-image: var(--str-video__icon--caret);
}
.str-video__icon--caret-up {
  -webkit-mask-image: var(--str-video__icon--caret);
  mask-image: var(--str-video__icon--caret);
}
.str-video__icon--caret-right {
  transform: rotate(90deg);
  -webkit-mask-image: var(--str-video__icon--caret);
  mask-image: var(--str-video__icon--caret);
}
.str-video__icon--caret-left {
  transform: rotate(-90deg);
  -webkit-mask-image: var(--str-video__icon--caret);
  mask-image: var(--str-video__icon--caret);
}
.str-video__icon--close {
  -webkit-mask-image: var(--str-video__icon--close);
  mask-image: var(--str-video__icon--close);
}
.str-video__icon--mic {
  -webkit-mask-image: var(--str-video__icon--mic);
  mask-image: var(--str-video__icon--mic);
}
.str-video__icon--mic-off {
  -webkit-mask-image: var(--str-video__icon--mic-off);
  mask-image: var(--str-video__icon--mic-off);
}
.str-video__icon--camera {
  -webkit-mask-image: var(--str-video__icon--camera);
  mask-image: var(--str-video__icon--camera);
}
.str-video__icon--camera-off {
  -webkit-mask-image: var(--str-video__icon--camera-off);
  mask-image: var(--str-video__icon--camera-off);
}
.str-video__icon--camera-off-outline {
  -webkit-mask-image: var(--str-video__icon--camera-off-outline);
  mask-image: var(--str-video__icon--camera-off-outline);
}
.str-video__icon--call-end {
  -webkit-mask-image: var(--str-video__icon--call-end);
  mask-image: var(--str-video__icon--call-end);
}
.str-video__icon--call-accept {
  -webkit-mask-image: var(--str-video__icon--call-accept);
  mask-image: var(--str-video__icon--call-accept);
}
.str-video__icon--info {
  -webkit-mask-image: var(--str-video__icon--info-icon);
  mask-image: var(--str-video__icon--info-icon);
}
.str-video__icon--stats {
  -webkit-mask-image: var(--str-video__icon--stats);
  mask-image: var(--str-video__icon--stats);
}
.str-video__icon--speaker {
  -webkit-mask-image: var(--str-video__icon--speaker);
  mask-image: var(--str-video__icon--speaker);
}
.str-video__icon--ellipsis {
  -webkit-mask-image: var(--str-video__icon--ellipsis);
  mask-image: var(--str-video__icon--ellipsis);
}
.str-video__icon--pin {
  -webkit-mask-image: var(--str-video__icon--pin);
  mask-image: var(--str-video__icon--pin);
}
.str-video__icon--no-audio {
  -webkit-mask-image: var(--str-video__icon--no-audio);
  mask-image: var(--str-video__icon--no-audio);
}
.str-video__icon--not-allowed {
  -webkit-mask-image: var(--str-video__icon--not-allowed);
  mask-image: var(--str-video__icon--not-allowed);
}
.str-video__icon--film-roll {
  -webkit-mask-image: var(--str-video__icon--film-roll);
  mask-image: var(--str-video__icon--film-roll);
}
.str-video__icon--device-settings {
  -webkit-mask-image: var(--str-video__icon--settings);
  mask-image: var(--str-video__icon--settings);
}
.str-video__icon--filter {
  -webkit-mask-image: var(--str-video__icon--filter);
  mask-image: var(--str-video__icon--filter);
}
.str-video__icon--refresh {
  -webkit-mask-image: var(--str-video__icon--refresh);
  mask-image: var(--str-video__icon--refresh);
}
.str-video__icon--kick-user {
  -webkit-mask-image: var(--str-video__icon--kick-user);
  mask-image: var(--str-video__icon--kick-user);
}
.str-video__icon {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}
.str-video__loading-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.str-video__loading-indicator__icon.spinner {
  -webkit-mask-image: var(--str-video__icon--loading);
  mask-image: var(--str-video__icon--loading);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1rem;
  mask-size: 1rem;
  background-color: var(--str-video__text-color2);
  animation: rotation 1s linear infinite;
  width: 1rem;
  height: 1rem;
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.str-video__menu-container {
  z-index: 2;
  width: max-content;
}
.str-video__menu-container::-webkit-scrollbar {
  display: none;
}
.str-video__menu-container {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.str-video__portal {
  position: fixed;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  background-color: var(--str-video__backdrop1);
  left: 0;
  top: 0;
}
.str-video__portal:hover {
  cursor: pointer;
}
.str-video__portal-content {
  z-index: 2;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.str-video__menu-container {
  background-color: var(--str-video__base-color6);
  border-radius: var(--str-video__border-radius-lg);
  box-shadow: 0 0 24px -4px rgba(0, 0, 0, 0.64);
}
.str-video__generic-menu {
  list-style: none;
  margin: unset;
  padding: var(--str-video__spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--str-video__spacing-xs);
}
.str-video__generic-menu .str-video__generic-menu--item {
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: var(--str-video__font-size-md);
  display: flex;
}
.str-video__generic-menu .str-video__generic-menu--item button {
  all: unset;
  width: 100%;
  font-size: 13px;
  border-radius: var(--str-video__border-radius-lg);
  background-color: var(--str-video__button-primary-base);
  padding: var(--str-video__spacing-xs) var(--str-video__spacing-lg);
  gap: 10px;
  display: flex;
  align-items: center;
  position: relative;
}
.str-video__generic-menu .str-video__generic-menu--item button:hover {
  background-color: var(--str-video__button-default-hover);
  cursor: pointer;
}
.str-video__generic-menu .str-video__generic-menu--item button--selected,
.str-video__generic-menu .str-video__generic-menu--item button--active {
  background-color: var(--str-video__button-primary-hover);
}
.str-video__generic-menu .str-video__generic-menu--item button[aria-selected] {
  padding: 5px 10px 5px 26px;
}
.str-video__generic-menu .str-video__generic-menu--item button[aria-selected=true]::after {
  content: "●";
  font-size: 10px;
  left: 10px;
  position: absolute;
}
.str-video__notification {
  padding: 0.625rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.str-video__notification .str-video__notification__icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}
.str-video__notification .str-video__notification__message {
  flex: 1;
}
.str-video__notification .str-video__notification__close {
  display: inline-block;
  width: 1rem;
  height: 1rem;
}
.str-video__notification .str-video__notification__close:hover {
  cursor: pointer;
}
.str-video__notification {
  background-color: var(--str-video__background-color1);
  border-radius: var(--str-video__border-radius-xs);
  z-index: 100;
}
.str-video__notification .str-video__notification__icon {
  -webkit-mask-image: var(--str-video__icon--info-icon);
  mask-image: var(--str-video__icon--info-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.5rem;
  mask-size: 1.5rem;
  background-color: var(--str-video__text-color1);
}
.str-video__notification .str-video__notification__message {
  font-size: 0.75rem;
}
.str-video__participant-view {
  position: relative;
  width: 100%;
  max-width: 1280px;
  max-height: 100%;
  min-height: 0;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--str-video__border-radius-sm);
}
.str-video__participant-view--speaking {
  outline: 2px solid var(--str-video__primary-color);
}
.str-video__participant-view .str-video__call-controls__button {
  transition: opacity 200ms ease-out;
  opacity: 0.3;
  color: var(--str-video__text-color1);
}
.str-video__participant-view:hover .str-video__call-controls__button {
  opacity: 1;
}
.str-video__participant-view > .str-video__call-controls__button {
  position: absolute;
  top: 0.875rem;
  left: 0.875rem;
  padding: 0.3rem;
}
.str-video__participant-view .str-video__participant-details {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--str-video__spacing-sm);
  border-radius: 0 var(--str-video__border-radius-xs) 0 var(--str-video__border-radius-sm);
  background-color: var(--str-video__background-color4);
}
.str-video__participant-view .str-video__participant-details .str-video__participant-details__name {
  display: flex;
  align-items: center;
  gap: var(--str-video__spacing-sm);
  padding: 4px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--str-video__font-size-sm);
}
.str-video__participant-view .str-video__participant-details .str-video__participant-details__name .str-video__participant-details__name--audio-muted {
  width: 1rem;
  height: 1rem;
  -webkit-mask-size: 1rem;
  mask-size: 1rem;
  background-color: var(--str-video__text-color1);
  -webkit-mask-image: var(--str-video__icon--mic-off);
  mask-image: var(--str-video__icon--mic-off);
}
.str-video__participant-view .str-video__participant-details .str-video__participant-details__name .str-video__participant-details__name--video-muted {
  width: 1rem;
  height: 1rem;
  -webkit-mask-size: 1rem;
  mask-size: 1rem;
  background-color: var(--str-video__text-color1);
  -webkit-mask-image: var(--str-video__icon--camera-off);
  mask-image: var(--str-video__icon--camera-off);
}
.str-video__participant-view .str-video__participant-details .str-video__participant-details__name .str-video__participant-details__name--track-paused {
  width: 1rem;
  height: 1rem;
  -webkit-mask-size: 1rem;
  mask-size: 1rem;
  background-color: var(--str-video__text-color1);
  mask-image: var(--str-video__icon--low-bandwidth);
  -webkit-mask-image: var(--str-video__icon--low-bandwidth);
}
.str-video__participant-view .str-video__participant-details .str-video__participant-details__name .str-video__participant-details__name--pinned {
  cursor: pointer;
  width: 1rem;
  -webkit-mask-size: 1rem;
  mask-size: 1rem;
  background-color: var(--str-video__text-color1);
  width: 0.8rem;
  height: 1rem;
  -webkit-mask-size: 0.8rem;
  mask-size: 0.8rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-image: var(--str-video__icon--pin);
  mask-image: var(--str-video__icon--pin);
}
.str-video__participant-view .str-video__participant-details .str-video__participant-details__name .str-video__participant-details__name--network-stats {
  width: 1rem;
  height: 1rem;
  -webkit-mask-size: 1rem;
  mask-size: 1rem;
  background-color: var(--str-video__text-color1);
  background-image: var(--str-video__icon--network-quality);
  cursor: pointer;
  margin-right: 0.625rem;
}
.str-video__participant-view .str-video__participant-details__connection-quality {
  position: absolute;
  bottom: 0;
  right: 0;
  border-radius: var(--str-video__border-radius-sm) 0 var(--str-video__border-radius-sm) 0;
  width: 24px;
  height: 24px;
  display: block;
  background-size: cover;
  background-color: var(--str-video__background-color4);
}
.str-video__participant-view .str-video__participant-details__connection-quality--poor {
  background-image: var(--str-video__icon--connection-quality-poor);
}
.str-video__participant-view .str-video__participant-details__connection-quality--good {
  background-image: var(--str-video__icon--connection-quality-good);
}
.str-video__participant-view .str-video__participant-details__connection-quality--excellent {
  background-image: var(--str-video__icon--connection-quality-excellent);
}
.str-video__speech-indicator {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1px;
  height: 16px;
}
.str-video__speech-indicator .str-video__speech-indicator__bar {
  width: 3px;
  height: 20%;
  background-color: var(--str-video__primary-color);
  border-radius: 2px;
  animation-duration: 0.4s;
  animation-iteration-count: 1;
  animation-name: speech-indicator-silence;
  animation-timing-function: ease-in-out;
}
.str-video__speech-indicator.str-video__speech-indicator--dominant .str-video__speech-indicator__bar {
  background-color: var(--str-video__primary-color);
}
.str-video__speech-indicator.str-video__speech-indicator--speaking .str-video__speech-indicator__bar {
  height: 100%;
  animation-iteration-count: infinite;
}
.str-video__speech-indicator.str-video__speech-indicator--speaking .str-video__speech-indicator__bar:nth-child(1) {
  height: 70%;
  animation-duration: 0.8s;
  animation-name: speech-indicator-quiet;
}
.str-video__speech-indicator.str-video__speech-indicator--speaking .str-video__speech-indicator__bar:nth-child(2) {
  height: 80%;
  animation-duration: 1s;
  animation-name: speech-indicator-loud;
}
.str-video__speech-indicator.str-video__speech-indicator--speaking .str-video__speech-indicator__bar:nth-child(3) {
  height: 60%;
  animation-duration: 0.9s;
  animation-name: speech-indicator-quiet;
}
@keyframes speech-indicator-silence {
  25% {
    transform: scaleY(2);
  }
  50% {
    transform: scaleY(2.5);
  }
  75% {
    transform: scaleY(1);
  }
}
@keyframes speech-indicator-quiet {
  25% {
    transform: scaleY(0.5);
  }
  50% {
    transform: scaleY(0.3);
  }
  75% {
    transform: scaleY(0.5);
  }
}
@keyframes speech-indicator-loud {
  25% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.45);
  }
  75% {
    transform: scaleY(1.1);
  }
}
.str-video__permission-requests {
  background-color: var(--str-video__background-color1);
  border-radius: 8px;
  padding: 10px;
  position: relative;
}
.str-video__permission-requests .str-video__permission-requests__notification,
.str-video__permission-requests .str-video__permission-request {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  align-items: center;
}
.str-video__permission-requests .str-video__permission-requests__notification__message,
.str-video__permission-requests .str-video__permission-request__message {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.str-video__permission-requests .str-video__permission-request__button {
  background-color: transparent;
  border: 1px solid var(--str-video__text-color1);
  border-radius: 4px;
  color: var(--str-video__color1);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  padding: 8px;
  min-width: 120px;
}
.str-video__permission-requests .str-video__permission-request__button--allow {
  background-color: var(--str-video__primary-color);
  border: 1px solid var(--str-video__primary-color);
}
.str-video__permission-requests .str-video__permission-requests-list {
  background-color: var(--str-video__background-color1);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  padding: 10px;
  width: 100%;
  z-index: 1;
  opacity: 0.9;
  overflow-x: scroll;
  overflow-y: hidden;
}
.str-video__permission-requests .str-video__permission-requests-list::-webkit-scrollbar {
  display: none;
}
.str-video__reaction {
  position: absolute;
  right: 0.875rem;
  top: 0.875rem;
}
.str-video__reaction .str-video__reaction__emoji {
  display: flex;
  line-height: 1;
  font-size: 2.5rem;
}
.str-video__call-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 400px;
  height: 300px;
  padding: 1rem 1rem 0.5rem;
  gap: 1rem;
}
.str-video__call-panel--ringing .str-video__call-panel__members-list {
  overflow: hidden;
  display: flex;
  align-items: center;
}
.str-video__call-panel--ringing .str-video__call-panel__members-list .str-video__call-panel__member-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.str-video__call-panel--ringing .str-video__call-panel__members-list .str-video__call-panel__member-box .str-video__avatar {
  width: 80px;
  height: 80px;
}
.str-video__call-panel--ringing .str-video__call-panel__members-list .str-video__call-panel__member-box .str-video__member_details {
  position: absolute;
  bottom: 10%;
  padding: 0.125rem 0.375rem;
}
.str-video__call-panel--ringing .str-video__pending-call-controls {
  display: flex;
  gap: 0.675rem;
}
.str-video__call-panel {
  background: var(--str-video__background-color3);
  border: 2px solid rgba(200, 200, 200, 0.6);
  border-radius: 10px;
}
.str-video__call-panel--ringing .str-video__call-panel__members-list .str-video__call-panel__member-box {
  border-radius: var(--str-video__border-radius-circle);
  background: var(--str-video__background-color6);
}
.str-video__call-panel--ringing .str-video__call-panel__members-list .str-video__call-panel__member-box:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--str-video__border-radius-circle);
  padding: 4px;
  background: linear-gradient(180deg, var(--str-video__primary-color), var(--str-video__info-color));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.str-video__call-panel--ringing .str-video__call-panel__members-list .str-video__call-panel__member-box .str-video__member_details {
  background-color: var(--str-video__background-color4);
  color: var(--str-video__text-color1);
  border-radius: 4px;
  font-size: 12px;
  line-height: 16px;
}
.str-video__screen-share-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  width: 100%;
  height: 100%;
  gap: 1.8rem;
}
.str-video__screen-share-overlay > .str-video__icon {
  width: 4rem;
  height: 4rem;
}
.str-video__screen-share-overlay .str-video__screen-share-overlay__button {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  padding-inline: 1.6rem;
  padding-block: 0.8rem;
}
.str-video__screen-share-overlay .str-video__screen-share-overlay__button .str-video__icon {
  width: 0.7rem;
  height: 0.7rem;
}
.str-video__screen-share-overlay {
  background: var(--str-video__overlay-color);
  backdrop-filter: blur(3px);
  border-radius: inherit;
}
.str-video__screen-share-overlay .str-video__screen-share-overlay__title {
  font-size: 1.3rem;
}
.str-video__screen-share-overlay .str-video__screen-share-overlay__button {
  color: white;
  background: var(--str-video__danger-color);
  border-radius: var(--str-video__border-radius-xs);
}
.str-video__screen-share-overlay .str-video__screen-share-overlay__button:hover {
  background-color: var(--str-video__danger-color--accent);
}
.str-video__search-input__container {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-inline: -0.25rem;
}
.str-video__search-input__container input {
  flex: 1;
  min-width: 0;
}
.str-video__search-input__container .str-video__search-input__clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.str-video__search-input__container .str-video__search-input__icon {
  padding: 0.25rem;
}
.str-video__search-input__container .str-video__search-input__icon--active,
.str-video__search-input__container .str-video__search-input__icon {
  display: inline-block;
  width: 1.125rem;
  height: 1.125rem;
}
.str-video {
  --str-video__search-input__container--color: var(--str-video__text-color1);
  --str-video__search-input__container--background-color: var(--str-video__background-color0);
  --str-video__search-input__container--border-radius: var(--str-video__border-radius-circle);
  --str-video__search-input__container--border-block-start: 1px solid transparent;
  --str-video__search-input__container--border-block-end: 1px solid transparent;
  --str-video__search-input__container--border-inline-start: 1px solid transparent;
  --str-video__search-input__container--border-inline-end: 1px solid transparent;
  --str-video__search-input__placeholder-color: var(--str-video__text-color2);
  --str-video__search-input__icon--color: var(--str-video__text-color1);
}
.str-video__search-input__container.str-video__search-input__container--active {
  border-color: var(--str-video__primary-color);
}
.str-video__search-input__container {
  background: var(--str-video__search-input__container--background-color);
  color: var(--str-video__search-input__container--color);
  box-shadow: var(--str-video__search-input__container--box-shadow);
  border-radius: var(--str-video__search-input__container--border-radius);
  border-block-start: var(--str-video__search-input__container--border-block-start);
  border-block-end: var(--str-video__search-input__container--border-block-end);
  border-inline-start: var(--str-video__search-input__container--border-inline-start);
  border-inline-end: var(--str-video__search-input__container--border-inline-end);
}
.str-video__search-input__container input {
  background-color: transparent;
  border: none;
  outline: none;
  color: inherit;
  font-size: 13px;
}
.str-video__search-input__container input::placeholder {
  color: var(--str-video__search-input__placeholder-color);
}
.str-video__search-input__container .str-video__search-input__icon {
  -webkit-mask-image: var(--str-video__icon--magnifier-glass);
  mask-image: var(--str-video__icon--magnifier-glass);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.75rem 0.75rem;
  mask-size: 0.75rem 0.75rem;
  background-color: var(--str-video__search-input__icon--color);
}
.str-video__search-input__container .str-video__search-input__clear-btn {
  background-color: transparent;
  border-radius: var(--str-video__border-radius-circle);
  border: none;
}
.str-video__search-input__container .str-video__search-input__clear-btn:hover {
  cursor: pointer;
}
.str-video__search-input__container .str-video__search-input__clear-btn .str-video__search-input__icon--active {
  -webkit-mask-image: var(--str-video__icon--close);
  mask-image: var(--str-video__icon--close);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.75rem 0.75rem;
  mask-size: 0.75rem 0.75rem;
  background-color: var(--str-video__search-input__icon--color);
}
.str-video__call {
  background-color: var(--str-video__background-color2);
  color: var(--str-video__text-color1);
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
}
.str-video__call .str-video {
  background-color: var(--str-video__background-color2);
  color: var(--str-video__text-color1);
}
.str-video__tooltip {
  display: flex;
  justify-content: center;
  padding: var(--str-video__spacing-sm);
  z-index: 4;
  max-width: 250px;
  width: max-content;
  white-space: initial;
  overflow-wrap: break-word;
}
.str-video {
  /* The border radius used for the borders of the component */
  --str-video__tooltip--border-radius: var(--str-video__border-radius-xs);
  /* The text/icon color of the component */
  --str-video__tooltip--color: var(--str-video__text-color1);
  /* The background color of the component */
  --str-video__tooltip--background-color: var(--str-video__button-default-hover);
  /* Top border of the component */
  --str-video__tooltip--border-block-start: none;
  /* Bottom border of the component */
  --str-video__tooltip--border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-video__tooltip--border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-video__tooltip--border-inline-end: none;
  /* Box shadow applied to the component */
  --str-video__tooltip--box-shadow: none;
}
.str-video__tooltip {
  background: var(--str-video__tooltip--background-color);
  color: var(--str-video__tooltip--color);
  box-shadow: var(--str-video__tooltip--box-shadow);
  border-radius: var(--str-video__tooltip--border-radius);
  border-block-start: var(--str-video__tooltip--border-block-start);
  border-block-end: var(--str-video__tooltip--border-block-end);
  border-inline-start: var(--str-video__tooltip--border-inline-start);
  border-inline-end: var(--str-video__tooltip--border-inline-end);
  font-size: 14px;
  line-height: 1rem;
}
.str-video__tooltip::after {
  background-color: var(--str-video__tooltip-background-color);
}
.str-video__video {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
}
.str-video__video--tall {
  object-fit: contain;
}
.str-video__video--mirror:not(:picture-in-picture) {
  transform: scaleX(-1);
}
.str-video__video {
  background-color: var(--str-video__background-color5);
}
.str-video__video-placeholder {
  aspect-ratio: 4/3;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.str-video__video-placeholder .str-video__video-placeholder__avatar {
  width: 100px;
  height: 100px;
  object-fit: cover;
}
.str-video__video-placeholder .str-video__video-placeholder__initials-fallback {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
}
.str-video__video-placeholder {
  background: var(--str-video__base-color6);
  border-radius: inherit;
}
.str-video__video-placeholder .str-video__video-placeholder__avatar {
  border-radius: var(--str-video__border-radius-circle);
}
.str-video__video-placeholder .str-video__video-placeholder__initials-fallback {
  background-color: var(--str-video__primary-color);
  border-radius: var(--str-video__border-radius-circle);
  font-size: 32px;
  font-weight: 600;
  text-transform: uppercase;
}
.str-video__video-preview-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 500px;
  height: 375px;
}
.str-video__video-preview-container .str-video__video-preview {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.str-video__video-preview-container .str-video__loading-indicator__icon {
  height: 3rem;
  width: 3rem;
  mask-size: 3rem;
}
.str-video__video-preview-container .str-video__video-preview--mirror {
  transform: scaleX(-1);
}
.str-video__video-preview-container .str-video__video-preview--loading {
  display: none;
}
.str-video {
  /* The font color applied inside the component */
  --str-video__video-preview-container--color: var(--str-video__text-color1);
  /* The background color of the component */
  --str-video__video-preview-container--background-color: var(--str-video__background-color5);
  /* The border radius used for the borders of the component */
  --str-video__video-preview-container--border-radius: var(--str-video__border-radius-xs);
  /* The border used for the borders of the component */
  --str-video__video-preview-container--border-block-start: 4px solid var(--str-video__primary-color);
  /* The border used for the borders of the component */
  --str-video__video-preview-container--border-block-end: 4px solid var(--str-video__primary-color);
  /* The border used for the borders of the component */
  --str-video__video-preview-container--border-inline-start: 4px solid var(--str-video__primary-color);
  /* The border used for the borders of the component */
  --str-video__video-preview-container--border-inline-end: 4px solid var(--str-video__primary-color);
}
.str-video__video-preview-container {
  background: var(--str-video__video-preview-container--background-color);
  color: var(--str-video__video-preview-container--color);
  box-shadow: var(--str-video__video-preview-container--box-shadow);
  border-radius: var(--str-video__video-preview-container--border-radius);
  border-block-start: var(--str-video__video-preview-container--border-block-start);
  border-block-end: var(--str-video__video-preview-container--border-block-end);
  border-inline-start: var(--str-video__video-preview-container--border-inline-start);
  border-inline-end: var(--str-video__video-preview-container--border-inline-end);
  overflow: hidden;
}
/*# sourceMappingURL=styles.css.map */

.Toastify__toast-container {
  z-index: 9999;
  -webkit-transform: translate3d(0, 0, 9999px);
  position: fixed;
  padding: 4px;
  width: 320px;
  box-sizing: border-box;
  color: #fff;
}
.Toastify__toast-container--top-left {
  top: 1em;
  left: 1em;
}
.Toastify__toast-container--top-center {
  top: 1em;
  left: 50%;
  transform: translateX(-50%);
}
.Toastify__toast-container--top-right {
  top: 1em;
  right: 1em;
}
.Toastify__toast-container--bottom-left {
  bottom: 1em;
  left: 1em;
}
.Toastify__toast-container--bottom-center {
  bottom: 1em;
  left: 50%;
  transform: translateX(-50%);
}
.Toastify__toast-container--bottom-right {
  bottom: 1em;
  right: 1em;
}

@media only screen and (max-width : 480px) {
  .Toastify__toast-container {
    width: 100vw;
    padding: 0;
    left: 0;
    margin: 0;
  }
  .Toastify__toast-container--top-left, .Toastify__toast-container--top-center, .Toastify__toast-container--top-right {
    top: 0;
    transform: translateX(0);
  }
  .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-right {
    bottom: 0;
    transform: translateX(0);
  }
  .Toastify__toast-container--rtl {
    right: 0;
    left: initial;
  }
}
.Toastify__toast {
  position: relative;
  min-height: 64px;
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: 8px;
  border-radius: 4px;
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  max-height: 800px;
  overflow: hidden;
  font-family: sans-serif;
  cursor: pointer;
  direction: ltr;
}
.Toastify__toast--rtl {
  direction: rtl;
}
.Toastify__toast--dark {
  background: #121212;
  color: #fff;
}
.Toastify__toast--default {
  background: #fff;
  color: #aaa;
}
.Toastify__toast--info {
  background: #3498db;
}
.Toastify__toast--success {
  background: #07bc0c;
}
.Toastify__toast--warning {
  background: #f1c40f;
}
.Toastify__toast--error {
  background: #e74c3c;
}
.Toastify__toast-body {
  margin: auto 0;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  padding: 6px;
}

.Toastify--animate {
  animation-fill-mode: both;
  animation-duration: 0.7s;
}

@media only screen and (max-width : 480px) {
  .Toastify__toast {
    margin-bottom: 0;
    border-radius: 0;
  }
}
.Toastify__close-button {
  color: #fff;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  -ms-flex-item-align: start;
      align-self: flex-start;
}
.Toastify__close-button--default {
  color: #000;
  opacity: 0.3;
}
.Toastify__close-button > svg {
  fill: currentColor;
  height: 16px;
  width: 14px;
}
.Toastify__close-button:hover, .Toastify__close-button:focus {
  opacity: 1;
}

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  z-index: 9999;
  opacity: 0.7;
  background-color: rgba(255, 255, 255, 0.7);
  transform-origin: left;
}
.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}
.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}
.Toastify__progress-bar--rtl {
  right: 0;
  left: initial;
  transform-origin: right;
}
.Toastify__progress-bar--default {
  background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
}
.Toastify__progress-bar--dark {
  background: #bb86fc;
}
@keyframes Toastify__bounceInRight {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes Toastify__bounceInLeft {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes Toastify__bounceInUp {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, -10px, 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes Toastify__bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, 10px, 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}
.Toastify__bounce-enter--top-left, .Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft;
}
.Toastify__bounce-enter--top-right, .Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight;
}
.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown;
}
.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp;
}

.Toastify__bounce-exit--top-left, .Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft;
}
.Toastify__bounce-exit--top-right, .Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight;
}
.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp;
}
.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown;
}

@keyframes Toastify__zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes Toastify__zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn;
}

.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut;
}

@keyframes Toastify__flipIn {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}
@keyframes Toastify__flipOut {
  from {
    transform: perspective(400px);
  }
  30% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.Toastify__flip-enter {
  animation-name: Toastify__flipIn;
}

.Toastify__flip-exit {
  animation-name: Toastify__flipOut;
}

@keyframes Toastify__slideInRight {
  from {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__slideInLeft {
  from {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__slideInDown {
  from {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__slideOutRight {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(110%, 0, 0);
  }
}
@keyframes Toastify__slideOutLeft {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-110%, 0, 0);
  }
}
@keyframes Toastify__slideOutDown {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0);
  }
}
@keyframes Toastify__slideOutUp {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0);
  }
}
.Toastify__slide-enter--top-left, .Toastify__slide-enter--bottom-left {
  animation-name: Toastify__slideInLeft;
}
.Toastify__slide-enter--top-right, .Toastify__slide-enter--bottom-right {
  animation-name: Toastify__slideInRight;
}
.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown;
}
.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp;
}

.Toastify__slide-exit--top-left, .Toastify__slide-exit--bottom-left {
  animation-name: Toastify__slideOutLeft;
}
.Toastify__slide-exit--top-right, .Toastify__slide-exit--bottom-right {
  animation-name: Toastify__slideOutRight;
}
.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp;
}
.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown;
}

/*# sourceMappingURL=ReactToastify.css.map */
/*
 * Container style
 */
.ps {
  overflow: hidden !important;
  overflow-anchor: none;
  -ms-overflow-style: none;
  touch-action: auto;
  -ms-touch-action: auto;
}

/*
 * Scrollbar rail styles
 */
.ps__rail-x {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  height: 15px;
  /* there must be 'bottom' or 'top' for ps__rail-x */
  bottom: 0px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-y {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  width: 15px;
  /* there must be 'right' or 'left' for ps__rail-y */
  right: 0;
  /* please don't change 'position' */
  position: absolute;
}

.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
  display: block;
  background-color: transparent;
}

.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x,
.ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x,
.ps--scrolling-y > .ps__rail-y {
  opacity: 0.6;
}

.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
  background-color: #eee;
  opacity: 0.9;
}

/*
 * Scrollbar thumb styles
 */
.ps__thumb-x {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color .2s linear, height .2s ease-in-out;
  -webkit-transition: background-color .2s linear, height .2s ease-in-out;
  height: 6px;
  /* there must be 'bottom' for ps__thumb-x */
  bottom: 2px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__thumb-y {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color .2s linear, width .2s ease-in-out;
  -webkit-transition: background-color .2s linear, width .2s ease-in-out;
  width: 6px;
  /* there must be 'right' for ps__thumb-y */
  right: 2px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
  background-color: #999;
  height: 11px;
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
  background-color: #999;
  width: 11px;
}

/* MS supports */
@supports (-ms-overflow-style: none) {
  .ps {
    overflow: auto !important;
  }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ps {
    overflow: auto !important;
  }
}
.scrollbar-container {
  position: relative;
  height: 100%; }

/*# sourceMappingURL=styles.css.map*/
/*!
 * Cropper.js v1.6.1
 * https://fengyuanchen.github.io/cropperjs
 *
 * Copyright 2015-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2023-09-17T03:44:17.565Z
 */

.cropper-container {
  direction: ltr;
  font-size: 0;
  line-height: 0;
  position: relative;
  -ms-touch-action: none;
      touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.cropper-container img {
    backface-visibility: hidden;
    display: block;
    height: 100%;
    image-orientation: 0deg;
    max-height: none !important;
    max-width: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100%;
  }

.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.cropper-wrap-box,
.cropper-canvas {
  overflow: hidden;
}

.cropper-drag-box {
  background-color: #fff;
  opacity: 0;
}

.cropper-modal {
  background-color: #000;
  opacity: 0.5;
}

.cropper-view-box {
  display: block;
  height: 100%;
  outline: 1px solid #39f;
  outline-color: rgba(51, 153, 255, 0.75);
  overflow: hidden;
  width: 100%;
}

.cropper-dashed {
  border: 0 dashed #eee;
  display: block;
  opacity: 0.5;
  position: absolute;
}

.cropper-dashed.dashed-h {
    border-bottom-width: 1px;
    border-top-width: 1px;
    height: calc(100% / 3);
    left: 0;
    top: calc(100% / 3);
    width: 100%;
  }

.cropper-dashed.dashed-v {
    border-left-width: 1px;
    border-right-width: 1px;
    height: 100%;
    left: calc(100% / 3);
    top: 0;
    width: calc(100% / 3);
  }

.cropper-center {
  display: block;
  height: 0;
  left: 50%;
  opacity: 0.75;
  position: absolute;
  top: 50%;
  width: 0;
}

.cropper-center::before,
  .cropper-center::after {
    background-color: #eee;
    content: ' ';
    display: block;
    position: absolute;
  }

.cropper-center::before {
    height: 1px;
    left: -3px;
    top: 0;
    width: 7px;
  }

.cropper-center::after {
    height: 7px;
    left: 0;
    top: -3px;
    width: 1px;
  }

.cropper-face,
.cropper-line,
.cropper-point {
  display: block;
  height: 100%;
  opacity: 0.1;
  position: absolute;
  width: 100%;
}

.cropper-face {
  background-color: #fff;
  left: 0;
  top: 0;
}

.cropper-line {
  background-color: #39f;
}

.cropper-line.line-e {
    cursor: ew-resize;
    right: -3px;
    top: 0;
    width: 5px;
  }

.cropper-line.line-n {
    cursor: ns-resize;
    height: 5px;
    left: 0;
    top: -3px;
  }

.cropper-line.line-w {
    cursor: ew-resize;
    left: -3px;
    top: 0;
    width: 5px;
  }

.cropper-line.line-s {
    bottom: -3px;
    cursor: ns-resize;
    height: 5px;
    left: 0;
  }

.cropper-point {
  background-color: #39f;
  height: 5px;
  opacity: 0.75;
  width: 5px;
}

.cropper-point.point-e {
    cursor: ew-resize;
    margin-top: -3px;
    right: -3px;
    top: 50%;
  }

.cropper-point.point-n {
    cursor: ns-resize;
    left: 50%;
    margin-left: -3px;
    top: -3px;
  }

.cropper-point.point-w {
    cursor: ew-resize;
    left: -3px;
    margin-top: -3px;
    top: 50%;
  }

.cropper-point.point-s {
    bottom: -3px;
    cursor: s-resize;
    left: 50%;
    margin-left: -3px;
  }

.cropper-point.point-ne {
    cursor: nesw-resize;
    right: -3px;
    top: -3px;
  }

.cropper-point.point-nw {
    cursor: nwse-resize;
    left: -3px;
    top: -3px;
  }

.cropper-point.point-sw {
    bottom: -3px;
    cursor: nesw-resize;
    left: -3px;
  }

.cropper-point.point-se {
    bottom: -3px;
    cursor: nwse-resize;
    height: 20px;
    opacity: 1;
    right: -3px;
    width: 20px;
  }

@media (min-width: 768px) {

.cropper-point.point-se {
      height: 15px;
      width: 15px;
  }
    }

@media (min-width: 992px) {

.cropper-point.point-se {
      height: 10px;
      width: 10px;
  }
    }

@media (min-width: 1200px) {

.cropper-point.point-se {
      height: 5px;
      opacity: 0.75;
      width: 5px;
  }
    }

.cropper-point.point-se::before {
    background-color: #39f;
    bottom: -50%;
    content: ' ';
    display: block;
    height: 200%;
    opacity: 0;
    position: absolute;
    right: -50%;
    width: 200%;
  }

.cropper-invisible {
  opacity: 0;
}

.cropper-bg {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
}

.cropper-hide {
  display: block;
  height: 0;
  position: absolute;
  width: 0;
}

.cropper-hidden {
  display: none !important;
}

.cropper-move {
  cursor: move;
}

.cropper-crop {
  cursor: crosshair;
}

.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
  cursor: not-allowed;
}

@charset "UTF-8";
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before {
  border-color: #ccc;
  border-style: solid;
  border-width: 3px 3px 0 0;
  content: "";
  display: block;
  height: 9px;
  position: absolute;
  top: 6px;
  width: 9px;
}
.react-datepicker-wrapper {
  display: inline-block;
  padding: 0;
  border: 0;
}

.react-datepicker {
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 0.8rem;
  background-color: #fff;
  color: #000;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  display: inline-block;
  position: relative;
  line-height: initial;
}

.react-datepicker--time-only .react-datepicker__time-container {
  border-left: 0;
}
.react-datepicker--time-only .react-datepicker__time,
.react-datepicker--time-only .react-datepicker__time-box {
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.react-datepicker-popper {
  z-index: 1;
  line-height: 0;
}
.react-datepicker-popper .react-datepicker__triangle {
  stroke: #aeaeae;
}
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
  fill: #f0f0f0;
  color: #f0f0f0;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
  fill: #fff;
  color: #fff;
}

.react-datepicker__header {
  text-align: center;
  background-color: #f0f0f0;
  border-bottom: 1px solid #aeaeae;
  border-top-left-radius: 0.3rem;
  padding: 8px 0;
  position: relative;
}
.react-datepicker__header--time {
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}
.react-datepicker__header--time:not(.react-datepicker__header--time--only) {
  border-top-left-radius: 0;
}
.react-datepicker__header:not(.react-datepicker__header--has-time-select) {
  border-top-right-radius: 0.3rem;
}

.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__month-year-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll,
.react-datepicker__month-year-dropdown-container--scroll {
  display: inline-block;
  margin: 0 15px;
}

.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
  margin-top: 0;
  color: #000;
  font-weight: bold;
  font-size: 0.944rem;
}

.react-datepicker-time__header {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.react-datepicker__navigation {
  align-items: center;
  background: none;
  display: flex;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 2px;
  padding: 0;
  border: none;
  z-index: 1;
  height: 32px;
  width: 32px;
  text-indent: -999em;
  overflow: hidden;
}
.react-datepicker__navigation--previous {
  left: 2px;
}
.react-datepicker__navigation--next {
  right: 2px;
}
.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 85px;
}
.react-datepicker__navigation--years {
  position: relative;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__navigation--years-previous {
  top: 4px;
}
.react-datepicker__navigation--years-upcoming {
  top: -4px;
}
.react-datepicker__navigation:hover *::before {
  border-color: #a6a6a6;
}

.react-datepicker__navigation-icon {
  position: relative;
  top: -1px;
  font-size: 20px;
  width: 0;
}
.react-datepicker__navigation-icon--next {
  left: -2px;
}
.react-datepicker__navigation-icon--next::before {
  transform: rotate(45deg);
  left: -7px;
}
.react-datepicker__navigation-icon--previous {
  right: -2px;
}
.react-datepicker__navigation-icon--previous::before {
  transform: rotate(225deg);
  right: -7px;
}

.react-datepicker__month-container {
  float: left;
}

.react-datepicker__year {
  margin: 0.4rem;
  text-align: center;
}
.react-datepicker__year-wrapper {
  display: flex;
  flex-wrap: wrap;
  max-width: 180px;
}
.react-datepicker__year .react-datepicker__year-text {
  display: inline-block;
  width: 4rem;
  margin: 2px;
}

.react-datepicker__month {
  margin: 0.4rem;
  text-align: center;
}
.react-datepicker__month .react-datepicker__month-text,
.react-datepicker__month .react-datepicker__quarter-text {
  display: inline-block;
  width: 4rem;
  margin: 2px;
}

.react-datepicker__input-time-container {
  clear: both;
  width: 100%;
  float: left;
  margin: 5px 0 10px 15px;
  text-align: left;
}
.react-datepicker__input-time-container .react-datepicker-time__caption {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
  display: inline-block;
  margin-left: 10px;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
  width: auto;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
  -moz-appearance: textfield;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
  margin-left: 5px;
  display: inline-block;
}

.react-datepicker__time-container {
  float: right;
  border-left: 1px solid #aeaeae;
  width: 85px;
}
.react-datepicker__time-container--with-today-button {
  display: inline;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  position: absolute;
  right: -87px;
  top: 0;
}
.react-datepicker__time-container .react-datepicker__time {
  position: relative;
  background: white;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
  width: 85px;
  overflow-x: hidden;
  margin: 0 auto;
  text-align: center;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
  list-style: none;
  margin: 0;
  height: calc(195px + 1.7rem / 2);
  overflow-y: scroll;
  padding-right: 0;
  padding-left: 0;
  width: 100%;
  box-sizing: content-box;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
  height: 30px;
  padding: 5px 10px;
  white-space: nowrap;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
  cursor: pointer;
  background-color: #f0f0f0;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
  background-color: #216ba5;
  color: white;
  font-weight: bold;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
  background-color: #216ba5;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
  color: #ccc;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
  cursor: default;
  background-color: transparent;
}

.react-datepicker__week-number {
  color: #ccc;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable {
  cursor: pointer;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected,
.react-datepicker__week-number--keyboard-selected):hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__week-number--selected {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__week-number--selected:hover {
  background-color: #1d5d90;
}
.react-datepicker__week-number--keyboard-selected {
  border-radius: 0.3rem;
  background-color: #2a87d0;
  color: #fff;
}
.react-datepicker__week-number--keyboard-selected:hover {
  background-color: #1d5d90;
}

.react-datepicker__day-names {
  white-space: nowrap;
  margin-bottom: -8px;
}

.react-datepicker__week {
  white-space: nowrap;
}

.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
  color: #000;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}

.react-datepicker__day,
.react-datepicker__month-text,
.react-datepicker__quarter-text,
.react-datepicker__year-text {
  cursor: pointer;
}
.react-datepicker__day:hover,
.react-datepicker__month-text:hover,
.react-datepicker__quarter-text:hover,
.react-datepicker__year-text:hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__day--today,
.react-datepicker__month-text--today,
.react-datepicker__quarter-text--today,
.react-datepicker__year-text--today {
  font-weight: bold;
}
.react-datepicker__day--highlighted,
.react-datepicker__month-text--highlighted,
.react-datepicker__quarter-text--highlighted,
.react-datepicker__year-text--highlighted {
  border-radius: 0.3rem;
  background-color: #3dcc4a;
  color: #fff;
}
.react-datepicker__day--highlighted:hover,
.react-datepicker__month-text--highlighted:hover,
.react-datepicker__quarter-text--highlighted:hover,
.react-datepicker__year-text--highlighted:hover {
  background-color: #32be3f;
}
.react-datepicker__day--highlighted-custom-1,
.react-datepicker__month-text--highlighted-custom-1,
.react-datepicker__quarter-text--highlighted-custom-1,
.react-datepicker__year-text--highlighted-custom-1 {
  color: magenta;
}
.react-datepicker__day--highlighted-custom-2,
.react-datepicker__month-text--highlighted-custom-2,
.react-datepicker__quarter-text--highlighted-custom-2,
.react-datepicker__year-text--highlighted-custom-2 {
  color: green;
}
.react-datepicker__day--holidays,
.react-datepicker__month-text--holidays,
.react-datepicker__quarter-text--holidays,
.react-datepicker__year-text--holidays {
  position: relative;
  border-radius: 0.3rem;
  background-color: #ff6803;
  color: #fff;
}
.react-datepicker__day--holidays .overlay,
.react-datepicker__month-text--holidays .overlay,
.react-datepicker__quarter-text--holidays .overlay,
.react-datepicker__year-text--holidays .overlay {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
}
.react-datepicker__day--holidays:hover,
.react-datepicker__month-text--holidays:hover,
.react-datepicker__quarter-text--holidays:hover,
.react-datepicker__year-text--holidays:hover {
  background-color: #cf5300;
}
.react-datepicker__day--holidays:hover .overlay,
.react-datepicker__month-text--holidays:hover .overlay,
.react-datepicker__quarter-text--holidays:hover .overlay,
.react-datepicker__year-text--holidays:hover .overlay {
  visibility: visible;
  opacity: 1;
}
.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--selected,
.react-datepicker__year-text--in-selecting-range,
.react-datepicker__year-text--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,
.react-datepicker__month-text--selected:hover,
.react-datepicker__month-text--in-selecting-range:hover,
.react-datepicker__month-text--in-range:hover,
.react-datepicker__quarter-text--selected:hover,
.react-datepicker__quarter-text--in-selecting-range:hover,
.react-datepicker__quarter-text--in-range:hover,
.react-datepicker__year-text--selected:hover,
.react-datepicker__year-text--in-selecting-range:hover,
.react-datepicker__year-text--in-range:hover {
  background-color: #1d5d90;
}
.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected {
  border-radius: 0.3rem;
  background-color: #bad9f1;
  color: rgb(0, 0, 0);
}
.react-datepicker__day--keyboard-selected:hover,
.react-datepicker__month-text--keyboard-selected:hover,
.react-datepicker__quarter-text--keyboard-selected:hover,
.react-datepicker__year-text--keyboard-selected:hover {
  background-color: #1d5d90;
}
.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range) {
  background-color: rgba(33, 107, 165, 0.5);
}
.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range) {
  background-color: #f0f0f0;
  color: #000;
}
.react-datepicker__day--disabled,
.react-datepicker__month-text--disabled,
.react-datepicker__quarter-text--disabled,
.react-datepicker__year-text--disabled {
  cursor: default;
  color: #ccc;
}
.react-datepicker__day--disabled:hover,
.react-datepicker__month-text--disabled:hover,
.react-datepicker__quarter-text--disabled:hover,
.react-datepicker__year-text--disabled:hover {
  background-color: transparent;
}
.react-datepicker__day--disabled .overlay,
.react-datepicker__month-text--disabled .overlay,
.react-datepicker__quarter-text--disabled .overlay,
.react-datepicker__year-text--disabled .overlay {
  position: absolute;
  bottom: 70%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
}

.react-datepicker__input-container {
  position: relative;
  display: inline-block;
  width: 100%;
}
.react-datepicker__input-container .react-datepicker__calendar-icon {
  position: absolute;
  padding: 0.5rem;
  box-sizing: content-box;
}

.react-datepicker__view-calendar-icon input {
  padding: 6px 10px 5px 25px;
}

.react-datepicker__year-read-view,
.react-datepicker__month-read-view,
.react-datepicker__month-year-read-view {
  border: 1px solid transparent;
  border-radius: 0.3rem;
  position: relative;
}
.react-datepicker__year-read-view:hover,
.react-datepicker__month-read-view:hover,
.react-datepicker__month-year-read-view:hover {
  cursor: pointer;
}
.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
  border-top-color: #b3b3b3;
}
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  transform: rotate(135deg);
  right: -16px;
  top: 0;
}

.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown,
.react-datepicker__month-year-dropdown {
  background-color: #f0f0f0;
  position: absolute;
  width: 50%;
  left: 25%;
  top: 30px;
  z-index: 1;
  text-align: center;
  border-radius: 0.3rem;
  border: 1px solid #aeaeae;
}
.react-datepicker__year-dropdown:hover,
.react-datepicker__month-dropdown:hover,
.react-datepicker__month-year-dropdown:hover {
  cursor: pointer;
}
.react-datepicker__year-dropdown--scrollable,
.react-datepicker__month-dropdown--scrollable,
.react-datepicker__month-year-dropdown--scrollable {
  height: 150px;
  overflow-y: scroll;
}

.react-datepicker__year-option,
.react-datepicker__month-option,
.react-datepicker__month-year-option {
  line-height: 20px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__year-option:first-of-type,
.react-datepicker__month-option:first-of-type,
.react-datepicker__month-year-option:first-of-type {
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}
.react-datepicker__year-option:last-of-type,
.react-datepicker__month-option:last-of-type,
.react-datepicker__month-year-option:last-of-type {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__year-option:hover,
.react-datepicker__month-option:hover,
.react-datepicker__month-year-option:hover {
  background-color: #ccc;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
  border-bottom-color: #b3b3b3;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
  border-top-color: #b3b3b3;
}
.react-datepicker__year-option--selected,
.react-datepicker__month-option--selected,
.react-datepicker__month-year-option--selected {
  position: absolute;
  left: 15px;
}

.react-datepicker__close-icon {
  cursor: pointer;
  background-color: transparent;
  border: 0;
  outline: 0;
  padding: 0 6px 0 0;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}
.react-datepicker__close-icon::after {
  cursor: pointer;
  background-color: #216ba5;
  color: #fff;
  border-radius: 50%;
  height: 16px;
  width: 16px;
  padding: 2px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  content: "×";
}
.react-datepicker__close-icon--disabled {
  cursor: default;
}
.react-datepicker__close-icon--disabled::after {
  cursor: default;
  background-color: #ccc;
}

.react-datepicker__today-button {
  background: #f0f0f0;
  border-top: 1px solid #aeaeae;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  clear: left;
}

.react-datepicker__portal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 2147483647;
}
.react-datepicker__portal .react-datepicker__day-name,
.react-datepicker__portal .react-datepicker__day,
.react-datepicker__portal .react-datepicker__time-name {
  width: 3rem;
  line-height: 3rem;
}
@media (max-width: 400px), (max-height: 550px) {
  .react-datepicker__portal .react-datepicker__day-name,
  .react-datepicker__portal .react-datepicker__day,
  .react-datepicker__portal .react-datepicker__time-name {
    width: 2rem;
    line-height: 2rem;
  }
}
.react-datepicker__portal .react-datepicker__current-month,
.react-datepicker__portal .react-datepicker-time__header {
  font-size: 1.44rem;
}

.react-datepicker__children-container {
  width: 13.8rem;
  margin: 0.4rem;
  padding-right: 0.2rem;
  padding-left: 0.2rem;
  height: auto;
}

.react-datepicker__aria-live {
  position: absolute;
  clip-path: circle(0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  width: 1px;
  white-space: nowrap;
}

.react-datepicker__calendar-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

/*
z-index: range
0-100    - base page content
100-200  - base modal content
200+     - equivalent to !important. you're a bad person.

If two elements of the same context need to overlay eachother, use something like:
  my-action {
    z-index: @layer-actions;
    &.overlap {
      z-index: @layer-actions + 5;
    }
  }

*/
/*
  Layers:
*/
/* Static page content - titles, descriptions, etc */
/* Interactable content - clickable divs / inputs */
/*
  Containers:

  Combine containers and layers for consistency
  IE:

  .my-modal-submit-class {
    z-index: @layer-modal + @layer-actions;
  }
*/
/* Form content or inputs that should be handled above baseline page content, but below overlaid content. */
/* Modal content + things that should be beneath side bar content. */
/* Tooltips, left-side activity/search overlays */
/* Show-stopper alerts that take precedent over all others. Reserved for nuclear air raid or lack of javascript */
.typography-introductory {
  font-size: 2em;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  text-decoration: none;
}
.typography-modal-title {
  font-size: 1.5em;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  text-decoration: none;
}
.typography-modal-subtitle {
  font-size: 1.2em;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  text-decoration: none;
}
@font-face {
  font-family: 'Roboto';
  src: url(/assets/fc2b5060f7accec5cf74.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url(/assets/7c8d04cd831df3033c8a.ttf) format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url(/assets/f80816a5455d171f948d.ttf) format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url(/assets/35d26b781dc5fda684cc.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url(/assets/673ed42382ab264e0bf5.ttf) format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url(/assets/cdb29a5d7ccf57ff05a3.ttf) format('truetype');
  font-weight: bold;
  font-style: normal;
}
.text-secondary-small {
  font-size: 11px;
  color: #8a9292;
  text-decoration: none;
}
html,
body {
  background-color: white;
  color: #333333;
  font-size: 14px;
  font-family: 'Roboto', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
  position: absolute;
  width: 100%;
  overflow: hidden;
}
html .JS_ALERT,
body .JS_ALERT {
  position: absolute;
  top: 50px;
  right: 50px;
  text-align: center;
  background-color: #3ebfc2;
  color: white;
  border-radius: 18px;
  padding: 12px;
  border: 1px solid black;
  z-index: 50000;
}
html .JS_ALERT button,
body .JS_ALERT button {
  margin: 12px;
  padding: 6px;
  font-size: 15px;
  background: none;
  border: none;
  text-decoration: underline;
  color: white;
}
html .JS_ALERT a,
body .JS_ALERT a,
html .JS_ALERT a:visited,
body .JS_ALERT a:visited {
  color: #333333;
  background-color: white;
  margin: 6px;
  padding: 6px;
  border: 1px solid #333333;
  border-radius: 6px;
}
textarea:focus,
button:focus,
input:focus {
  outline: none;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type='number'] {
  -moz-appearance: textfield;
}
html,
body,
ul,
ol,
li {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
svg {
  overflow: visible;
}
*::selection {
  background-color: #c6eced;
  color: #333333;
}
.MuiSvgIcon-fontSizeMedium {
  color: #666;
}
.pointer {
  cursor: pointer;
}
.disabled-cursor {
  cursor: not-allowed;
}
.focus-highlight-reset:focus {
  outline: none !important;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-left {
  text-align: left;
}
.center {
  margin: auto;
}
.bold {
  font-weight: bold;
}
.bolder {
  font-weight: bolder;
}
.bold-500 {
  font-weight: 500;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.p-10 {
  padding: 60px;
}
.p-x-10 {
  padding-left: 60px;
  padding-right: 60px;
}
.p-y-10 {
  padding-top: 60px;
  padding-bottom: 60px;
}
.p-t-10 {
  padding-top: 60px;
}
.p-b-10 {
  padding-bottom: 60px;
}
.p-l-10 {
  padding-left: 60px;
}
.p-r-10 {
  padding-right: 60px;
}
.p-9 {
  padding: 54px;
}
.p-x-9 {
  padding-left: 54px;
  padding-right: 54px;
}
.p-y-9 {
  padding-top: 54px;
  padding-bottom: 54px;
}
.p-t-9 {
  padding-top: 54px;
}
.p-b-9 {
  padding-bottom: 54px;
}
.p-l-9 {
  padding-left: 54px;
}
.p-r-9 {
  padding-right: 54px;
}
.p-8 {
  padding: 48px;
}
.p-x-8 {
  padding-left: 48px;
  padding-right: 48px;
}
.p-y-8 {
  padding-top: 48px;
  padding-bottom: 48px;
}
.p-t-8 {
  padding-top: 48px;
}
.p-b-8 {
  padding-bottom: 48px;
}
.p-l-8 {
  padding-left: 48px;
}
.p-r-8 {
  padding-right: 48px;
}
.p-7 {
  padding: 42px;
}
.p-x-7 {
  padding-left: 42px;
  padding-right: 42px;
}
.p-y-7 {
  padding-top: 42px;
  padding-bottom: 42px;
}
.p-t-7 {
  padding-top: 42px;
}
.p-b-7 {
  padding-bottom: 42px;
}
.p-l-7 {
  padding-left: 42px;
}
.p-r-7 {
  padding-right: 42px;
}
.p-6 {
  padding: 36px;
}
.p-x-6 {
  padding-left: 36px;
  padding-right: 36px;
}
.p-y-6 {
  padding-top: 36px;
  padding-bottom: 36px;
}
.p-t-6 {
  padding-top: 36px;
}
.p-b-6 {
  padding-bottom: 36px;
}
.p-l-6 {
  padding-left: 36px;
}
.p-r-6 {
  padding-right: 36px;
}
.p-5 {
  padding: 30px;
}
.p-x-5 {
  padding-left: 30px;
  padding-right: 30px;
}
.p-y-5 {
  padding-top: 30px;
  padding-bottom: 30px;
}
.p-t-5 {
  padding-top: 30px;
}
.p-b-5 {
  padding-bottom: 30px;
}
.p-l-5 {
  padding-left: 30px;
}
.p-r-5 {
  padding-right: 30px;
}
.p-4 {
  padding: 24px;
}
.p-x-4 {
  padding-left: 24px;
  padding-right: 24px;
}
.p-y-4 {
  padding-top: 24px;
  padding-bottom: 24px;
}
.p-t-4 {
  padding-top: 24px;
}
.p-b-4 {
  padding-bottom: 24px;
}
.p-l-4 {
  padding-left: 24px;
}
.p-r-4 {
  padding-right: 24px;
}
.p-3 {
  padding: 18px;
}
.p-x-3 {
  padding-left: 18px;
  padding-right: 18px;
}
.p-y-3 {
  padding-top: 18px;
  padding-bottom: 18px;
}
.p-t-3 {
  padding-top: 18px;
}
.p-b-3 {
  padding-bottom: 18px;
}
.p-l-3 {
  padding-left: 18px;
}
.p-r-3 {
  padding-right: 18px;
}
.p-2 {
  padding: 12px;
}
.p-x-2 {
  padding-left: 12px;
  padding-right: 12px;
}
.p-y-2 {
  padding-top: 12px;
  padding-bottom: 12px;
}
.p-t-2 {
  padding-top: 12px;
}
.p-b-2 {
  padding-bottom: 12px;
}
.p-l-2 {
  padding-left: 12px;
}
.p-r-2 {
  padding-right: 12px;
}
.p-1 {
  padding: 6px;
}
.p-x-1 {
  padding-left: 6px;
  padding-right: 6px;
}
.p-y-1 {
  padding-top: 6px;
  padding-bottom: 6px;
}
.p-t-1 {
  padding-top: 6px;
}
.p-b-1 {
  padding-bottom: 6px;
}
.p-l-1 {
  padding-left: 6px;
}
.p-r-1 {
  padding-right: 6px;
}
.m-auto {
  margin: auto;
}
.m-x-auto {
  margin-left: auto;
  margin-right: auto;
}
.m-y-auto {
  margin-top: auto;
  margin-bottom: auto;
}
.m-t-auto {
  margin-top: auto;
}
.m-b-auto {
  margin-bottom: auto;
}
.m-l-auto {
  margin-left: auto;
}
.m-r-auto {
  margin-right: auto;
}
.m-10 {
  margin: 60px;
}
.m-x-10 {
  margin-left: 60px;
  margin-right: 60px;
}
.m-y-10 {
  margin-top: 60px;
  margin-bottom: 60px;
}
.m-t-10 {
  margin-top: 60px;
}
.m-b-10 {
  margin-bottom: 60px;
}
.m-l-10 {
  margin-left: 60px;
}
.m-r-10 {
  margin-right: 60px;
}
.m-9 {
  margin: 54px;
}
.m-x-9 {
  margin-left: 54px;
  margin-right: 54px;
}
.m-y-9 {
  margin-top: 54px;
  margin-bottom: 54px;
}
.m-t-9 {
  margin-top: 54px;
}
.m-b-9 {
  margin-bottom: 54px;
}
.m-l-9 {
  margin-left: 54px;
}
.m-r-9 {
  margin-right: 54px;
}
.m-8 {
  margin: 48px;
}
.m-x-8 {
  margin-left: 48px;
  margin-right: 48px;
}
.m-y-8 {
  margin-top: 48px;
  margin-bottom: 48px;
}
.m-t-8 {
  margin-top: 48px;
}
.m-b-8 {
  margin-bottom: 48px;
}
.m-l-8 {
  margin-left: 48px;
}
.m-r-8 {
  margin-right: 48px;
}
.m-7 {
  margin: 42px;
}
.m-x-7 {
  margin-left: 42px;
  margin-right: 42px;
}
.m-y-7 {
  margin-top: 42px;
  margin-bottom: 42px;
}
.m-t-7 {
  margin-top: 42px;
}
.m-b-7 {
  margin-bottom: 42px;
}
.m-l-7 {
  margin-left: 42px;
}
.m-r-7 {
  margin-right: 42px;
}
.m-6 {
  margin: 36px;
}
.m-x-6 {
  margin-left: 36px;
  margin-right: 36px;
}
.m-y-6 {
  margin-top: 36px;
  margin-bottom: 36px;
}
.m-t-6 {
  margin-top: 36px;
}
.m-b-6 {
  margin-bottom: 36px;
}
.m-l-6 {
  margin-left: 36px;
}
.m-r-6 {
  margin-right: 36px;
}
.m-5 {
  margin: 30px;
}
.m-x-5 {
  margin-left: 30px;
  margin-right: 30px;
}
.m-y-5 {
  margin-top: 30px;
  margin-bottom: 30px;
}
.m-t-5 {
  margin-top: 30px;
}
.m-b-5 {
  margin-bottom: 30px;
}
.m-l-5 {
  margin-left: 30px;
}
.m-r-5 {
  margin-right: 30px;
}
.m-4 {
  margin: 24px;
}
.m-x-4 {
  margin-left: 24px;
  margin-right: 24px;
}
.m-y-4 {
  margin-top: 24px;
  margin-bottom: 24px;
}
.m-t-4 {
  margin-top: 24px;
}
.m-b-4 {
  margin-bottom: 24px;
}
.m-l-4 {
  margin-left: 24px;
}
.m-r-4 {
  margin-right: 24px;
}
.m-3 {
  margin: 18px;
}
.m-x-3 {
  margin-left: 18px;
  margin-right: 18px;
}
.m-y-3 {
  margin-top: 18px;
  margin-bottom: 18px;
}
.m-t-3 {
  margin-top: 18px;
}
.m-b-3 {
  margin-bottom: 18px;
}
.m-l-3 {
  margin-left: 18px;
}
.m-r-3 {
  margin-right: 18px;
}
.m-2 {
  margin: 12px;
}
.m-x-2 {
  margin-left: 12px;
  margin-right: 12px;
}
.m-y-2 {
  margin-top: 12px;
  margin-bottom: 12px;
}
.m-t-2 {
  margin-top: 12px;
}
.m-b-2 {
  margin-bottom: 12px;
}
.m-l-2 {
  margin-left: 12px;
}
.m-r-2 {
  margin-right: 12px;
}
.m-1 {
  margin: 6px;
}
.m-x-1 {
  margin-left: 6px;
  margin-right: 6px;
}
.m-y-1 {
  margin-top: 6px;
  margin-bottom: 6px;
}
.m-t-1 {
  margin-top: 6px;
}
.m-b-1 {
  margin-bottom: 6px;
}
.m-l-1 {
  margin-left: 6px;
}
.m-r-1 {
  margin-right: 6px;
}
.width-fit-content {
  width: fit-content;
  width: -moz-fit-content;
}
.width-max-content {
  width: max-content;
}
.t-header-hero {
  font-size: 3em;
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 100;
  text-decoration: none;
}
.t-header-1 {
  font-size: 2em;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 100;
  letter-spacing: 0.07em;
  text-decoration: none;
}
.t-subheader-1 {
  font-size: 18px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 100;
  text-decoration: none;
}
.t-header-2 {
  font-size: 1.5em;
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 100;
  text-decoration: none;
}
.t-subheader-2 {
  font-size: 1.17em;
  line-height: 1.17em;
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 100;
  text-decoration: none;
}
.t-header-3 {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 200;
  letter-spacing: 1.2px;
  text-decoration: none;
}
.t-subheader-3 {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 200;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
}
.t-typography-introductory {
  font-size: 2em;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  text-decoration: none;
}
.t-typography-modal-title {
  font-size: 1.5em;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  text-decoration: none;
}
.t-typography-modal-subtitle {
  font-size: 1.2em;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  text-decoration: none;
}
.t-body {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
}
.t-body-secondary {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
}
.width-100pc {
  width: 100%;
}
.width-75pc {
  width: 75%;
}
.width-50pc {
  width: 50%;
}
.width-25pc {
  width: 25%;
}
.width-50 {
  width: 50px;
}
.width-100 {
  width: 100px;
}
.width-150 {
  width: 150px;
}
.width-200 {
  width: 200px;
}
.width-250 {
  width: 250px;
}
.width-450 {
  width: 450px;
}
.width-500 {
  width: 500px;
}
.height-100 {
  height: 100px;
}
.height-100pc {
  height: 100%;
}
.flex-h {
  display: flex;
  flex-direction: row;
}
.flex-v {
  display: flex;
  flex-direction: column;
}
.pc-center {
  place-content: center;
}
.pc-space-around {
  place-content: space-around;
}
.pc-space-between {
  place-content: space-between;
}
.pc-space-evenly {
  place-content: space-evenly;
}
.pc-start {
  place-content: flex-start;
}
.pc-end {
  place-content: flex-end;
}
.pc-left {
  place-content: flex-start;
}
.pc-right {
  place-content: flex-end;
}
.vertical-align-middle {
  vertical-align: middle;
}
.vertical-center {
  align-items: center;
}
.vertical-top {
  align-items: flex-start;
}
.vertical-bottom {
  align-items: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.column-6 {
  grid-column: 6;
}
.row-6 {
  grid-row: 6;
}
.grid-col-span-6 {
  grid-column: span 6;
}
.grid-row-span-6 {
  grid-row: span 6;
}
.grid-col-6 {
  display: grid;
  grid-template-columns: repeat(6, auto);
}
.grid-rows-6 {
  display: grid;
  grid-template-rows: repeat(6, auto);
}
.column-5 {
  grid-column: 5;
}
.row-5 {
  grid-row: 5;
}
.grid-col-span-5 {
  grid-column: span 5;
}
.grid-row-span-5 {
  grid-row: span 5;
}
.grid-col-5 {
  display: grid;
  grid-template-columns: repeat(5, auto);
}
.grid-rows-5 {
  display: grid;
  grid-template-rows: repeat(5, auto);
}
.column-4 {
  grid-column: 4;
}
.row-4 {
  grid-row: 4;
}
.grid-col-span-4 {
  grid-column: span 4;
}
.grid-row-span-4 {
  grid-row: span 4;
}
.grid-col-4 {
  display: grid;
  grid-template-columns: repeat(4, auto);
}
.grid-rows-4 {
  display: grid;
  grid-template-rows: repeat(4, auto);
}
.column-3 {
  grid-column: 3;
}
.row-3 {
  grid-row: 3;
}
.grid-col-span-3 {
  grid-column: span 3;
}
.grid-row-span-3 {
  grid-row: span 3;
}
.grid-col-3 {
  display: grid;
  grid-template-columns: repeat(3, auto);
}
.grid-rows-3 {
  display: grid;
  grid-template-rows: repeat(3, auto);
}
.column-2 {
  grid-column: 2;
}
.row-2 {
  grid-row: 2;
}
.grid-col-span-2 {
  grid-column: span 2;
}
.grid-row-span-2 {
  grid-row: span 2;
}
.grid-col-2 {
  display: grid;
  grid-template-columns: repeat(2, auto);
}
.grid-rows-2 {
  display: grid;
  grid-template-rows: repeat(2, auto);
}
.column-1 {
  grid-column: 1;
}
.row-1 {
  grid-row: 1;
}
.grid-col-span-1 {
  grid-column: span 1;
}
.grid-row-span-1 {
  grid-row: span 1;
}
.grid-col-1 {
  display: grid;
  grid-template-columns: repeat(1, auto);
}
.grid-rows-1 {
  display: grid;
  grid-template-rows: repeat(1, auto);
}
.grid-gap-6 {
  grid-gap: 36px;
}
.grid-gap-x-6 {
  grid-column-gap: 36px;
}
.grid-gap-y-6 {
  grid-row-gap: 36px;
}
.grid-gap-5 {
  grid-gap: 30px;
}
.grid-gap-x-5 {
  grid-column-gap: 30px;
}
.grid-gap-y-5 {
  grid-row-gap: 30px;
}
.grid-gap-4 {
  grid-gap: 24px;
}
.grid-gap-x-4 {
  grid-column-gap: 24px;
}
.grid-gap-y-4 {
  grid-row-gap: 24px;
}
.grid-gap-3 {
  grid-gap: 18px;
}
.grid-gap-x-3 {
  grid-column-gap: 18px;
}
.grid-gap-y-3 {
  grid-row-gap: 18px;
}
.grid-gap-2 {
  grid-gap: 12px;
}
.grid-gap-x-2 {
  grid-column-gap: 12px;
}
.grid-gap-y-2 {
  grid-row-gap: 12px;
}
.grid-gap-1 {
  grid-gap: 6px;
}
.grid-gap-x-1 {
  grid-column-gap: 6px;
}
.grid-gap-y-1 {
  grid-row-gap: 6px;
}
.grid-span-2 {
  grid-column: span 2;
}
.no-user-select {
  user-select: none;
}
.no-pointer-events {
  pointer-events: none;
}
.no-resizable {
  resize: none;
}
.color-default {
  color: #333333;
}
.color-primary {
  color: #3ebfc2;
}
.color-secondary {
  color: #8a9292;
}
.color-error,
.color-danger {
  color: #ff585d;
}
.color-warning {
  color: #ffce3d;
}
.color-white {
  color: white;
}
.roboto-font {
  font-family: 'Roboto';
}
.poppins-font {
  font-family: 'Poppins', Arial, sans-serif;
}
.font-30 {
  font-size: 30px;
}
.font-29 {
  font-size: 29px;
}
.font-28 {
  font-size: 28px;
}
.font-27 {
  font-size: 27px;
}
.font-26 {
  font-size: 26px;
}
.font-25 {
  font-size: 25px;
}
.font-24 {
  font-size: 24px;
}
.font-23 {
  font-size: 23px;
}
.font-22 {
  font-size: 22px;
}
.font-21 {
  font-size: 21px;
}
.font-20 {
  font-size: 20px;
}
.font-19 {
  font-size: 19px;
}
.font-18 {
  font-size: 18px;
}
.font-17 {
  font-size: 17px;
}
.font-16 {
  font-size: 16px;
}
.font-15 {
  font-size: 15px;
}
.font-14 {
  font-size: 14px;
}
.font-13 {
  font-size: 13px;
}
.font-12 {
  font-size: 12px;
}
.font-11 {
  font-size: 11px;
}
.font-10 {
  font-size: 10px;
}
.font-9 {
  font-size: 9px;
}
.font-8 {
  font-size: 8px;
}
.font-7 {
  font-size: 7px;
}
.font-6 {
  font-size: 6px;
}
.font-5 {
  font-size: 5px;
}
.font-4 {
  font-size: 4px;
}
.font-3 {
  font-size: 3px;
}
.font-2 {
  font-size: 2px;
}
.font-1 {
  font-size: 1px;
}
.line-height-19 {
  line-height: 19px;
}
.background-primary {
  background-color: white;
}
.background-gray-dark {
  background-color: #8a9292;
}
.background-gray-dark-tint {
  background-color: #474747;
}
.background-secondary {
  background-color: #f4f6f6;
}
.background-color-brand {
  background-color: #3ebfc2;
}
.background-color-brand-light {
  background-color: #e4f6f7;
}
.background-color-red {
  background-color: #ff585d;
}
.background-color-yellow {
  background-color: #ffce3d;
}
.background-color-white {
  background-color: #ffffff;
}
.background-transparent {
  background-color: transparent;
}
.no-text-decoration {
  text-decoration: none;
}
.text-underline {
  text-decoration: underline;
}
.text-capitalize {
  text-transform: capitalize;
}
.no-wrap {
  white-space: nowrap;
}
.border-none {
  border: none;
}
.border-transparent {
  border: 1px solid transparent;
}
.border-primary {
  border: 1px solid #ebf0f0;
}
.border-dark {
  border: 1px solid #333333;
}
.border-white {
  border: 1px solid #ffffff;
}
.border-danger {
  border: 1px solid #ef5455;
}
.border-primary-top {
  border-top: 1px solid #ebf0f0;
}
.border-primary-bottom {
  border-bottom: 1px solid #ebf0f0;
}
.border-dark-top {
  border-top: 1px solid #333333;
}
.border-radius-10 {
  border-radius: 60px;
}
.border-radius-top-10 {
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
}
.border-radius-bottom-10 {
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}
.border-radius-9 {
  border-radius: 54px;
}
.border-radius-top-9 {
  border-top-left-radius: 54px;
  border-top-right-radius: 54px;
}
.border-radius-bottom-9 {
  border-bottom-left-radius: 54px;
  border-bottom-right-radius: 54px;
}
.border-radius-8 {
  border-radius: 48px;
}
.border-radius-top-8 {
  border-top-left-radius: 48px;
  border-top-right-radius: 48px;
}
.border-radius-bottom-8 {
  border-bottom-left-radius: 48px;
  border-bottom-right-radius: 48px;
}
.border-radius-7 {
  border-radius: 42px;
}
.border-radius-top-7 {
  border-top-left-radius: 42px;
  border-top-right-radius: 42px;
}
.border-radius-bottom-7 {
  border-bottom-left-radius: 42px;
  border-bottom-right-radius: 42px;
}
.border-radius-6 {
  border-radius: 36px;
}
.border-radius-top-6 {
  border-top-left-radius: 36px;
  border-top-right-radius: 36px;
}
.border-radius-bottom-6 {
  border-bottom-left-radius: 36px;
  border-bottom-right-radius: 36px;
}
.border-radius-5 {
  border-radius: 30px;
}
.border-radius-top-5 {
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}
.border-radius-bottom-5 {
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
}
.border-radius-4 {
  border-radius: 24px;
}
.border-radius-top-4 {
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}
.border-radius-bottom-4 {
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
}
.border-radius-3 {
  border-radius: 18px;
}
.border-radius-top-3 {
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}
.border-radius-bottom-3 {
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
}
.border-radius-2 {
  border-radius: 12px;
}
.border-radius-top-2 {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.border-radius-bottom-2 {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}
.border-radius-1 {
  border-radius: 6px;
}
.border-radius-top-1 {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.border-radius-bottom-1 {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.scroller::-webkit-scrollbar {
  width: 5px;
}
.scroller::-webkit-scrollbar-thumb {
  background: #333333;
  border-radius: 2.5px;
}
.text-clamp-6 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}
.text-clamp-5 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
.text-clamp-4 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.text-clamp-3 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.text-clamp-2 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.text-clamp-1 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.opacity-hidden {
  opacity: 0;
}
.opacity-25 {
  opacity: 0.25;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-75 {
  opacity: 0.75;
}
.display-none {
  display: none;
}
.display-block {
  display: block;
}
.display-inline {
  display: inline;
}
.display-inline-block {
  display: inline-block;
}
.display-hidden {
  visibility: hidden;
  pointer-events: none;
}
.word-break {
  word-break: break-all;
  word-break: break-word;
}
.invert-color {
  filter: invert(1);
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
.clear-both {
  clear: both;
}
.animation-spinner {
  animation-name: spin;
  animation-duration: 2000ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.animation-slick-spinner {
  margin: auto;
  animation-name: spin;
  animation-duration: 2000ms;
  animation-iteration-count: infinite;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.animation-spinner-wrapper {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.animation-spinner-wrapper .spinner-image {
  width: 25px;
  height: 25px;
}
.dismissable {
  position: absolute;
  width: calc(100% - 2px);
  background-color: #ffffff;
  border: 1px solid #ebf0f0;
  border-radius: 6px;
  z-index: 20;
}
.dismissable.fixed {
  position: fixed;
  width: fit-content;
  width: -moz-fit-content;
}
.action-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.action-list-item .action-list-item-text {
  font-size: 13px;
  display: flex;
  align-items: center;
  font-weight: 500;
}
.action-list-item .action-list-item-action {
  cursor: pointer;
}
.action-list-item.readOnly {
  opacity: 0.4;
}
.action-list-item.readOnly .action-list-item-action {
  pointer-events: none;
}
.avatar-editor-container {
  position: relative;
  border-radius: 6px;
  margin-bottom: 50px;
  text-align: center;
  width: 100%;
  height: 267px;
}
.avatar-editor-container.square-shape .cropper-container .cropper-view-box {
  border-radius: 40px;
}
.avatar-editor-container.circle-shape .cropper-container .cropper-view-box {
  border-radius: 200px;
}
.avatar-editor-container .avatar-editor-buttons {
  position: absolute;
  bottom: 6px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.avatar-editor-container .avatar-edit-overlay {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.avatar-editor-container .cropper-container {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
}
.avatar-editor-container .cropper-container .cropper-modal {
  opacity: 0.85;
}
.avatar-editor-container .cropper-container .cropper-face {
  background: none;
}
.avatar-editor-container .cropper-container .cropper-view-box {
  border: none;
  outline: none;
}
.avatar-editor-container .cropper-container .cropper-line,
.avatar-editor-container .cropper-container .cropper-point {
  display: none;
}
.avatar-editor-container.has-file {
  border: 1px solid transparent;
}
.avatar-editor-container:not(.has-file) {
  border: 1px solid #ebf0f0;
  display: flex;
  place-content: center;
  align-items: center;
}
.avatar-editor-container .cropper-delete-btn {
  position: relative;
  top: 10px;
  width: 50px;
  margin-left: auto;
  margin-right: 10px;
  z-index: 50;
}
.avatar-editor-container .avatar-cropper-container {
  margin: auto;
}
.avatar-editor-container .avatar-cropper-container .avatar-gif {
  max-width: 100%;
  height: 100%;
}
.avatar-editor-container .avatar-cropper-container .react-cropper-element {
  width: 100%;
  height: 267px;
}
.avatar-editor-container .avatar-cropper-container .react-cropper-element img {
  width: 300px;
  height: 267px;
}
.avatar-editor-container .avatar-cropper-container .react-cropper-element .cropper-hide {
  display: none;
}
.avatar-editor-container .avatar-cropper-container .react-cropper-element .cropper-canvas .cropper-hide {
  display: block;
}
.avatar-editor-container .avatar-cropper-container .avatar-cropper-delete-button-container {
  height: 0;
}
.avatar-editor-container .avatar-hover-tooltip-container {
  margin-left: 10px;
}
.avatar-editor-container .avatar-hover-tooltip-container .avatar-hover-tooltip {
  font-size: 11px;
  color: #ffffff;
  opacity: 0;
  transition: opacity 200ms;
  background-color: #333;
  padding: 6px;
  width: fit-content;
  width: -moz-fit-content;
  border-radius: 6px;
  user-select: none;
  pointer-events: none;
  text-align: center;
  z-index: 50;
}
.avatar-editor-container.has-file:hover .avatar-hover-tooltip {
  opacity: 1;
}
.avatar-editor-container .cropper-zoom-buttons {
  display: flex;
  gap: 6px;
  margin-right: 10px;
}
.avatar-editor-container.read-only {
  pointer-events: none;
  border: 1px solid transparent;
  display: flex;
  place-content: center;
  margin-bottom: 0;
}
.avatar-editor-container.read-only .avatar-cropper-container .watermark-background {
  background: transparent;
}
.avatar {
  position: relative;
}
.avatar img {
  width: 100%;
  height: 100%;
  border-radius: 25px;
  object-fit: cover;
  user-select: none;
}
.avatar .presence {
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  position: absolute;
  border-radius: 25px;
  bottom: 0;
  background: transparent;
  display: none;
}
.avatar .presence > div {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border-radius: inherit;
  border: 1px solid #ffffff;
  bottom: 0;
  background: transparent;
}
.avatar .presence.online {
  display: block;
  border: 2px solid #3ebfc2;
}
.avatar .presence.busy {
  display: block;
  border: 2px solid #9a58ff;
}
.avatar .presence.away,
.avatar .presence.offline {
  border: 2px solid transparent;
}
.avatar.square img,
.avatar.square .presence {
  border-radius: 11px;
}
.avatar.noshape img,
.avatar.noshape .presence {
  border-radius: 0;
}
.avatar .badge-text {
  position: absolute;
  top: -4px;
  right: -4px;
  z-index: 10;
  border-radius: 12px;
  background: #3ebfc2;
  color: white;
  text-align: center;
  padding: 3px;
  font-size: 10px;
  width: 10px;
}
.avatar .star-icon {
  position: absolute;
  bottom: -4px;
  left: -4px;
  z-index: 1;
  border-radius: 12px;
  background: #f7cd3b;
  color: white;
}
.avatar.square .badge-text {
  top: -6px;
  right: -6px;
}
.avatar.square .star-icon {
  bottom: -6px;
  left: -6px;
}
.avatar.small {
  height: 30px;
  width: 30px;
  font-size: 10px;
}
.avatar.medium {
  height: 40px;
  width: 40px;
  font-size: 10px;
}
.avatar.large {
  height: 50px;
  width: 50px;
  font-size: 12px;
}
.avatar.large .badge-text {
  width: 12px;
  padding: 4px;
  font-size: 12px;
}
.avatar.huge {
  height: 75px;
  width: 75px;
}
.avatar.huge img,
.avatar.huge .presence {
  -webkit-border-radius: 42px;
  -moz-border-radius: 42px;
  border-radius: 42px;
}
.avatar.huge.square img,
.avatar.huge.square .presence {
  border-radius: 18px;
}
.avatar.xxl {
  height: 180px;
  width: 180px;
}
.avatar.xxl img,
.avatar.xxl .presence {
  -webkit-border-radius: 90px;
  -moz-border-radius: 90px;
  border-radius: 90px;
}
.avatar .avatar-badge-text {
  position: relative;
  top: -10;
  width: fit-content;
  width: -moz-fit-content;
  margin: 0 auto;
  padding: 2px 8px;
  border-radius: 7px;
  background-color: #e4f6f7;
  color: #3ebfc2;
  font-size: 12px;
  text-align: center;
  font-weight: 500;
  text-transform: capitalize;
}
.badge-new {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 10;
  border-radius: 12px;
  background: #3ebfc2;
  color: white;
  text-align: center;
  padding: 3px;
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: bold;
  font-size: 11px;
  width: 12px;
  height: 12px;
  white-space: nowrap;
  display: flex;
  justify-content: center;
  align-items: center;
}
.badge-new.small {
  width: 6px;
  height: 6px;
  top: -3px;
  right: -3px;
  font-size: 8px;
}
.badge-new.over-9 {
  width: 14px;
  font-size: 10px;
}
.badge-new.over-99 {
  width: 14px;
  font-size: 8px;
}
.badge-dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 7px;
  height: 7px;
  color: #ffffff;
  background-color: #3ebfc2;
  border-radius: 7px;
  border: 2px solid #333333;
}
.bar-loader {
  display: none;
}
/*
Currently this only displays fixed at the top of the screen.
When used in the team-chrome layout, it should also display
fixed at the top of the main page section.
*/
.bar-loader.loading {
  animation: move-right 1s ease-in-out infinite;
  background: #3ebfc2;
  display: block;
  height: 2px;
  left: 0;
  max-width: unset !important;
  position: fixed;
  right: 0;
  top: 0;
}
.bar-loader.loading.local {
  animation: move-right-local 0.8s ease-in-out infinite;
  width: 50%;
  position: relative;
}
@keyframes move-right {
  0% {
    transform: translateX(-100%);
  }
  40% {
    transform: translateX(0);
  }
  60% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes move-right-local {
  0% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(20%);
  }
  20% {
    transform: translateX(40%);
  }
  30% {
    transform: translateX(60%);
  }
  40% {
    transform: translateX(80%);
  }
  50% {
    transform: translateX(100%);
  }
  60% {
    transform: translateX(120%);
  }
  70% {
    transform: translateX(140%);
  }
  80% {
    transform: translateX(160%);
  }
  90% {
    transform: translateX(180%);
  }
  100% {
    transform: translateX(200%);
  }
}
.block-list-item {
  position: relative;
  display: grid;
  grid-template-columns: max-content auto;
  grid-gap: 11px;
  align-items: center;
  font-size: 13px;
  line-height: 16px;
}
.block-list-item.small {
  font-size: 12px;
}
.block-list-item.no-avatar {
  grid-template-columns: auto;
}
.block-list-item.clickable {
  cursor: pointer;
}
.block-list-item:focus {
  outline: none;
}
.block-list-item:focus-visible {
  outline: 2px solid #3ebfc2;
  outline-offset: 2px;
  border-radius: 6px;
}
.block-list-item.with-on-hover {
  border-radius: 6px;
}
.block-list-item.with-on-hover:hover {
  background-color: #f4f6f6;
}
.block-list-item.with-text {
  align-items: unset;
}
.block-list-item.disabled {
  cursor: default;
  opacity: 0.3;
}
.block-list-item .block-list-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 32px;
}
.block-list-item .block-list-item-body {
  margin: 3px 0 1px;
  word-break: break-all;
  word-break: break-word;
}
.block-list-item .block-list-item-title {
  color: #333333;
  font-weight: 500;
}
.block-list-item .block-list-item-subtext {
  font-size: 11px;
  white-space: nowrap;
  margin-left: 6px;
}
.block-list-item.small .block-list-item-subtext {
  font-size: 10px;
}
.block-list-item .block-list-item-text {
  font-size: 13px;
  line-height: 19px;
}
.block-list-item .block-list-item-content {
  display: block;
  overflow: auto;
}
.block-list-item .block-list-item-subtext,
.block-list-item .block-list-item-text {
  color: #8a9292;
}
.block-list-item .block-list-item-title,
.block-list-item .block-list-item-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.block-list-item .block-list-item-title.clamp-1,
.block-list-item .block-list-item-text.clamp-1,
.block-list-item .block-list-item-content.clamp-1 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.block-list-item .block-list-item-title.clamp-2,
.block-list-item .block-list-item-text.clamp-2,
.block-list-item .block-list-item-content.clamp-2 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.block-list-item .block-list-item-title.clamp-3,
.block-list-item .block-list-item-text.clamp-3,
.block-list-item .block-list-item-content.clamp-3 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.block-list-item .block-list-item-title.clamp-4,
.block-list-item .block-list-item-text.clamp-4,
.block-list-item .block-list-item-content.clamp-4 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.block-list-item .block-list-item-title.clamp-5,
.block-list-item .block-list-item-text.clamp-5,
.block-list-item .block-list-item-content.clamp-5 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
.block-list-item .block-list-item-drag-icon {
  position: absolute;
  right: 6px;
}
.with-drag-icon {
  padding-right: 20px;
}
.with-selection .selection-bar {
  position: absolute;
  left: 0;
  width: 5px;
  height: 40px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #3ebfc2;
}
.with-selection .selection-bar.small {
  height: 30px;
}
.with-selection .selection-bar.no-avatar {
  height: 100%;
}
.with-selection .selection-circle {
  position: absolute;
  top: calc(50% - 4px);
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background-color: #3ebfc2;
}
.callout-window {
  background-color: white;
  overflow: hidden;
  z-index: 310;
  border-radius: 9px;
  -webkit-box-shadow: 0 5px 12px 1px rgba(138, 146, 146, 0.2);
  -moz-box-shadow: 0 5px 12px 1px rgba(138, 146, 146, 0.2);
  box-shadow: 0 5px 12px 1px rgba(138, 146, 146, 0.2);
}
.marker path {
  fill: white;
  stroke: #cccccc;
  stroke-width: 1px;
  transform-origin: center;
}
.marker.bottom path {
  transform: rotate(0deg);
}
.marker.left path {
  transform: rotate(90deg);
  transform-origin: 100% 50%;
}
.marker.top path {
  transform: rotate(180deg);
}
.marker.right path {
  transform: rotate(270deg);
  transform-origin: 100% 50%;
}
.callout-window,
.marker {
  position: absolute;
}
.callout-window.static,
.marker.static {
  position: static;
}
.callout-window.hidden,
.marker.hidden {
  animation: hide-theme-context-menu 100ms ease-out;
  -webkit-animation-fill-mode: forwards;
  /* Safari 4.0 - 8.0 */
  animation-fill-mode: forwards;
}
.callout-window.visible,
.marker.visible {
  animation: show-theme-context-menu 150ms ease-out;
  -webkit-animation-fill-mode: forwards;
  /* Safari 4.0 - 8.0 */
  animation-fill-mode: forwards;
}
.callout .callout-list {
  display: flex;
  flex-direction: column;
  min-width: 100px;
  padding-bottom: 6px;
  padding-top: 6px;
}
.callout .callout-list-item {
  border: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: normal;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  -webkit-appearance: none;
  background-color: white;
  padding: 6px / 2 12px;
  text-align: left;
  transition: background-color 100ms, color 100ms;
  width: 100%;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
}
.callout .callout-list-item::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.callout .callout-list-item:hover {
  background-color: #d6eff2;
}
.callout .callout-list-item:active {
  background-color: #3ebfc2 !important;
  color: white !important;
}
.callout .callout-list-item i {
  margin-right: 6px;
  width: 18px;
  text-align: center;
}
.callout-button {
  border: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: normal;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  -webkit-appearance: none;
}
.callout-button::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.callout-handler .tooltip-button {
  cursor: pointer;
  height: 100%;
}
.modal-window .carousel {
  height: auto;
  width: 50vw;
}
.carousel {
  position: relative;
  width: fit-content;
  width: -moz-fit-content;
  margin: auto;
  border: none;
}
.carousel .card-container {
  display: flex;
  flex-direction: column;
  font-family: 'Poppins', Arial, sans-serif;
  width: 100%;
  min-height: 150px;
  text-align: center;
}
.carousel .card-container .carousel-card-title {
  display: inline-block;
  text-align: center;
  padding: 12px;
  font-size: 1.5em;
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 100;
  text-decoration: none;
  font-family: 'Poppins', Arial, sans-serif;
}
.carousel .card-container .carousel-card-body {
  padding: 12px 18px;
  margin: auto;
}
.carousel .card-container .carousel-card-image {
  padding: 12px;
  max-height: 30vh;
  margin: 12px auto;
}
.carousel .carousel-nav-buttons,
.carousel .carousel-controls {
  display: flex;
  position: relative;
  margin-top: 18px;
  place-content: center;
  width: 100%;
  bottom: 0;
}
.carousel .carousel-controls .carousel-button {
  width: 24px;
  height: 12px;
  margin: 0 6px / 2 6px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: #cccccc;
  transition: background 200ms;
  cursor: pointer;
}
.carousel .carousel-controls .carousel-button.active,
.carousel .carousel-controls .carousel-button:hover {
  background: #333333;
}
.color-gauge {
  display: block;
  background-color: #333333;
  border: 1px solid black;
  box-shadow: 2px 2px;
  height: 36px;
  border-radius: 18px;
  overflow: hidden;
}
.color-gauge-unfilled,
.color-gauge-filled {
  height: 36px;
  position: relative;
}
.color-gauge-unfilled {
  background-color: #404040;
  bottom: 36px;
  z-index: 10;
}
.color-gauge-filled {
  z-index: 20;
}
.color-gauge-label {
  text-align: center;
  position: relative;
  bottom: 64px;
  z-index: 30;
  font-weight: 600;
  color: white;
}
.modal.confirm-modal .modal-window {
  padding: 6px 12px;
  width: 450px;
}
.modal.confirm-modal .modal-body {
  margin: 12px;
}
.modal.confirm-modal .modal-body .modal-warning-text {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 200;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
}
.modal.confirm-modal .confirm-actions {
  display: flex;
}
.modal.confirm-modal .confirm-modal-error {
  color: #ef5455;
  font-size: 14px;
  text-align: center;
}
.content-editor-new {
  display: flex;
  align-items: center;
  word-break: break-all;
  word-break: break-word;
  cursor: text;
  color: #333333;
  font-size: 13px;
  line-height: 18px;
}
.content-editor-new .DraftEditor-root {
  width: 100%;
}
.content-editor-new .public-DraftEditorPlaceholder-inner {
  color: #8a9292;
}
.content-editor-new .public-DraftEditorPlaceholder-root {
  margin-bottom: -18px;
}
.content-editor-new .mention {
  color: #3ebfc2;
  font-weight: bold;
  cursor: pointer;
}
.chat-new .content-editor-new {
  min-height: 36px;
}
.chat-new .self .markdown-content pre {
  background-color: #8a9292;
}
.mention-suggestions {
  max-height: 180px;
  min-width: 280px;
  overflow-y: auto;
}
.mention-suggestions .mention-suggestions-item {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 12px;
  justify-content: flex-start;
  align-items: center;
  padding: 6px;
}
.mention-suggestions .mention-suggestions-item.selected {
  cursor: pointer;
  background-color: #3ebfc2;
}
.message-editor-wrapper {
  position: relative;
}
.message-editor-new {
  position: relative;
  border-top: 1px solid #ebf0f0;
  background-color: white;
}
.message-editor-new .markdown-menu {
  display: flex;
  flex-direction: row;
  transition: width 150ms;
}
.message-editor-new .markdown-menu.hidden {
  width: 0;
  height: 0;
  display: none;
  overflow: hidden;
}
.message-editor-new .markdown-menu .icon-button > svg {
  padding: 6px;
}
.message-editor-new .markdown-menu .markdown-limiter {
  height: 12px;
  border-right: 1px solid #ebf0f0;
  margin: auto 4px;
}
.message-editor-new.readonly {
  background-color: #f4f6f6;
}
.message-editor-new .message-editor-main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-height: 35vh;
  overflow: auto;
}
.message-editor-new .message-editor-main .message-editor-attachments {
  flex: 0 100%;
}
.message-editor-new .message-editor-main .message-editor-avatar {
  flex-basis: 50px;
}
.message-editor-new .message-editor-main .editor-control-content {
  flex: 1 40%;
}
.message-editor-new .message-editor-main .main-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}
.message-editor-new .message-editor-main .markdown-controls {
  display: flex;
  justify-content: flex-start;
}
.message-editor-new .message-editor-main.multi-row {
  margin-bottom: 40px;
}
.message-editor-new .message-editor-main.multi-row .editor-controls {
  display: flex;
  justify-content: flex-end;
  flex-basis: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  margin-right: 29px;
  margin-bottom: 17px;
}
.message-editor-new .message-editor-main .message-editor-preview-content {
  min-height: 50px;
  padding: 12px;
}
.replying-to-message {
  background-color: #f4f6f6;
  padding: 6px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.replying-to-message .replying-to {
  font-size: 12px;
  color: #8a9292;
}
.replying-to-message .reply-message {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.message-editor-advanced {
  padding-top: 18px;
  background-color: white;
  height: 300px;
  width: 500px;
  overflow-y: hidden;
}
.message-editor-advanced em-emoji-picker {
  height: 300px;
}
.message-editor-advanced .files-picker .drag-and-drop-area {
  margin-left: 12px;
  margin-right: 12px;
}
.message-editor-advanced .files-picker .existing-files-section .existing-files-list {
  padding: 0 12px;
}
.message-editor-advanced .existing-files-scrollable {
  max-height: 180px;
  overflow-y: auto;
}
@media screen and (max-height: 700px) {
  .message-editor-new .message-editor-main {
    max-height: 30vh;
  }
}
@media screen and (max-height: 550px) {
  .message-editor-new .message-editor-main {
    max-height: 20vh;
  }
}
.mobile .message-editor-new .message-editor-main {
  max-height: 100px;
}
.mobile .message-editor-advanced {
  width: 90dvw;
  padding-top: 6px;
  height: 250px;
}
.mobile .message-editor-advanced .existing-files-scrollable {
  max-height: 80px;
}
.mobile .existing-files-section .existing-files-details-thumbnail {
  grid-template-columns: repeat(auto-fill, 70px);
}
.mobile .existing-files-section .existing-files-details-thumbnail .existing-file .existing-file-image img {
  height: 70px;
}
.mobile .existing-files-section .existing-files-details-thumbnail .existing-file .file-attachment-without-preview {
  min-width: 70px;
  min-height: 70px;
}
.mobile .existing-files-section .existing-files-details-thumbnail .existing-file .file-attachment-without-preview .file-attachment-icon {
  display: none;
}
.markdown-menu {
  display: flex;
  flex-direction: row;
}
.markdown-menu .markdown-menu-item {
  cursor: pointer;
  background-color: white;
  padding: 8px 12px;
}
.markdown-menu .markdown-menu-item .italic-svg {
  position: relative;
  top: 1px;
}
.markdown-menu .markdown-menu-divider {
  border-right: 1px solid #cccccc;
  margin: 6px 0;
}
.markdown-menu .markdown-menu-item-checklist-icon:hover {
  color: #3ebfc2;
}
.markdown-info-modal {
  font-size: 18px;
  font-weight: 500;
}
.markdown-info-modal .info-text {
  text-align: center;
  color: #888888;
}
.markdown-info-modal .info-text a {
  color: inherit;
}
em-emoji-picker {
  width: 100%;
  box-shadow: none;
}
.schedule-message-popup {
  width: 300px;
}
.schedule-message-popup .schedule-message-popup-body {
  padding: 21px 30px 16px;
}
.schedule-message-popup .schedule-message-popup-body .schedule-message-popup-title {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 5px;
}
.scheduled-messages-wrapper .scheduled-messages-title {
  text-align: center;
  font-weight: 500;
  font-size: 11px;
  color: #8a9292;
}
.scheduled-messages-wrapper .scheduled-messages-list {
  padding: 12px 12px 0;
}
.scheduled-messages-wrapper .scheduled-messages-list.has-highlighted .scheduled-messages-list-item:not(.highlighted) {
  opacity: 0.25;
}
.scheduled-messages-wrapper .scheduled-messages-list.has-highlighted .scheduled-messages-list-item .scheduled-message-menu {
  visibility: hidden;
}
.scheduled-messages-wrapper .scheduled-messages-list .scheduled-messages-list-item {
  margin-bottom: 14px;
}
.scheduled-messages-wrapper .scheduled-messages-list .scheduled-messages-list-item .scheduled-message-layout {
  grid-template-columns: auto;
  justify-content: flex-end;
  position: relative;
  display: grid;
  grid-gap: 7px;
}
.scheduled-messages-wrapper .scheduled-messages-list .scheduled-messages-list-item .scheduled-message-middle {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.scheduled-messages-wrapper .scheduled-messages-list .scheduled-messages-list-item .scheduled-message-menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 55px;
  opacity: 0;
  margin-right: 10px;
}
.scheduled-messages-wrapper .scheduled-messages-list .scheduled-messages-list-item .scheduled-message-menu.visible {
  opacity: 1;
  transition: opacity 300ms;
}
.scheduled-messages-wrapper .scheduled-messages-list .scheduled-messages-list-item:hover .scheduled-message-menu {
  opacity: 1;
  transition: opacity 300ms;
}
.scheduled-messages-wrapper .scheduled-messages-list .scheduled-messages-list-item .scheduled-message-main {
  position: relative;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
}
.scheduled-messages-wrapper .scheduled-messages-list .scheduled-messages-list-item .scheduled-message-body {
  position: relative;
  padding: 10px 14px 9px;
  overflow-wrap: break-word;
  -webkit-border-radius: 13px;
  -moz-border-radius: 13px;
  border-radius: 13px;
  word-break: break-all;
  word-break: break-word;
  width: fit-content;
  width: -moz-fit-content;
  display: grid;
  font-size: 13px;
  line-height: 19px;
  color: #333333;
  background-color: #e4f6f7;
  border-bottom-right-radius: unset;
}
.scheduled-messages-wrapper .scheduled-messages-list .scheduled-messages-list-item .scheduled-message-footer {
  display: flex;
  justify-content: flex-end;
  color: #8a9292;
  margin-top: 4px;
  font-size: 11px;
  grid-column: span 2;
}
.scheduled-messages-wrapper .scheduled-messages-edit {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% - 60px);
  padding: 15px 30px 21px;
  background-color: #ffffff;
  border-top: 1px solid #ebf0f0;
  z-index: 1;
}
.scheduled-messages-wrapper .scheduled-messages-edit .scheduled-messages-edit-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}
.content-text .content-paragraph {
  min-height: 16px;
  margin: 0;
  padding: 0 6px;
}
.content-text a {
  color: #00b0b9;
  text-decoration: none;
}
.markdown-content {
  overflow-x: auto;
  overflow-y: hidden;
  word-break: break-all;
  word-break: break-word;
}
.markdown-content.preview-mode {
  margin: 6px 0;
  width: 100%;
}
.markdown-content ol {
  margin-left: 24px;
}
.markdown-content ol li {
  list-style: decimal;
}
.markdown-content ul {
  margin-left: 24px;
}
.markdown-content ul li {
  list-style: disc;
}
.markdown-content h1 {
  display: block;
  font-size: 2em;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
}
.markdown-content pre {
  padding: 12px;
  font-size: 12px;
  line-height: 18px;
  background-color: beige;
  border-radius: 6px;
  margin-bottom: 12px;
  overflow-y: auto;
}
.markdown-content p {
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 3px;
  margin-inline-end: 3px;
}
.markdown-content :first-child {
  margin-block-start: 0;
}
.markdown-content :last-child {
  margin-block-end: 0;
}
.markdown-content .contains-task-list {
  margin: 0;
  margin-block-start: 18px;
  margin-block-end: 18px;
  /* disabled state */
  /* Checked state */
  /* disabled and checked state */
  /* Checkmark */
}
.markdown-content .contains-task-list .task-list-item {
  list-style-type: none;
}
.markdown-content .contains-task-list input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border: 2px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  top: 2px;
  color: white;
}
.markdown-content .contains-task-list input[type='checkbox'][disabled] {
  cursor: default;
  opacity: 0.7;
  pointer-events: none;
}
.markdown-content .contains-task-list input[type='checkbox']:checked {
  background-color: #3ebfc2;
  border-color: #3ebfc2;
}
.markdown-content .contains-task-list input[type='checkbox'][disabled]:checked {
  background-color: #8a9292;
  border-color: #8a9292;
}
.markdown-content .contains-task-list input[type='checkbox']:checked::after {
  content: '';
  position: absolute;
  top: 0px;
  left: 3px;
  width: 3px;
  height: 7px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.chat-message-new.self .markdown-content .contains-task-list input[type='checkbox']:checked {
  background-color: #257375;
  border-color: #257375;
}
.user-mention {
  color: #3ebfc2;
  font-weight: bold;
  cursor: pointer;
}
.highlight {
  font-weight: bold;
}
.inline-control-list {
  display: flex;
  align-items: baseline;
}
.inline-control-list .control-list-item {
  display: inline-block;
}
.inline-control-list .control-list-item.button-control.hidden {
  visibility: hidden;
}
.inline-control-list .control-list-item.button-control.disabled {
  opacity: 0.4;
  border: none;
  cursor: default;
}
.inline-control-list .control-list-item.button-control button {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  background-color: white;
  border: 1px solid #cccccc;
  color: #555555;
  cursor: pointer;
  display: inline-block;
  padding: 6px 12px;
  text-align: center;
  transition: border 150ms, color 100ms;
  user-select: none;
  border-radius: 0;
}
.inline-control-list .control-list-item.button-control button:not(:first-of-type) {
  border-left: none;
  margin-left: 0;
}
.inline-control-list .control-list-item.button-control button:first-of-type:not(:last-of-type) {
  border-right: none;
}
.inline-control-list .control-list-item.button-control button:first-of-type {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.inline-control-list .control-list-item.button-control button:last-of-type {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.inline-control-list .control-list-item.button-control button.affirmative {
  background-color: #d6eff2;
}
.inline-control-list .control-list-item.button-control button:hover.affirmative {
  border: 1px solid #00960a;
}
.inline-control-list .control-list-item.button-control button:hover.negative {
  border: 1px solid #ef5455;
}
.inline-control-list .control-list-item.button-control button:hover.neutral {
  border: 1px solid #3ebfc2;
}
.inline-control-list .control-list-item.button-control button:active {
  color: #555555;
}
.inline-control-list .control-list-item.button-control button:active:hover {
  color: #3ebfc2;
}
.inline-control-list .control-list-item.button-control button:active:hover.affirmative {
  color: #00960a;
}
.inline-control-list .control-list-item.button-control button:active:hover.negative {
  color: #ef5455;
}
.inline-control-list .control-list-item.button-control button:active:hover.neutral {
  color: #3ebfc2;
}
.inline-control-list .control-list-item.tag-control {
  color: white;
  cursor: default;
  display: inline-block;
  font-size: 75%;
  margin-left: 6px;
  padding: 6px 12px;
  text-align: center;
  user-select: none;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.inline-control-list .control-list-item.tag-control.affirmative {
  background-color: #00960a;
}
.inline-control-list .control-list-item.tag-control.negative {
  background-color: #ef5455;
}
.inline-control-list .control-list-item.tag-control.neutral {
  background-color: #3ebfc2;
}
.inline-control-list .control-list-item.tag-control.dismissed {
  background-color: #555555;
}
.new-discussion-modal.modal-window-new {
  top: 5%;
}
.create-video-modal .create-video-schedule-radio-buttons {
  font-weight: bold;
  margin-top: 14px;
  margin-bottom: 11px;
}
.create-video-modal .create-video-modal-people-label {
  margin: 12px 0 16px 0;
  font-family: 'Poppins';
  font-weight: bold;
  clear: both;
}
.create-video-modal .create-video-audio-only-checkbox.checkbox-input-container {
  margin-bottom: 0;
  margin-top: 12px;
  font-weight: 500;
  width: fit-content;
}
.create-video-modal .create-call-repeat-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.create-video-modal .create-call-repeat-wrapper #create-call-repeat-checkbox-input {
  height: 28px;
  margin-bottom: 0;
  margin-top: 10px;
}
.create-video-modal .create-call-repeat-wrapper #create-call-repeat-checkbox-input .checkbox-label {
  font-weight: 500;
}
.create-video-modal .create-call-repeat-wrapper .create-call-repeat-type-dropdown,
.create-video-modal .create-call-repeat-wrapper .create-call-repeat-count-dropdown {
  display: flex;
  align-items: center;
  gap: 8px;
}
.create-video-premium-feature-wrapper {
  top: 0;
}
.create-video-premium-feature-wrapper .create-video-premium-feature-card {
  width: 250px;
}
.date-picker-wrapper {
  margin: 12px 0;
}
.date-picker-wrapper .date-picker {
  display: flex;
  flex-wrap: wrap;
  white-space: nowrap;
}
.date-picker-wrapper .date-picker.disabled .react-datepicker__input-container input {
  cursor: unset;
}
.date-picker-wrapper .date-picker .react-datepicker-wrapper {
  width: 100%;
}
.date-picker-wrapper .date-picker .react-datepicker__input-container {
  width: 100%;
}
.date-picker-wrapper .date-picker .react-datepicker__input-container input {
  cursor: pointer;
  padding: 9px 14px 10px;
  transition: border 150ms;
  width: 100%;
  font-size: 14px;
  line-height: 19px;
  border-radius: 8px;
  border: 1px solid #f4f6f6;
  font-family: 'Roboto', Arial, sans-serif;
}
.date-picker-wrapper .date-picker .react-datepicker__input-container input.error {
  border-color: #ff585d;
}
.date-picker-wrapper .date-picker .react-datepicker__input-container input:disabled {
  border: 1px solid #f4f6f6;
  background-color: #f4f6f6;
  color: #8a9292;
}
.date-picker-wrapper .date-picker .date-picker-container,
.date-picker-wrapper .date-picker .time-picker-container {
  position: relative;
  width: 100%;
}
.date-picker-wrapper .date-picker .date-picker-container .react-datepicker-popper,
.date-picker-wrapper .date-picker .time-picker-container .react-datepicker-popper {
  width: 100%;
  z-index: 10;
  margin-bottom: 0px;
}
.date-picker-wrapper .date-picker .date-picker-container .react-datepicker--time-only,
.date-picker-wrapper .date-picker .time-picker-container .react-datepicker--time-only {
  width: 100%;
}
.date-picker-wrapper .date-picker .date-picker-container .react-datepicker__time-container,
.date-picker-wrapper .date-picker .time-picker-container .react-datepicker__time-container {
  float: unset;
  width: unset;
}
.date-picker-wrapper .date-picker .date-picker-container .react-datepicker__time-box,
.date-picker-wrapper .date-picker .time-picker-container .react-datepicker__time-box {
  width: unset;
}
.date-picker-wrapper .date-picker.single-row .date-picker-container {
  flex: 2;
  margin-bottom: unset;
}
.date-picker-wrapper .date-picker.single-row .time-picker-container {
  flex: 1;
  margin-left: 10px;
}
.date-picker-wrapper .date-picker .date-picker-container {
  margin-bottom: 10px;
}
.date-picker-wrapper .date-picker .date-picker-container .react-datepicker__close-icon {
  right: 30px;
}
.date-picker-wrapper .date-picker .date-picker-container .react-datepicker__header {
  background: #ffffff;
  border-bottom: none;
}
.date-picker-wrapper .date-picker .date-picker-container .react-datepicker__header .react-datepicker__current-month {
  margin-top: 5px;
  margin-bottom: 10px;
}
.date-picker-wrapper .date-picker .date-picker-container .react-datepicker__header .react-datepicker__header--time {
  padding-bottom: 12px;
}
.date-picker-wrapper .date-picker .date-picker-container .react-datepicker {
  width: 256px;
  border-color: #ebf0f0;
}
.date-picker-wrapper .date-picker .date-picker-container .react-datepicker-popper {
  margin-left: 0;
}
.date-picker-wrapper .date-picker .date-picker-container .date-picker-container {
  display: flex;
}
.date-picker-wrapper .date-picker .date-picker-container .react-datepicker__day:hover {
  background-color: #474747;
  color: #ffffff;
}
.date-picker-wrapper .date-picker .date-picker-container .react-datepicker__close-icon::after,
.date-picker-wrapper .date-picker .date-picker-container .react-datepicker__day--selected,
.date-picker-wrapper .date-picker .date-picker-container .react-datepicker__day--keyboard-selected,
.date-picker-wrapper .date-picker .date-picker-container .react-datepicker__time-list-item--selected {
  background-color: #3ebfc2 !important;
  color: #ffffff !important;
  margin-top: auto;
}
.date-picker-wrapper .date-picker .date-picker-container .react-datepicker__month {
  margin: 0;
}
.date-picker-wrapper .date-picker .date-picker-container .react-datepicker__month-container {
  width: 100%;
}
.date-picker-wrapper .date-picker .date-picker-container .react-datepicker__day-names {
  display: flex;
  place-content: space-evenly;
}
.date-picker-wrapper .date-picker .date-picker-container .react-datepicker__day-names .react-datepicker__day-name {
  color: #8a9292;
}
.date-picker-wrapper .date-picker .date-picker-container .react-datepicker__week {
  display: flex;
  place-content: space-evenly;
  margin-bottom: 8px;
}
.date-picker-wrapper .date-picker .date-picker-container .react-datepicker__day {
  border-radius: 50px;
  margin: 0;
  padding: 3px;
}
.date-picker-wrapper .date-picker .date-picker-container .react-datepicker__day--today:not(.react-datepicker__day--selected):not(:hover) {
  color: #3ebfc2;
}
.date-picker-wrapper .date-picker .date-picker-container .date-picker-calendar-icon {
  z-index: 5;
  position: absolute;
  pointer-events: none;
  top: 10px;
  right: 10px;
}
.date-picker-wrapper .date-picker .date-picker-container .date-picker-calendar-icon.disabled {
  opacity: 0.6;
}
.date-picker-wrapper .date-picker .time-picker-container .react-datepicker {
  border-top: none;
  border-color: #ebf0f0;
  margin-top: -16px;
}
.date-picker-wrapper .date-picker .time-picker-container .react-datepicker__time-list {
  overflow-x: hidden;
}
.date-picker-wrapper .date-picker .time-picker-container .react-datepicker__triangle,
.date-picker-wrapper .date-picker .time-picker-container .react-datepicker__header--time {
  display: none;
}
.date-picker-wrapper .date-picker .time-picker-container .react-datepicker__time .react-datepicker__time-box .react-datepicker__time-list .react-datepicker__time-list-item {
  font-size: 13px;
  font-family: 'Roboto';
  text-align: left;
  height: 16px;
  padding: 6px;
  border-radius: 6px;
  margin-left: 6px;
}
.date-picker-wrapper .date-picker .time-picker-container .react-datepicker__time .react-datepicker__time-box .react-datepicker__time-list .react-datepicker__time-list-item.react-datepicker__time-list-item--selected {
  background-color: #f4f6f6;
  color: #333333;
}
.date-picker-wrapper .date-picker .time-picker-container .time-picker-dropdown-icon {
  z-index: 5;
  position: absolute;
  pointer-events: none;
  top: 18px;
  right: 16px;
}
.date-picker-wrapper .text-error {
  margin-top: 4px;
}
.draggable-carousel-container {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  place-content: space-around;
  margin: auto;
}
.draggable-carousel-container .plan-page-number {
  width: fit-content;
  width: -moz-fit-content;
  border-radius: 12px;
  padding: 3px 6px;
  letter-spacing: -0.5;
  font-size: 11px;
  margin: 12px 24px 6px;
  color: #3ebfc2;
  background-color: #d6eff2;
}
.draggable-carousel-container .carousel-cards {
  display: flex;
  flex-direction: row;
  height: 100%;
  transition: transform 300ms;
}
.draggable-carousel-container .carousel-cards .carousel-card {
  padding: 18px 24px;
  min-height: 300px;
}
.draggable-carousel-container .carousel-cards.react-draggable-dragging {
  transition: none;
}
.draggable-carousel-container .carousel-nav-button-container {
  display: flex;
  place-content: flex-end;
  width: 150px;
}
.draggable-carousel-container .carousel-nav-button-container .carousel-nav-button {
  width: 28px;
  margin-right: 12px;
}
.draggable-carousel-container .draggable-carousel-controls {
  margin: auto;
  margin-bottom: 6px;
}
.control-list-item.dropdown-control {
  padding: 6px;
  position: relative;
  max-height: 24px;
  display: grid;
}
.control-list-item.dropdown-control.clearable {
  grid-template-columns: auto 25px;
}
.control-list-item.dropdown-control.disabled {
  opacity: 0.4;
  border: none;
  cursor: default;
}
.control-list-item.dropdown-control .dropdown-control-list {
  background-color: white;
  border: 1px solid #cccccc;
  min-width: calc(100% - 12px);
  position: absolute;
  top: 36px;
  left: 6px;
  z-index: 1000;
  margin-bottom: 80px;
  -webkit-box-shadow: 0 5px 12px 1px rgba(138, 146, 146, 0.2);
  -moz-box-shadow: 0 5px 12px 1px rgba(138, 146, 146, 0.2);
  box-shadow: 0 5px 12px 1px rgba(138, 146, 146, 0.2);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.control-list-item.dropdown-control .dropdown-control-list .dropdown-control-list-item button span {
  width: 100%;
  display: grid;
  grid-gap: 6px;
  grid-template-columns: auto;
}
.control-list-item.dropdown-control .dropdown-control-list .dropdown-control-list-item button span.icon {
  grid-template-columns: 18px auto;
}
.control-list-item.dropdown-control .dropdown-control-list.visible {
  animation: show-theme-context-menu 100ms ease-out;
  margin-bottom: 120px;
}
.control-list-item.dropdown-control .dropdown-control-list.hidden {
  display: none;
}
.control-list-item.dropdown-control .dropdown-control-list-item:first-of-type button {
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
}
.control-list-item.dropdown-control .dropdown-control-list-item:last-of-type button {
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}
.control-list-item.dropdown-control .dropdown-control-list-item button {
  border: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: normal;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  -webkit-appearance: none;
  align-items: center;
  background-color: white;
  display: flex;
  padding: 6px 12px;
  transition: background-color 150ms;
  width: 100%;
}
.control-list-item.dropdown-control .dropdown-control-list-item button::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.control-list-item.dropdown-control .dropdown-control-list-item button:hover,
.control-list-item.dropdown-control .dropdown-control-list-item button:focus {
  background-color: #d6eff2;
  outline: none !important;
}
.control-list-item.dropdown-control .dropdown-control-list-item button span {
  margin: auto;
  white-space: nowrap;
}
.control-list-item.dropdown-control .dropdown-control-list-item h2 {
  font-size: 14px;
  font-weight: normal;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 300px;
}
.control-list-item.dropdown-control button.button-main {
  border-radius: 0;
  background-color: white;
  border: 1px solid #cccccc;
  color: #555555;
  display: inline-block;
  padding: 6px 12px;
  text-align: center;
  transition: border 150ms, color 100ms;
  user-select: none;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  text-decoration: none;
}
.control-list-item.dropdown-control button.button-main.clearable {
  padding: 6px 8px;
}
.control-list-item.dropdown-control button.button-main i {
  margin-right: 6px;
}
.control-list-item.dropdown-control button.button-main.small {
  background-color: white;
  width: 12px;
}
.control-list-item.dropdown-control button.button-main.small svg {
  padding: 0;
}
.control-list-item.dropdown-control button.button-main svg {
  padding-left: 6px;
  stroke: #555555;
}
.control-list-item.dropdown-control button.button-main.button-main:first-of-type {
  margin-right: 0;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.control-list-item.dropdown-control button.button-main.button-main:last-of-type {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.control-list-item.dropdown-control button.button-main.button-main:not(:first-of-type) {
  border-left: 1px solid transparent;
  margin-left: 0;
}
.control-list-item.dropdown-control button.button-main:first-of-type {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.control-list-item.dropdown-control button.button-main:last-of-type {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.control-list-item.dropdown-control button.button-main.affirmative {
  background-color: #d6eff2;
}
.control-list-item.dropdown-control button.button-main.negative {
  background-color: #ef5455;
}
.control-list-item.dropdown-control button.button-main.neutral {
  background-color: white;
}
.control-list-item.dropdown-control button.button-main.neutral.readonly {
  border: none;
  opacity: 0.7;
  background-color: #3ebfc2;
  color: white;
}
.control-list-item.dropdown-control button.button-main:not(.readonly) {
  cursor: pointer;
}
.control-list-item.dropdown-control button.button-main:not(.readonly):hover.affirmative {
  border: 1px solid #00960a;
}
.control-list-item.dropdown-control button.button-main:not(.readonly):hover.negative {
  border: 1px solid #ef5455;
}
.control-list-item.dropdown-control button.button-main:not(.readonly):hover.neutral {
  border: 1px solid #3ebfc2;
}
.control-list-item.dropdown-control button.button-main:not(.readonly):active {
  color: #555555;
}
.control-list-item.dropdown-control button.button-main:not(.readonly):active:hover {
  color: #3ebfc2;
}
.control-list-item.dropdown-control button.button-main:not(.readonly):active:hover.affirmative {
  color: #00960a;
}
.control-list-item.dropdown-control button.button-main:not(.readonly):active:hover.negative {
  color: #ef5455;
}
.control-list-item.dropdown-control button.button-main:not(.readonly):active:hover.neutral {
  color: #3ebfc2;
}
.empty-state {
  position: absolute;
  top: 30vh;
  width: 100%;
  text-align: center;
  margin: auto;
  display: grid;
  grid-gap: 24px;
}
.message-files-list-wrapper .message-files-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
}
.message-files-list-wrapper .message-files-list .message-files-list-item {
  position: relative;
  width: 200px;
  height: 100px;
  margin-bottom: 20px;
}
.message-files-list-wrapper .message-files-list .message-files-list-item .new-message-image.loading {
  width: 100%;
  height: 100%;
}
.message-files-list-wrapper .message-files-list .message-files-list-item .discussion-message-file img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.message-files-list-wrapper .message-files-list .message-files-list-item .attachment-unpreviewable {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 100%;
  color: #ffffff;
  background-color: #474747;
  border-radius: inherit;
  cursor: pointer;
}
.message-files-list-wrapper .message-files-list .message-files-list-item .attachment-unpreviewable .file-attachment-without-preview {
  border: unset;
  background-color: transparent;
}
.message-files-list-wrapper .message-files-list .message-files-list-item .attachment-unpreviewable .file-attachment-without-preview .file-attachment-filename {
  color: inherit;
}
.message-files-list-wrapper .transparent-pointer {
  width: 100%;
  height: 100%;
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
.message-files-list-wrapper .transparent-pointer .new-attachment-list-item-overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #333333;
  opacity: 0.7;
}
.message-files-list-wrapper .transparent-pointer .attachment-list-count {
  position: absolute;
  width: 100%;
  height: 100%;
  font-size: 36px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.new-message-attachment .new-message-image.loading {
  display: flex;
  height: 200px;
  width: 200px;
  justify-content: center;
  align-items: center;
  background-color: #f4f6f6;
}
.manage-files .manage-files-header {
  height: 40px;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}
.existing-files-load-more {
  text-align: center;
  padding: 10px 0;
  margin: 10px 0;
  cursor: pointer;
}
.file-attachment-list {
  display: flex;
  flex-wrap: wrap;
}
.file-attachment-list .file-attachment-list-item {
  margin: 0 10px 10px 0;
}
.file-attachment-list .file-attachment-list-item .file-attachment-without-preview {
  width: 110px;
  height: 110px;
}
.file-attachment-list .manage-attachment-list-item {
  display: block;
  overflow: hidden;
  margin: 18px 0 6px;
}
.file-attachment {
  position: relative;
  border-radius: 10px;
}
.file-attachment.failed {
  border: 2px solid #ff585d;
}
.file-attachment.failed .progress-overlay {
  display: none;
}
.file-attachment .file-attachment-image {
  border-radius: inherit;
}
.file-attachment .file-attachment-image img {
  width: auto;
  min-width: 30px;
  max-width: 200px;
  height: 110px;
  display: block;
  object-fit: contain;
}
.file-attachment .file-attachment-without-preview.in-progress,
.file-attachment .file-attachment-image.in-progress {
  opacity: 0.25;
}
.file-attachment .placeholder {
  position: absolute;
  width: 100px;
  bottom: 18px;
  text-align: center;
  word-break: break-all;
  padding: 6px;
  font-size: 12px;
}
.file-attachment .file-name {
  word-break: break-all;
  word-break: break-word;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: auto;
  padding-left: 4px;
  font-size: 10px;
  flex: 1;
}
.file-attachment:hover .file-attachment-header {
  display: flex;
}
.file-attachment-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  color: white;
  width: 16px;
  height: 16px;
  background-color: #333333;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 9px;
  z-index: 10;
}
.mobile .file-attachment .file-attachment-image img {
  max-width: 80px;
  height: 80px;
}
.progress-overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.progress-overlay.full {
  display: none;
}
.progress-overlay .empty-progress-circle {
  width: calc(100% - (3px * 2));
  height: calc(100% - (3px * 2));
  position: absolute;
  border: 3px solid #ffffff;
  border-radius: 50%;
}
.progress-overlay .progress-circle {
  font-size: 10px;
  position: relative;
  padding: 0;
  width: 5em;
  height: 5em;
  border-radius: 50%;
  line-height: 5em;
}
.progress-overlay .value-bar {
  position: absolute;
  clip: rect(0, 2.5em, 5em, 0);
  width: 5em;
  height: 5em;
  border-radius: 50%;
  border: 3px solid #3ebfc2;
  box-sizing: border-box;
}
.progress-overlay .left-half-clipper {
  border-radius: 50%;
  width: 5em;
  height: 5em;
  position: absolute;
  clip: rect(0, 5em, 5em, 2.5em);
}
.progress-overlay.over-50 .empty-progress-circle {
  transform: rotate(45deg);
  border-right-color: #3ebfc2;
  border-top-color: #3ebfc2;
}
.progress-overlay.over-50 .left-half-clipper {
  clip: rect(auto, auto, auto, auto);
}
.progress-circle.p1 .value-bar {
  transform: rotate(4deg);
}
.progress-circle.p2 .value-bar {
  transform: rotate(7deg);
}
.progress-circle.p3 .value-bar {
  transform: rotate(11deg);
}
.progress-circle.p4 .value-bar {
  transform: rotate(14deg);
}
.progress-circle.p5 .value-bar {
  transform: rotate(18deg);
}
.progress-circle.p6 .value-bar {
  transform: rotate(22deg);
}
.progress-circle.p7 .value-bar {
  transform: rotate(25deg);
}
.progress-circle.p8 .value-bar {
  transform: rotate(29deg);
}
.progress-circle.p9 .value-bar {
  transform: rotate(32deg);
}
.progress-circle.p10 .value-bar {
  transform: rotate(36deg);
}
.progress-circle.p11 .value-bar {
  transform: rotate(40deg);
}
.progress-circle.p12 .value-bar {
  transform: rotate(43deg);
}
.progress-circle.p13 .value-bar {
  transform: rotate(47deg);
}
.progress-circle.p14 .value-bar {
  transform: rotate(50deg);
}
.progress-circle.p15 .value-bar {
  transform: rotate(54deg);
}
.progress-circle.p16 .value-bar {
  transform: rotate(58deg);
}
.progress-circle.p17 .value-bar {
  transform: rotate(61deg);
}
.progress-circle.p18 .value-bar {
  transform: rotate(65deg);
}
.progress-circle.p19 .value-bar {
  transform: rotate(68deg);
}
.progress-circle.p20 .value-bar {
  transform: rotate(72deg);
}
.progress-circle.p21 .value-bar {
  transform: rotate(76deg);
}
.progress-circle.p22 .value-bar {
  transform: rotate(79deg);
}
.progress-circle.p23 .value-bar {
  transform: rotate(83deg);
}
.progress-circle.p24 .value-bar {
  transform: rotate(86deg);
}
.progress-circle.p25 .value-bar {
  transform: rotate(90deg);
}
.progress-circle.p26 .value-bar {
  transform: rotate(94deg);
}
.progress-circle.p27 .value-bar {
  transform: rotate(97deg);
}
.progress-circle.p28 .value-bar {
  transform: rotate(101deg);
}
.progress-circle.p29 .value-bar {
  transform: rotate(104deg);
}
.progress-circle.p30 .value-bar {
  transform: rotate(108deg);
}
.progress-circle.p31 .value-bar {
  transform: rotate(112deg);
}
.progress-circle.p32 .value-bar {
  transform: rotate(115deg);
}
.progress-circle.p33 .value-bar {
  transform: rotate(119deg);
}
.progress-circle.p34 .value-bar {
  transform: rotate(122deg);
}
.progress-circle.p35 .value-bar {
  transform: rotate(126deg);
}
.progress-circle.p36 .value-bar {
  transform: rotate(130deg);
}
.progress-circle.p37 .value-bar {
  transform: rotate(133deg);
}
.progress-circle.p38 .value-bar {
  transform: rotate(137deg);
}
.progress-circle.p39 .value-bar {
  transform: rotate(140deg);
}
.progress-circle.p40 .value-bar {
  transform: rotate(144deg);
}
.progress-circle.p41 .value-bar {
  transform: rotate(148deg);
}
.progress-circle.p42 .value-bar {
  transform: rotate(151deg);
}
.progress-circle.p43 .value-bar {
  transform: rotate(155deg);
}
.progress-circle.p44 .value-bar {
  transform: rotate(158deg);
}
.progress-circle.p45 .value-bar {
  transform: rotate(162deg);
}
.progress-circle.p46 .value-bar {
  transform: rotate(166deg);
}
.progress-circle.p47 .value-bar {
  transform: rotate(169deg);
}
.progress-circle.p48 .value-bar {
  transform: rotate(173deg);
}
.progress-circle.p49 .value-bar {
  transform: rotate(176deg);
}
.progress-circle.p50 .value-bar {
  transform: rotate(180deg);
}
.progress-circle.p51 .value-bar {
  transform: rotate(184deg);
}
.progress-circle.p52 .value-bar {
  transform: rotate(187deg);
}
.progress-circle.p53 .value-bar {
  transform: rotate(191deg);
}
.progress-circle.p54 .value-bar {
  transform: rotate(194deg);
}
.progress-circle.p55 .value-bar {
  transform: rotate(198deg);
}
.progress-circle.p56 .value-bar {
  transform: rotate(202deg);
}
.progress-circle.p57 .value-bar {
  transform: rotate(205deg);
}
.progress-circle.p58 .value-bar {
  transform: rotate(209deg);
}
.progress-circle.p59 .value-bar {
  transform: rotate(212deg);
}
.progress-circle.p60 .value-bar {
  transform: rotate(216deg);
}
.progress-circle.p61 .value-bar {
  transform: rotate(220deg);
}
.progress-circle.p62 .value-bar {
  transform: rotate(223deg);
}
.progress-circle.p63 .value-bar {
  transform: rotate(227deg);
}
.progress-circle.p64 .value-bar {
  transform: rotate(230deg);
}
.progress-circle.p65 .value-bar {
  transform: rotate(234deg);
}
.progress-circle.p66 .value-bar {
  transform: rotate(238deg);
}
.progress-circle.p67 .value-bar {
  transform: rotate(241deg);
}
.progress-circle.p68 .value-bar {
  transform: rotate(245deg);
}
.progress-circle.p69 .value-bar {
  transform: rotate(248deg);
}
.progress-circle.p70 .value-bar {
  transform: rotate(252deg);
}
.progress-circle.p71 .value-bar {
  transform: rotate(256deg);
}
.progress-circle.p72 .value-bar {
  transform: rotate(259deg);
}
.progress-circle.p73 .value-bar {
  transform: rotate(263deg);
}
.progress-circle.p74 .value-bar {
  transform: rotate(266deg);
}
.progress-circle.p75 .value-bar {
  transform: rotate(270deg);
}
.progress-circle.p76 .value-bar {
  transform: rotate(274deg);
}
.progress-circle.p77 .value-bar {
  transform: rotate(277deg);
}
.progress-circle.p78 .value-bar {
  transform: rotate(281deg);
}
.progress-circle.p79 .value-bar {
  transform: rotate(284deg);
}
.progress-circle.p80 .value-bar {
  transform: rotate(288deg);
}
.progress-circle.p81 .value-bar {
  transform: rotate(292deg);
}
.progress-circle.p82 .value-bar {
  transform: rotate(295deg);
}
.progress-circle.p83 .value-bar {
  transform: rotate(299deg);
}
.progress-circle.p84 .value-bar {
  transform: rotate(302deg);
}
.progress-circle.p85 .value-bar {
  transform: rotate(306deg);
}
.progress-circle.p86 .value-bar {
  transform: rotate(310deg);
}
.progress-circle.p87 .value-bar {
  transform: rotate(313deg);
}
.progress-circle.p88 .value-bar {
  transform: rotate(317deg);
}
.progress-circle.p89 .value-bar {
  transform: rotate(320deg);
}
.progress-circle.p90 .value-bar {
  transform: rotate(324deg);
}
.progress-circle.p91 .value-bar {
  transform: rotate(328deg);
}
.progress-circle.p92 .value-bar {
  transform: rotate(331deg);
}
.progress-circle.p93 .value-bar {
  transform: rotate(335deg);
}
.progress-circle.p94 .value-bar {
  transform: rotate(338deg);
}
.progress-circle.p95 .value-bar {
  transform: rotate(342deg);
}
.progress-circle.p96 .value-bar {
  transform: rotate(346deg);
}
.progress-circle.p97 .value-bar {
  transform: rotate(349deg);
}
.progress-circle.p98 .value-bar {
  transform: rotate(353deg);
}
.progress-circle.p99 .value-bar {
  transform: rotate(356deg);
}
.progress-circle.p100 .value-bar {
  transform: rotate(360deg);
}
.existing-files-section .list-label {
  color: #8a9292;
  font-size: 11px;
  font-weight: 500;
}
.existing-files-section .existing-files-thumbnail {
  display: grid;
  grid-template-columns: repeat(auto-fill, 110px);
  grid-gap: 10px;
}
.existing-files-section .existing-files-details-thumbnail {
  display: grid;
  grid-template-columns: repeat(auto-fill, 132px);
  grid-gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 0 6px;
}
.existing-files-section .existing-files-details-thumbnail .existing-file {
  position: relative;
}
.existing-files-section .existing-files-details-thumbnail .existing-file .existing-file-image {
  border-radius: 12px;
}
.existing-files-section .existing-files-details-thumbnail .existing-file .existing-file-image img {
  width: 100%;
  height: 132px;
  object-fit: cover;
}
.existing-files-section .existing-files-list {
  display: flex;
  flex-direction: column;
}
.existing-files-section .show-existing-files {
  width: fit-content;
  margin: auto;
  padding: 24px;
}
.existing-file {
  position: relative;
  border-radius: 12px;
}
.existing-file .existing-file-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #333333;
  opacity: 0.9;
  border-radius: inherit;
  color: #ffffff;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  z-index: 1;
}
.existing-file .existing-file-overlay:not(.multi-actions) {
  background-color: transparent;
  cursor: pointer;
}
.existing-file .existing-file-overlay:not(.multi-actions) .existing-file-select {
  display: none;
}
.existing-file .existing-file-overlay .existing-file-select {
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.existing-file .existing-file-overlay .existing-file-select > div {
  color: #ffffff;
  cursor: pointer;
  padding: 10px 0;
}
.existing-file .existing-file-overlay .existing-file-select > div:hover {
  color: #3ebfc2;
}
.existing-file .existing-file-image {
  border-radius: 12px;
}
.existing-file .existing-file-image img {
  width: auto;
  height: 110px;
  object-fit: cover;
}
.existing-file .existing-file-unpreviewable {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 100%;
  color: #ffffff;
  background-color: #333333;
  border-radius: inherit;
  cursor: pointer;
}
.show-more {
  color: #3ebfc2;
  font-size: 12px;
  font-weight: 500;
}
.mobile .existing-files-section .show-existing-files {
  padding: 0;
}
.image-with-overlay {
  position: relative;
  pointer-events: none;
}
.image-with-overlay .image-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #171717;
  opacity: 0.03;
  border-radius: inherit;
}
.image-with-overlay .image-overlay-img {
  border-radius: inherit;
}
.file-attachment-without-preview {
  min-width: 110px;
  min-height: 110px;
  background-color: #474747;
  border: 1px solid #ebf0f0;
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.file-attachment-without-preview .file-attachment-icon {
  margin-bottom: 5px;
}
.file-attachment-without-preview .file-attachment-filename {
  font-family: 'Roboto', Arial, sans-serif;
  color: #ffffff;
  font-weight: 500;
  font-size: 13px;
  margin: 0 6px 3px;
  word-break: break-all;
  word-break: break-word;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.file-attachment-without-preview .file-attachment-size {
  color: #8a9292;
  font-size: 11px;
  margin: 0 6px;
}
.drag-and-drop-area {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px dashed #ebf0f0;
  padding: 16px 0;
  margin-bottom: 10px;
  border-radius: 10px;
}
.drag-and-drop-area.dragging {
  border: 2px dotted #333333;
}
.drag-and-drop-area .drag-and-drop-text {
  font-size: 13px;
  line-height: 19px;
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 500;
}
.drag-and-drop-area .file-upload-button {
  margin-left: 10px;
}
.message-no-content {
  padding: 6px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 200;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
}
.filter-list {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  text-transform: capitalize;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  color: #888888;
  border: 1px solid #f4f6f6;
  background-color: #f4f6f6;
}
.filter-list.tabbed-page-tab-items {
  gap: unset;
}
.filter-list .filter-list-item {
  color: #8a9292;
  flex: 1;
  text-align: center;
  border-radius: 7px;
  padding: 5px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.filter-list .filter-list-item:hover:not(.selected) {
  background-color: rgba(255, 255, 255, 0.5);
  color: #333333;
}
.filter-list .filter-list-item.selected {
  color: #333333;
  background-color: white;
}
.filter-list .filter-list-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #3ebfc2;
}
.string-input-container .text-error {
  margin-top: 4px;
}
.string-input-container.theme-black .string-input-content,
.string-input-container.theme-black .text-input-content {
  background-color: #333333;
}
.string-input-container.theme-black .string-input-content input,
.string-input-container.theme-black .text-input-content input {
  color: #ffffff;
}
.string-input-container .string-input-content {
  grid-template-columns: 1fr auto auto;
}
.string-input-container .string-input-content .character-limit {
  margin: auto;
}
.string-input-container .text-input-content {
  grid-template-columns: 1fr;
}
.string-input-container .text-input-content .character-limit {
  margin-top: auto;
  margin-bottom: 6px;
  margin-right: 6px;
}
.string-input-container .string-input-content,
.string-input-container .text-input-content {
  display: grid;
  grid-gap: 6px;
  background-color: #ffffff;
}
.string-input-container .string-input-content.disabled,
.string-input-container .text-input-content.disabled {
  background-color: #f4f6f6;
}
.string-input-container .string-input-content input,
.string-input-container .text-input-content input,
.string-input-container .string-input-content textarea,
.string-input-container .text-input-content textarea {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  padding: 9px;
  background-color: transparent;
  width: 100%;
}
.string-input-container .string-input-submit-button-icon {
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
  color: black;
  border-radius: 50px;
}
.string-input-container .string-input-submit-button-icon {
  background-color: #3ebfc2;
  color: #ffffff;
}
.string-input-container .string-input-submit-button-text {
  font-size: 12px;
  user-select: none;
}
.string-input-container .string-input-submit-button-text.active {
  color: #3ebfc2;
  cursor: pointer;
}
.checkbox-input-container {
  display: flex;
  margin-bottom: 10px;
}
.checkbox-input-container:not(.read-only) {
  cursor: pointer;
}
.checkbox-input-container.read-only {
  opacity: 0.5;
  user-select: none;
}
.checkbox-input-container .checkbox-label {
  font-size: 13px;
  line-height: 19px;
  margin-left: 8px;
}
.dropdown-input-container .dropdown-input .dropdown-select {
  font-size: 12px;
  border-radius: 7px;
  background-color: #ffffff;
}
.dropdown-input-container .dropdown-input .dropdown-select.secondary {
  background-color: #f4f6f6;
}
.dropdown-input-container .dropdown-input .dropdown-select .dropdown-select-inner {
  padding: 6px;
  padding-right: 28px;
}
.toggle-button {
  cursor: pointer;
}
.toggle-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.toggle-input-container {
  background-color: #f4f6f6;
  display: flex;
  place-content: space-evenly;
  padding: 3px;
  width: fit-content;
  width: -moz-fit-content;
  border-radius: 7px;
}
.toggle-input-container .toggle-input {
  padding: 5px 28px;
  border-radius: 7px;
  font-weight: bold;
  user-select: none;
}
.toggle-input-container .toggle-input.selected {
  background-color: #ffffff;
}
.toggle-input-container .toggle-input.unselected {
  color: #8a9292;
}
.toggle-input-container:not(.read-only) .toggle-input.unselected {
  cursor: pointer;
}
.radio-input-container {
  display: flex;
  width: fit-content;
}
.radio-input-container.vertical {
  flex-direction: column;
}
.radio-input-container.vertical > div {
  margin-bottom: 8px;
}
.radio-input-container.horizontal {
  flex-direction: row;
}
.radio-input-container.horizontal > div {
  margin-right: 8px;
}
.radio-input-container .radio-button-container {
  display: flex;
}
.radio-input-container .radio-button-container .radio-input {
  width: 4px;
  height: 4px;
  border-radius: 18px;
  padding: 6px;
  border: 1px solid #cccccc;
  background-color: #ffffff;
  cursor: pointer;
}
.radio-input-container .radio-button-container .radio-input.selected {
  background-color: #3ebfc2;
}
.radio-input-container .radio-button-container .radio-input.unselected {
  color: #8a9292;
}
.radio-input-container .radio-button-container .radio-input .radio-input-selected-circle {
  width: 4px;
  height: 4px;
  margin: auto 0;
  border-radius: 8px;
  background-color: #ffffff;
}
.radio-input-container .radio-button-container .radio-input-label {
  font-size: 13px;
  line-height: 19px;
  cursor: pointer;
  margin: auto 15px auto 9px;
  font-weight: 500;
}
.radio-input-container .radio-button-container.read-only {
  opacity: 0.5;
}
.radio-input-container .radio-button-container.read-only .radio-input {
  cursor: not-allowed;
  opacity: 0.6;
}
.radio-input-container .radio-button-container.read-only .radio-input-label {
  cursor: not-allowed;
}
.gif-picker .gif-picker-header {
  padding: 0 12px;
  margin-bottom: 10px;
}
.gif-picker .gif-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 110px);
  grid-gap: 10px;
  padding: 0 12px;
}
.gif-picker .gif-picker-grid .gif-picker-item {
  cursor: pointer;
  background: white;
  border-radius: 10px;
}
.gif-picker .gif-picker-grid .gif-picker-item:hover {
  background: #333333;
}
.gif-picker .gif-picker-grid .gif-picker-item .gif-picker-item-overlay {
  border-radius: inherit;
}
.gif-picker .gif-picker-grid .gif-picker-item .gif-picker-item-overlay img {
  width: 100%;
  height: 110px;
  border-radius: inherit;
  object-fit: fill;
}
.mobile .gif-picker-grid {
  grid-template-columns: repeat(auto-fill, 70px);
}
.mobile .gif-picker-grid .gif-picker-item .gif-picker-item-overlay img {
  height: 70px;
}
.header-title {
  display: grid;
  grid-template-columns: minmax(30px, 50px) auto max-content;
  background-color: white;
  grid-gap: 12px;
}
.header-title.transparent {
  background-color: transparent;
}
.header-title.gray {
  background-color: #f4f6f6;
}
.header-title.no-avatar {
  grid-template-columns: auto max-content;
}
.header-title .header-title-text {
  display: flex;
  align-items: center;
  grid-gap: 6px;
  color: #333333;
  font-family: 'Poppins';
  font-weight: bold;
  text-align: left;
  font-size: 22px;
  margin: auto 0;
  word-break: break-all;
  word-break: break-word;
}
.header-title .header-title-text :first-child {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.header-title.small .header-title-text {
  font-size: 14px;
}
.header-title.large .header-title-text {
  font-size: 26px;
}
.header-title .header-title-actions {
  display: flex;
  align-items: center;
}
.header-title .header-title-actions.top {
  align-items: flex-start;
}
.header-title .header-title-actions.bottom {
  align-items: flex-end;
}
.header-title .header-title-tabs {
  display: flex;
  padding-bottom: 20px;
}
.header-title .header-title-tabs .header-title-tab {
  cursor: pointer;
  width: fit-content;
  padding: 3px 10px;
  margin-right: 24px;
  border-radius: 18px;
  font-weight: bold;
  color: #8a9292;
}
.header-title .header-title-tabs .header-title-tab.active {
  color: black;
  background-color: #f4f6f6;
}
.icon-button {
  border: none;
  background-color: transparent;
  padding: 0;
  transition: background-color 0.3s, color 0.3s;
}
.icon-button.small {
  width: 30px;
  height: 30px;
  font-size: 12px;
}
.icon-button.medium {
  width: 40px;
  height: 40px;
  font-size: 14px;
}
.icon-button.large {
  width: 60px;
  height: 60px;
  font-size: 24px;
}
.icon-button.x-large {
  width: 100px;
  height: 100px;
  font-size: 48px;
}
.icon-button.disabled:not(.no-opacity) .icon-wrapper {
  opacity: 0.4;
}
.icon-button.clickable:not(.disabled) {
  cursor: pointer;
}
.icon-button.primary {
  color: white;
  background-color: #3ebfc2;
}
.icon-button.primary:hover:not(.disabled) {
  background-color: #31999c;
}
.icon-button.primary:focus-visible {
  outline: 1px solid #31999c;
  outline-offset: 1px;
}
.icon-button.secondary:hover:not(.disabled) {
  background-color: rgba(0, 0, 0, 0.1);
}
.icon-button.secondary:focus-visible {
  outline: 1px solid #3ebfc2;
  outline-offset: 1px;
}
.icon-button.with-loader {
  position: relative;
}
.icon-button.with-loader .loader {
  position: absolute;
  top: 0;
  display: flex;
  width: 100%;
  height: 100%;
}
.icon-button .inherit-size {
  width: inherit;
  height: inherit;
}
.icon-button .icon-wrapper {
  width: 100%;
  margin: auto;
}
.info-callout-wrapper {
  display: flex;
  align-items: center;
  margin-top: 5px;
}
.info-callout-wrapper .info-callout-icon {
  cursor: pointer;
  margin-left: 6px;
}
.info-callout .callout-window {
  padding: 12px;
  width: 200px;
}
.info-callout .callout-window .info-callout-list {
  padding: 0 12px;
}
.info-callout .callout-window .info-callout-list .info-callout-list-item {
  list-style: disc;
}
.info-popup-content {
  max-width: 50vw;
  max-height: 50vh;
  overflow: auto;
  padding: 20px;
}
.kebab-menu {
  display: grid;
  grid-gap: 10px;
  padding: 20px 0;
  white-space: nowrap;
}
.kebab-menu .kebab-menu-item {
  display: flex;
  align-items: center;
  font-weight: 500;
  position: relative;
  padding: 6px 30px;
}
.kebab-menu .kebab-menu-item.with-submenu {
  justify-content: space-between;
  flex-wrap: wrap;
}
.kebab-menu .kebab-menu-item .kebab-menu-item-text {
  user-select: none;
  line-height: 18px;
}
.kebab-menu .kebab-menu-item .kebab-menu-item-icon {
  margin-right: 6px;
}
.kebab-menu .kebab-menu-item.default {
  color: #333333;
}
.kebab-menu .kebab-menu-item.primary {
  color: #3ebfc2;
}
.kebab-menu .kebab-menu-item.danger {
  color: #ff585d;
}
.kebab-menu .kebab-menu-item.disabled {
  color: #8a9292;
}
.kebab-menu .kebab-menu-item.hidden {
  display: none;
}
.kebab-menu .kebab-menu-item.divider {
  border-bottom: 1px solid #ebf0f0;
  margin-top: 1px;
  margin-bottom: 1px;
}
.kebab-menu .kebab-menu-item .kebab-menu-item-selected {
  position: absolute;
  left: 6px;
}
.kebab-menu .kebab-menu-item .kebab-menu-item-info {
  position: absolute;
  top: 5px;
  left: 6px;
}
.kebab-menu .kebab-menu-item .kebab-menu-item-submenu {
  flex-basis: 100%;
  display: grid;
  grid-gap: 10px;
  white-space: nowrap;
  padding-top: 20px;
}
.kebab-menu .kebab-menu-item .kebab-menu-item-submenu .kebab-menu-item {
  padding-right: 0;
  padding-left: 20px;
}
.kebab-menu .kebab-menu-item .kebab-menu-item-submenu .kebab-menu-item .kebab-menu-item-selected {
  left: 6px;
}
.kebab-menu .kebab-menu-item .kebab-menu-item-submenu .kebab-menu-item .kebab-menu-item-info {
  left: -2px;
}
.kebab-menu-callout.dark .popover-content {
  background-color: #333333;
  border: 1px solid #333333;
  box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.2);
}
.kebab-menu-callout.dark .popover-content .kebab-menu-item.default:not(.disabled) {
  color: #ffffff;
}
.discussion-post-content .preview-container {
  margin-right: -18px;
}
.preview-container a.link-preview,
.preview-container a.link-preview:visited {
  text-decoration: none !important;
}
.preview-container:hover {
  border-color: #3ebfc2;
}
.preview-container .content-preview {
  background-color: #333333;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 156px;
}
.preview-container .content-preview img {
  max-height: 100%;
  max-width: 100%;
  object-fit: fill;
}
.preview-container .content-preview iframe,
.preview-container .content-preview embed {
  width: 100%;
}
.preview-container .link-preview-footer {
  background-color: #f4f6f6;
  padding: 9px 14px;
  font-family: 'Roboto', Arial, sans-serif;
}
.preview-container .link-preview-footer .link-preview-title {
  color: #333333;
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.preview-container .link-preview-footer .link-preview-url {
  color: #8a9292;
  font-size: 11px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
ul.member-list-builder-old {
  overflow-y: auto;
  max-height: 220px;
  margin: 12px 0;
  border: 1px solid #cccccc;
  padding: 6px 12px;
  border-radius: 6px;
  background-color: white;
}
ul.member-list-builder-old:empty {
  border: none;
}
ul.member-list-builder-old.boundless {
  overflow-y: visible;
  max-height: unset;
}
ul.member-list-builder-old li.member-list-item {
  align-items: center;
  display: flex;
  padding: 6px 0;
}
ul.member-list-builder-old li.member-list-item .avatar {
  margin-right: 12px;
  margin-left: -6px;
}
ul.member-list-builder-old li.member-list-item .member-list-role-select .button-select {
  border: none;
}
ul.member-list-builder-old li.member-list-item .member-list-role-select .readonly {
  margin-right: 24px;
}
ul.member-list-builder-old li.member-list-item .avatar,
ul.member-list-builder-old li.member-list-item button {
  flex-grow: 0;
  flex-shrink: 0;
  border-radius: 6px;
  transition: background-color 100ms, color 100ms;
  text-transform: capitalize;
  padding: 6px;
  align-items: center;
}
ul.member-list-builder-old li.member-list-item button {
  border: 1px solid #cccccc;
  background-color: white;
  color: #333333;
  user-select: none;
}
ul.member-list-builder-old li.member-list-item button.tooltip-button {
  border: none;
  margin: 0;
  cursor: pointer;
  transition: color 200ms, border-color 200ms;
}
ul.member-list-builder-old li.member-list-item button.tooltip-button:hover {
  border: none;
}
ul.member-list-builder-old li.member-list-item button.tooltip-button:hover {
  color: #ef5455;
  border-color: #ef5455;
}
ul.member-list-builder-old li.member-list-item button.tooltip-button:hover * {
  stroke: #ef5455;
}
ul.member-list-builder-old li.member-list-item button.tooltip-button:hover.no-fill {
  -webkit-text-stroke: 2px #ef5455;
}
ul.member-list-builder-old li.member-list-item button:hover {
  border: 1px solid #3ebfc2;
}
ul.member-list-builder-old li.member-list-item .name {
  flex: auto;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 18px;
}
.tooltip-button.assign-yourself {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  margin: 6px;
  cursor: pointer;
  border: 1px solid #cccccc;
  transition: color 100ms, border-color 100ms;
}
.tooltip-button.assign-yourself:hover {
  border-color: #3ebfc2;
  color: #3ebfc2;
}
.member-selector {
  position: relative;
}
.member-selector.centered {
  width: fit-content;
  width: -moz-fit-content;
  margin: auto;
}
.member-selector.dropdown-open .member-selector-filter {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
}
.member-selector.dropdown-open .member-selector-filter input {
  font-family: 'Roboto', Arial, sans-serif;
}
.member-selector .member-selector-list {
  width: 100%;
  min-width: 262px;
  max-height: 250px;
  overflow-y: auto;
}
.member-selector .member-selector-list.visible {
  animation: show-theme-context-menu 100ms ease-out;
  margin-bottom: 80px;
}
.member-selector .member-selector-list.hidden {
  display: none;
}
.member-selector .invite-badge {
  background-color: #00960a;
  color: white;
  cursor: default;
  display: inline-block;
  font-size: 75%;
  margin-left: 12px;
  min-width: 55px;
  padding: 6px;
  text-align: center;
  user-select: none;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.member-selector .member-selector-list-item button {
  border: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: normal;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  -webkit-appearance: none;
  align-items: center;
  background-color: white;
  display: flex;
  padding: 6px 12px;
  transition: background-color 150ms;
  width: 100%;
}
.member-selector .member-selector-list-item button::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.member-selector .member-selector-list-item button:hover,
.member-selector .member-selector-list-item button:focus {
  background-color: #d6eff2;
  outline: none !important;
}
.member-selector .member-selector-list-item h2 {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  padding: 0 0 0 12px;
  max-width: 200px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.reaction-container-new {
  z-index: 1;
}
.reaction-container-new .reaction-container-handler {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #333333;
}
.reaction-container-new .reaction-container-handler .icon-stack {
  display: flex;
  flex-direction: row-reverse;
}
.reaction-container-new .reaction-container-handler .icon-stack .icon {
  margin-right: -3px;
}
.reaction-container-new .reaction-container-handler .icon-stack .icon img {
  width: 18px;
  height: 18px;
}
.reaction-container-new .reaction-container-handler.small {
  font-size: 11px;
}
.reaction-container-new .reaction-container-handler.small .icon-stack .icon img {
  width: 13px;
  height: 13px;
}
.reaction-picker-callout {
  display: flex;
  grid-gap: 6px;
  padding: 3px 5px;
}
.reaction-picker-callout .selected {
  opacity: 1;
}
.reaction-picker-callout > div {
  opacity: 0.3;
}
.reaction-picker-callout > div img {
  border-radius: 12px;
}
.reaction-picker-callout > div:hover img {
  box-shadow: 2px 2px 2px #8a9292;
}
.reaction-picker-callout.no-selection > div {
  opacity: 1;
}
.reaction-picker-handler {
  display: flex;
  grid-gap: 6px;
  align-items: center;
  cursor: pointer;
}
.reaction-picker-handler.liked {
  color: #3ebfc2;
}
.reaction-picker-handler.disliked {
  color: #ff585d;
}
.reaction-picker-handler.laughed {
  color: #ffce3d;
}
.reaction-picker-handler.questioned {
  color: #ffce3d;
}
.reactions-popup {
  min-width: 300px;
}
.reactions-popup .reactions-list {
  max-height: 180px;
  overflow-y: auto;
  padding: 0 24px;
}
.reactions-popup .reactions-list .reactions-list-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.reactions-popup .reactions-list .reactions-list-item-icon {
  margin-left: 12px;
}
.message-edit-modal-wrapper .message-edit-modal-editor {
  padding: 12px;
}
.message-edit-modal-wrapper .message-edit-modal-editor .message-editor-attachments .existing-file .existing-file-image img {
  width: auto;
}
.global-modal {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 100;
  overflow: auto;
  padding-bottom: 100px;
}
.global-modal.blur-none {
  background-color: transparent;
}
.global-modal.blur-low {
  background-color: rgba(0, 0, 0, 0.2);
}
.global-modal.blur-medium {
  background-color: rgba(0, 0, 0, 0.5);
}
.global-modal.blur-high {
  background-color: rgba(0, 0, 0, 0.8);
}
.global-modal.position-center {
  justify-content: center;
}
.global-modal.position-center .modal-window-new {
  top: unset;
  bottom: unset;
}
.global-modal.non-blocking {
  margin: auto;
  background: none;
  width: fit-content;
  width: -moz-fit-content;
}
.global-modal .global-modal-header {
  display: flex;
  flex-direction: row;
}
.modal-window-new {
  height: fit-content;
  background-color: white;
  border: 1px solid #cccccc;
  border-radius: 9px;
  position: relative;
  top: 10%;
}
.modal-window-new:focus-visible {
  outline: none;
}
.modal-window-new:focus {
  outline: none;
}
.modal-window-new .close-modal {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 5;
  cursor: pointer;
}
.modal-window-new .modal-kebab-menu {
  position: absolute;
  top: 8px;
  right: 18px;
  z-index: 5;
}
.action-modal .modal-window-new {
  width: 700px;
}
.action-modal .action-modal-header {
  border-bottom: 1px solid #cccccc;
  padding: 0 24px 24px;
}
.action-modal .action-modal-header .action-modal-title {
  font-size: 32px;
  font-weight: bold;
  text-align: center;
}
.action-modal .action-modal-header .action-modal-avatar {
  text-align: center;
  padding: 24px 0;
}
.action-modal .action-modal-body {
  padding: 12px;
}
.action-modal .action-modal-footer {
  display: flex;
}
.action-modal .action-modal-footer.vertical {
  flex-direction: column;
}
.action-modal .action-modal-footer.horizontal > div {
  flex: 1;
}
.action-modal .action-modal-footer > div {
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #cccccc;
  border-right: none;
  border-bottom: none;
  font-size: 18px;
  cursor: pointer;
}
.action-modal .action-modal-footer > div .action-modal-affirmative {
  color: #3ebfc2;
}
.action-modal .action-modal-footer > div .action-modal-negative {
  color: #888888;
}
.action-modal .action-modal-footer > div:first-child {
  border-left: none;
}
.action-modal .action-modal-footer > div:last-child {
  border-bottom-left-radius: 9px;
  border-bottom-right-radius: 9px;
}
.action-modal .action-modal-footer > div:hover {
  background-color: #f4f6f6;
}
.forward-messages-modal {
  padding: 18px;
}
.forward-messages-modal .forward-messages-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
.forward-messages-modal .forward-room-selector {
  position: relative;
}
.forward-messages-modal .forward-room-selector .forward-selector-search {
  width: 100%;
  padding: 12px;
  border: 1px solid #ebf0f0;
  border-radius: 6px;
}
.forward-messages-modal .forward-room-selector .forward-selector-search.selected {
  font-weight: 500;
  border: 1px solid #3ebfc2;
}
.forward-messages-modal .forward-room-selector.dropdown-open .forward-selector-search {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
}
.forward-messages-modal .forward-room-selector.dropdown-open .forward-selector-search input {
  font-family: 'Roboto', Arial, sans-serif;
}
.forward-messages-modal .forward-room-selector .clear-icon {
  position: absolute;
  cursor: pointer;
  font-size: 16px;
  right: 12px;
  top: 12px;
}
.forward-messages-modal .forward-room-selector .forward-room-list {
  width: 100%;
  min-width: 262px;
  max-height: 250px;
  overflow-y: auto;
}
.content-modal-container {
  transition: opacity 100ms;
}
.content-modal-container .content-modal {
  padding: 30px 18px 24px;
}
.content-modal-container .content-modal-loader {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
.content-modal-container .content-modal-wrapper.loading {
  opacity: 0.4;
}
.content-modal-container .content-modal-wrapper .content-modal-subtext {
  margin: auto;
  font-size: 12px;
  color: #8a9292;
  width: fit-content;
  width: -moz-fit-content;
}
.content-modal-container .content-modal-buttons.vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.content-modal-container .content-modal-buttons.horizontal {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  gap: 20px;
}
.content-modal-container .content-modal-buttons.horizontal .content-modal-affirmative,
.content-modal-container .content-modal-buttons.horizontal .content-modal-negative {
  flex-basis: 100px;
}
.modal-size-x-large .content-modal-buttons.horizontal .content-modal-affirmative,
.modal-size-huge .content-modal-buttons.horizontal .content-modal-affirmative,
.modal-size-x-large .content-modal-buttons.horizontal .content-modal-negative,
.modal-size-huge .content-modal-buttons.horizontal .content-modal-negative {
  flex-basis: 200px;
}
.modal-size-x-large {
  width: 1000px;
}
.modal-size-huge {
  width: 800px;
}
.modal-size-large {
  width: 600px;
}
.modal-size-medium {
  width: 500px;
}
.modal-size-small {
  width: 350px;
}
@media screen and (max-width: 1000px) {
  .modal-size-x-large {
    width: 90%;
  }
}
@media screen and (max-width: 650px) {
  .modal-size-huge,
  .modal-size-large {
    width: 90%;
  }
}
@media screen and (max-width: 550px) {
  .modal-size-medium {
    width: 90%;
  }
}
.profile-info-callout {
  min-width: 200px;
  max-width: 300px;
  padding: 12px;
  text-align: center;
  display: grid;
  grid-gap: 18px;
}
.profile-info-callout .profile-info-name {
  font-weight: bold;
  font-size: 18px;
}
.scrollable-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1 1 auto;
  position: relative;
}
.scrollable-page-header,
.scrollable-page-footer {
  flex: 0 1;
}
.scrollable-page-body {
  flex: 1 auto;
  height: 30px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}
.scrollable-page-scroll-top {
  position: absolute;
  bottom: 24px;
  right: 24px;
}
.scrollable-page-sticky-header.hidden {
  display: none;
}
.scrollable-page-sticky-footer {
  position: relative;
}
.fixed-width-content {
  margin-left: auto;
  margin-right: auto;
  width: 85%;
}
.variable-width-content {
  margin-left: 48px;
  margin-right: 48px;
}
.scrollable-loader-button {
  text-align: center;
  text-decoration: underline;
  color: #00b0b9;
  cursor: pointer;
}
.search-input {
  position: relative;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  padding: 10px 38px 10px 14px;
  border-radius: 8px;
  background-color: #f4f6f6;
}
.search-input input {
  border: none;
  background-color: inherit;
  width: 100%;
  font-size: 13px;
  line-height: 18px;
  color: #333333;
  padding: 0;
}
.search-input input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 500;
  color: #8a9292;
}
.search-input input::-moz-placeholder {
  /* Firefox 19+ */
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 500;
  color: #8a9292;
}
.search-input input:-ms-input-placeholder {
  /* IE 10+ */
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 500;
  color: #8a9292;
}
.search-input input:-moz-placeholder {
  /* Firefox 18- */
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 500;
  color: #8a9292;
}
.search-input .clear-icon,
.search-input .search-icon {
  position: absolute;
  right: 12px;
}
.search-input .clear-icon {
  cursor: pointer;
}
.search-input .search-icon {
  color: #888888;
}
.select-option-modal .modal-window {
  padding: 18px;
  width: 500px;
}
.select-option-modal hr {
  width: 100%;
  grid-column: span 2;
}
.select-option-modal .modal-body {
  margin: 12px;
}
.select-option-modal .select-option-container {
  padding: 18px 0;
}
.select-option-modal .select-option-container .select-option {
  display: grid;
  grid-gap: 6px;
  grid-template-columns: 180px 1fr;
}
.select-option-modal .select-option-container .select-option.option-type-checkbox,
.select-option-modal .select-option-container .select-option.option-type-radio {
  grid-template-columns: auto 1fr;
}
.select-option-modal .select-option-container .select-option.option-type-checkbox input,
.select-option-modal .select-option-container .select-option.option-type-radio input {
  display: none;
}
.select-option-modal .select-option-container .select-option.option-type-checkbox label,
.select-option-modal .select-option-container .select-option.option-type-radio label {
  cursor: pointer;
  background-color: #f4f6f6;
  border: 1px solid #cccccc;
  padding: 12px;
  border-radius: 2px;
  display: inline-block;
  position: relative;
}
.select-option-modal .select-option-container .select-option.option-type-checkbox label.selected:after {
  content: '\2714';
  font-size: 24px;
  position: absolute;
  top: 0px;
  left: 3px;
  color: #99a1a7;
}
.select-option-modal .select-option-container .select-option.option-type-radio label {
  border-radius: 12px;
}
.select-option-modal .select-option-container .select-option.option-type-radio label.selected:after {
  content: ' ';
  width: 18px;
  height: 18px;
  border-radius: 50px;
  position: absolute;
  top: 3px;
  background: #99a1a7;
  box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.3);
  text-shadow: 0px;
  left: 3px;
  font-size: 32px;
}
.select-option-modal .select-option-container .option-text {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  margin: auto;
  padding: 6px / 2;
  margin-left: 6px;
}
table.standard-table {
  border-collapse: collapse;
  margin: 12px auto;
  table-layout: fixed;
  width: 100%;
}
table.standard-table .invoice-receipt label {
  font-weight: 600;
}
table.standard-table .invoice-receipt label:after {
  content: ': ';
}
table.standard-table tr {
  border-bottom: 1px solid #cccccc;
}
table.standard-table tr.clickable {
  cursor: pointer;
}
table.standard-table tr.expanded td {
  background-color: rgba(0, 0, 0, 0.05);
}
table.standard-table tr:hover td {
  background-color: rgba(0, 0, 0, 0.05);
}
table.standard-table td {
  white-space: pre-wrap;
  text-align: center;
  padding: 6px 12px;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
}
table.standard-table td:empty:after {
  content: '-';
  display: block;
  text-align: center;
}
table.standard-table td .tooltip-button:not(.disabled) {
  cursor: pointer;
  transition: color 200ms, border-color 200ms;
}
table.standard-table td .tooltip-button:not(.disabled):hover {
  color: #3ebfc2;
  border-color: #3ebfc2;
}
table.standard-table td .tooltip-button:not(.disabled):hover * {
  stroke: #3ebfc2;
}
table.standard-table td .tooltip-button:not(.disabled):hover.no-fill {
  -webkit-text-stroke: 2px #3ebfc2;
}
table.standard-table td .tooltip-button:not(.disabled).danger-hover {
  cursor: pointer;
  transition: color 200ms, border-color 200ms;
}
table.standard-table td .tooltip-button:not(.disabled).danger-hover:hover {
  color: #ef5455;
  border-color: #ef5455;
}
table.standard-table td .tooltip-button:not(.disabled).danger-hover:hover * {
  stroke: #ef5455;
}
table.standard-table td .tooltip-button:not(.disabled).danger-hover:hover.no-fill {
  -webkit-text-stroke: 2px #ef5455;
}
table.standard-table td.primary {
  text-align: center !important;
}
table.standard-table .footer-row {
  border: none;
}
table.standard-table.small td {
  padding: 0 12px;
  height: 12px;
}
table.standard-table.large td {
  height: 50px;
}
table.standard-table.medium td {
  height: 36px;
}
table.standard-table th {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 200;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
  padding: 0 12px;
  text-align: center;
}
table.standard-table th.expansion-button-header {
  width: 12px;
}
table.standard-table th.clickable {
  cursor: pointer;
  white-space: nowrap;
}
table.standard-table th.clickable .fa {
  width: 6px;
}
table.standard-table.fixed-layout {
  table-layout: fixed;
}
table.standard-table.auto-layout {
  table-layout: auto;
}
.expanded-row-content .confirm-actions {
  width: fit-content;
  width: -moz-fit-content;
  margin: auto;
}
.stopwatch {
  width: fit-content;
  width: -moz-fit-content;
  height: 18px;
  user-select: none;
  margin: 6px;
  padding: 0 6px 0 0;
  border-radius: 18px;
}
.tabbed-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1 1 auto;
}
.tabbed-page-header,
.tabbed-page-tabs {
  flex: 0 1;
  transition: all 0.3s ease-out;
  opacity: 1;
}
.tabbed-page-header.hidden,
.tabbed-page-tabs.hidden {
  opacity: 0;
  pointer-events: none;
}
.tabbed-page-body {
  flex: 1 auto;
  position: relative;
  height: calc(100% - 200px);
}
.tabbed-page-header h1 {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 28px;
  font-weight: 100;
  text-align: center;
}
.tabbed-page-tab-items {
  display: flex;
  gap: 12px;
}
.tabbed-page-tab-items .tabbed-page-tab-item {
  font-size: 12px;
  color: #8a9292;
  padding: 4px 10px;
  text-decoration: none;
  cursor: pointer;
  border-radius: 10px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.tabbed-page-tab-items .tabbed-page-tab-item:hover:not(.active) {
  background-color: rgba(244, 246, 246, 0.5);
  color: #333333;
}
.tabbed-page-tab-items .tabbed-page-tab-item.active {
  color: #333333;
  background-color: #f4f6f6;
}
.tabbed-page-tab-items .tabbed-page-tab-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #3ebfc2;
}
.manage-room-users .manage-room-users-header {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 18px;
}
.manage-room-users .manage-room-users-body {
  display: grid;
  grid-template-columns: auto auto auto;
  font-size: 13px;
  grid-gap: 12px 6px;
}
.manage-room-users .manage-room-users-body.one-col {
  grid-template-columns: auto;
}
.manage-room-users .manage-room-users-body.two-col {
  grid-template-columns: auto auto;
}
.manage-room-users .manage-room-users-body.three-col {
  grid-template-columns: auto auto auto;
}
.manage-room-users .manage-room-users-body.four-col {
  grid-template-columns: auto auto auto auto;
}
.manage-room-users .see-all-action {
  display: flex;
  color: #3ebfc2;
  justify-content: flex-start;
  align-items: center;
  text-decoration: underline;
  cursor: pointer;
}
.video-icon-button,
.video-kebab-button {
  cursor: pointer;
  white-space: nowrap;
  border-radius: 12px;
  border-style: none;
  text-align: center;
  font-size: 16px;
  background-color: transparent;
  margin: 0;
  transition: background-color 200ms;
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  place-content: space-evenly;
}
.video-icon-button .icon-wrapper,
.video-kebab-button .icon-wrapper {
  display: flex;
  justify-content: center;
  padding: 0;
  width: 100%;
  margin: auto;
}
.video-icon-button.onDark,
.video-kebab-button.onDark {
  background-color: #404040;
  color: white;
}
.video-icon-button.disabled,
.video-kebab-button.disabled {
  opacity: 0.5;
}
.video-icon-button.with-loader,
.video-kebab-button.with-loader {
  position: relative;
}
.video-icon-button.with-loader .loader,
.video-kebab-button.with-loader .loader {
  position: absolute;
  top: 0;
  right: 12px;
  display: flex;
  width: 18px;
  height: 100%;
}
.video-kebab-button {
  margin-left: 0;
}
.video-kebab-button svg {
  margin: auto;
}
.with-overlay {
  position: relative;
  width: 100%;
  height: auto;
}
.with-overlay .overlay {
  background-color: transparent;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 10;
  display: flex;
  place-content: center;
}
.with-overlay .with-overlay-spinner {
  height: 50%;
  width: auto;
  max-height: 120px;
  min-height: 14px;
}
.with-overlay .with-overlay-spinner.fixed {
  position: fixed;
}
.safari .scrollable-page-body > .with-overlay {
  height: 100%;
}
.post-create-walkthrough {
  position: fixed;
  top: 0;
  z-index: 200;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.5);
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.post-create-walkthrough-item {
  width: 350px;
}
.post-create-walkthrough-item .text-wrapper {
  padding: 0 24px 6px;
}
.post-create-walkthrough-item .text-wrapper h3 {
  color: #3ebfc2;
}
.post-create-walkthrough-item .text-wrapper .page-number {
  font-size: 12px;
  text-align: right;
}
.post-create-walkthrough-item .walkthrough-item-actions {
  display: flex;
  height: 50px;
}
.post-create-walkthrough-item .walkthrough-item-actions > div {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #cccccc;
  border-right: none;
  border-bottom: none;
  color: #3ebfc2;
  cursor: pointer;
}
.post-create-walkthrough-item .walkthrough-item-actions > div:first-child {
  color: #ef5455;
  border-left: none;
}
.post-create-walkthrough-item .walkthrough-item-actions > div:hover {
  background-color: #f4f6f6;
}
.guided-tour-card-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
}
.guided-tour-card-wrapper .guided-tour-card {
  margin: auto 10px;
}
.guided-tour-card {
  padding: 12px 12px 30px 20px;
  border-radius: 9px;
  box-shadow: 0 5px 12px 1px rgba(138, 146, 146, 0.2);
}
.guided-tour-card .guided-tour-card-pill {
  width: max-content;
  font-weight: 500;
  margin-bottom: 14px;
}
.guided-tour-card .guided-tour-card-title {
  font-family: Poppins;
  font-size: 20px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 20px;
}
.guided-tour-card .guided-tour-card-text {
  font-family: Roboto;
  font-size: 13px;
  line-height: 1.62;
  color: #8a9292;
  margin-bottom: 24px;
}
.guided-tour-card .guided-tour-card-actions-primary {
  min-width: 40%;
  max-width: 130px;
}
.feature-card-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
.feature-card-wrapper .feature-card {
  position: relative;
  margin: auto 12px;
}
.feature-card-modal .feature-card {
  box-shadow: none;
  max-width: unset;
  padding: 0;
}
.feature-card {
  position: relative;
  padding: 12px 12px 30px 20px;
  border-radius: 9px;
  box-shadow: 0 5px 12px 1px rgba(138, 146, 146, 0.2);
  background-color: #ffffff;
  text-align: center;
  max-width: 400px;
}
.feature-card .feature-card-pill {
  width: max-content;
  font-weight: 500;
  margin: 0 auto 14px;
}
.feature-card .feature-card-title {
  font-family: Poppins;
  font-size: 20px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 20px;
}
.feature-card .feature-card-text {
  font-family: Roboto;
  font-size: 13px;
  line-height: 1.62;
  color: #8a9292;
  margin-bottom: 24px;
}
.feature-card .feature-card-subtext {
  font-family: Roboto;
  font-size: 13px;
  line-height: 1.62;
  color: #8a9292;
}
.feature-card .feature-card-actions-primary {
  min-width: 40%;
  max-width: 130px;
  margin: auto;
}
.cursor-tooltip .callout-window {
  padding: 4px 12px;
  background-color: #333333;
  font-size: 10px;
  color: #ffffff;
  border-radius: 5px;
}
.overlay-expander {
  position: relative;
  background-color: inherit;
}
.overlay-expander .overlay-expander-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
}
.overlay-expander .overlay-expander-title {
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  word-break: break-all;
  word-break: break-word;
}
.overlay-expander .overlay-expander-icon {
  cursor: pointer;
}
.overlay-expander .overlay-expander-content {
  position: absolute;
  width: 100%;
  left: 0;
  z-index: 100;
  box-shadow: 0 12px 12px 1px rgba(138, 146, 146, 0.2);
  background-color: inherit;
}
.overlay-content {
  position: relative;
}
.overlay-content .content {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 20;
}
.overlay-content .overlay {
  position: absolute;
  background-color: rgba(23, 23, 23, 0.2);
  width: 100%;
  height: 100%;
  z-index: 10;
  user-select: none;
}
.static-popup-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.static-popup-wrapper .static-popup {
  position: absolute;
  bottom: 0;
  background-color: #ffffff;
  z-index: 10;
  margin: 0 auto 6px;
  border-radius: 9px;
  -webkit-box-shadow: 0 5px 12px 1px rgba(138, 146, 146, 0.2);
  -moz-box-shadow: 0 5px 12px 1px rgba(138, 146, 146, 0.2);
  box-shadow: 0 5px 12px 1px rgba(138, 146, 146, 0.2);
}
.Toastify__toast-container {
  z-index: 9999 !important;
}
.schedule-calendar {
  padding-bottom: 12px;
}
.schedule-calendar .schedule-calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.schedule-calendar .schedule-calendar-header .schedule-calendar-header-title {
  font-size: 13px;
  line-height: 19px;
  font-weight: bold;
}
.schedule-calendar .schedule-calendar-header .schedule-calendar-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.schedule-calendar .schedule-calendar-header .schedule-calendar-header-controls {
  position: relative;
}
.schedule-calendar .schedule-calendar-header .schedule-calendar-header-controls :first-child,
.schedule-calendar .schedule-calendar-header .schedule-calendar-header-controls :last-child {
  position: absolute;
  top: 0;
  width: 23px;
  height: 100%;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-radius: 4px;
}
.schedule-calendar .schedule-calendar-header .schedule-calendar-header-controls :first-child:focus-visible,
.schedule-calendar .schedule-calendar-header .schedule-calendar-header-controls :last-child:focus-visible {
  outline: 2px solid #d8dfdf;
}
.schedule-calendar .schedule-calendar-header .schedule-calendar-header-controls :first-child {
  left: 0;
}
.schedule-calendar .schedule-calendar-header .schedule-calendar-header-controls :last-child {
  right: 0;
}
.schedule-calendar .schedule-calendar-year {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.schedule-calendar .schedule-calendar-week-row {
  display: flex;
  justify-content: space-between;
}
.schedule-calendar .schedule-calendar-week-field {
  width: 31px;
  height: 31px;
  padding: 3px 0;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
}
.schedule-calendar .schedule-calendar-week-header .schedule-calendar-week-field {
  height: 20px;
  color: #8a9292;
}
.schedule-calendar .schedule-calendar-cell {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
  cursor: pointer;
}
.schedule-calendar .schedule-calendar-cell:hover {
  background-color: #ebf0f0;
}
.schedule-calendar .schedule-calendar-cell.selected {
  background-color: #333333;
  color: #ffffff;
}
.schedule-calendar .schedule-calendar-cell.current {
  color: #3ebfc2;
}
.schedule-calendar .schedule-calendar-cell.selected.current {
  background-color: #3ebfc2;
  color: #ffffff;
}
.schedule-calendar .schedule-calendar-cell.non-present-month {
  opacity: 0.5;
}
.schedule-calendar .schedule-calendar-cell:not(.selected) .schedule-calendar-cell-events {
  position: absolute;
  bottom: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.schedule-calendar .schedule-calendar-cell:not(.selected) .schedule-calendar-cell-events .schedule-calendar-cell-event-circle {
  width: 5px;
  height: 5px;
  border-radius: 4px;
  margin: 0 1px;
}
.gallery-modal .global-modal {
  padding-bottom: 90px;
  overflow-y: auto;
  overflow-x: hidden;
}
.gallery-modal .modal-window-new {
  width: 100%;
  height: 100%;
  min-height: 570px;
  top: 40px;
  background-color: #333333;
  border: none;
}
.gallery-modal .gallery-modal-wrapper {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(230px, 350px);
  grid-template-rows: 100%;
  gap: 30px;
  height: calc(100% - 40px * 2);
  padding: 40px 30px;
}
.gallery-modal .gallery-modal-wrapper .gallery-file-img {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.gallery-modal .gallery-modal-wrapper .gallery-preview-warning {
  color: #f4f6f6;
}
.gallery-modal .gallery-modal-wrapper .gallery-file-no-preview {
  width: 30px;
  height: 30px;
  object-fit: contain;
  overflow: hidden;
  padding: 2px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
}
.gallery-modal .gallery-modal-wrapper .gallery-left-side {
  display: grid;
  grid-template-rows: minmax(100px, 1fr) max-content max-content;
  grid-template-columns: 100%;
}
.gallery-modal .gallery-modal-wrapper .gallery-left-side .gallery-file-main-container {
  background: #171717;
  height: 100%;
}
.gallery-modal .gallery-modal-wrapper .gallery-left-side .gallery-file-main-container > div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.gallery-modal .gallery-modal-wrapper .gallery-left-side .gallery-file-main-container video {
  max-width: 100%;
  max-height: 100%;
}
.gallery-modal .gallery-modal-wrapper .gallery-left-side .gallery-file-main-container .gallery-main-file {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.gallery-modal .gallery-modal-wrapper .gallery-right-side {
  height: 100%;
}
.gallery-modal .gallery-modal-wrapper .gallery-right-side .gallery-file-name-display {
  height: 40px;
  margin-bottom: 16px;
}
.gallery-modal .gallery-modal-wrapper .gallery-right-side .gallery-delete-text {
  height: 20px;
}
.gallery-modal .gallery-modal-wrapper .gallery-right-side .gallery-file-edit-controls > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.gallery-modal .gallery-modal-wrapper .gallery-right-side .gallery-file-edit-controls > div .gallery-file-control-button {
  flex: 1;
}
.gallery-modal .gallery-modal-wrapper .gallery-right-side .gallery-file-versions-wrapper .gallery-file-versions-controls {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.gallery-modal .gallery-modal-wrapper .gallery-right-side .gallery-file-versions-wrapper .gallery-file-versions-controls > div {
  flex: 1;
}
.gallery-modal .gallery-modal-wrapper .gallery-right-side .gallery-file-versions-wrapper .gallery-file-selected-version-container {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  overflow: hidden;
  height: 100px;
  border-width: 1px;
  border-color: #525252;
  margin-bottom: 24px;
  background: #474747;
}
.gallery-modal .gallery-modal-wrapper .gallery-right-side .gallery-file-versions-wrapper .gallery-file-selected-version-container .gallery-file-img {
  object-fit: contain;
}
.gallery-modal .gallery-modal-wrapper .gallery-right-side .gallery-file-versions-wrapper .gallery-file-versions-list {
  height: 80px;
  overflow: auto;
}
.gallery-modal .gallery-modal-wrapper .gallery-right-side .gallery-file-versions-wrapper .gallery-file-versions-list .gallery-version-list-item-wrapper {
  padding: 8px;
  margin-bottom: 4px;
  border-radius: 3px;
  cursor: pointer;
}
.gallery-modal .gallery-modal-wrapper .gallery-right-side .gallery-file-versions-wrapper .gallery-file-versions-list .gallery-version-list-item-wrapper.selected {
  background-color: #474747;
}
.gallery-modal .gallery-modal-wrapper .gallery-thumbnails-scroll {
  height: 100px;
}
.gallery-modal .gallery-modal-wrapper .gallery-thumbnails-wrapper {
  display: flex;
  width: 100%;
  flex: 1 1 80px;
  gap: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 10px;
}
.gallery-modal .gallery-modal-wrapper .gallery-thumbnails-wrapper .gallery-thumbnails-item-wrapper {
  display: flex;
  flex-direction: column;
}
.gallery-modal .gallery-modal-wrapper .gallery-thumbnails-wrapper .gallery-thumbnails-item-wrapper .gallery-thumbnails-item {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  background-color: #474747;
  width: 60px;
  height: 60px;
  object-fit: cover;
  overflow: hidden;
  cursor: pointer;
}
.gallery-modal .gallery-modal-wrapper .gallery-thumbnails-wrapper .gallery-thumbnails-item-wrapper .gallery-thumbnails-item .gallery-file-img {
  object-fit: cover;
}
.gallery-modal .gallery-modal-wrapper .gallery-thumbnails-wrapper .gallery-thumbnails-item-wrapper .gallery-thumbnails-item-selected {
  width: 100%;
  height: 5px;
  border-radius: 2.5px;
  background-color: #474747;
  margin-top: 5px;
  margin-inline: 0px;
  margin-bottom: 0px;
}
.gallery-modal .gallery-modal-wrapper .gallery-arrow-buttons-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}
.gallery-modal .gallery-modal-wrapper .gallery-arrow-buttons-wrapper .gallery-arrow-left-button,
.gallery-modal .gallery-modal-wrapper .gallery-arrow-buttons-wrapper .gallery-arrow-right-button {
  width: 80px;
}
.list-loading-spinner {
  margin: 10px auto;
  text-align: center;
}
.list-loading-spinner .spinner-image {
  width: 25px;
  height: 25px;
}
.action-banner {
  position: fixed;
  top: 0px;
  width: calc(100% - 24px);
  border-bottom: 1px solid #ebf0f0;
  min-height: 48px;
  z-index: 20;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 0 12px;
}
.action-banner.primary {
  background-color: #3ebfc2;
}
.action-banner.secondary {
  background-color: #8a9292;
}
.action-banner .action-banner-text {
  flex: 1;
  text-align: center;
  color: white;
  font-size: 16px;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  text-decoration: none;
}
.action-banner .action-banner-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.action-banner .action-banner-actions > div {
  cursor: pointer;
}
.side-bar-nav {
  background-color: #333333;
  color: white;
}
.side-bar-nav #nav-activity {
  margin-top: 2px;
}
.side-bar-nav .side-bar-nav-menu {
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 140px auto 80px;
}
.side-bar-nav .side-bar-nav-menu .side-nav-menu-item:focus-visible {
  background-color: #333333;
}
.side-bar-nav .side-bar-nav-menu .side-bar-nav-first {
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.side-bar-nav .side-bar-nav-menu .side-bar-nav-middle {
  display: grid;
  justify-content: center;
  grid-template-rows: repeat(auto-fill, 46px);
  grid-gap: 25px;
  margin: auto;
}
.side-bar-nav .side-bar-nav-menu .side-bar-nav-last {
  margin: 20px auto;
}
.side-bar-nav .side-bar-nav-menu .sidebar-squad-avatar.active {
  -webkit-box-shadow: 0px 0px 3px 3px #3ebfc2;
  -moz-box-shadow: 0px 0px 3px 3px #3ebfc2;
  box-shadow: 0px 0px 3px 3px #3ebfc2;
}
.side-bar-nav .side-bar-nav-menu .zendesk-help-button {
  color: #666666;
  font-size: 18px;
}
.side-bar-nav .side-bar-nav-item-badge {
  width: 2px;
  height: 2px;
  top: 0;
  right: 0;
  border: 2px solid #333333;
}
.Toastify__toast-container {
  position: fixed;
  z-index: 200;
  width: 50%;
  max-width: 500px;
  font-size: 14px;
  text-align: center;
}
.Toastify__toast-container .Toastify__toast {
  min-height: unset;
  padding: 12px;
  border-radius: 24px;
}
.Toastify__toast-container .Toastify__toast-body {
  color: white;
}
.Toastify__toast-container .Toastify__toast--success {
  background: #3ebfc2;
}
.Toastify__toast-container .Toastify__toast--warning {
  background: #f7cd3b;
}
.Toastify__toast-container .Toastify__toast--error {
  background: #ef5455;
}
#app {
  background: white;
  display: flex;
  height: 100%;
  overflow: hidden;
  width: 100%;
}
.error-page {
  width: 100%;
  padding: 12px;
  margin: 0 auto;
  text-align: center;
}
.error-page .text-danger {
  color: #ef5455;
}
.error-page .button-container {
  display: flex;
  place-content: center;
  white-space: nowrap;
}
.error-page .button-container .fab {
  font-weight: 200;
}
#main {
  display: flex;
  flex-flow: row;
  flex: auto;
  max-height: 100%;
  height: 100%;
  width: 100%;
  position: fixed;
}
#main.safari {
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
}
#main.safari .scrollable-page-body {
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
}
#main > section {
  background: white;
  flex: 1 1 auto;
  position: relative;
  width: 100%;
}
#main.safari .member-list .member-list-item:last-of-type,
#main.firefox .member-list .member-list-item:last-of-type {
  margin-bottom: 80px;
}
.zEWidget-launcher,
#launcher {
  left: -12px !important;
  display: none;
}
#squad-wrapper {
  width: 100%;
}
#squad-layout {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 70px minmax(280px, 24%) auto;
  overflow: hidden;
}
#squad-layout .side-bar-nav {
  width: 70px;
  z-index: 4;
}
#squad-layout .side-bar-nav.scrollable {
  overflow-y: auto;
}
#squad-layout .list-menu {
  width: 100%;
  height: 100vh;
  position: relative;
  z-index: 2;
  border-right: 1px solid #ebf0f0;
}
#squad-layout .slide-menu {
  position: absolute;
  left: 70px;
  overflow: hidden;
  background-color: white;
  min-width: 280px;
  max-width: 24%;
  width: 24%;
  height: 100vh;
  z-index: 3;
  transition: margin 200ms;
  border-right: 1px solid #ebf0f0;
}
#squad-layout .slide-menu.hidden {
  margin-left: -100%;
  transition: margin 800ms;
}
#squad-layout .main-content {
  background-color: #f4f6f6;
  width: 100%;
  height: 100vh;
  z-index: 1;
}
#squad-layout .main-content .main-content-margin {
  margin-left: 24px;
  margin-right: 24px;
  margin-top: 24px;
}
.menu-collapsed .list-menu {
  display: none;
  width: 0;
}
.menu-collapsed .main-content {
  grid-column: span 2;
}
.main-only #squad-layout,
.menu-only #squad-layout {
  grid-template-columns: 70px auto;
}
.main-only #squad-layout.mobile-view,
.menu-only #squad-layout.mobile-view {
  grid-template-columns: auto;
}
.main-only #squad-layout.mobile-view .side-bar-nav,
.menu-only #squad-layout.mobile-view .side-bar-nav {
  display: none;
}
.main-only #squad-layout.mobile-view .slide-menu,
.menu-only #squad-layout.mobile-view .slide-menu {
  left: 0;
}
.main-only #squad-layout.mobile-view .list-menu,
.menu-only #squad-layout.mobile-view .list-menu,
.main-only #squad-layout.mobile-view .main-content,
.menu-only #squad-layout.mobile-view .main-content {
  height: calc(100dvh - 100px);
  margin-top: 50px;
}
.main-only .list-menu {
  display: none;
}
.menu-only .main-content {
  display: none;
}
@media screen and (max-width: 850px) {
  #squad-layout .main-content .main-content-margin {
    margin-left: 12px;
    margin-right: 12px;
    margin-top: 12px;
  }
}
@media screen and (max-width: 750px) {
  #squad-layout .main-content .main-content-margin {
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
  }
}
@media screen and (max-width: 430px) {
  .main-only #squad-layout,
  .menu-only #squad-layout {
    grid-template-columns: auto;
  }
  .main-only #squad-layout .side-bar-nav,
  .menu-only #squad-layout .side-bar-nav {
    position: absolute;
    height: 100vh;
    margin-left: -62px;
    background-color: transparent;
  }
  .main-only #squad-layout .side-bar-nav:hover,
  .menu-only #squad-layout .side-bar-nav:hover {
    margin-left: 0px;
    background-color: #333333;
  }
  .main-only #squad-layout .slide-menu,
  .menu-only #squad-layout .slide-menu {
    left: 0;
    max-width: 100%;
  }
}
@media screen and (max-width: 350px) {
  #squad-layout {
    overflow: auto;
    overflow-y: hidden;
  }
  #squad-layout .slide-menu.hidden {
    margin-left: -350px;
  }
}
.invite-accept-carousel {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.5);
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.invite-accept-carousel-modal {
  width: 500px;
  margin: 12px;
}
.invite-accept-carousel-modal .carousel-card-image {
  width: 200px;
  height: 200px;
}
#main.mobile .invite-accept-carousel-modal {
  width: 350px;
}
.loading-state .dark-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 10;
  opacity: 0.7;
}
.loading-state .loading-state-box {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background-color: #f4f6f6;
}
.loading-state .loading-state-box.small {
  width: 25px;
  height: 25px;
  border-radius: 6px;
}
.loading-state .loading-state-box.circle {
  border-radius: 24px;
}
.loading-state .loading-state-sidebar .loading-state-box {
  background-color: #474747;
}
.loading-state .loading-state-line {
  background-color: #f4f6f6;
  height: 15px;
  border-radius: 6px;
}
.loading-state .loading-state-line.thick {
  height: 25px;
}
.loading-state .loading-state-block {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-gap: 12px;
  margin-bottom: 12px;
  align-items: center;
}
.loading-state .loading-state-header {
  display: grid;
  grid-template-columns: 1fr 25px;
  grid-gap: 25px;
  margin-bottom: 24px;
}
.loading-state .loading-state-main {
  padding: 24px;
}
.loading-state .loading-state-main .loading-state-main-item {
  background-color: #ffffff;
  padding: 24px;
  margin-bottom: 24px;
}
.loading-state .loading-state-main .loading-state-main-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.loading-state .loading-state-list {
  padding: 24px;
}
.loading-state.animate .loading-state-list .loading-state-line,
.loading-state.animate .loading-state-main .loading-state-line,
.loading-state.animate .loading-state-list .loading-state-box,
.loading-state.animate .loading-state-main .loading-state-box {
  background: linear-gradient(270deg, #f4f6f6, #d8dfdf);
  background-size: 400% 400%;
  -webkit-animation: FauxState 3s ease infinite;
  -moz-animation: FauxState 3s ease infinite;
  animation: FauxState 3s ease infinite;
}
@-webkit-keyframes FauxState {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-moz-keyframes FauxState {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes FauxState {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.signup-wrapper {
  width: 100%;
  display: grid;
  grid-template-columns: 2fr 3fr;
  overflow: auto;
}
.signup-wrapper .signup-header-title {
  margin-bottom: 12px;
}
.signup-wrapper .sign-up-sso-button-container {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-gap: 12px;
  margin-bottom: 24px;
}
.signup-wrapper .sign-up-email-container {
  margin-bottom: 18px;
}
.signup-wrapper .sign-up-header-title {
  margin-bottom: 12px;
}
.signup-wrapper .signup-form-input-container {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-gap: 12px;
  margin-bottom: 18px;
}
.signup,
.login,
.confirm,
.verify-email,
.user-creation,
.network-issue,
.forgot-password,
#incompatible-browser {
  width: 440px;
  margin: 50px auto;
  background-color: #ffffff;
}
.network-issue .network-issue-title {
  display: block;
  color: #333333;
  font-weight: 300;
  text-align: center;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 24px;
  margin: auto;
}
.network-issue .network-issue-description {
  font-size: 18px;
  text-align: center;
  margin: 24px 0;
}
#incompatible-browser {
  text-align: center;
}
#incompatible-browser .button-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: space-between;
  place-content: space-between;
  white-space: nowrap;
}
#incompatible-browser .button-container .fab {
  font-weight: 200;
}
.logo-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.logo-header .logo-header-logo {
  width: 100px;
}
.logo-header .logo-header-action {
  width: 80px;
}
.info-section {
  position: relative;
  background: url(/assets/a7196257e614e0e87234.jpg);
  background-size: cover;
  background-position: center;
  color: white;
  text-align: center;
}
.info-section .info-section-title {
  font-size: 38px;
}
.info-section .brand-logo {
  margin-top: 60px;
  height: 50px;
}
.info-section .brand-logo img {
  width: 200px;
}
.info-section .legal-footer {
  position: absolute;
  bottom: 24px;
  width: 100%;
}
.info-section .legal-footer .legal-footer-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(80px, 140px));
  grid-gap: 12px;
  justify-content: center;
  align-items: center;
  padding: 0 24px;
}
@media screen and (max-width: 800px) {
  .signup-wrapper {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }
  .signup,
  .login,
  .confirm,
  .verify-email,
  .user-creation,
  .network-issue,
  .forgot-password,
  #incompatible-browser {
    width: unset;
    margin: 20px auto;
    padding: 0 30px;
  }
  .info-section {
    position: absolute;
  }
  .info-section .brand-logo,
  .info-section .info-section-title {
    display: none;
  }
  .info-section .legal-footer {
    position: fixed;
    bottom: 0;
    padding: 12px 0;
  }
}
.style-guide-colors .color-brand-primary {
  background: #3ebfc2;
}
.style-guide-colors .color-brand-primary-shade {
  background: #00b0b9;
}
.style-guide-colors .color-brand-primary-tint {
  background: #d6eff2;
}
.style-guide-colors .color-brand-secondary {
  background: #ef5455;
}
.style-guide-colors .color-alert-affirmative {
  background: #00960a;
}
.style-guide-colors .color-alert-negative {
  background: #ef5455;
}
.style-guide-colors .color-alert-neutral {
  background: #3ebfc2;
}
.style-guide-colors .color-alert-dismissed {
  background: #555555;
}
.style-guide-colors .color-background-light {
  background: white;
}
.style-guide-colors .color-background-light-secondary {
  background: #f4f6f6;
}
.style-guide-colors .color-background-dark {
  background: #333333;
}
.style-guide-colors .color-background-dark-secondary {
  background: #404040;
}
.style-guide-colors .color-text-light-primary {
  background: white;
}
.style-guide-colors .color-text-light-secondary {
  background: #888888;
}
.style-guide-colors .color-text-light-error {
  background: red;
}
.style-guide-colors .color-text-dark-primary {
  background: #333333;
}
.style-guide-colors .color-text-dark-secondary {
  background: #555555;
}
.style-guide-colors .color-error {
  background: #ef5455;
}
.style-guide-colors .color-border-dark {
  background: #333333;
}
.style-guide-colors .color-border-light {
  background: #cccccc;
}
.style-guide-colors ul.color-list > li > h3,
.style-guide-colors ul.color-list > li > p {
  margin: 0;
  padding: 0 0 12px 0;
}
.style-guide-colors ul.color-list > li > div {
  display: block;
  height: 50px;
  width: 100px;
  margin-right: 18px;
  float: left;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  border: 1px solid #cccccc;
}
.style-guide-controls .button-border-1 {
  border: 1px solid #333333;
  cursor: pointer;
  transition: color 200ms, border-color 200ms;
}
.style-guide-controls .button-border-1:hover {
  color: #3ebfc2;
  border-color: #3ebfc2;
}
.style-guide-controls .button-border-1:hover * {
  stroke: #3ebfc2;
}
.style-guide-controls .button-border-1:hover.no-fill {
  -webkit-text-stroke: 2px #3ebfc2;
}
.style-guide-controls .style-guide-control-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.style-guide-controls .style-guide-control-list.three {
  grid-template-columns: 1fr 1fr 1fr;
}
.style-guide-controls .style-guide-control-list li {
  border-radius: 6px;
  border: 1px solid #cccccc;
  padding: 6px;
  text-align: center;
  margin: auto;
  display: flex;
  flex-direction: column;
  width: 90%;
}
.style-guide-controls .style-guide-control-list li div {
  display: flex;
  place-content: space-between;
}
.style-guide-controls .style-guide-control-list li.on-dark {
  background-color: #333333;
  color: white;
}
.style-guide-controls .style-guide-control-list li.on-dark .fa,
.style-guide-controls .style-guide-control-list li.on-dark svg {
  color: white;
}
.style-guide-controls .style-guide-control-list li.on-dark .fa.no-fill,
.style-guide-controls .style-guide-control-list li.on-dark svg.no-fill {
  -webkit-text-stroke: 2px #333333;
  color: transparent;
  -webkit-text-stroke: 2px white;
}
.style-guide-controls .style-guide-control-list li.on-dark .fa *,
.style-guide-controls .style-guide-control-list li.on-dark svg * {
  stroke: white;
}
.style-guide-controls .style-guide-control-list li .fa,
.style-guide-controls .style-guide-control-list li svg {
  font-size: 1.5em;
  cursor: pointer;
  transition: color 200ms, border-color 200ms;
}
.style-guide-controls .style-guide-control-list li .fa:hover,
.style-guide-controls .style-guide-control-list li svg:hover {
  color: #3ebfc2;
  border-color: #3ebfc2;
}
.style-guide-controls .style-guide-control-list li .fa:hover *,
.style-guide-controls .style-guide-control-list li svg:hover * {
  stroke: #3ebfc2;
}
.style-guide-controls .style-guide-control-list li .fa:hover.no-fill,
.style-guide-controls .style-guide-control-list li svg:hover.no-fill {
  -webkit-text-stroke: 2px #3ebfc2;
}
.style-guide-controls .style-guide-control-list li .fa.no-fill,
.style-guide-controls .style-guide-control-list li svg.no-fill {
  color: transparent;
  -webkit-text-stroke: 2px #333333;
}
.style-guide-controls .style-guide-control-list .avatar-size {
  display: flex;
  place-content: space-evenly;
  text-align: center;
}
.style-guide-controls .style-guide-control-list .avatar-size div {
  display: flex;
  flex-direction: column;
}
.style-guide-controls .style-guide-control-list .avatar-size div .avatar {
  margin: auto;
  top: 6px;
}
.style-guide-layout .scrollable-page-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.style-guide-layout .spacing-1 {
  padding: 6px;
}
.style-guide-layout .spacing-2 {
  padding: 12px;
}
.style-guide-layout .spacing-3 {
  padding: 18px;
}
.style-guide-layout .spacing-4 {
  padding: 24px;
}
.style-guide-layout .spacing-5 {
  padding: 36px;
}
.style-guide-layout .spacing-6 {
  padding: 48px;
}
.style-guide-layout ul.spacing-list > li {
  border: 1px solid #333333;
  display: table;
  margin: 24px 48px;
}
.style-guide-layout .button-container {
  display: flex;
  flex-direction: row;
  place-content: space-evenly;
  white-space: nowrap;
}
.style-guide-layout section {
  border: 1px solid #cccccc;
  padding: 12px;
}
.style-guide-typography li {
  margin: 24px 48px;
}
.style-guide-typography p {
  border-bottom: 1px solid #cccccc;
}
.style-guide-typography .typography-header-hero {
  font-size: 3em;
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 100;
  text-decoration: none;
}
.style-guide-typography .typography-header-1 {
  font-size: 2em;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 100;
  letter-spacing: 0.07em;
  text-decoration: none;
}
.style-guide-typography .typography-subheader-1 {
  font-size: 18px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 100;
  text-decoration: none;
}
.style-guide-typography .typography-header-2 {
  font-size: 1.5em;
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 100;
  text-decoration: none;
}
.style-guide-typography .typography-subheader-2 {
  font-size: 1.17em;
  line-height: 1.17em;
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 100;
  text-decoration: none;
}
.style-guide-typography .typography-header-3 {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 200;
  letter-spacing: 1.2px;
  text-decoration: none;
}
.style-guide-typography .typography-subheader-3 {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 200;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
}
.style-guide-typography .typography-body {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
}
.style-guide-typography .typography-body-secondary {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
}
.style-guide-semantics li {
  margin: 24px 48px;
}
.style-guide-semantics p {
  border-bottom: 1px solid #cccccc;
}
.style-guide-semantics .typography-header-hero {
  font-size: 3em;
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 100;
  text-decoration: none;
}
.style-guide-semantics .typography-header-1 {
  font-size: 2em;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 100;
  letter-spacing: 0.07em;
  text-decoration: none;
}
.style-guide-semantics .typography-subheader-1 {
  font-size: 18px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 100;
  text-decoration: none;
}
.style-guide-semantics .typography-header-2 {
  font-size: 1.5em;
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 100;
  text-decoration: none;
}
.style-guide-semantics .typography-subheader-2 {
  font-size: 1.17em;
  line-height: 1.17em;
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 100;
  text-decoration: none;
}
.style-guide-semantics .typography-header-3 {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 200;
  letter-spacing: 1.2px;
  text-decoration: none;
}
.style-guide-semantics .typography-subheader-3 {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 200;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
}
.style-guide-semantics .typography-body {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
}
.style-guide-semantics .typography-body-secondary {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
}
.style-guide-semantics .typography-body-tertiary {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  text-decoration: none;
}
.profile-details-modal {
  top: 10px;
}
.profile-details {
  background-color: #ffffff;
  padding: 25px 30px 0;
}
.profile-details .form-input-container .form-input-firstName,
.profile-details .form-input-container .form-input-lastName {
  width: calc(50% - 5px);
}
.profile-details .form-input-container .profile-details-avatar .avatar-editor-container {
  margin-bottom: 40px;
}
.profile-details .form-input-container .profile-details-about-me-title {
  margin-bottom: 16px;
}
.chat-rooms-wrapper .chat-rooms-list {
  padding-bottom: 36px;
}
.chat-rooms-wrapper .chat-rooms-list .chat-rooms-list-empty {
  font-size: 11px;
  color: #8a9292;
  text-decoration: none;
  text-align: center;
  margin-top: 10px;
}
.chat-rooms-wrapper .chat-rooms-header .chat-rooms-header-title {
  margin-bottom: 14px;
}
.chat-rooms-wrapper .chat-rooms-header .chat-rooms-header-search {
  margin-bottom: 18px;
}
.chat-rooms-wrapper .chat-rooms-header .chat-rooms-header-filter {
  margin-bottom: 10px;
}
.chat-new .chat-header {
  height: 90px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ebf0f0;
  background-color: #ffffff;
}
.chat-new .chat-header .chat-header-avatar {
  margin: auto;
  margin-bottom: 7px;
}
.chat-new .chat-header .chat-header-title {
  text-align: center;
  font-weight: 500;
  font-size: 13px;
}
.chat-new .chat-create {
  border-top: 1px solid #cccccc;
}
.chat-new .chat-history-limit-wrapper {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
.chat-new .chat-messages-new {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  min-height: 100%;
  padding: 6px 30px 0;
  background-color: #ffffff;
  overflow-x: hidden;
}
.chat-new .chat-messages-new .date-divider {
  color: #8a9292;
  font-size: 11px;
  text-align: center;
  color: #333333;
  margin: 14px 0;
}
.chat-new .chat-messages-new .last-seen-divider {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  align-items: center;
  margin: 20px 0;
  font-size: 13px;
}
.chat-new .chat-messages-new .last-seen-divider:first-child {
  display: none;
}
.chat-new .chat-messages-new .last-seen-divider :first-child,
.chat-new .chat-messages-new .last-seen-divider :last-child {
  height: 0px;
  border: 1px solid #3ebfc2;
}
.chat-new .chat-message-new {
  margin-bottom: 3px;
}
.chat-new .chat-message-new.short-separator {
  margin-bottom: 14px;
}
.chat-new .chat-message-new.long-separator {
  margin-bottom: 20px;
}
.chat-new .chat-message-new .chat-message-layout {
  position: relative;
  display: grid;
  grid-gap: 7px;
}
.chat-new .chat-message-new .chat-message-body-new {
  position: relative;
  padding: 10px 14px 9px;
  overflow-wrap: break-word;
  -webkit-border-radius: 13px;
  -moz-border-radius: 13px;
  border-radius: 13px;
  word-break: break-all;
  word-break: break-word;
  width: fit-content;
  width: -moz-fit-content;
  display: grid;
  font-size: 13px;
  line-height: 19px;
}
.chat-new .chat-message-new .chat-message-body-new h1 {
  line-height: 30px;
}
.chat-new .chat-message-new .chat-message-body-new h2 {
  line-height: 25px;
}
.chat-new .chat-message-new .chat-message-body-new h3 {
  line-height: 22px;
}
.chat-new .chat-message-new .chat-message-body-new.emojis-only .chat-message-content {
  font-size: 32px;
  line-height: 39px;
  letter-spacing: 4px;
  padding: 2px 0;
}
.chat-new .chat-message-new.highlight-target .chat-message-body-new,
.chat-new .chat-message-new.highlight-target .chat-message-file {
  -webkit-box-shadow: 0px 0px 5px 3px #3ebfc2;
  -moz-box-shadow: 0px 0px 5px 3px #3ebfc2;
  box-shadow: 0px 0px 5px 3px #3ebfc2;
}
.chat-new .chat-message-new .chat-message-menu {
  display: flex;
  align-items: center;
  width: 55px;
  opacity: 0;
}
.chat-new .chat-message-new .chat-message-menu.visible {
  opacity: 1;
  transition: opacity 300ms;
}
.chat-new .chat-message-new:hover .chat-message-menu {
  opacity: 1;
  transition: opacity 300ms;
}
.chat-new .chat-message-new .chat-message-main {
  position: relative;
  display: flex;
  flex-direction: column;
}
.chat-new .chat-message-new .chat-message-main.has-reactions {
  margin-bottom: 8px;
}
.chat-new .chat-message-new .chat-reaction-container .reaction-container-new {
  position: absolute;
  bottom: -10px;
  padding: 3px;
  background-color: white;
  border-radius: 6px;
  box-shadow: 2px 2px 2px #8a9292;
  line-height: 12px;
}
.chat-new .chat-message-new .chat-message-middle {
  display: flex;
  flex-direction: row;
}
.chat-new .chat-message-new .chat-message-footer {
  display: flex;
  color: #8a9292;
  margin-top: 4px;
  font-size: 11px;
  grid-column: span 2;
}
.chat-new .chat-message-new .chat-message-footer .message-footer-separator {
  margin: 0 3px;
}
.chat-new .chat-message-new .chat-message-footer .message-footer-separator:first-child,
.chat-new .chat-message-new .chat-message-footer .message-footer-separator:last-child {
  display: none;
}
.chat-new .chat-message-new .user-mention {
  font-weight: bold;
}
.chat-new .chat-message-new .content-text a {
  text-decoration: underline;
}
.chat-new .chat-message-new .blockquote-reply {
  border-left: 3px solid;
  padding: 0 12px;
  margin-bottom: 12px;
  cursor: pointer;
}
.chat-new .chat-message-new .blockquote-reply .blockquote-reply-name {
  font-size: 12px;
  margin-bottom: 4px;
}
.chat-new .chat-message-new .blockquote-reply .blockquote-reply-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
.chat-new .chat-message-new .chat-message-sent-status {
  position: absolute;
  right: -30px;
  height: 100%;
  display: flex;
  align-items: center;
}
.chat-new .chat-message-new:not(.self) .chat-message-layout {
  grid-template-columns: 30px auto;
  justify-content: flex-start;
}
.chat-new .chat-message-new:not(.self) .chat-message-body-new {
  background-color: #f4f6f6;
  border-bottom-left-radius: unset;
}
.chat-new .chat-message-new:not(.self) .chat-message-body-new.emojis-only:not(.with-reply) {
  background-color: transparent;
}
.chat-new .chat-message-new:not(.self) .new-message-image,
.chat-new .chat-message-new:not(.self) .attachment-unpreviewable {
  border-bottom-left-radius: unset;
}
.chat-new .chat-message-new:not(.self) .chat-message-main {
  align-items: flex-start;
}
.chat-new .chat-message-new:not(.self) .chat-reaction-container .reaction-container-new {
  right: 0;
}
.chat-new .chat-message-new:not(.self) .chat-message-menu {
  margin-left: 10px;
}
.chat-new .chat-message-new:not(.self) .chat-message-footer,
.chat-new .chat-message-new:not(.self) .chat-message-middle,
.chat-new .chat-message-new:not(.self) .chat-message-menu {
  justify-content: flex-start;
}
.chat-new .chat-message-new:not(.self) .content-text a {
  color: #3ebfc2;
}
.chat-new .chat-message-new:not(.self) .blockquote-reply {
  color: #8a9292;
  border-left-color: #8a9292;
}
.chat-new .chat-message-new.self .chat-message-layout {
  grid-template-columns: auto;
  justify-content: flex-end;
}
.chat-new .chat-message-new.self .chat-message-body-new {
  color: white;
  background-color: #3ebfc2;
  border-bottom-right-radius: unset;
}
.chat-new .chat-message-new.self .chat-message-body-new.emojis-only:not(.with-reply) {
  background-color: transparent;
}
.chat-new .chat-message-new.self .new-message-image,
.chat-new .chat-message-new.self .attachment-unpreviewable {
  border-bottom-right-radius: unset;
}
.chat-new .chat-message-new.self .chat-message-main {
  align-items: flex-end;
}
.chat-new .chat-message-new.self .chat-reaction-container .reaction-container-new {
  left: 0;
}
.chat-new .chat-message-new.self .chat-message-menu {
  margin-right: 10px;
}
.chat-new .chat-message-new.self .chat-message-footer,
.chat-new .chat-message-new.self .chat-message-middle,
.chat-new .chat-message-new.self .chat-message-menu {
  justify-content: flex-end;
}
.chat-new .chat-message-new.self .user-mention,
.chat-new .chat-message-new.self .content-text a {
  color: white;
}
.chat-new .chat-message-new.self .blockquote-reply {
  color: #ebf0f0;
  border-left-color: #ebf0f0;
}
.chat-new .chat-message-new .chat-message-avatar {
  display: flex;
  align-items: flex-end;
}
.chat-new .chat-message-file {
  margin-top: 3px;
}
.chat-new .chat-message-file .new-message-image,
.chat-new .chat-message-file .attachment-unpreviewable {
  border-radius: 13px;
}
.chat-new .chat-message-file .new-message-image .image-overlay-img,
.chat-new .chat-message-file .attachment-unpreviewable .image-overlay-img {
  border-radius: inherit;
  max-width: 100%;
  height: 200px;
  object-fit: contain;
}
.chat-new .chat-message-file .attachment-unpreviewable {
  width: 180px;
}
.chat-new .notice-message {
  font-size: 11px;
  font-family: 'Roboto', Arial, sans-serif;
  display: flex;
  justify-content: center;
  color: #8a9292;
  margin: 0 auto 14px;
}
.chat-new .notice-message .user-mention {
  color: #8a9292;
  font-weight: normal;
}
.chat-new .read-receipts {
  display: inline;
}
.read-receipts-callout {
  width: 300px;
}
.read-receipts-callout .read-receipts-list {
  max-height: 180px;
  overflow-y: auto;
  padding: 0 24px;
}
.typing-indicator {
  font-size: 12px;
  min-height: 14px;
  padding: 0 0 0 6px;
  background-color: #ffffff;
}
.replies-count .replies-handler {
  font-weight: 500;
  color: #3ebfc2;
  cursor: pointer;
}
.replies-count-callout {
  max-height: 500px;
  overflow: auto;
  margin-right: -18px;
  margin-top: 18px;
}
.replies-count-callout .replies-count-list {
  min-height: unset;
}
@media screen and (max-height: 600px) {
  .chat-new .chat-header {
    height: 40px;
  }
  .chat-new .chat-header .chat-header-avatar {
    display: none;
  }
}
.chat-page {
  position: relative;
  height: 100%;
}
.chat-page .chat-header,
.chat-page .chat-details {
  border-top-left-radius: 12px;
}
.chat-guide-tour-modal .chat-guide-carousel {
  margin-top: 18px;
}
.chat-guide-tour-modal .chat-guide-carousel .carousel-card {
  min-height: 0;
  margin-top: 18px;
  padding-top: 0;
  padding-bottom: 0;
}
.chat-guide-tour-modal .chat-tour-card {
  display: grid;
  grid-gap: 0 24px;
  grid-template-columns: 210px auto;
  grid-template-rows: 24px auto 1fr;
}
.chat-guide-tour-modal .chat-tour-card .chat-tour-card-title {
  font-family: Poppins;
  font-size: 14px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #3ebfc2;
}
.chat-guide-tour-modal .chat-tour-card .chat-tour-card-header {
  margin: 0;
  font-family: Poppins;
  font-size: 24px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #333333;
}
.chat-guide-tour-modal .chat-tour-card .chat-tour-card-words {
  margin: 12px 0 24px;
  font-family: Roboto;
  font-size: 13px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.62;
  letter-spacing: normal;
  color: #8a9292;
}
.chat-guide-tour-modal .chat-tour-card-image {
  grid-column: 2;
  grid-row: 1 / span 3;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto 12px auto;
  pointer-events: none;
}
.chat-messages-wrapper {
  position: relative;
}
.chat-messages-wrapper .last-seen-button-up-control {
  position: absolute;
  z-index: 100;
  top: -67px;
  left: calc(50% - 100px);
  width: 200px;
  display: flex;
  justify-content: center;
}
.chat-loader {
  position: absolute;
  width: 100px;
  top: 40%;
  left: 50%;
  margin-left: -50px;
}
.chat-notice .chat-message-body {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  font-size: 12px;
  text-align: center;
  margin: 6px / 2;
}
.chat-notice .chat-message-body p {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  font-size: 12px;
  word-break: break-all;
  word-break: break-word;
  margin: 0;
}
.chat-notice .chat-message-body a,
.chat-notice .chat-message-body a:visited {
  color: #3ebfc2;
  cursor: pointer;
}
.deleted-message {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 200;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
}
.chat-message {
  position: relative;
  width: 100%;
}
.chat-message .avatar {
  left: -18px;
  position: absolute;
  top: 0;
}
.chat-message .message-resend {
  position: absolute;
  top: 6px;
  right: 6px;
}
.chat-message .message-resend:hover {
  color: #3ebfc2;
}
.chat-message .chat-message-body {
  background-color: #f4f6f6;
  display: flex;
  flex-direction: column;
  margin: 0 0 0 24px;
  padding: 6px;
  position: relative;
  overflow-wrap: break-word;
  word-break: break-all;
  word-break: break-word;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.chat-message .chat-message-body .editor-control {
  flex-wrap: wrap;
}
.chat-message .chat-message-body .user-mention {
  background-color: #d6eff2;
}
.chat-message .chat-message-body .callout-button {
  position: absolute;
  width: 24px;
  top: 6px;
  right: 0;
}
.chat-message .chat-message-body.shimmer {
  animation: shimmer 2s linear;
}
.chat-message .chat-message-body.failed {
  border: 1px solid #ff0000;
}
.chat-message .chat-message-body {
  padding-right: 18px;
}
.chat-message .chat-message-body .content-container {
  display: block;
}
.chat-message .chat-message-body .content-container p {
  -webkit-line-clamp: 3;
  margin: 6px 0;
}
.chat-message .read-receipt {
  font-size: 12px;
  padding-left: 30px;
}
.chat-message .read-receipt .clickable {
  cursor: pointer;
}
.chat-message.self .chat-message-body {
  background-color: #d6eff2;
}
.chat-message.self .user-mention {
  background-color: #f4f6f6;
}
.chat-message-author {
  word-break: break-all;
  word-break: break-word;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  display: block;
  margin: 0 0 6px / 2;
  text-align: right;
}
.chat-message-author.hidden {
  max-height: 0px;
  overflow: hidden;
}
.chat-message-author time.separator,
.chat-message-author .author-name {
  margin-right: 6px;
}
.chat-message-author time.separator::after,
.chat-message-author .author-name::after {
  padding-right: 6px;
  padding-left: 6px;
}
.chat-message-author time {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
}
.like-button-member-list {
  padding: 6px;
}
@keyframes shimmer {
  0% {
    background-color: rgba(255, 0, 0, 0.1);
  }
  10% {
    background-color: rgba(255, 0, 0, 0.2);
  }
  20% {
    background-color: rgba(255, 0, 0, 0.3);
  }
  30% {
    background-color: rgba(255, 0, 0, 0.4);
  }
  40% {
    background-color: rgba(255, 0, 0, 0.5);
  }
  50% {
    background-color: rgba(255, 0, 0, 0.6);
  }
  60% {
    background-color: rgba(255, 0, 0, 0.5);
  }
  70% {
    background-color: rgba(255, 0, 0, 0.4);
  }
  80% {
    background-color: rgba(255, 0, 0, 0.3);
  }
  90% {
    background-color: rgba(255, 0, 0, 0.2);
  }
  100% {
    background-color: rgba(255, 0, 0, 0.1);
  }
}
.chat-details {
  background-color: white;
  padding-top: 6px;
  padding-bottom: 100px;
}
.discoverable-chat .discoverable-chat-list .discoverable-chat-list-item-wrapper {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
.discoverable-chat .discoverable-chat-list .discoverable-chat-list-item-wrapper .discoverable-chat-list-item {
  padding: 6px 12px;
  margin: 6px 6px 6px 18px;
}
.discoverable-chat .discoverable-chat-list .discoverable-chat-list-item-wrapper .discoverable-chat-list-item-content {
  font-size: 11px;
  padding-top: 3px;
}
.discussion-page .posts-page .posts-page-header {
  margin-bottom: 12px;
}
.discussion-page .posts-page .posts-page-header .post-page-header-actions {
  display: flex;
  background-color: white;
  justify-content: space-between;
  align-items: center;
  padding-right: 20px;
}
.discussion-page .posts-page .posts-page-header .post-page-header-title {
  flex: 1;
  padding: 24px;
}
.discussion-page .posts-list {
  position: relative;
  min-height: 100%;
}
.discussion-page .posts-list .date-divider {
  font-size: 12px;
  text-align: center;
  color: #333333;
}
.discussion-page .posts-list .posts-history-limit-wrapper {
  position: absolute;
  bottom: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
.discussion-page .discussion-message-item {
  background-color: white;
  position: relative;
  display: grid;
  border-radius: 10px;
}
.discussion-page .discussion-message-item.highlight-target {
  margin-bottom: 5px;
  -webkit-box-shadow: 0px 0px 5px 3px #3ebfc2;
  -moz-box-shadow: 0px 0px 5px 3px #3ebfc2;
  box-shadow: 0px 0px 5px 3px #3ebfc2;
}
.discussion-page .discussion-message-item.comment,
.discussion-page .discussion-message-item.reply {
  margin: 12px 0;
  border: 1px solid #ebf0f0;
}
.discussion-page .discussion-message-item.reply {
  padding: 6px 0;
}
.discussion-page .discussion-message-item.with-activity-indicator {
  border: 1px solid #3ebfc2;
}
.discussion-page .notice-list-item {
  font-size: 13px;
  font-family: 'Roboto', Arial, sans-serif;
  display: flex;
  justify-content: center;
  color: #8a9292;
  margin-top: 14px;
}
.discussion-page .notice-list-item .user-mention {
  color: #8a9292;
  font-weight: normal;
}
.discussion-page .discussion-message-header {
  display: grid;
  grid-template-columns: auto max-content;
  padding: 0 18px;
}
.discussion-page .discussion-message-header .discussion-message-header-menu {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.discussion-page .discussion-post-content,
.discussion-page .discussion-comment-content,
.discussion-page .discussion-reply-content {
  overflow-x: hidden;
}
.discussion-page .discussion-post-content .discussion-message-body {
  margin-left: 70px;
}
.discussion-page .discussion-message-footer {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  min-height: 22px;
  padding: 0 18px;
  margin-top: 12px;
}
.discussion-page .discussion-message-footer > div {
  display: flex;
  align-items: center;
}
.discussion-page .discussion-message-footer > div > :not(:last-child) {
  margin-right: 24px;
}
.discussion-page .discussion-message-footer .discussion-message-comment-icon,
.discussion-page .discussion-message-footer .discussion-message-reply-icon {
  padding: 0;
  position: relative;
  top: 2px;
}
.discussion-page .pin-action {
  display: flex;
  align-items: center;
  grid-gap: 6px;
  cursor: pointer;
}
.discussion-page .replies-list {
  margin-left: 50px;
  margin-right: 10px;
  border-top: 1px solid #ebf0f0;
}
.discussion-page .replies-list .replying-to-text {
  font-size: 13px;
  font-weight: bold;
  margin-top: 12px;
}
.discussion-page .replies-list .new-reply .message-editor-new {
  border: none;
}
.discussion-page .post-indention {
  padding-left: 60px;
}
.confirm-modal.confirm-edit-post .modal-window {
  width: 700px;
}
.discussions-management .discussions-list {
  padding-bottom: 36px;
}
.discussions-management .discussions-list .discussions-list-empty {
  font-size: 11px;
  color: #8a9292;
  text-decoration: none;
  text-align: center;
  margin-top: 10px;
}
.discussions-management .discussions-management-header .discussions-management-header-title {
  margin-bottom: 14px;
}
.discussions-management .discussions-management-header .discussions-management-header-search {
  flex: 1;
}
.discussions-management .discussions-search-wrapper {
  display: flex;
  margin-bottom: 18px;
}
.discussions-management .discussions-search-wrapper .discussions-management-header-search {
  flex: 1;
  margin-right: 7px;
}
.discussions-management .discussions-search-wrapper .discussions-management-header-settings {
  flex-basis: 40px;
  margin-right: 7px;
}
.discussions-management .discussion-list-item {
  padding: 6px 12px;
  margin: 6px 18px;
}
.discussions-management .discussion-list-item.draggable {
  cursor: grab;
}
.discussions-management .discussion-list-item.dragging {
  opacity: 0.5;
}
.discussions-management .discussions-category-settings .drag-and-drop-area {
  height: 65px;
}
.discussions-management .discussions-management-uncategorized-list.hovering {
  border-color: #3ebfc2;
}
.discussions-management .discussions-category {
  position: relative;
  margin-bottom: 20px;
}
.discussions-management .discussions-category.uncategorized .discussions-category-discussions-list {
  min-height: 200px;
}
.discussions-management .discussions-category .discussions-category-wrapper {
  position: relative;
  cursor: pointer;
}
.discussions-management .discussions-category .discussions-category-wrapper:hover .discussions-category-expand-action {
  display: block;
}
.discussions-management .discussions-category .discussions-category-wrapper .discussions-category-expand-action {
  display: none;
  position: absolute;
  top: 2;
  right: 0;
}
.discussions-management .discussions-category .discussion-category-collapsed {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  border-radius: 8px;
  cursor: pointer;
}
.discussions-management .discussions-category .discussion-category-collapsed.on-drag-over {
  border-color: #3ebfc2;
  background-color: rgba(228, 246, 247, 0.3);
}
.discussions-management .discussions-category .discussion-category-collapsed .discussions-category-title {
  font-size: 14px;
  font-weight: bold;
  word-break: break-all;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.discussions-management .discussions-category .discussion-category-collapsed .discussions-category-discussion-count {
  font-size: 11px;
  color: #8a9292;
}
.discussions-management .discussions-category .discussions-category-uncategorized-title {
  font-size: 11px;
  font-weight: 500;
  color: #8a9292;
}
.discussions-management .discussions-category .discussions-category-inner {
  margin: 0 20px;
  padding: 0px 10px;
}
.discussions-management .discussions-category .discussions-category-inner .discussions-category-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  margin-top: 10px;
}
.discussions-management .discussions-category .discussions-category-empty {
  font-size: 12px;
  color: #8a9292;
  margin: 10px 0;
  text-align: left;
}
.discussions-management .discussions-category .discussions-category-discussions-list .discussions-category-drop-area-text {
  font-size: 11px;
  height: 13px;
  color: #8a9292;
  margin: 10px;
  text-align: center;
}
.discussions-management .discussions-category .category-activit-indicator {
  position: absolute;
  left: 12;
  top: 22px;
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background-color: #3ebfc2;
}
.discussions-management .discussions-management-header-more-menu-button {
  padding: 10px;
}
.scrollable-drag .scrollable-drag-item {
  position: sticky;
  width: 100%;
  height: 80px;
  background-color: red;
}
.scrollable-drag .scrollable-drag-item.drag-up {
  top: 0;
}
.scrollable-drag .scrollable-drag-item.drag-down {
  bottom: 0;
}
.category-drag-and-drop-wrapper {
  position: relative;
}
.category-drag-and-drop-wrapper .category-drag-and-drop-border {
  position: absolute;
  background-color: rgba(228, 246, 247, 0.3);
  height: calc(100% - 4px);
  width: calc(100% - 36px);
  margin-left: 20px;
  padding: 6px 0;
  border: 2px dashed #3ebfc2;
  border-radius: 8px;
  z-index: 1;
}
.discussion-guide-tour-modal {
  padding: 0;
}
.discussion-guide-tour-modal .discussion-guide-carousel {
  margin-top: 18px;
}
.discussion-guide-tour-modal .discussion-tour-card {
  display: grid;
  grid-gap: 0 24px;
  grid-template-columns: 210px auto;
  grid-template-rows: 24px auto 1fr;
}
.discussion-guide-tour-modal .discussion-tour-card .discussion-tour-card-title {
  font-family: Poppins;
  font-size: 14px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #3ebfc2;
}
.discussion-guide-tour-modal .discussion-tour-card .discussion-tour-card-header {
  margin: 0;
  font-family: Poppins;
  font-size: 24px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #333333;
}
.discussion-guide-tour-modal .discussion-tour-card .discussion-tour-card-words {
  margin: 12px 0 24px;
  font-family: Roboto;
  font-size: 13px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.62;
  letter-spacing: normal;
  color: #8a9292;
}
.discussion-guide-tour-modal .discussion-tour-card-image {
  grid-column: 2;
  grid-row: 1 / span 3;
  max-width: 100%;
  object-fit: contain;
  margin: 12px auto 12px auto;
  pointer-events: none;
}
.discoverable-disussions .discoverable-disussions-list .discoverable-disussions-list-item-wrapper {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
.discoverable-disussions .discoverable-disussions-list .discoverable-disussions-list-item-wrapper .discoverable-disussions-list-item {
  padding: 6px 12px;
  margin: 6px 6px 6px 18px;
}
.discoverable-disussions .discoverable-disussions-list .discoverable-disussions-list-item-wrapper .discoverable-disussions-list-item-content {
  font-size: 11px;
  padding-top: 3px;
}
.video-container .video-call-content {
  background-color: #333333;
  overflow: hidden;
  bottom: 90px;
  left: 12px;
}
.video-container .video-call-content a:-webkit-any-link {
  text-decoration: none;
}
.video-container .video-call-content .vignette {
  box-shadow: inset 0px 24px 18px rgba(0, 0, 0, 0.5), inset 0px -24px 18px rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 40;
}
.video-container .fullscreen-enabled .video-call-content.video-page-content {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}
.video-container .fullscreen-enabled .video-call-content.video-page-content .video-presenter .main-track video {
  height: calc(100vh - 120px);
}
.video-container .participant-track-container {
  overflow: auto;
}
.video-container .video-call-content.video-page-content {
  max-height: 100%;
  border-left: 1px solid #404040;
  background-color: #333333;
}
.video-container .video-call-content.video-page-content .video-call-controls {
  margin: auto 0 0;
  bottom: 12px;
  opacity: 1;
  max-height: 100px;
  padding: 20px 0;
  display: flex;
  align-items: flex-end;
  user-select: none;
  -webkit-user-select: none;
}
.video-container .video-call-content.video-page-content .video-call-controls .video-call-track-details {
  display: flex;
  flex-direction: row;
  color: #8a9292;
}
.video-container .video-call-content.video-page-content .video-call-controls .video-call-track-details .video-call-track-timer {
  margin: auto 0;
}
.video-container .video-call-content.video-page-content .video-call-controls .video-call-track-details .video-call-people-count {
  margin: auto 0;
  display: flex;
}
.video-container .video-call-content.video-page-content .video-call-controls .video-call-track-details .video-call-people-count .participant-count {
  cursor: pointer;
  white-space: nowrap;
}
.video-container .video-call-content.video-page-content .video-call-controls .video-call-track-details .video-call-people-count .participant-count:hover {
  text-decoration: underline;
}
.video-container .video-call-content.video-page-content .video-call-controls .button-actions-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 0 6px 0 20px;
}
.video-container .video-call-content.video-page-content .video-call-controls .button-actions-container .video-view-mode-toggle {
  position: relative;
  right: 30px;
  height: 40px;
  width: 100px;
}
.video-container .video-call-content.video-page-content .video-call-controls .user-count-button {
  width: auto;
}
.video-container .video-call-content.video-page-content .video-call-controls .user-count-button .user-count {
  margin: auto 6px / 2 auto 6px;
}
.video-container .participant-disconnected-avatar-icon {
  display: flex;
  margin: auto;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 48px;
  opacity: 0.6;
}
.video-container video {
  background: black;
  background: rgba(0, 0, 0, 0.75);
  object-fit: contain;
  object-position: center;
  width: 100%;
  height: 100%;
}
.video-container .video-availability {
  display: grid;
  grid-template-rows: minmax(200px, 1fr) 300px;
  text-align: center;
  margin: auto;
  padding-top: 10px;
  color: white;
  height: 100%;
  width: 100%;
}
.video-container .video-availability .video-preview {
  width: 100%;
  height: 100%;
}
.video-container .video-availability .video-preview video {
  position: relative;
  z-index: 20;
}
.video-container .video-availability .video-preview video.mirror-video {
  transform: scaleX(-1);
  background: none;
}
.video-container .video-availability .video-preview .video-preview-loading-text {
  margin-top: 8px;
  margin-bottom: 8px;
}
.video-container .video-availability .video-preview.hidden {
  display: none;
}
.video-container .video-availability .video-preview .avatar-preview {
  top: -100%;
  position: relative;
  z-index: 0;
}
.video-container .video-availability .video-preview-interactions {
  padding-top: 10px;
}
.video-container .video-availability .video-preview-interactions .video-preview-title {
  font-size: 22px;
  font-weight: bold;
  padding: 0 10px;
  word-break: break-all;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.video-container .video-availability .video-preview-interactions .video-preview-subtext {
  font-size: 12px;
  color: #8a9292;
}
.video-container .video-availability .video-preview-interactions .video-preview-loading-text,
.video-container .video-availability .video-preview-interactions .video-loading-text {
  font-size: 20px;
  margin: 5px;
}
.video-container .video-availability .video-preview-users {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 60px;
}
.video-container .video-availability .video-preview-users .video-preview-users-text {
  display: flex;
  flex-direction: row;
  place-content: center;
  color: #8a9292;
  margin: 0 auto;
  width: 80%;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.video-container .video-availability .video-preview-users .video-preview-users-avatars {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 4px;
}
.video-container .video-availability .video-preview-users .video-preview-users-avatars .video-preview-users-avatars-more-circle {
  background-color: #3ebfc2;
  color: white;
  width: 30px;
  height: 30px;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
}
.video-container .video-availability .stopwatch.video-call-preview-timer,
.video-container .video-availability .people-count {
  display: flex;
  margin: 0;
}
.video-container .video-availability .video-preview-button-container {
  margin: 12px auto 0px;
  grid-gap: 8px;
}
@media screen and (max-width: 750px) {
  .video-container .video-call-content.video-page-content .video-presenter {
    grid-template-columns: 1fr;
  }
  .video-container .video-call-content.video-page-content .video-presenter .participant-track-container {
    display: none;
  }
  .video-container .video-call-content.video-page-content .video-call-controls .button-actions-container {
    grid-template-columns: 1fr 1fr;
    grid-gap: 12px 0;
  }
  .video-container .video-call-content.video-page-content .video-call-controls .button-actions-container .video-call-detail-container {
    display: flex;
    place-content: space-around;
    grid-column: span 2;
    margin: auto;
    width: 100%;
  }
  .video-container .video-call-content.video-page-content .video-call-controls .button-actions-container .video-view-mode-toggle {
    right: 0;
  }
}
@media screen and (max-height: 500px) {
  .video-container .video-availability {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 1fr;
    align-items: center;
  }
  .video-container .video-availability .video-preview {
    margin-top: auto;
    margin-bottom: auto;
    margin-right: auto;
  }
}
.video-container .video-call-title {
  font-size: 1.5em;
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: bold;
  text-decoration: none;
  text-align: left;
  color: white;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-break: break-all;
  word-break: break-word;
}
.video-container .video-call-participant-member-list {
  text-align: center;
  padding: 12px;
}
.video-container .video-call-participant-member-list .divider {
  width: fit-content;
  width: -moz-fit-content;
  margin: auto;
  text-decoration: underline;
  font-weight: 700;
}
.video-container .video-call-participant-member-list .divider:not(:first-of-type) {
  padding-top: 12px;
}
.video-container .video-call-participant-member-list .member-list-item {
  padding: 0 6px;
}
.video-container .video-call-participant-member-list .member-list-item .participant-name {
  display: flex;
  margin: 6px / 2 0;
  align-items: center;
}
.video-call-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  place-content: center;
  background-color: #333333;
  border-left: 1px solid #404040;
}
.video-room-messages {
  z-index: 12;
  position: absolute;
  bottom: 120px;
  transition: bottom 200ms;
  right: 12px;
}
.video-room-messages.hidden {
  bottom: -100px;
}
.video-room-messages .video-room-message .content-text {
  border-radius: 6px;
  padding: 0 6px;
  background-color: #3ebfc2;
}
.video-room-messages .video-room-message .content-text .content-block {
  color: white;
}
.video-room-messages .video-room-message .content-text p {
  padding: 6px / 2;
  user-select: none;
  margin: 0 0 6px / 2;
}
.video-room-messages .video-room-message .content-text .content-text .content-paragraph .content-block {
  color: white;
}
.video-call-log-details {
  background: white;
  border-left: 1px solid #cccccc;
  margin-right: 30px;
  padding: 10px 30px 0;
}
.video-call-log-details .video-call-details-header .call-details-menu {
  position: absolute;
  right: 10px;
  top: 10px;
  display: flex;
  align-items: center;
}
.video-call-log-details .video-call-details-header .call-details-title {
  font-size: 22px;
  font-weight: bold;
  font-family: 'Poppins', Arial, sans-serif;
}
.video-call-log-details .video-call-details-header .call-details-type-title {
  font-size: 11px;
  font-weight: 500;
  color: #9a58ff;
}
.video-call-log-details .call-details {
  font-size: 14px;
  line-height: 22px;
}
.video-call-log-details .video-call-details-content {
  padding: 10px 0;
}
.video-call-log-details .tab-list-container {
  margin-bottom: 12px;
}
.video-call-log-details .rsvp-input-container {
  display: flex;
  margin: 9px 0 18px;
}
.video-call-log-details .rsvp-input-container .rsvp-input {
  margin: 0px 6px 0 24px;
}
.video-call-log-details .video-call-rsvp-header {
  margin-top: 18px;
}
.video-call-log-details .video-call-people-header {
  margin-top: 18px;
  margin-bottom: 12px;
}
.video-call-log-details .participant-list-count {
  margin: 18px 6px;
  color: #8a9292;
}
.video-call-log-details .participant-containers .participant-list-item.pending {
  opacity: 0.25;
}
.incoming-video-calls-wrapper {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 50000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.incoming-video-calls-wrapper .incoming-video-call {
  animation: shake 0.8s 10 ease;
  width: 310px;
  max-height: 200px;
  background-color: #ffffff;
  padding: 4px 18px 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  text-align: center;
  box-shadow: 0 6px 12px 0 rgba(138, 146, 146, 0.2);
}
.incoming-video-calls-wrapper .incoming-video-call .incoming-video-call-title {
  margin-top: auto;
  font-family: 'Poppins';
  font-size: 16px;
  font-weight: bold;
  word-break: break-all;
  word-break: break-word;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.incoming-video-calls-wrapper .incoming-video-call .incoming-video-call-creator {
  font-size: 11px;
  word-break: break-all;
  word-break: break-word;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.incoming-video-calls-wrapper .incoming-video-call .incoming-video-call-timer {
  margin: 6px auto;
}
.incoming-video-calls-wrapper .incoming-video-call .incoming-video-call-button-container {
  margin-bottom: auto;
  display: flex;
  justify-content: space-evenly;
  margin-top: 6px;
  clear: both;
}
.incoming-video-calls-wrapper .incoming-video-call .incoming-video-call-button-container .join-incoming-call-button,
.incoming-video-calls-wrapper .incoming-video-call .incoming-video-call-button-container .dismiss-incoming-call-button {
  width: 120px;
}
@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  5% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  10% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  15% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  20% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  25% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  30% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  35% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  40% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  45% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  50% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
  55% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  100% {
    transform: translate(1px, 1px) rotate(0deg);
  }
}
.video-device-management-modal .device-management-container {
  display: grid;
  grid-gap: 18px;
  grid-template-columns: 100px auto;
}
.video-device-management-modal .clickable-link {
  margin: 18px auto;
  display: flex;
  width: fit-content;
  width: -moz-fit-content;
  place-content: center;
}
.video-device-management-modal .no-audio-devices-warning-text,
.video-device-management-modal .no-video-devices-warning-text {
  display: flex;
  align-items: center;
  gap: 5px;
}
.video-call-log .upcoming-call-container .upcoming-call-schedule-link {
  line-height: 40px;
}
.video-call-log .no-upcoming-call-text,
.video-call-log .no-recent-call-text {
  margin-left: 18px;
  color: #8a9292;
}
.video-call-log .upcoming-video-call-list-item {
  padding-bottom: 8px;
}
.video-call-log .upcoming-video-call-list-item .block-list-item-content {
  color: #8a9292;
}
.video-call-log .active-video-call-block-container {
  display: grid;
  grid-template-columns: 1fr 80px;
}
.video-call-log .active-video-call-block-container .stopwatch {
  font-size: 13px;
  color: #8a9292;
  margin: 0;
}
.video-call-log .inactive-video-call-container {
  margin-bottom: 42px;
}
.video-call-log .inactive-video-call-container .inactive-video-call-list-item .inactive-video-call-list-item-subtext {
  grid-template-columns: 1fr;
  font-size: 13px;
  color: #8a9292;
}
.video-call-log .join-active-call-button {
  margin: auto;
  margin-right: 12px;
  width: 40px;
}
.video-call-log .video-list-item-icon {
  background-color: #f4f6f6;
  border-radius: 6px;
  padding: 6px;
}
.video-call-log .video-list-item-icon svg {
  width: 20px;
  height: 20px;
}
#draggable-video-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  pointer-events: none;
}
#draggable-video-container .video-call-content {
  pointer-events: all;
}
.video-call-content.draggable-video {
  z-index: 205;
  position: absolute;
  left: 100px;
  bottom: 50px;
}
.video-call-content.draggable-video:hover .video-call-controls {
  opacity: 1;
}
.video-call-content.draggable-video .video-call-controls {
  opacity: 0;
  transition: opacity 200ms;
  position: absolute;
  z-index: 50;
  width: 100%;
  height: 100%;
}
.video-call-content.draggable-video .video-call-controls .video-track-controls {
  width: 100%;
  position: fixed;
  display: flex;
  gap: 7px;
  justify-content: center;
  bottom: 6px;
}
.video-call-content.draggable-video .video-call-controls .expand-positioning {
  position: absolute;
  width: fit-content;
  width: -moz-fit-content;
  top: 6px;
  right: 6px;
}
.video-call-content.draggable-video .video-call-controls .button-actions {
  position: absolute;
  display: flex;
  place-content: space-evenly;
  width: 100%;
  bottom: 0;
}
.video-call-content.draggable-video .video-call-controls .button-actions .tooltip-button i {
  filter: brightness(0.85);
}
.video-call-content.draggable-video .video-call-controls .button-actions .tooltip-button:hover i {
  filter: brightness(1);
}
.video-call-content.draggable-video .draggable-call-content {
  background-color: black;
  object-fit: contain;
  overflow: hidden;
  height: 180px;
  width: 315px;
}
.video-call-content.draggable-video .draggable-call-content .display-name {
  color: white;
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
}
.video-call-content.draggable-video .draggable-call-content.with-avatar {
  background-color: #333333;
  display: flex;
}
.video-call-content.draggable-video .draggable-call-content .mirror.video-track video {
  transform: scaleX(-1);
}
.video-call-content.draggable-video .draggable-call-content video {
  width: 100%;
  height: 100%;
}
.mobile .draggable-video .video-call-controls {
  opacity: 1;
}
.video-call-content.video-page-content .video-grid {
  display: grid;
  height: 100%;
  width: auto;
  margin: auto;
  grid-template-rows: calc(100% - 120px) 120px;
  grid-template-columns: 1fr;
}
.video-call-content.video-page-content .video-grid .scrollable-page .scrollable-page-body {
  overflow: hidden;
}
.video-call-content.video-page-content .video-grid .participant-tracks {
  display: grid;
  height: 100%;
  width: 100%;
  margin: auto;
  grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
  grid-auto-rows: 100%;
  place-content: center;
}
.video-call-content.video-page-content .video-grid .participant-tracks .participant-disconnected {
  box-shadow: none;
  border: 1px solid black;
}
.video-call-content.video-page-content .video-grid .participant-tracks .video-participant {
  border: 1px solid black;
  margin: auto;
}
.video-call-content.video-page-content .video-grid .participant-tracks.solo {
  grid-auto-rows: minmax(175px, calc(100% - 4px));
}
.video-call-content.video-page-content .video-grid .participant-tracks.two-per-column {
  grid-auto-rows: calc(50% - 2px);
}
.video-call-content.video-page-content .video-grid .participant-tracks.three-per-column {
  grid-auto-rows: calc(32% - 2px);
}
.video-call-content.video-page-content .video-grid .participant-tracks.four-per-column {
  grid-auto-rows: calc(25% - 2px);
}
.video-call-content.video-page-content .video-grid .participant-tracks.five-per-column {
  grid-auto-rows: calc(20% - 2px);
}
.video-call-content.video-page-content .video-grid .participant-tracks.two-per-row {
  grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
}
.video-call-content.video-page-content .video-grid .participant-tracks.three-per-row {
  grid-template-columns: repeat(auto-fit, minmax(32%, 1fr));
}
.video-call-content.video-page-content .video-grid .participant-tracks.four-per-row {
  grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
}
.video-call-content.video-page-content .video-grid .participant-tracks.five-per-row {
  grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
  place-content: unset;
}
.video-call-content.video-page-content .video-grid .video-call-controls {
  grid-column: span 2;
}
.video-call-content:not(.draggable-video) .video-presenter {
  display: grid;
  height: 100%;
  grid-template-columns: 280px auto;
}
.video-call-content:not(.draggable-video) .video-presenter .participant-tracks {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 2px;
  border-right: 1px solid #404040;
}
.video-call-content:not(.draggable-video) .video-presenter .participant-tracks .video-participant {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-basis: 175px;
  height: 175px;
  width: calc(100% - 2px);
  border: 1px solid black;
}
.video-call-content:not(.draggable-video) .video-presenter .main-track {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: calc(100vh - 120px) 120px;
}
.video-call-content:not(.draggable-video) .video-presenter .main-track video {
  height: calc(100vh - 120px);
}
.video-call-content:not(.draggable-video) .video-presenter .participant-disconnected {
  box-shadow: none;
  height: calc(100% - 2px);
  width: calc(100% - 2px);
}
.video-call-content.video-page-content .video-full {
  height: 100%;
}
.video-call-content.video-page-content .video-full .audio-track {
  display: none;
}
.video-call-content.video-page-content .video-full .main-track {
  display: grid;
  grid-template-rows: calc(100vh - 120px) 120px;
}
.video-call-content.video-page-content .video-full .main-track .video-participant {
  flex: 1;
  height: auto;
}
.video-participant {
  position: relative;
  border: 1px solid #333333;
  background: #333333;
  height: 100%;
  width: 100%;
}
.video-participant .local-share-screen-block-text {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
  z-index: 200;
  font-size: 30px;
  color: #ffffff;
}
.video-participant .local-share-screen-block {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  background: #333333;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.video-participant .participant-settings-action {
  margin-left: 6px;
}
.video-participant .video-participant-callout-container {
  position: absolute;
  top: 6;
  left: 6;
}
.video-participant .video-participant-callout-container .participant-dropdown-button {
  padding: 11px;
  opacity: 0;
  z-index: 20;
  transition: opacity 100ms;
}
.video-participant:hover .participant-dropdown-button {
  opacity: 1;
}
.video-participant .pin-track-action {
  position: absolute;
  top: 6px;
  right: 6px;
  opacity: 0;
  transition: opacity 100ms;
  z-index: 20;
  font-size: 18px;
  color: white;
  cursor: pointer;
}
.video-participant .pin-track-action.active {
  opacity: 1;
}
.video-participant .pin-track-action.active i.fa {
  transform: rotate(45deg);
  color: #3ebfc2;
}
.video-participant .not-connected-text {
  color: white;
}
.video-participant:hover .pin-track-action {
  opacity: 1;
}
.video-participant .dialing-text {
  text-align: center;
  margin-bottom: 24px;
  color: white;
  animation: pulse 0.75s infinite;
  animation-direction: alternate-reverse;
}
@keyframes pulse {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.95;
  }
}
.video-participant .video-track {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  object-fit: contain;
  object-position: center;
}
.video-participant .video-track.mirror:not(.share-screen) video {
  transform: scaleX(-1);
}
.video-participant .video-participant-detail-container {
  position: absolute;
  bottom: 0;
  display: flex;
  place-content: space-between;
  width: calc(100% - 18px);
  padding: 0 12px 0px 6px;
  background: linear-gradient(0, rgba(0, 0, 0, 0.75), transparent);
  user-select: none;
}
.video-participant .video-participant-detail-container.share-screen {
  background: none;
}
.video-participant .video-participant-detail-container .video-participant-name {
  color: white;
  margin: auto 0 3px;
  word-break: break-all;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.video-participant .video-participant-detail-container .video-participant-icon-container {
  margin: auto 0 0;
  width: 36px;
}
.video-participant.participant-disconnected .video-participant-detail-container {
  background: none;
}
.participant-avatar-wrapper {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.participant-avatar {
  margin: auto;
}
.participant-avatar.dominant-speaker {
  border: 4px double #3ebfc2;
  border-radius: 50px;
}
.video-track-controls {
  width: fit-content;
  width: -moz-fit-content;
  position: relative;
  display: flex;
  gap: 7px;
  margin: auto;
}
.video-track-controls.align-bottom {
  height: 100%;
}
.video-track-controls.align-bottom .video-icon-button {
  margin-bottom: 6px;
}
.video-track-controls .button-actions {
  height: 30px;
  display: flex;
  place-content: space-evenly;
  bottom: 0;
}
.video-guide-tour-modal {
  padding: 0;
}
.video-guide-tour-modal .video-guide-carousel {
  margin-top: 18px;
}
.video-guide-tour-modal .video-tour-card {
  display: grid;
  grid-gap: 0 24px;
  grid-template-columns: 210px auto;
  grid-template-rows: 24px auto 1fr;
}
.video-guide-tour-modal .video-tour-card .video-tour-card-title {
  font-family: Poppins;
  font-size: 14px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #3ebfc2;
}
.video-guide-tour-modal .video-tour-card .video-tour-card-header {
  margin: 0;
  font-family: Poppins;
  font-size: 24px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #333333;
}
.video-guide-tour-modal .video-tour-card .video-tour-card-words {
  margin: 12px 0 24px;
  font-family: Roboto;
  font-size: 13px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.62;
  letter-spacing: normal;
  color: #8a9292;
}
.video-guide-tour-modal .video-tour-card-image {
  grid-column: 2;
  grid-row: 1 / span 3;
  max-width: 100%;
  object-fit: contain;
  margin: 12px auto 12px auto;
  pointer-events: none;
}
.video-view-mode-button-container {
  width: 100px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background-color: #404040;
  border-radius: 12px;
}
.video-view-mode-button-container .video-icon-button {
  margin: 0;
}
.add-participant-modal .error-text {
  color: #ef5455;
}
.video-change-modal-text {
  padding: 15px;
}
.video-call-device-help-callout .callout-window {
  left: 5vw !important;
  top: 12px !important;
}
.video-call-device-help-callout .callout-window .browser-help-text > p {
  display: flex;
  align-items: center;
}
.help-page-scrollable .help-page-header,
.help-page-scrollable .help-page-body {
  background-color: white;
  margin-right: 40px;
  padding: 0 12px;
}
.help-page-scrollable .help-page-header {
  border-bottom: 1px solid #ebf0f0;
}
.help-page-scrollable .help-page-header-title {
  padding-left: 18px;
  padding-top: 12px;
}
.help-page-scrollable .help-page-tab-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
}
.help-page-scrollable .help-page-tab-container .help-desk-button {
  display: flex;
  align-items: center;
}
.help-page-scrollable .help-page-body {
  min-height: 100%;
}
.help-page-scrollable .news-page {
  display: grid;
  grid-auto-columns: 50%;
  background-color: white;
}
.help-page-scrollable .news-page .news-details {
  height: auto;
  grid-column: 1;
  padding: 20px;
}
.help-page-scrollable .news-page .news-details .news-title {
  font-family: 'Poppins';
  font-weight: bold;
  font-size: 18px;
  margin: 6px 0 12px;
}
.help-page-scrollable .news-page .news-details .news-text {
  color: #8a9292;
  line-height: 1.5;
}
.help-page-scrollable .news-page .news-image {
  width: 100%;
  object-fit: contain;
  padding: 18px 0;
  margin: auto;
  max-height: 200px;
}
.help-page-scrollable .news-page .news-footer {
  grid-column: span 2;
  border-bottom: 1px solid #ebf0f0;
}
.welcome-carousel-modal {
  overflow: hidden;
}
.welcome-carousel-modal .welcome-carousel {
  width: 100%;
}
.welcome-carousel-modal .welcome-carousel .carousel-cards .carousel-card {
  padding: 48px 0 18px;
  margin-left: 24px;
  margin-right: 24px;
  min-height: 350px;
}
.welcome-carousel-modal .welcome-card {
  display: grid;
  grid-gap: 6px 12px;
  grid-template-columns: 170px auto;
  grid-template-rows: 30px auto;
  place-content: space-evenly;
}
.welcome-carousel-modal .welcome-card.welcome-card-2 {
  grid-template-rows: 55px auto;
}
.welcome-carousel-modal .welcome-card .welcome-card-header {
  font-size: 22;
  color: #333333;
}
.welcome-carousel-modal .welcome-card .welcome-card-content {
  grid-column: 1;
  grid-row: 2;
  line-height: 1.5;
  color: #8a9292;
}
.welcome-carousel-modal .welcome-card img {
  grid-column: 2;
  grid-row: span 2;
  width: 250px;
  margin-left: 18px;
  margin-top: auto;
  margin-bottom: auto;
  pointer-events: none;
}
#main.mobile .welcome-carousel-modal {
  padding: 0 18px;
}
#main.mobile .welcome-carousel-modal .carousel-card {
  padding: 20px 0;
}
#main.mobile .welcome-carousel-modal .welcome-card {
  display: flex;
  flex-direction: column;
}
#main.mobile .welcome-carousel-modal .welcome-card-image {
  width: 150px;
  margin: 0;
}
.support-full-screen-loader {
  width: 100%;
  text-align: center;
  padding: 50px;
  font-size: 50px;
}
.support-tool {
  width: 100%;
  overflow: auto;
}
.support-tool .support-tool-header {
  text-align: center;
  background-color: #333333;
  color: white;
  padding: 10px 0;
}
.support-tool .support-tool-header span {
  font-size: 18px;
}
.support-tool .support-tool-header .support-home-button {
  float: left;
  font-size: 24px;
  margin-left: 12px;
  cursor: pointer;
}
.support-tool .support-tool-content {
  padding: 0 48px;
}
.support-tool .support-tool-content .error {
  color: #ef5455;
}
.support-tool .support-tool-content .with-sidebar > div:first-of-type {
  width: 75%;
  float: left;
  border-right: 2px solid black;
}
.support-tool .support-tool-content .with-sidebar > div:last-of-type {
  width: calc(25% - 2px);
  float: right;
}
.support-tool .support-tool-content .breadcrumbs {
  font-size: 24px;
}
.support-tool .support-tool-content .breadcrumbs .link {
  color: #3ebfc2;
}
.support-tool .support-tool-content .breadcrumbs .link.is-active {
  font-weight: bold;
}
.support-tool .support-tool-collection {
  padding: 5px;
}
.support-tool .support-tool-collection .collection-filters {
  margin-bottom: 24px;
}
.support-tool .support-tool-collection .collection-filters .input-row {
  margin-bottom: 6px;
}
.support-tool .support-tool-collection-item {
  margin-bottom: 20px;
  border: 2px solid black;
  padding: 10px;
}
.support-tool .support-tool-links {
  text-align: center;
}
.support-tool .support-tool-links li {
  padding: 20px 0;
}
.support-tool .support-tool-edit-document {
  margin-bottom: 24px;
}
.support-tool .support-tool-edit-document input[type='text'] {
  font-size: 16px;
  width: 700px;
}
.support-tool .support-tool-edit-document input[type='number'] {
  font-size: 16px;
  width: 100px;
}
.support-tool .support-tool-edit-document .editable {
  font-weight: bold;
}
.support-tool .support-tool-edit-document .edit-document-handlers button {
  cursor: pointer;
  margin-left: 6px;
  user-select: none;
  border: 1px solid #cccccc;
  padding: 6px 12px;
  border-radius: 6px;
}
.support-tool .support-tool-edit-document .dropdown-control {
  display: inline-block;
}
.support-tool-form .document-create {
  display: flex;
  margin: 6px 0;
}
.support-tool-form .input-row select {
  height: 100%;
}
.support-tool-form .input-row.error {
  color: #ef5455;
}
.support-tool-form .input-row input {
  display: inline-block;
  padding: 6px 12px;
  width: 250px;
}
.support-tool-form .input-row input.error {
  border-color: #ef5455;
}
.confirm-modal .create-billing-item {
  display: grid;
  grid-template-columns: repeat(2, 2fr);
}
.confirm-modal .create-billing-item .flex {
  display: flex;
  white-space: nowrap;
}
.confirm-modal .create-billing-item .subheader {
  font-weight: 100;
  font-variant: all-petite-caps;
}
.confirm-modal .create-billing-item label {
  font-size: 12px;
  margin: 6px / 2;
}
.confirm-modal .create-billing-item label textarea,
.confirm-modal .create-billing-item label input {
  width: calc(100% - 6px);
  margin: 0 0 12px;
  border-radius: 6px;
  border: 1px solid #cccccc;
  padding: 6px / 2;
}
.confirm-modal .create-billing-item label textarea[type='checkbox'],
.confirm-modal .create-billing-item label input[type='checkbox'] {
  width: auto;
  margin: auto 6px;
}
.confirm-modal .create-billing-item label textarea:disabled,
.confirm-modal .create-billing-item label input:disabled {
  opacity: 0.5;
}
.support-tool-document-key > div {
  margin: 12px;
}
.support-tool-document-key .support-tool-document-object {
  position: relative;
  left: 30px;
}
.support-select-billing {
  text-align: center;
  padding-bottom: 50px;
}
.support-select-billing .billing-details-container {
  display: grid;
  grid-template-columns: 200px 150px auto;
  grid-gap: 6px;
  justify-content: center;
  margin-bottom: 18px;
}
.support-select-billing .billing-details-container b {
  text-align: right;
  grid-column: 1;
}
.support-select-billing .billing-details-container span {
  text-align: left;
  grid-column: 2;
}
.support-select-billing .billing-details-container input {
  border-radius: 6px;
  padding: 6px / 2;
  border: 1px solid #cccccc;
}
.support-select-billing select {
  margin-bottom: 12px;
}
.support-select-billing button {
  margin: 0 auto;
}
.support-tool-billing-items {
  margin-top: 18px;
}
.support-tool-billing-items h2 {
  text-align: center;
  font-size: 1.17em;
  line-height: 1.17em;
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 100;
  text-decoration: none;
}
.support-tool-billing-items .standard-table {
  margin-bottom: 48px;
}
.support-tool-billing-items .standard-table .simple-list ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 6px;
}
.support-tool-billing-items .standard-table .simple-list ul li {
  display: flex;
}
.support-tool-billing-items .standard-table .simple-list ul li label {
  font-weight: 600;
  text-align: right;
  margin-right: 6px;
}
.support-tool-billing-items .standard-table .simple-list ul li span {
  text-align: left;
}
.support-tool-billing-items .standard-table .fab {
  font-weight: 100;
}
.support-tool-billing-items .standard-table th {
  white-space: nowrap;
}
.support-tool-billing-items .standard-table td:nth-of-type(5),
.support-tool-billing-items .standard-table td:nth-of-type(6) {
  width: 180px;
}
.support-tool-billing-features-modal .support-tool-billing-features .billing-features-item {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  grid-gap: 10px;
  margin-bottom: 12px;
}
.support-tool-billing-features-modal .support-tool-billing-features .billing-features-item .billing-features-item-drag {
  cursor: grab;
}
.support-tool-billing-features-modal .support-tool-billing-features .billing-features-item textarea {
  border: 1px solid #cccccc;
  padding: 6px;
}
.accept-invite-list-item {
  position: relative;
}
.accept-invite-list-item .accept-invite-list-item-loader {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
}
.accept-invite-list-item .accept-invite-list-item-loader img {
  width: 24px;
  height: 24px;
}
.accept-invite-list-item .accept-invite-list-item-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: center;
  grid-gap: 12px;
}
.accept-invite-list-item .accept-invite-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 6px;
}
.accept-invite-list-item .accept-invite-actions.two-rows .accept-invite-actions {
  grid-column: span 2;
}
.accept-invite-list-item.loading .accept-invite-list-item-loader {
  visibility: visible;
}
.accept-invite-list-item.loading .accept-invite-list-item-row {
  opacity: 0.3;
  pointer-events: none;
}
.admin-invites-links {
  margin-bottom: 20px;
}
.admin-invites-links .admin-invites-links-header {
  margin-bottom: 7px;
}
.admin-invites-links .admin-invites-links-add-new {
  height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  margin-top: 20px;
  cursor: pointer;
}
.admin-invites-links .admin-invites-links-list .admin-invites-links-list-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
.admin-invites-links .admin-invites-links-list .admin-invites-links-list-item .admin-invites-links-list-item-left {
  width: 60%;
  margin-right: 12px;
  display: grid;
  align-items: center;
  grid-template-columns: auto max-content;
}
.admin-invites-links .admin-invites-links-list .admin-invites-links-list-item .admin-invites-links-list-item-right {
  display: flex;
  align-items: center;
}
.admin-invites-links .admin-invites-links-list .admin-invites-links-list-item .admin-invites-links-list-item-name {
  font-size: 13px;
  color: #333333;
  font-weight: 500;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-break: break-all;
  word-break: break-word;
  user-select: none;
  cursor: pointer;
}
.admin-invites-links .admin-invites-links-list .admin-invites-links-list-item .admin-invites-links-list-item-dropdown {
  margin-left: 11px;
}
.admin-invites-links .admin-invites-links-list .admin-invites-links-list-item .admin-invites-links-list-item-copy {
  margin-right: 6px;
}
.Toastify__toast-container .Toastify__toast-body.invite-link-copy-toast-body {
  color: #333333;
}
.admin-invites-create-link-modal .admin-invites-create-link-dropdown .dropdown-select-inner {
  font-size: 14px;
  line-height: 25px;
}
.invites-generator {
  position: relative;
}
.invites-generator .invites-generator-spinner {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.invites-generator .invites-generator-spinner .spinner-image {
  width: 25px;
  height: 25px;
}
.invites-generator .invites-generator-list {
  min-height: 26px;
  color: #333333;
  font-size: 12px;
  border: 1px solid #ebf0f0;
  border-radius: 8px;
  padding: 3px;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  padding-right: 40px;
}
.invites-generator .invites-generator-list-item {
  margin-right: 6px;
  white-space: nowrap;
  font-weight: 500;
  padding: 4px 4px 4px 13px;
  background-color: #f4f6f6;
  border-radius: 7px;
  display: flex;
  align-items: center;
  margin: 3px;
}
.invites-generator .invites-generator-list-item input {
  border: none;
}
.invites-generator .invites-generator-list-item.invalid {
  color: #ff585d;
  background-color: #ffe6e7;
}
.invites-generator .invites-generator-list-item.editing {
  background-color: transparent;
}
.invites-generator .invites-generator-list-item .invites-generator-list-item-value {
  cursor: text;
}
.invites-generator .invites-generator-list-item .invites-generator-list-item-remove {
  cursor: pointer;
  margin-left: 2px;
}
.invites-generator .invites-generator-input {
  flex: auto;
  color: inherit;
  font-size: 13px;
  border: none;
  padding: 0;
  margin: 9px;
}
.invites-generator .invites-generator-list-action {
  position: absolute;
  bottom: 6px;
  right: 6px;
}
.invites-generator .loading .invites-generator-list-item,
.invites-generator .loading .invites-generator-list-action {
  opacity: 0.3;
}
.invites-generator .invites-generator-error-message {
  color: #ff585d;
  font-size: 11px;
  font-family: 'Roboto', Arial, sans-serif;
  margin-top: 5px;
}
.create-invites-modal .create-invites-modal-wrapper .create-invites-modal-text {
  color: #8a9292;
  text-align: center;
  font-size: 13px;
  line-height: 21px;
  font-family: 'Roboto', Arial, sans-serif;
  margin-bottom: 25px;
}
.create-invites-modal .create-invites-modal-wrapper .create-invites-modal-text .create-invites-modal-link {
  color: #3ebfc2;
  cursor: pointer;
}
.personal-message-modal-wrapper .personal-message-modal-subtext {
  color: #8a9292;
  font-size: 13px;
  line-height: 21px;
  font-family: 'Roboto', Arial, sans-serif;
  margin-bottom: 15px;
}
.account-management-modal .form-input-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.account-management-modal .form-input-container > * {
  flex: 1 0 calc(50% - 6px);
}
.account-management-modal .form-input-container > :nth-child(3) {
  flex: 1 0 100%;
}
.squad-slide-bar {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.squad-slide-bar .squad-bar-squads-section {
  margin-top: 27px;
  margin-bottom: 4px;
  background-color: inherit;
}
.squad-slide-bar .squad-bar-squads-section .squad-bar-squads-list {
  max-height: 280px;
  padding-top: 12px;
}
.squad-slide-bar .squad-bar-squads-section .squad-bar-squad-list-item {
  padding-top: 8px;
  padding-bottom: 8px;
}
.squad-slide-bar .squad-bar-squads-section .squad-bar-squad-add-new {
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  margin: 15px 0 35px;
  cursor: pointer;
}
.squad-slide-bar .squad-bar-squad-settings .squad-bar-squad-details {
  margin-bottom: 17px;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 12px;
  line-height: 17px;
}
.squad-slide-bar .squad-bar-squad-settings .squad-bar-squad-actions {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}
.squad-slide-bar .squad-bar-squad-settings .squad-bar-squad-actions :first-child,
.squad-slide-bar .squad-bar-squad-settings .squad-bar-squad-actions :last-child {
  flex: 50%;
}
.squad-slide-bar .squad-bar-profile-settings {
  margin-bottom: 23px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.squad-slide-bar .squad-bar-squad-list,
.squad-slide-bar .squad-bar-invites-list {
  overflow-y: auto;
  margin-right: 7px;
  padding-bottom: 24px;
}
.squad-slide-bar .sidebar-billing-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-column-gap: 6px;
  grid-row-gap: 18px;
  font-size: 13px;
}
.squad-slide-bar .sidebar-billing-plan-grid .people-label,
.squad-slide-bar .sidebar-billing-plan-grid .people-count {
  display: grid;
  align-items: center;
  height: 26px;
}
.squad-slide-bar .squad-bar-external-link {
  margin-bottom: 40px;
  flex: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.squad-slide-bar .squad-bar-external-link .squad-bar-external-link-description {
  text-align: left;
  color: #8a9292;
  font-size: 13px;
  line-height: 19px;
  margin-bottom: 20px;
}
.admin-invites-page .admin-invites-header {
  background-color: white;
  margin-right: 30px;
  padding: 12px 30px;
  border-bottom: 1px solid #ebf0f0;
}
.admin-invites-page .admin-invites {
  background-color: white;
  min-height: 100%;
  margin-right: 30px;
  padding: 15px 30px 25px;
}
.admin-invites-page .admin-invites .admin-invites-header-subtext {
  color: #8a9292;
  font-size: 13px;
  line-height: 21px;
  font-family: 'Roboto', Arial, sans-serif;
  margin-bottom: 25px;
}
.admin-invites-page .admin-invites .admin-invites-custom {
  margin-bottom: 19px;
}
.admin-invites-page .admin-invites .admin-invites-custom-header {
  margin-bottom: 13px;
}
.admin-invites-page .admin-invites .admin-invites-sent .admin-invites-list-title {
  color: #8a9292;
}
.admin-invites-page .admin-invites .admin-invites-accepted .admin-invites-list-title {
  color: #3ebfc2;
}
.admin-invites-page .admin-invites .admin-invites-declined .admin-invites-list-title,
.admin-invites-page .admin-invites .admin-invites-revoked .admin-invites-list-title {
  color: #ff585d;
}
.admin-invites-page .admin-invites .admin-invites-list-title {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 11px;
  font-weight: 500;
  margin-top: 24px;
  margin-bottom: 12px;
}
.admin-invites-page .admin-invites .admin-invites-list .admin-invites-list-item {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 26px;
  margin-bottom: 12px;
}
.admin-invites-page .admin-invites .admin-invites-list .admin-invites-list-item .admin-invites-list-item-main {
  display: flex;
  align-items: center;
}
.admin-invites-page .admin-invites .admin-invites-list .admin-invites-list-item .admin-invites-list-item-fail {
  position: absolute;
  left: -20px;
}
.admin-invites-page .admin-invites .admin-invites-list .admin-invites-list-item .admin-invites-list-item-name {
  color: #333333;
  font-size: 13px;
  line-height: 19px;
  font-weight: 500;
  margin-right: 11px;
  word-break: break-all;
  word-break: break-word;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.admin-invites-page .admin-invites .admin-invites-list .admin-invites-list-item .admin-invites-list-item-date {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 11px;
  color: #8a9292;
}
.invite-details-modal .invite-details {
  margin: 18px;
  font-size: 18px;
}
.invite-details-modal .invite-details .invite-details-field {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
}
.invite-details-modal .invite-details .invite-details-field b:first-child {
  margin-right: 10px;
}
.invite-details-modal .invite-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  margin: 18px;
}
.admin-invites-list-item-fail-popup .callout-window {
  padding: 5px 10px;
  background-color: #333;
  font-size: 11px;
  line-height: 19px;
  color: white;
}
.advanced-settings-modal .advanced-settings-wrapper {
  padding: 0 12px;
}
.advanced-settings-modal .advanced-settings-form-container .form-input-container {
  margin-top: 21px;
  margin-bottom: 31px;
}
.advanced-settings-modal .advanced-settings-form-container .external-link-toggle {
  margin-bottom: 22px;
}
.plan-comparison .selection-billing-item-panel-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.plan-comparison .selection-billing-item-panel-container .billing-item-wrapper .billing-item-footer {
  color: #8a9292;
  font-size: 11px;
  margin-top: 15px;
  text-align: center;
}
.plan-comparison .selection-billing-item-panel-container .billing-item-wrapper .billing-item-radio-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  border-radius: 11px;
  margin: auto;
  border: 1px solid #ebf0f0;
}
.plan-comparison .selection-billing-item-panel-container .billing-item-wrapper .billing-item-radio-button > div {
  display: none;
  width: 6px;
  height: 6px;
  border-radius: inherit;
  background-color: #ffffff;
}
.plan-comparison .selection-billing-item-panel-container .billing-item-wrapper .billing-item-panel {
  border-radius: 6px;
  border: 2px solid #ebf0f0;
  margin: 0 12px;
  padding: 18px;
}
.plan-comparison .selection-billing-item-panel-container .billing-item-wrapper .billing-item-panel .billing-item-panel-name {
  display: flex;
  flex-direction: row;
  font-size: 14px;
  font-weight: bold;
  font-family: 'Poppins', Arial, sans-serif;
  place-content: space-between;
}
.plan-comparison .selection-billing-item-panel-container .billing-item-wrapper .billing-item-panel .billing-item-panel-label {
  width: 67px;
  font-size: 10px;
  height: 11px;
  font-weight: 500;
}
.plan-comparison .selection-billing-item-panel-container .billing-item-wrapper .billing-item-panel .billing-item-panel-cost {
  font-size: 26px;
  font-family: 'Poppins', Arial, sans-serif;
  color: #3ebfc2;
  font-weight: bold;
}
.plan-comparison .selection-billing-item-panel-container .billing-item-wrapper .billing-item-panel .billing-item-panel-cost-subtext {
  height: 0;
  font-size: 11px;
  color: #3ebfc2;
}
.plan-comparison .selection-billing-item-panel-container .billing-item-wrapper.highlighted .billing-item-radio-button {
  background-color: #3ebfc2;
}
.plan-comparison .selection-billing-item-panel-container .billing-item-wrapper.highlighted .billing-item-radio-button > div {
  display: block;
}
.plan-comparison .selection-billing-item-panel-container .billing-item-wrapper.highlighted .billing-item-panel {
  border: 2px solid #3ebfc2;
}
.upgrade-plan-modal-old {
  max-width: calc(100vw - 50px);
}
.upgrade-plan-modal-old .plan-step-label {
  margin: auto;
  font-size: 12px;
  color: #8a9292;
  width: fit-content;
  width: -moz-fit-content;
}
.upgrade-plan-modal-old .plan-selection-container {
  padding-bottom: 24px;
}
.upgrade-plan-modal-old .plan-selection-container .plan-duration-filter {
  margin: 12px auto;
}
.upgrade-plan-modal-old .success-subtext,
.upgrade-plan-modal-old .payment-subtext,
.upgrade-plan-modal-old .subscription-subtext {
  margin-top: 24px;
  color: #8a9292;
  font-size: 13px;
  line-height: 1.65;
}
.upgrade-plan-modal-old .selection-billing-item-panel-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.upgrade-plan-modal-old .selection-billing-item-panel-container .billing-item-wrapper .billing-item-footer {
  color: #8a9292;
  font-size: 11px;
  margin-top: 15px;
  text-align: center;
}
.upgrade-plan-modal-old .selection-billing-item-panel-container .billing-item-wrapper .billing-item-radio-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  border-radius: 11px;
  margin: auto;
  border: 1px solid #ebf0f0;
}
.upgrade-plan-modal-old .selection-billing-item-panel-container .billing-item-wrapper .billing-item-radio-button > div {
  display: none;
  width: 6px;
  height: 6px;
  border-radius: inherit;
  background-color: #ffffff;
}
.upgrade-plan-modal-old .selection-billing-item-panel-container .billing-item-wrapper .billing-item-panel {
  border-radius: 6px;
  border: 2px solid #ebf0f0;
  margin: 0 12px;
  padding: 18px;
}
.upgrade-plan-modal-old .selection-billing-item-panel-container .billing-item-wrapper .billing-item-panel .billing-item-panel-name {
  display: flex;
  flex-direction: row;
  font-size: 14px;
  font-weight: bold;
  font-family: 'Poppins', Arial, sans-serif;
  place-content: space-between;
}
.upgrade-plan-modal-old .selection-billing-item-panel-container .billing-item-wrapper .billing-item-panel .billing-item-panel-label {
  width: 67px;
  font-size: 10px;
  height: 11px;
  font-weight: 500;
}
.upgrade-plan-modal-old .selection-billing-item-panel-container .billing-item-wrapper .billing-item-panel .billing-item-panel-cost {
  font-size: 26px;
  font-family: 'Poppins', Arial, sans-serif;
  color: #3ebfc2;
  font-weight: bold;
}
.upgrade-plan-modal-old .selection-billing-item-panel-container .billing-item-wrapper.highlighted .billing-item-radio-button {
  background-color: #3ebfc2;
}
.upgrade-plan-modal-old .selection-billing-item-panel-container .billing-item-wrapper.highlighted .billing-item-radio-button > div {
  display: block;
}
.upgrade-plan-modal-old .selection-billing-item-panel-container .billing-item-wrapper.highlighted .billing-item-panel {
  border: 2px solid #3ebfc2;
}
.upgrade-plan-modal-old .plan-select-description {
  display: grid;
  grid-gap: 9px 6px;
  grid-template-columns: 24px 1fr;
}
.upgrade-plan-modal-old .plan-confirmation-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 30px;
  margin-left: 12px;
  margin-right: 12px;
}
.upgrade-plan-modal-old .success-icon {
  display: flex;
  place-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  border-radius: 70px;
  margin: auto;
  background-color: #f4f6f6;
  font-size: 25px;
}
.plans-and-billing-page .draggable-content-container {
  height: 100%;
}
.plans-and-billing-page .plan-info-container {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.plans-and-billing-page .plan-info-container .billing-left-side-content,
.plans-and-billing-page .plan-info-container .billing-right-side-content {
  flex: 1;
  min-width: 320px;
  max-width: 500px;
}
.plans-and-billing-page .plan-info-container .billing-carousel {
  border: 1px solid #ebf0f0;
  border-radius: 12px;
}
.plans-and-billing-page .plan-upgrade-action-panel .free-trial-label {
  color: #3ebfc2;
}
.plans-and-billing-page .plan-upgrade-action-panel .customer-balance {
  display: flex;
  gap: 6px;
  align-items: center;
}
.plan-description-items-container {
  display: grid;
  grid-gap: 9px 6px;
  grid-template-columns: 24px 1fr;
}
.stripe-payment-form {
  margin-bottom: 6px;
}
.stripe-payment-form .stripe-form-container {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-gap: 9px;
}
.stripe-payment-form .stripe-form-container .string-input-container .text-error {
  margin-top: 0;
}
.stripe-payment-form .stripe-form-container .stripe-card-number-element,
.stripe-payment-form .stripe-form-container .stripe-card-expiration-element,
.stripe-payment-form .stripe-form-container .stripe-card-cvc-element {
  padding: 9px;
  border-radius: 6px;
  border: 1px solid #ebf0f0;
}
.stripe-payment-form .stripe-form-container .stripe-card-number-element.disabled,
.stripe-payment-form .stripe-form-container .stripe-card-expiration-element.disabled,
.stripe-payment-form .stripe-form-container .stripe-card-cvc-element.disabled {
  background-color: #f4f6f6;
}
.payment-method-modal .payment-method-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 6px;
  max-height: 600px;
  overflow-y: auto;
  font-size: 15px;
  padding: 12px 12px 0;
}
.payment-method-modal .saved-card-category .header-title-text,
.payment-method-modal .brand-title .header-title-text {
  font-family: 'Poppins', Arial, sans-serif;
}
.payment-method-modal .saved-card-display {
  border-radius: 6px;
  border: 1px solid #ebf0f0;
  padding: 18px;
  height: 70px;
}
.payment-method-modal .add-card-display {
  display: flex;
  place-content: center;
  align-items: center;
  border-radius: 6px;
  height: 110px;
  cursor: pointer;
  grid-column: 1;
  margin-bottom: 12px;
}
.people-page .people-page-member {
  position: relative;
  background-color: #ffffff;
  margin-bottom: 20px;
  padding: 20px 0;
}
.people-page .people-page-member .people-page-member-controls {
  position: relative;
  top: 16px;
  width: 100%;
  display: flex;
  align-items: center;
}
.people-page .people-page-member .people-page-member-controls .people-page-member-controls-dropdown {
  position: absolute;
  left: 24px;
}
.people-page .people-page-member .people-page-member-controls .people-page-member-controls-menu {
  position: absolute;
  right: 24px;
}
.people-page .people-page-member .people-page-member-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  margin-top: 29px;
  padding: 0 24px;
}
.people-page .people-page-member .people-page-member-details .people-page-details-box {
  background-color: #f4f6f6;
  padding: 12px 24px;
  border-radius: 6px;
}
.people-page .people-page-member .people-page-member-details .people-page-details-box div:first-child {
  color: #8a9292;
  font-size: 12px;
}
.people-page .people-page-member .people-page-member-details .people-page-details-box div:last-child {
  min-height: 16px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  word-break: break-word;
}
.people-list-wrapper .people-search-wrapper {
  display: flex;
  margin-bottom: 18px;
}
.people-list-wrapper .people-search-wrapper .people-list-header-search {
  flex: 1;
}
.people-list-wrapper .role-title {
  font-size: 11px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: gray;
}
.people-list-wrapper .people-list {
  padding-bottom: 36px;
}
.people-list-wrapper .people-list .people-list-empty {
  font-size: 11px;
  color: #8a9292;
  text-decoration: none;
  text-align: center;
  margin-top: 10px;
}
.people-list-wrapper .people-list-header .people-list-header-title {
  margin-bottom: 14px;
}
.people-list-wrapper .people-list-header .people-list-header-search {
  margin-right: 7px;
}
.search-page .content-text .content-paragraph {
  padding-left: 0px;
}
.search-page .search-item-display .search-item-icon {
  font-size: 22px;
  color: #666;
}
.search-page-premium-feature-wrapper .search-page-premium-feature-close {
  background-color: #ffffff;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  margin: 2px;
}
.activity-bar .activity-item-display .material-ui-icon {
  font-size: 30px;
}
.administration-details .administration-room .administration-room-list-item {
  padding: 6px;
  margin: 6px 12px;
}
.administration-details .administration-details-rooms {
  height: 100%;
}
.administration-details .administration-details-rooms .administration-page-main {
  height: calc(100% - 120px);
}
.administration-details .administration-details-rooms .administration-page-main .administration-page-main-right {
  border: none;
  border-top: 1px solid #ebf0f0;
}
.administration-details .administration-details-avatar {
  margin: auto;
  margin-bottom: 7px;
}
.administration-details .administration-details-direct-chat-avatar {
  position: relative;
  width: 70px;
  height: 40px;
}
.administration-details .administration-details-direct-chat-avatar :first-child {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid transparent;
}
.administration-details .administration-details-direct-chat-avatar :last-child {
  position: absolute;
  right: 0;
  bottom: 0;
  border: 1px solid #ffffff;
  border-radius: 25px;
}
.administration-details .administration-details-close-button {
  position: absolute;
  top: 12px;
  right: 12px;
}
.administration-details .administration-details-name {
  padding: 0 20px;
  font-size: 13;
  line-height: 16px;
  text-align: center;
  font-weight: 500;
  word-break: break-all;
  word-break: break-word;
}
.administration-details .administration-details-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  padding: 0 20px;
  margin-bottom: 20px;
}
.administration-details .administration-details-actions-video {
  padding: 0 20px;
  margin-bottom: 20px;
}
.administration-details .administration-details-list {
  padding: 0 20px;
}
.administration-details .administration-details-list .administration-details-list-item {
  margin-bottom: 15px;
}
.administration-details .administration-details-list .administration-details-list-item > div:first-child {
  color: #8a9292;
  font-size: 11px;
  font-weight: 500;
  margin-bottom: 4px;
}
.administration-details .administration-details-list .administration-details-list-item > div:last-child {
  font-size: 13px;
  line-height: 19px;
  font-weight: 500;
}
.administration-details .administration-details-list .admin-room-video-timer {
  margin: 0;
  padding: 0;
}
.administration-details .admin-details-connected-list {
  display: grid;
  grid-gap: 10px;
  margin-top: 8px;
}
.administration-details .admin-details-links {
  color: #3ebfc2;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.administration-details .admin-details-settings .admin-details-settings-list.disabled {
  opacity: 0.3;
  user-select: none;
  pointer-events: none;
}
.administration-details .admin-member-details {
  display: grid;
  grid-gap: 12px;
  padding: 0 24px;
}
.administration-details .admin-member-details .admin-member-details-box {
  background-color: #f4f6f6;
  padding: 12px 24px;
  border-radius: 6px;
}
.administration-details .admin-member-details .admin-member-details-box div:first-child {
  color: #8a9292;
  font-size: 12px;
}
.administration-details .admin-member-details .admin-member-details-box div:last-child {
  min-height: 16px;
  word-break: break-all;
  word-break: break-word;
}
.administration-room .administration-room-list-item {
  padding: 6px 12px;
  margin: 6px 18px;
}
.administration-room .administration-room-content .admin-room-content-details span {
  font-size: 11px;
  padding: 0 6px;
  border-right: 1px solid #8a9292;
}
.administration-room .administration-room-content .admin-room-content-details span:first-child {
  padding-left: 0;
}
.administration-room .administration-room-content .admin-room-content-details span:last-child {
  border: none;
}
.administration-room .administration-room-content .admin-room-content-users {
  display: flex;
  flex-wrap: wrap;
}
.administration-room .administration-room-content .admin-room-content-users .admin-room-content-user {
  padding: 2px;
}
.administration-room .administration-room-direct-chat-avatar {
  position: relative;
  width: 30px;
  height: 30px;
}
.administration-room .administration-room-direct-chat-avatar :first-child {
  position: absolute;
  top: 0;
  left: 0;
}
.administration-room .administration-room-direct-chat-avatar :last-child {
  position: absolute;
  right: 0;
  bottom: 0;
  border: 1px solid #ffffff;
  border-radius: 12px;
}
.administration-filter-tags {
  display: flex;
  flex-wrap: wrap;
  margin-top: 6px;
}
.administration-filter-tag {
  font-size: 12px;
  margin-right: 6px;
  margin-bottom: 6px;
  white-space: nowrap;
  font-weight: 500;
  padding: 4px 6px 4px 13px;
  background-color: #e4f6f7;
  color: #3ebfc2;
  border-radius: 7px;
  display: flex;
  align-items: center;
  user-select: none;
}
.administration-filter-tag .administration-filter-tag-clear {
  cursor: pointer;
}
.administration-page {
  background-color: #ffffff;
  height: 100%;
}
.administration-page .administration-page-header .administration-page-header-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.administration-page .administration-page-header .administration-page-header-items-count {
  color: #8a9292;
  font-size: 11px;
  font-weight: 500;
  margin-top: 12px;
  padding-bottom: 6px;
}
.administration-page .administration-page-main-wrapper {
  height: 100%;
}
.administration-page .administration-page-main {
  position: relative;
  display: flex;
  flex-direction: row;
  height: calc(100% - 110px);
}
.administration-page .administration-page-main .administration-page-main-left {
  flex: 1;
}
.administration-page .administration-page-main .administration-page-main-right {
  flex-basis: 260px;
  border: 1px solid #ebf0f0;
  border-radius: 6px;
}
.administration-page .administration-page-main.overlay-view .administration-page-main-right {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  z-index: 1;
}
.administration-page .administration-page-list {
  padding-bottom: 20px;
}
.administration-page .administration-page-list .administration-empty-list {
  position: absolute;
  top: 50px;
  width: 100%;
  text-align: center;
  font-size: 11px;
  color: #8a9292;
}
.administration-page .administration-filters-wrapper {
  padding: 10px;
}
.administration-page .administration-filters-wrapper.hidden {
  display: none;
}
.administration-page .administration-filters-wrapper .administration-filters-done-button,
.administration-page .administration-filters-wrapper .administration-filters-reset-button {
  margin-bottom: 10px;
}
.administration-page .administration-filters-wrapper .administration-filters-form .filters-form-label {
  font-size: 11px;
  color: #8a9292;
  font-weight: 500;
  margin-bottom: 10px;
}
.administration-page .administration-filters-wrapper .administration-filters-form .filters-form-options {
  margin-bottom: 16px;
}
.administration-page .administration-rooms-loader {
  margin: 10px auto;
  text-align: center;
}
.administration-page .administration-rooms-loader .spinner-image {
  width: 25px;
  height: 25px;
}
#main.safari .administration-page-main-wrapper,
#main.safari .administration-details-rooms {
  height: auto !important;
}
.create-squad-modal {
  top: 20px;
}
.create-squad-modal .create-squad-modal-subtext {
  margin: auto;
  font-size: 12px;
  color: #8a9292;
  width: fit-content;
  width: -moz-fit-content;
  margin-bottom: 21px;
}
.create-squad-modal .create-squad-modal-teams-list {
  max-height: 130px;
  overflow-y: auto;
}
.create-squad-modal .create-squad-modal-teams-list .create-squad-modal-teams-list-item {
  display: grid;
  grid-template-columns: 1fr 90px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 9px;
  border: 1px solid #ebf0f0;
  margin-bottom: 10px;
}
.upgrade-plan-modal-new .plan-step-label {
  margin: auto;
  font-size: 12px;
  color: #8a9292;
  width: fit-content;
  width: -moz-fit-content;
}
.upgrade-plan-modal-new .success-subtext,
.upgrade-plan-modal-new .payment-subtext,
.upgrade-plan-modal-new .subscription-subtext {
  margin-top: 24px;
  color: #8a9292;
  font-size: 13px;
  line-height: 1.65;
}
.upgrade-plan-modal-new .upgrade-plan-modal-main {
  display: grid;
  grid-gap: 30px;
  margin: 30px 0;
  padding: 0 12px;
}
.upgrade-plan-modal-new .upgrade-plan-modal-main.plan-selection {
  grid-template-columns: 2fr 3fr;
}
.upgrade-plan-modal-new .upgrade-plan-modal-main.payment-screen {
  grid-template-columns: 3fr 2fr;
}
.upgrade-plan-modal-new .upgrade-plan-modal-main .upgrade-plan-modal-main-right {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  border: 1px solid #ebf0f0;
  background-color: #f4f6f6;
  padding: 18px;
}
.upgrade-plan-modal-new .upgrade-plan-selection .upgrade-plan-selection-description {
  font-weight: bold;
}
.upgrade-plan-modal-new .upgrade-plan-selection .upgrade-plan-seat-selector {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.upgrade-plan-modal-new .upgrade-plan-selection .upgrade-plan-seat-selector .upgrade-plan-seat-selector-header {
  font-weight: 500;
  text-align: center;
}
.upgrade-plan-modal-new .upgrade-plan-selection .upgrade-plan-seat-selector .upgrade-plan-seat-selector-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.upgrade-plan-modal-new .upgrade-plan-selection .upgrade-plan-seat-selector .upgrade-plan-seat-selector-actions .upgrade-plan-seat-selector-input {
  margin: 12px 0;
}
.upgrade-plan-modal-new .upgrade-plan-selection .upgrade-plan-seat-selector .upgrade-plan-seat-selector-actions .upgrade-plan-seat-selector-input input {
  max-width: 150px;
  text-align: center;
  font-size: 50px;
  border: none;
}
.upgrade-plan-modal-new .upgrade-plan-selection .upgrade-plan-seat-selector .upgrade-plan-seat-selector-actions .upgrade-plan-seat-selector-button {
  cursor: pointer;
  user-select: none;
}
.upgrade-plan-modal-new .upgrade-plan-selection .upgrade-plan-subscription-details {
  font-size: 13px;
}
.upgrade-plan-modal-new .upgrade-plan-selection .upgrade-plan-subscription-details > div {
  margin-bottom: 10px;
}
.upgrade-plan-modal-new .cost-details-line-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
}
.upgrade-plan-modal-new .cost-details-line-item > div:last-child {
  font-weight: 500;
}
.upgrade-plan-modal-new .promo-code-container {
  position: relative;
}
#main.mobile .upgrade-plan-modal-main {
  display: flex;
  flex-direction: column;
}
.schedule-list-page .schedule-list-header .schedule-list-header-title {
  margin-bottom: 14px;
}
.schedule-list-page .schedule-list-header .schedule-search-wrapper {
  display: flex;
  margin-bottom: 18px;
}
.schedule-list-page .schedule-list-header .schedule-search-wrapper .schedule-list-header-search {
  flex: 1;
  margin-right: 7px;
}
.schedule-list-page .schedule-list-header .schedule-search-wrapper .schedule-list-header-settings {
  flex-basis: 40px;
}
.schedule-list-page .schedule-list-header .schedule-active-filters {
  font-size: 11px;
  color: #ffffff;
  display: flex;
  gap: 5px;
  margin-bottom: 10px;
}
.schedule-list-page .schedule-list-header .schedule-active-filters .schedule-active-filter-item {
  display: flex;
  align-items: center;
  border-radius: 12px;
  background-color: #3ebfc2;
  width: fit-content;
  padding: 5px 0px 5px 8px;
}
.schedule-list-page .schedule-list-body {
  padding-top: 6px;
}
.schedule-list-page .schedule-list-settings .schedule-list-settings-done-button {
  margin-bottom: 22px;
}
.schedule-list-page .schedule-list-settings .schedule-list-settings-view {
  margin-bottom: 16px;
}
.schedule-list-page .schedule-list-settings .schedule-list-settings-label {
  font-size: 11px;
  color: #8a9292;
  font-weight: 500;
  margin-bottom: 10px;
}
.schedule-list-page .schedule-list-events .schedule-list-events-empty {
  font-size: 11px;
  color: #8a9292;
  text-decoration: none;
  text-align: center;
}
.schedule-list-page .schedule-list-events .schedule-list-date-item .schedule-list-date-item-title {
  color: #8a9292;
  font-size: 11px;
  margin-bottom: 6px;
}
.schedule-list-page .schedule-list-events .schedule-list-date-item.is-today .schedule-list-date-item-title {
  font-size: 13px;
  color: #333333;
  font-weight: 500;
}
.schedule-list-page .schedule-list-events .schedule-list-event-wrapper {
  position: relative;
  display: block;
}
.schedule-list-page .schedule-list-events .schedule-list-event-wrapper .schedule-list-event-icon {
  position: relative;
  top: 3px;
  right: -5px;
}
.schedule-list-page .schedule-list-events .schedule-list-event-wrapper .schedule-list-event-item-deleted {
  text-decoration: line-through;
  color: #333333;
}
.schedule-list-page .schedule-unread-wrapper {
  margin-bottom: 18px;
}
.schedule-list-page .schedule-unread-wrapper .schedule-unread-done-button {
  margin-bottom: 22px;
}
.schedule-list-page .schedule-list-time-separator {
  margin: 10px 30px;
  border: 1px solid #3ebfc2;
}
.schedule-page-wrapper .schedule-card {
  position: relative;
  background-color: #ffffff;
  padding: 24px;
  padding-left: 20px;
  border-left: 4px solid;
  border-radius: 9px;
}
.schedule-page-wrapper .schedule-card .schedule-card-type-title {
  font-size: 11px;
  font-weight: 500;
}
.schedule-page-wrapper .schedule-card .schedule-card-title {
  font-size: 22px;
  font-weight: bold;
  font-family: 'Poppins', Arial, sans-serif;
}
.schedule-page-wrapper .schedule-card .schedule-card-subtext {
  font-size: 11px;
  margin-bottom: 20px;
}
.schedule-page-wrapper .schedule-card.schedule-video {
  border-color: #9a58ff;
}
.schedule-page-wrapper .schedule-card.schedule-video .schedule-card-type-title {
  color: #9a58ff;
}
.schedule-page-wrapper .schedule-card.schedule-video .rsvp-input-container {
  display: flex;
  margin: 9px 0 18px;
}
.schedule-page-wrapper .schedule-card.schedule-video .rsvp-input-container .rsvp-input {
  margin: 0px 6px 0 24px;
}
.schedule-page-wrapper .schedule-card.schedule-task {
  border-color: #41de6c;
}
.schedule-page-wrapper .schedule-card.schedule-task .schedule-card-type-title {
  color: #41de6c;
}
.schedule-page-wrapper .schedule-card .schedule-card-settings {
  position: absolute;
  right: 10px;
  top: 10px;
  display: flex;
  align-items: center;
}
.schedule-page-wrapper .schedule-card .schedule-card-details-list .schedule-card-details-list-item {
  margin-bottom: 15px;
}
.schedule-page-wrapper .schedule-card .schedule-card-details-list .schedule-card-details-list-item > div:first-child {
  color: #8a9292;
  font-size: 11px;
  font-weight: 500;
  margin-bottom: 4px;
}
.schedule-page-wrapper .schedule-card .schedule-card-details-list .schedule-card-details-list-item > div:last-child {
  font-size: 13px;
  line-height: 19px;
  font-weight: 500;
}
.schedule-page-wrapper .schedule-card .schedule-card-details-list .schedule-card-details-list-item-description {
  font-weight: normal;
}
.schedule-page-wrapper .schedule-card .schedule-card-users-list {
  display: grid;
  grid-gap: 10px;
  margin-top: 8px;
}
.create-video-modal .date-field-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.create-video-modal .date-field-row label.date-field-label {
  font-weight: 500;
  width: 30px;
}
.create-video-modal .date-field-row .date-picker .date-picker-container input {
  width: 180px;
}
.create-video-modal .date-field-row .date-picker .time-picker-container input {
  width: 110px;
}
.create-video-modal.edit-video-modal .date-field-row .date-picker .date-picker-container input {
  width: 175px;
}
.create-video-modal.edit-video-modal .date-field-row .date-picker .time-picker-container {
  margin-left: 3px;
}
.create-video-modal.edit-video-modal .date-field-row .date-picker .time-picker-container input {
  width: 100px;
}
/* Root layout */
.str-video {
  position: relative;
  color: white;
  --str-video__primary-color: #3ebfc2;
  --str-video__button-primary-active: #3ebfc2;
  --str-video__button-tertiary-base: #ff585d;
  --str-video__danger-color--accent: #ff585d;
  --str-video__danger-color: #ff585d;
}
.str-video .call-lobby .str-video__video-placeholder {
  height: auto;
}
.str-video .str-video__paginated-grid-layout .str-video__paginated-grid-layout__group {
  height: calc(100vh - 200px);
  padding-inline: 0;
  margin-top: 30px;
}
.str-video .str-video__paginated-grid-layout video.str-video__video {
  object-fit: contain;
}
.str-video .str-video__video-placeholder__avatar {
  pointer-events: none;
}
ul.theme-context-menu {
  background-color: white;
  border: 1px solid #cccccc;
  position: absolute;
  user-select: none;
  z-index: 1000;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 5px 12px 1px rgba(138, 146, 146, 0.2);
  -moz-box-shadow: 0 5px 12px 1px rgba(138, 146, 146, 0.2);
  box-shadow: 0 5px 12px 1px rgba(138, 146, 146, 0.2);
}
ul.theme-context-menu.visible {
  animation: show-theme-context-menu 100ms ease-out;
}
ul.theme-context-menu.hidden {
  display: none;
}
ul.theme-context-menu,
ul.theme-context-menu li,
ul.theme-context-menu ul {
  display: block;
}
ul.theme-context-menu > li:not(:last-of-type) {
  border-bottom: 1px solid #cccccc;
}
ul.theme-context-menu ul.theme-context-menu-section {
  min-width: 150px;
  padding: 6px 0;
}
ul.theme-context-menu ul.theme-context-menu-section button {
  width: 100%;
}
ul.theme-context-menu ul.theme-context-menu-section a,
ul.theme-context-menu ul.theme-context-menu-section button {
  background-color: transparent !important;
  border: none !important;
  color: #333333;
  cursor: pointer;
  display: block !important;
  font-size: 14px;
  margin: 0 !important;
  padding: 6px/2 18px !important;
  text-align: left;
  text-decoration: none;
  transition: background-color 150ms;
}
ul.theme-context-menu ul.theme-context-menu-section a:hover,
ul.theme-context-menu ul.theme-context-menu-section button:hover,
ul.theme-context-menu ul.theme-context-menu-section a:focus,
ul.theme-context-menu ul.theme-context-menu-section button:focus {
  background-color: #d6eff2 !important;
  outline: none;
  transition: background-color 150ms;
}
@keyframes show-theme-context-menu {
  0% {
    display: none;
    opacity: 0;
    transform: translateY(-10px);
  }
  1% {
    display: unset;
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    display: unset;
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes hide-theme-context-menu {
  0% {
    display: unset;
    opacity: 1;
    transform: translateY(0);
  }
  99% {
    display: unset;
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    display: none;
    transform: translateY(-10000px);
  }
}


/*# sourceMappingURL=style.23814508a123da65293a.css.map*/