/*
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 {
  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;
}

.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;
}
.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 .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 {
  padding-top: 6px;
  height: 150px;
}
.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;
}
.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;
}
.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;
  align-items: center;
}
.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: 100%;
  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-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-detail {
  background: white;
  border-left: 1px solid #cccccc;
  margin-right: 30px;
}
.video-call-log-detail .video-call-details-header {
  padding: 10px 30px 0;
}
.video-call-log-detail .video-call-details-header .avatar {
  border-radius: 11px;
  width: 100%;
  height: 100%;
  background-color: #f4f6f6;
}
.video-call-log-detail .video-call-details-header .video-avatar-icon {
  width: 40px;
  height: 40px;
}
.video-call-log-detail .video-call-details-header .video-avatar-icon svg {
  margin: 8px;
}
.video-call-log-detail .video-call-details-content {
  padding: 10px 30px 0;
}
.video-call-log-detail .tab-list-container {
  margin-bottom: 12px;
}
.video-call-log-detail .rsvp-input-container {
  display: flex;
  margin: 9px 0 18px;
}
.video-call-log-detail .rsvp-input-container .rsvp-input {
  margin: 0px 6px 0 24px;
}
.video-call-log-detail .video-call-rsvp-header {
  margin-top: 18px;
}
.video-call-log-detail .video-call-people-header {
  margin-top: 18px;
  margin-bottom: 12px;
}
.video-call-log-detail .participant-list-count {
  margin: 18px 6px;
  color: #8a9292;
}
.video-call-log-detail .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 .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-users-list {
  display: grid;
  grid-gap: 10px;
  margin-top: 8px;
}
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.b2a900af3d61b1d77aba.css.map*/