.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  margin-left: -8px;
  position: absolute;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before,
.react-datepicker__month-year-read-view--down-arrow::before {
  box-sizing: content-box;
  position: absolute;
  border: 8px solid transparent;
  height: 0;
  width: 1px;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before,
.react-datepicker__month-year-read-view--down-arrow::before {
  content: "";
  z-index: -1;
  border-width: 8px;
  left: -8px;
  border-bottom-color: #aeaeae;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle {
  top: 0;
  margin-top: -8px;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
  border-top: none;
  border-bottom-color: #f0f0f0;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
  top: -1px;
  border-bottom-color: #aeaeae;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  bottom: 0;
  margin-bottom: -8px;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before,
.react-datepicker__month-year-read-view--down-arrow::before {
  border-bottom: none;
  border-top-color: #fff;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before,
.react-datepicker__month-year-read-view--down-arrow::before {
  bottom: -1px;
  border-top-color: #aeaeae;
}

.react-datepicker-wrapper {
  display: inline-block;
}

.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;
}

.react-datepicker--time-only .react-datepicker__triangle {
  left: 35px;
}

.react-datepicker--time-only .react-datepicker__time-container {
  border-left: 0;
}

.react-datepicker--time-only .react-datepicker__time {
  border-radius: 0.3rem;
}

.react-datepicker--time-only .react-datepicker__time-box {
  border-radius: 0.3rem;
}

.react-datepicker__triangle {
  position: absolute;
  left: 50px;
}

.react-datepicker-popper {
  z-index: 1;
}

.react-datepicker-popper[data-placement^="bottom"] {
  margin-top: 10px;
}

.react-datepicker-popper[data-placement^="top"] {
  margin-bottom: 10px;
}

.react-datepicker-popper[data-placement^="right"] {
  margin-left: 8px;
}

.react-datepicker-popper[data-placement^="right"] .react-datepicker__triangle {
  left: auto;
  right: 42px;
}

.react-datepicker-popper[data-placement^="left"] {
  margin-right: 8px;
}

.react-datepicker-popper[data-placement^="left"] .react-datepicker__triangle {
  left: 42px;
  right: auto;
}

.react-datepicker__header {
  text-align: center;
  background-color: #f0f0f0;
  border-bottom: 1px solid #aeaeae;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
  padding-top: 8px;
  position: relative;
}

.react-datepicker__header--time {
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}

.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 2px;
}

.react-datepicker__current-month,
.react-datepicker-time__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 {
  background: none;
  line-height: 1.7rem;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 10px;
  width: 0;
  padding: 0;
  border: 0.45rem solid transparent;
  z-index: 1;
  height: 10px;
  width: 10px;
  text-indent: -999em;
  overflow: hidden;
}

.react-datepicker__navigation--previous {
  left: 10px;
  border-right-color: #ccc;
}

.react-datepicker__navigation--previous:hover {
  border-right-color: #b3b3b3;
}

.react-datepicker__navigation--previous--disabled, .react-datepicker__navigation--previous--disabled:hover {
  border-right-color: #e6e6e6;
  cursor: default;
}

.react-datepicker__navigation--next {
  right: 10px;
  border-left-color: #ccc;
}

.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 80px;
}

.react-datepicker__navigation--next:hover {
  border-left-color: #b3b3b3;
}

.react-datepicker__navigation--next--disabled, .react-datepicker__navigation--next--disabled:hover {
  border-left-color: #e6e6e6;
  cursor: default;
}

.react-datepicker__navigation--years {
  position: relative;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.react-datepicker__navigation--years-previous {
  top: 4px;
  border-top-color: #ccc;
}

.react-datepicker__navigation--years-previous:hover {
  border-top-color: #b3b3b3;
}

.react-datepicker__navigation--years-upcoming {
  top: -4px;
  border-bottom-color: #ccc;
}

.react-datepicker__navigation--years-upcoming:hover {
  border-bottom-color: #b3b3b3;
}

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

.react-datepicker__month {
  margin: 0.4rem;
  text-align: center;
}

.react-datepicker__time-container {
  float: right;
  border-left: 1px solid #aeaeae;
  width: 70px;
}

.react-datepicker__time-container--with-today-button {
  display: inline;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  position: absolute;
  right: -72px;
  top: 0;
}

.react-datepicker__time-container .react-datepicker__time {
  position: relative;
  background: white;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
  width: 70px;
  overflow-x: hidden;
  margin: 0 auto;
  text-align: center;
}

.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: 0px;
  padding-left: 0px;
  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;
}

.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:hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}

.react-datepicker__day-names,
.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 {
  cursor: pointer;
}

.react-datepicker__day:hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}

.react-datepicker__day--today {
  font-weight: bold;
}

.react-datepicker__day--highlighted {
  border-radius: 0.3rem;
  background-color: #3dcc4a;
  color: #fff;
}

.react-datepicker__day--highlighted:hover {
  background-color: #32be3f;
}

.react-datepicker__day--highlighted-custom-1 {
  color: magenta;
}

.react-datepicker__day--highlighted-custom-2 {
  color: green;
}

.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--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 {
  background-color: #1d5d90;
}

.react-datepicker__day--keyboard-selected {
  border-radius: 0.3rem;
  background-color: #2a87d0;
  color: #fff;
}

.react-datepicker__day--keyboard-selected:hover {
  background-color: #1d5d90;
}

.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--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) {
  background-color: #f0f0f0;
  color: #000;
}

.react-datepicker__day--disabled {
  cursor: default;
  color: #ccc;
}

.react-datepicker__day--disabled:hover {
  background-color: transparent;
}

.react-datepicker__input-container {
  position: relative;
  display: inline-block;
}

.react-datepicker__year-read-view,
.react-datepicker__month-read-view,
.react-datepicker__month-year-read-view {
  border: 1px solid transparent;
  border-radius: 0.3rem;
}

.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 {
  border-top-color: #ccc;
  float: right;
  margin-left: 20px;
  top: 8px;
  position: relative;
  border-width: 0.45rem;
}

.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 {
  background-color: transparent;
  border: 0;
  cursor: pointer;
  outline: 0;
  padding: 0;
  vertical-align: middle;
  position: absolute;
  height: 16px;
  width: 16px;
  top: 25%;
  right: 7px;
}

.react-datepicker__close-icon::after {
  background-color: #216ba5;
  border-radius: 50%;
  bottom: 0;
  box-sizing: border-box;
  color: #fff;
  content: "\00d7";
  cursor: pointer;
  font-size: 12px;
  height: 16px;
  width: 16px;
  line-height: 1;
  margin: -8px auto 0;
  padding: 2px;
  position: absolute;
  right: 0px;
  text-align: center;
}

.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__portal .react-datepicker__navigation {
  border: 0.81rem solid transparent;
}

.react-datepicker__portal .react-datepicker__navigation--previous {
  border-right-color: #ccc;
}

.react-datepicker__portal .react-datepicker__navigation--previous:hover {
  border-right-color: #b3b3b3;
}

.react-datepicker__portal .react-datepicker__navigation--previous--disabled, .react-datepicker__portal .react-datepicker__navigation--previous--disabled:hover {
  border-right-color: #e6e6e6;
  cursor: default;
}

.react-datepicker__portal .react-datepicker__navigation--next {
  border-left-color: #ccc;
}

.react-datepicker__portal .react-datepicker__navigation--next:hover {
  border-left-color: #b3b3b3;
}

.react-datepicker__portal .react-datepicker__navigation--next--disabled, .react-datepicker__portal .react-datepicker__navigation--next--disabled:hover {
  border-left-color: #e6e6e6;
  cursor: default;
}
/*
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 */
/* Contextual actions - clickable divs, editable content, especially large or dynamically sized */
/* Proper Action buttons - golden rule "things that have icons or borders", especially fixed size buttons */
/*
  Containers:

  Combine containers and layers for consistency
  IE:

  .my-modal-submit-class {
    z-index: @layer-modal + @layer-button;
  }
*/
/* Form content or inputs that should be handled above baseline page content. */
/* Modal content that should be handled above baseline page content. */
/* Callout content that can expand from anywhere */
/* 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;
}
html,
body {
  background-color: white;
  color: #333333;
  font-size: 14px;
  font-family: 'Roboto', Arial, sans-serif;
  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;
}
html,
body,
ul,
ol,
li {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
svg {
  overflow: visible;
}
.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;
}
.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-100 {
  width: 100px;
}
.width-150 {
  width: 150px;
}
.width-200 {
  width: 200px;
}
.width-250 {
  width: 250px;
}
.width-450 {
  width: 450px;
}
.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;
}
.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;
}
.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: #ef5455;
}
.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;
}
.background-primary {
  background-color: white;
}
.background-gray-dark {
  background-color: #8a9292;
}
.background-secondary {
  background-color: #f4f6f6;
}
.background-color-brand {
  background-color: #3ebfc2;
}
.background-color-brand-light {
  background-color: #e4f6f7;
}
.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-danger {
  border: 1px solid #ef5455;
}
.border-primary-top {
  border-top: 1px solid #ebf0f0;
}
.border-primary-bottom {
  border-bottom: 1px solid #ebf0f0;
}
.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;
}
.display-none {
  display: none;
}
.display-block {
  display: block;
}
.display-inline {
  display: inline;
}
.display-hidden {
  visibility: hidden;
  pointer-events: none;
}
.word-break {
  word-break: break-all;
  word-break: break-word;
}
.animation-spinner {
  animation-name: spin;
  animation-duration: 2000ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.animation-slick-spinner {
  animation-name: spin;
  animation-duration: 2000ms;
  animation-iteration-count: infinite;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
svg.icon .light-stroke {
  stroke: white;
}
svg.icon .dark-stroke {
  stroke: #333333;
}
svg.icon .brand-primary-stroke {
  stroke: #3ebfc2;
}
svg.icon .brand-secondary-stroke {
  stroke: #ef5455;
}
svg.icon .no-stroke {
  stroke: transparent;
}
svg.icon .light-fill {
  fill: white;
}
svg.icon .dark-fill {
  fill: #333333;
}
svg.icon .dark-secondary-fill {
  fill: #404040;
}
svg.icon .brand-primary-fill {
  fill: #3ebfc2;
}
svg.icon .brand-secondary-fill {
  fill: #ef5455;
}
svg.icon .no-fill {
  fill: transparent;
}
svg.icon .badge {
  font-size: 10px;
}
svg.icon .inner-stroke {
  stroke-width: 4px;
}
svg.icon .stroke {
  stroke: #333333;
}
svg.icon .fill {
  fill: white;
  transition: fill 100ms ease-in-out;
}
svg.active.icon .fill,
.active svg.icon .fill {
  fill: #333333;
  transition: fill 100ms ease-in-out;
}
svg.icon.on-dark .stroke,
svg.icon.on-dark .fill {
  stroke: white;
}
svg.icon.on-dark .no-stroke {
  stroke: transparent;
}
svg.icon.on-dark .no-fill,
svg.icon.on-dark .active-fill {
  fill: transparent;
}
svg.icon.on-light .stroke,
svg.icon.on-light .fill {
  stroke: #333333;
}
svg.icon.on-light .no-stroke {
  stroke: transparent;
}
svg.icon.on-light .no-fill,
svg.icon.on-light .active-fill {
  fill: transparent;
}
.selected svg.icon.on-dark .stroke,
.active svg.icon.on-dark .stroke,
svg.active.icon.on-dark .stroke {
  stroke: white;
}
.selected svg.icon.on-dark .fill,
.active svg.icon.on-dark .fill,
svg.active.icon.on-dark .fill,
.selected svg.icon.on-dark .active-fill,
.active svg.icon.on-dark .active-fill,
svg.active.icon.on-dark .active-fill {
  fill: white;
}
.selected svg.icon.on-dark .no-stroke,
.active svg.icon.on-dark .no-stroke,
svg.active.icon.on-dark .no-stroke {
  stroke: transparent;
}
.selected svg.icon.on-dark .no-fill,
.active svg.icon.on-dark .no-fill,
svg.active.icon.on-dark .no-fill {
  fill: transparent;
}
.selected svg.icon.on-light .stroke,
.active svg.icon.on-light .stroke,
svg.active.icon.on-light .stroke {
  stroke: #333333;
}
.selected svg.icon.on-light .fill,
.active svg.icon.on-light .fill,
svg.active.icon.on-light .fill,
.selected svg.icon.on-light .active-fill,
.active svg.icon.on-light .active-fill,
svg.active.icon.on-light .active-fill {
  fill: #333333;
}
.selected svg.icon.on-light .no-stroke,
.active svg.icon.on-light .no-stroke,
svg.active.icon.on-light .no-stroke {
  stroke: transparent;
}
.selected svg.icon.on-light .no-fill,
.active svg.icon.on-light .no-fill,
svg.active.icon.on-light .no-fill {
  fill: transparent;
}
.content-editor {
  background-color: white;
  cursor: text;
  box-sizing: border-box;
  border-radius: 2px;
  background: #fefefe;
  word-break: break-all;
  word-break: break-word;
  overflow-y: auto;
}
.content-editor .user-mention {
  background-color: #d6eff2;
}
.content-editor.is-dragging-over {
  border: 2px dashed #cccccc !important;
}
.content-editor .DraftEditor-root {
  position: relative;
  min-height: 24px;
  height: 100%;
}
.content-editor .DraftEditor-root .public-DraftEditorPlaceholder-root {
  color: #555555;
  position: absolute;
  height: 100%;
  width: 100%;
}
.content-editor .DraftEditor-root .public-DraftEditorPlaceholder-root .public-DraftEditorPlaceholder-inner {
  height: 100%;
}
.content-editor .DraftEditor-root .DraftEditor-editorContainer {
  position: relative;
  height: 100%;
}
.content-editor .DraftEditor-root .DraftEditor-editorContainer .public-DraftEditor-content {
  min-height: 24px;
}
.content-editor .draftJsMentionPlugin__mention__29BEd,
.content-editor .draftJsMentionPlugin__mention__29BEd:visited {
  color: #575f67;
  cursor: pointer;
  display: inline-block;
  background: #e6f3ff;
  padding-left: 2px;
  padding-right: 2px;
  border-radius: 2px;
  text-decoration: none;
}
.content-editor .draftJsMentionPlugin__mention__29BEd:hover,
.content-editor .draftJsMentionPlugin__mention__29BEd:focus {
  color: #677584;
  background: #edf5fd;
  outline: 0;
  /* reset for :focus */
}
.content-editor .draftJsMentionPlugin__mention__29BEd:active {
  color: #222;
  background: #455261;
}
.content-editor .draftJsMentionPlugin__mentionSuggestionsEntry__3mSwm {
  display: flex;
  padding: 7px 10px 3px 10px;
  transition: background-color 0.4s cubic-bezier(0.27, 1.27, 0.48, 0.56);
}
.content-editor .draftJsMentionPlugin__mentionSuggestionsEntry__3mSwm:active {
  background-color: #cce7ff;
}
.content-editor .draftJsMentionPlugin__mentionSuggestionsEntryFocused__3LcTd {
  background-color: #e6f3ff;
}
.content-editor .draftJsMentionPlugin__mentionSuggestionsEntryText__3Jobq {
  display: inline-block;
  margin: auto 0 auto 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 368px;
  font-size: 0.9em;
}
.content-editor .draftJsMentionPlugin__mentionSuggestionsEntryAvatar__1xgA9 {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 12px;
}
.content-editor .draftJsMentionPlugin__mentionSuggestions__2DWjA {
  border: 1px solid #eee;
  margin-top: 0.4em;
  margin-bottom: 80px;
  position: absolute;
  min-width: 220px;
  max-width: 440px;
  max-height: 160px;
  overflow: auto;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0px 4px 30px 0px #dcdcdc;
  cursor: pointer;
  padding-top: 6px;
  padding-bottom: 6px;
  z-index: 300;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  box-sizing: border-box;
  -webkit-transform: scale(0);
  transform: scale(0);
}
@media screen and (min-width: 751px) {
  .new-chat-message .draftJsMentionPlugin__mentionSuggestions__2DWjA {
    top: -10px !important;
    left: -220px !important;
  }
  .chat-message .draftJsMentionPlugin__mentionSuggestions__2DWjA {
    left: 0 !important;
  }
}
.content-editor-new {
  overflow-y: auto;
  max-height: 300px;
  display: flex;
  align-items: center;
  word-break: break-all;
  word-break: break-word;
  cursor: text;
}
.content-editor-new .public-DraftEditorPlaceholder-root {
  margin-bottom: -18px;
}
.content-editor-new .mention {
  color: #3ebfc2;
  font-weight: bold;
  cursor: pointer;
}
.message-editor-main.multi-row .content-editor-new {
  align-items: normal;
}
.chat-new .content-editor-new {
  min-height: 36px;
}
.chat-new .self .markdown-content pre {
  background-color: #8a9292;
}
.mention-suggestions {
  max-height: 180px;
  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-new {
  margin-top: 2px;
  background-color: white;
}
.message-editor-new .markdown-menu {
  display: flex;
  flex-direction: row;
  transition: width 150ms;
  overflow: hidden;
}
.message-editor-new .markdown-menu.hidden {
  width: 0;
  height: 0;
  display: inline-block;
}
.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: grid;
  grid-template-columns: 50px auto max-content;
  padding: 6px 0;
}
.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 {
  grid-template-columns: 50px auto;
}
.message-editor-new .message-editor-main.multi-row .editor-controls {
  display: flex;
  justify-content: flex-end;
  grid-column-start: 2;
  grid-column-end: 3;
}
.message-editor-new .message-editor-main.no-avatar {
  grid-template-columns: auto max-content;
}
.message-editor-new .message-editor-main.multi-row.no-avatar {
  grid-template-columns: auto;
}
.message-editor-new .message-editor-main.multi-row.no-avatar .editor-controls {
  grid-column-start: 1;
  grid-column-end: 1;
}
.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 {
  background-color: white;
  height: 273px;
  overflow-y: hidden;
}
section.emoji-mart {
  width: 100% !important;
  border: none;
}
section.emoji-mart .emoji-mart-bar {
  display: none;
}
section.emoji-mart .emoji-mart-bar:last-child {
  display: none;
}
section.emoji-mart .emoji-mart-search {
  margin: 12px;
  padding: 10px 36px 10px 12px;
  border-radius: 6px;
  background-color: #f4f6f6;
}
section.emoji-mart .emoji-mart-search > input {
  border: none;
  background-color: inherit;
  width: 100%;
  font-size: 14px;
  padding: unset;
}
section.emoji-mart .emoji-mart-search .emoji-mart-search-icon > svg {
  width: 16px;
  height: 16px;
  color: #8a9292;
}
section.emoji-mart .emoji-mart-scroll {
  height: 210px;
}
section.emoji-mart .emoji-mart-scroll::-webkit-scrollbar {
  width: 5px;
}
section.emoji-mart .emoji-mart-scroll::-webkit-scrollbar-thumb {
  background: #333333;
  border-radius: 2.5px;
}
.user-mention-suggestions {
  background-color: white;
  border: 1px solid #cccccc;
  padding: 12px 0;
  position: fixed;
  margin-bottom: 6px;
  margin-top: 6px;
  z-index: 200;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -webkit-box-shadow: 0px 3px 56px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 3px 56px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 3px 56px 1px rgba(0, 0, 0, 0.2);
}
.user-mention-suggestions.hidden {
  display: none;
}
.user-mention-suggestions.visible {
  animation: show-theme-context-menu 100ms ease-out;
}
.user-mention-suggestions .user-mention-suggestion 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;
  display: flex;
  align-items: center;
  padding: 6px 12px;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
}
.user-mention-suggestions .user-mention-suggestion button::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.user-mention-suggestions .user-mention-suggestion button .avatar {
  margin-right: 12px;
}
.user-mention-suggestions .selected {
  background-color: #d6eff2;
}
.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-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;
}
.modal-overlay-new {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.8);
  bottom: -10px;
  display: flex;
  flex-direction: column;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 100;
  overflow: auto;
}
.modal-overlay-new.non-blocking {
  margin: auto;
  background: none;
  width: fit-content;
  width: -moz-fit-content;
}
.modal-overlay-new.visible {
  animation: show-theme-context-menu 150ms ease-out;
  -webkit-animation-fill-mode: forwards;
  /* Safari 4.0 - 8.0 */
  animation-fill-mode: forwards;
}
.modal-window-new {
  height: fit-content;
  background-color: white;
  border: 1px solid #cccccc;
  border-radius: 9px;
  position: relative;
  top: 10%;
}
.modal-window-new .close-modal {
  font-size: 24px;
  text-align: right;
  position: absolute;
  right: 15px;
}
.modal-window-new .close-modal > span {
  cursor: pointer;
}
.modal-window-new .close-modal > span:hover {
  color: #3ebfc2;
}
.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 .content-modal-buttons .vertical {
  display: grid;
  grid-template-columns: 1fr;
}
.content-modal-container .content-modal-buttons .horizontal {
  display: grid;
  grid-template-columns: 1fr auto;
}
.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: 650px) {
  .modal-size-huge,
  .modal-size-large {
    width: 90%;
  }
}
@media screen and (max-width: 550px) {
  .modal-size-medium {
    width: 90%;
  }
}
.attachment-list {
  width: 100%;
  display: grid;
  margin: 6px 0 0;
  grid-gap: 6px;
  grid-template-columns: repeat(auto-fit, 200px);
  grid-auto-rows: 200px;
}
.attachment-list:empty {
  margin: 0;
}
.attachment-list li {
  overflow: hidden;
}
.message-attachments:not(.chat-message-attachments) {
  margin: 12px;
}
.message-attachments .attachment-warning {
  padding: 0 24px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 200;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
}
.chat-message-attachments .attachment-list {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-auto-rows: 165px;
}
.chat-message-attachments .attachment-list .message-document,
.chat-message-attachments .attachment-list .message-image {
  height: 145px;
  width: calc(100% - 6px);
}
.chat-message-attachments .attachment-list-item {
  display: block;
  overflow: hidden;
  margin: 18px 0 0;
  width: 95%;
}
.chat-message-attachments .attachment-list-item .message-attachment .file-loading {
  top: 35%;
}
.chat-message-attachments .attachment-list-item .inline-control-list {
  display: flex;
  place-content: center;
  margin: 6px;
}
.message-files-deleted {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 200;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
}
.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;
}
.discussion-list-item .message-no-content {
  padding-left: 24px;
}
.comment-list-item .message-no-content,
.reply-list-item .message-no-content {
  padding-left: 12px;
}
a.message-attachment {
  text-decoration: none;
  width: 100%;
  cursor: default;
}
a.message-attachment.clickable {
  cursor: pointer;
}
a.message-attachment .delete-button {
  position: absolute;
  border: 1px solid #ef5455;
  border-radius: 6px;
  margin: 12px;
  background-color: white;
}
a.message-attachment .hover-icon {
  position: absolute;
  background-color: white;
  -webkit-text-stroke: 1px white;
  color: #3ebfc2;
  font-size: 30px;
  margin: 12px 6px;
  border-radius: 6px;
  opacity: 0;
}
a.message-attachment:hover .hover-icon {
  opacity: 1;
}
a.message-attachment .file-loading {
  text-align: center;
  font-size: 24px;
  position: relative;
  top: 45%;
  color: #00b0b9;
}
div.removed-file {
  background-color: white;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #cccccc;
  height: 176px;
  margin: auto;
  display: block;
}
div.removed-file .removed-file-icon {
  margin-top: 48px;
}
div.removed-file .removed-file-icon > svg {
  height: 48px;
  margin: 0 auto;
  display: block;
  color: #555555;
}
div.removed-file .removed-file-text {
  width: 100%;
  text-align: center;
  margin-top: 12px;
}
.message-image {
  background-color: white;
  display: block;
}
.message-image label {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  word-break: break-all;
  word-break: break-word;
  color: #555555;
  width: calc(100% - 6px);
  text-align: center;
  margin: auto;
  font-size: 12px;
}
.image-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}
.image-thumbnail.clickable {
  cursor: pointer;
}
.image-thumbnail .fa-play-circle,
.image-thumbnail .fa-images {
  width: 100%;
  text-align: center;
  font-size: 48px;
  margin: 48px 0 24px;
  color: #555555;
  opacity: 0.8;
}
.message-document {
  align-items: center;
  background-color: white;
  color: #555555;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  height: 100%;
}
.message-document span {
  word-break: break-all;
  word-break: break-word;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: center;
  padding: 6px 12px;
}
.message-document .icon {
  margin: auto 0 12px;
  height: 80px;
  width: 80px;
}
.message-document,
.message-image {
  transition: box-shadow 150ms;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  border: 1px solid #cccccc;
  object-fit: contain;
  height: 196px;
  width: 196px;
}
.message-document .file-name,
.message-image .file-name {
  overflow: hidden;
}
.message-document:hover,
.message-image:hover {
  border-color: #3ebfc2;
}
.new-attachment-list {
  display: grid;
  background-color: #333333;
}
.new-attachment-list .new-attachment-list-item {
  position: relative;
  height: 100%;
}
.new-attachment-list.single .new-message-image {
  display: block;
  margin: auto;
  text-align: center;
  max-width: 100%;
}
.new-attachment-list.single.loading {
  background-color: transparent;
}
.new-attachment-list.single .attachment-unpreviewable {
  height: 100px;
}
.new-attachment-list:not(.single) .new-message-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.new-attachment-list:not(.single) .new-message-image.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}
.new-attachment-list.triple .new-attachment-list-item:first-child,
.new-attachment-list.over-three .new-attachment-list-item:first-child {
  grid-row-start: 1;
  grid-row-end: 3;
}
.new-attachment-list .attachment-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;
}
.new-attachment-list .transparent-pointer {
  pointer-events: none;
  user-select: none;
}
.new-attachment-list .transparent-pointer .new-attachment-list-item-overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #333333;
  opacity: 0.7;
}
.new-attachment-list .transparent-pointer .attachment-list-count {
  position: absolute;
  width: 100%;
  height: 100%;
  font-size: 36px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.drag-and-drop-area {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px dotted #ebf0f0;
  padding: 12px 0;
  margin-bottom: 12px;
  border-radius: 12px;
}
.drag-and-drop-area.dragging {
  border: 2px dotted #333333;
}
.manage-files .manage-files-header {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 18px;
}
.manage-files .manage-files-body .existing-files-scrollable {
  max-height: 280px;
}
.file-attachment-list {
  display: grid;
  padding: 0 6px;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, 120px);
  max-height: 300px;
  overflow: auto;
}
.file-attachment-list .manage-attachment-list-item {
  display: block;
  overflow: hidden;
  margin: 18px 0 6px;
}
.chat-new .file-attachment-list {
  max-height: 150px;
}
.file-attachment {
  position: relative;
  border-radius: 12px;
  background-color: #333333;
}
.file-attachment img.file-attachment-image {
  width: 100%;
  height: 120px;
  max-height: 120px;
  display: block;
  object-fit: contain;
  object-fit: cover;
  border-radius: 10px;
}
.file-attachment .file-attachment-extension {
  height: 120px;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.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;
}
.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 .existing-files-scrollable {
  max-height: 180px;
}
.existing-files-section .existing-files-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-gap: 10px;
}
.existing-files-section .show-existing-files {
  width: fit-content;
  margin: auto;
  padding: 24px;
}
.existing-file {
  position: relative;
  border-radius: 12px;
  min-width: 120px;
  height: 120px;
}
.existing-file:hover .existing-file-overlay {
  display: flex;
}
.existing-file .existing-file-overlay {
  display: none;
  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;
}
.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 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  cursor: pointer;
}
.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;
}
.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;
}
.string-input-container .text-error {
  margin-top: 4px;
}
.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;
}
.string-input-container .string-input-cancel-button-icon,
.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;
}
.checkbox-input .check-box-icon {
  margin-top: 2px;
}
.dropdown-input-container {
  position: relative;
  user-select: none;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 13px;
}
.dropdown-input-container .dropdown-input {
  width: 100%;
  border-radius: 6px;
  background-color: #f4f6f6;
  text-align: center;
  font-weight: bold;
}
.dropdown-input-container .dropdown-input .dropdown-input-label {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 8px;
}
.dropdown-input-container .dropdown-input .dropdown-input-label > span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.dropdown-input-container .dropdown-option-container {
  width: fit-content;
  width: -moz-fit-content;
  text-align: left;
}
.dropdown-input-container .dropdown-option-item {
  display: flex;
  align-items: center;
  flex-direction: row;
  border: 1px solid transparent;
  background-color: inherit;
  border-radius: 6px;
  padding: 6px;
  font-weight: bold;
  cursor: pointer;
}
.dropdown-input-container .dropdown-option-item:hover {
  background: #f4f6f6;
}
.dropdown-input-container .dropdown-caret {
  margin-left: 2px;
}
.toggle-input-container {
  background-color: #f4f6f6;
  display: flex;
  place-content: space-evenly;
  padding: 3px;
  width: 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;
  grid-gap: 6px;
  width: fit-content;
}
.radio-input-container.vertical {
  flex-direction: column;
}
.radio-input-container.horizontal {
  flex-direction: row;
}
.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 {
  cursor: pointer;
  margin: auto 15px 0px 9px;
}
.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;
}
.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;
}
.avatar {
  position: relative;
}
.avatar img {
  width: 100%;
  height: 100%;
  border-radius: 25px;
  object-fit: cover;
  user-select: none;
  border: 2px solid transparent;
  position: relative;
  right: 2px;
  bottom: 2px;
}
.avatar img.presence.online {
  border: 2px solid #3ebfc2;
}
.avatar img.presence.busy {
  border: 2px solid #9a58ff;
}
.avatar img.presence.away,
.avatar img.presence.offline {
  border: 2px solid transparent;
}
.avatar.square img {
  border-radius: 12px;
}
.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;
  padding: 3px;
  font-size: 9px;
}
.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 .star-icon {
  padding: 4px;
  font-size: 12px;
}
.avatar.large .badge-text {
  width: 12px;
  padding: 4px;
  font-size: 12px;
}
.avatar.huge {
  height: 75px;
  width: 75px;
}
.avatar.huge img {
  -webkit-border-radius: 42px;
  -moz-border-radius: 42px;
  border-radius: 42px;
}
.avatar.huge.square img {
  border-radius: 18px;
}
.avatar.xxl {
  height: 180px;
  width: 180px;
}
.avatar.xxl img {
  -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;
}
.avatar-editor {
  justify-content: center;
}
.avatar-editor .editable {
  opacity: 0.8;
  position: absolute;
  transition: color 200ms;
  text-shadow: black 2px 2px;
  color: #cccccc;
  z-index: 10;
  font-size: 36px;
  margin: 6px;
}
.avatar-editor .editable:hover {
  color: #3ebfc2;
  text-shadow: black 4px 4px;
}
.avatar-editor .watermark-background,
.avatar-editor .watermark-text {
  height: 100%;
  width: 100%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  z-index: 11;
}
.avatar-editor .big-loader {
  align-self: center;
  font-size: 48px;
  position: relative;
}
.avatar-editor .small-loader {
  align-self: center;
  font-size: 24px;
  position: relative;
}
.avatar-editor .watermark-text,
.avatar-editor .watermark-background {
  position: absolute;
  display: block;
  cursor: pointer;
}
.avatar-editor .watermark-background {
  background-color: #404040;
  opacity: 0.5;
}
.avatar-editor .watermark-text {
  line-height: 150px;
  text-align: center;
  color: white;
  background-color: transparent;
}
.avatar-editor input {
  display: none !important;
}
.cropper-container {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
}
.cropper-container .cropper-modal {
  opacity: 0.85;
}
.cropper-container .cropper-face {
  background: none;
}
.cropper-container .cropper-view-box {
  border: none;
  outline: none;
  border-radius: 40px;
}
.cropper-container .cropper-line,
.cropper-container .cropper-point {
  display: none;
}
.avatar-editor-container {
  border-radius: 6px;
  margin-bottom: 50px;
  text-align: center;
  width: 100%;
  height: 250px;
}
.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: 80px;
  margin-left: auto;
  margin-right: 12px;
  z-index: 50;
}
.avatar-editor-container .avatar-cropper-container {
  margin: auto;
}
.avatar-editor-container .avatar-cropper-container .react-cropper-element img {
  width: 300px;
  height: 200px;
}
.avatar-editor-container .avatar-hover-tooltip-container {
  height: 0;
  position: relative;
  top: -45px;
  left: 10px;
}
.avatar-editor-container .avatar-hover-tooltip-container .avatar-hover-tooltip {
  opacity: 0;
  transition: opacity 200ms;
  margin-top: 12px;
  background-color: #333;
  padding: 6px;
  width: 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;
  flex-direction: row;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  margin-top: 6px;
}
.avatar-editor-container .cropper-zoom-buttons .cropper-zoom-in-btn,
.avatar-editor-container .cropper-zoom-buttons .cropper-zoom-out-btn {
  width: 80px;
  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;
}
svg.badge {
  height: 20px;
  width: 18px;
}
svg.badge circle {
  fill: #3ebfc2;
  stroke: none;
}
svg.badge text {
  fill: white;
  text-anchor: middle;
  dominant-baseline: central;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  font-size: 12px;
}
.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%);
  }
}
.call-to-action-item {
  border: 2px solid #3ebfc2;
  cursor: pointer;
  display: block;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-align: center;
  text-decoration: none;
  user-select: none;
}
.call-to-action-item.width-fit-content {
  width: fit-content;
  width: -moz-fit-content;
  margin: auto;
}
.call-to-action-item.small,
.call-to-action-item.tiny {
  font-weight: 600;
  font-size: 14px;
  line-height: 32px;
  padding: 0 24px !important;
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  border-radius: 18px;
}
.call-to-action-item.tiny {
  transform: scale(0.8);
}
.call-to-action-item.large {
  font-size: 17px;
  line-height: 46px;
  padding: 0 36px !important;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
}
.call-to-action-item.primary {
  background-color: #3ebfc2;
  color: white;
  transition: box-shadow 150ms;
  -webkit-box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
}
.call-to-action-item.primary:not(.disabled):hover {
  -webkit-box-shadow: 0px 2px 12px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 2px 12px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 2px 12px 1px rgba(0, 0, 0, 0.2);
}
.call-to-action-item.disabled {
  opacity: 0.4;
  border: 2px solid transparent;
  cursor: default;
}
.call-to-action-item.secondary {
  border: 2px solid #3ebfc2;
  background-color: white;
  color: #3ebfc2;
}
.call-to-action-item.dark {
  border: 2px solid #404040;
  background-color: #404040;
  color: white;
}
.call-to-action-item.dark:hover {
  border-color: #333333;
  background-color: #333333;
}
.call-to-action-item.dangerous {
  border: 2px solid #ef5455;
  background-color: white;
  color: #ef5455;
}
.callout-window {
  background-color: white;
  border: 1px solid #cccccc;
  overflow: hidden;
  z-index: 310;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0px 3px 56px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 3px 56px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 3px 56px 1px rgba(0, 0, 0, 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.pristine,
.marker.pristine {
  top: 10000px !important;
}
.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: 3px 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 3px 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;
}
.channel-list-item .channel-link {
  display: flex;
  text-decoration: none;
  transition: background-color 100ms;
}
.channel-list-item .channel-link .name {
  color: white;
  margin: 0 6px 0 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-list-item .channel-link.current {
  background-color: #555555;
  transition: background-color 100ms;
}
.channel-list-item .favorite-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;
  display: inline-block;
  position: absolute;
  width: 30px;
}
.channel-list-item .favorite-button::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.channel-list-item .channel-link,
.channel-list-item .favorite-button {
  line-height: 30px;
}
.create-channel-modal .modal-window {
  width: 480px;
}
.create-channel-modal .avatar-editor-section {
  align-items: center;
  justify-items: center;
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}
.create-channel-modal .avatar-editor-section label.avatar-editor,
.create-channel-modal .avatar-editor-section label.avatar {
  margin-top: 6px;
  height: 150px;
  width: 150px;
  padding: 0;
}
.create-channel-modal .avatar-editor-section label.avatar-editor .watermark-background,
.create-channel-modal .avatar-editor-section label.avatar .watermark-background {
  z-index: 201;
}
.create-channel-modal .avatar-editor-section label.avatar-editor .watermark-text,
.create-channel-modal .avatar-editor-section label.avatar .watermark-text {
  z-index: 202;
}
.create-channel-modal .avatar-editor-section label.avatar-editor img,
.create-channel-modal .avatar-editor-section label.avatar img {
  -webkit-border-radius: 77px;
  -moz-border-radius: 77px;
  border-radius: 77px;
}
.create-channel-modal textarea {
  border: 1px solid #cccccc;
  color: #555555;
  max-width: 408px;
  min-height: 50px;
  max-height: 300px;
  min-width: 408px;
  padding: 6px 12px;
  transition: border 150ms;
  width: 408px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
}
.create-channel-modal textarea:hover,
.create-channel-modal textarea:active,
.create-channel-modal textarea:focus {
  border: 1px solid #3ebfc2;
}
.create-channel-modal .inline-control-list {
  margin: 0 0 12px 0;
}
.create-channel-modal .select-category-label {
  color: #555555;
}
.create-channel-modal .select-favorite {
  cursor: pointer;
  transition: color 200ms, border-color 200ms;
  margin-left: 12px;
}
.create-channel-modal .select-favorite:hover {
  color: #3ebfc2;
  border-color: #3ebfc2;
}
.create-channel-modal .select-favorite:hover * {
  stroke: #3ebfc2;
}
.create-channel-modal .select-favorite:hover.no-fill {
  -webkit-text-stroke: 2px #3ebfc2;
}
.create-channel-modal .select-favorite svg {
  width: 18px;
  height: auto;
  vertical-align: middle;
}
.create-channel-modal .category-describer .control-list-item button,
.create-channel-modal .category-describer .dropdown-control-list-item button {
  max-width: 250px;
  text-overflow: ellipsis;
  overflow: hidden;
}
.create-channel-modal .category-describer .dropdown-control-list-item button {
  display: block;
  white-space: nowrap;
}
.create-chatroom-modal .modal-window {
  width: 480px;
}
.create-chatroom-modal .modal-window .modal-form {
  width: 100%;
}
.create-chatroom-modal .avatar-editor-section {
  align-items: center;
  justify-items: center;
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}
.create-chatroom-modal .avatar-editor-section label.avatar-editor,
.create-chatroom-modal .avatar-editor-section label.avatar {
  margin-top: 6px;
  height: 150px;
  width: 150px;
  padding: 0;
}
.create-chatroom-modal .avatar-editor-section label.avatar-editor .watermark-background,
.create-chatroom-modal .avatar-editor-section label.avatar .watermark-background {
  z-index: 201;
}
.create-chatroom-modal .avatar-editor-section label.avatar-editor .watermark-text,
.create-chatroom-modal .avatar-editor-section label.avatar .watermark-text {
  z-index: 202;
}
.create-chatroom-modal .avatar-editor-section label.avatar-editor img,
.create-chatroom-modal .avatar-editor-section label.avatar img {
  -webkit-border-radius: 77px;
  -moz-border-radius: 77px;
  border-radius: 77px;
}
.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 .call-to-action-item {
  margin: 12px;
  flex-basis: 0;
  flex-grow: 1;
}
.modal.confirm-modal .confirm-modal-error {
  color: #ef5455;
  font-size: 14px;
  text-align: center;
}
.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;
}
.content-text .content-paragraph {
  min-height: 16px;
  margin: 0;
  padding: 0 6px;
}
.content-text a {
  color: #00b0b9;
  text-decoration: none;
}
.markdown-content {
  word-break: break-all;
  word-break: break-word;
  overflow-y: auto;
}
.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 :first-child {
  margin-block-start: 0;
}
.markdown-content :last-child {
  margin-block-end: 0;
}
.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;
}
.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: 0px 3px 56px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 3px 56px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 3px 56px 1px rgba(0, 0, 0, 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;
}
.draggable-carousel-container {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  place-content: space-around;
  border: 1px solid #ebf0f0;
  border-radius: 12px;
  margin: auto;
}
.draggable-carousel-container .plan-page-number {
  text-align: right;
  font-size: 11px;
  color: #8a9292;
  margin: 12px 18px 6px;
}
.draggable-carousel-container .carousel-cards {
  display: flex;
  flex-direction: row;
  height: 100%;
}
.draggable-carousel-container .carousel-cards .carousel-card {
  padding: 18px 24px;
  height: 100%;
  min-height: 300px;
}
.draggable-carousel-container .draggable-carousel-controls {
  margin: auto;
  margin-bottom: 6px;
}
.editable-task {
  display: grid;
  grid-template-columns: 2fr 2fr;
  max-width: 600px;
  margin: auto;
}
.editable-task.view-mode {
  display: block;
}
.editable-task.not-found .call-to-action-item {
  grid-column: span 2;
  width: fit-content;
  width: -moz-fit-content;
  margin: 18px auto;
}
.editable-task h2 {
  text-align: center;
  grid-column: span 2;
  margin: 12px 12px 6px;
}
.editable-task .go-back-button {
  border: none;
  cursor: pointer;
  transition: color 200ms;
  font-size: 18px;
  position: relative;
  margin: 6px;
  border-radius: 18px;
  background: none;
  transition: transform 200ms;
}
.editable-task .go-back-button:hover {
  transform: scale(1.2);
  transform-origin: center center;
}
.editable-task .task-header {
  display: flex;
  grid-column: span 2;
  height: 18px;
  color: white;
  width: 100%;
  background-color: #3ebfc2;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  padding: 6px;
  margin: 6px 0;
  place-content: space-between;
}
.editable-task .task-header .direct-call {
  cursor: pointer;
  transition: color 200ms, border-color 200ms;
}
.editable-task .task-header .direct-call:hover {
  color: #3ebfc2;
  border-color: #3ebfc2;
}
.editable-task .task-header .direct-call:hover * {
  stroke: #3ebfc2;
}
.editable-task .task-header .direct-call:hover.no-fill {
  -webkit-text-stroke: 2px #3ebfc2;
}
.editable-task .task-header .header-text {
  margin: auto;
}
.editable-task .task-header.high-priority {
  background-color: #ef5455;
}
.editable-task .task-header.normal-priority {
  background-color: #3ebfc2;
}
.editable-task .task-header.low-priority {
  background-color: #00960a;
}
.editable-task .task-action-panel {
  display: grid;
  grid-template-columns: 2fr 2fr 2fr;
  grid-column: span 2;
  grid-gap: 18px;
  margin-top: 24px;
}
.editable-task .task-action-panel .call-to-action-item {
  max-width: 300px;
  white-space: nowrap;
}
.editable-task .task-action-panel .button-container {
  display: grid;
  grid-template-columns: repeat(4, 40px);
  vertical-align: middle;
}
.editable-task .task-action-panel .button-container button {
  cursor: pointer;
  transition: color 200ms, border-color 200ms;
  display: block;
  margin: auto;
  width: 36px;
}
.editable-task .task-action-panel .button-container button:hover {
  color: #3ebfc2;
  border-color: #3ebfc2;
}
.editable-task .task-action-panel .button-container button:hover * {
  stroke: #3ebfc2;
}
.editable-task .task-action-panel .button-container button:hover.no-fill {
  -webkit-text-stroke: 2px #3ebfc2;
}
.editable-task .task-field {
  display: grid;
  grid-column: 1;
  grid-gap: 6px;
  margin: 6px;
  word-break: break-all;
  word-break: break-word;
}
.editable-task .task-field:nth-of-type(1),
.editable-task .task-field:nth-of-type(2) {
  grid-column: span 2;
}
.editable-task .task-field .assign-yourself {
  margin-left: 0;
}
.editable-task .task-field .assignment span.no-members {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  text-decoration: none;
  display: block;
  text-align: center;
  font-weight: 600;
}
.editable-task .task-field.assignment-container {
  grid-row-start: 4;
  grid-row-end: 7;
  grid-column: 2;
  margin-bottom: auto;
}
.editable-task .task-field.flex-row {
  display: flex;
  flex-direction: row;
}
.editable-task .task-field.flex-row ul:not(:first-of-type) {
  margin-left: 12px;
}
.editable-task .task-field .member-list-item .name,
.editable-task .task-field .member-list-item a span {
  word-break: break-all;
  word-break: break-word;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
}
.editable-task .task-field .member-attribute {
  display: grid;
  grid-template-columns: 50px 1fr 50px;
  margin: 6px;
}
.editable-task .task-field .member-attribute .member-name {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  letter-spacing: 0;
  text-transform: none;
  margin: auto 0;
  text-align: left;
  white-space: pre-line;
}
.editable-task .task-field .member-list {
  margin: 0;
  width: 90%;
}
.editable-task .task-field .member-list .member-list-item:last-of-type {
  border: none;
}
.editable-task .task-field .input-error {
  color: #ef5455;
  font-size: 12px;
}
.editable-task .task-field .attribute {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 200;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
.editable-task .task-field .attribute:empty:after {
  content: '-';
}
.editable-task .task-field .attribute.label:after {
  content: ': ';
}
.editable-task .task-field .button-main,
.editable-task .task-field .date-picker input,
.editable-task .task-field .member-selector-filter,
.editable-task .task-field pre {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
}
.editable-task .task-field pre {
  word-break: break-all;
  word-break: break-word;
  white-space: pre-line;
}
.editable-task .task-field .form-text-input {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid #cccccc;
  border-radius: 6px;
  padding: 6px;
  width: calc(100% - 24px);
}
.editable-task .task-field .link {
  text-decoration: underline;
  color: #333333;
  line-height: 12px;
  cursor: pointer;
}
.editable-task .task-field .link:hover {
  color: #3ebfc2;
}
.editable-task .task-field textarea {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  min-height: 80px;
  line-height: 20px;
  display: block;
  padding: 6px;
  width: calc(100% - 24px);
  resize: vertical;
  border-radius: 6px;
  border: 1px solid #cccccc;
}
.editable-task .task-field .task-pod-name button {
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.editable-task-modal.modal.confirm-modal .modal-window {
  width: auto;
  padding: 6px 12px 0 0;
}
@media screen and (max-width: 750px) {
  .editable-task {
    display: block;
  }
}
.calendar-callout .callout-window {
  width: 220px;
  border: none;
}
.calendar-callout .callout-window button {
  margin: auto;
  display: block;
  background: white;
  border: 1px solid #cccccc;
  width: 100%;
  height: auto;
  padding: 6px;
  cursor: pointer;
  transition: color 200ms, border-color 200ms;
}
.calendar-callout .callout-window button:hover {
  color: #3ebfc2;
  border-color: #3ebfc2;
}
.calendar-callout .callout-window button:hover * {
  stroke: #3ebfc2;
}
.calendar-callout .callout-window button:hover.no-fill {
  -webkit-text-stroke: 2px #3ebfc2;
}
.calendar-callout .callout-window button:hover {
  font-weight: 700;
}
.calendar-callout .callout-window button div {
  color: #333333;
  text-align: left;
  font-weight: normal;
  margin: 6px;
}
.calendar-callout .callout-window button div .fa-firefox {
  -webkit-text-stroke: 1px black;
}
.calendar-callout .callout-window button:first-child {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom: none;
}
.calendar-callout .callout-window button:last-child {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  border-top: none;
}
.editable-text {
  display: inline-flex;
}
.editable-text > * {
  position: relative;
}
.editable-text > *:first-child {
  bottom: 0;
}
.editable-text .text-container {
  display: flex;
}
.editable-text .text-container .avatar {
  min-width: 50px;
}
.editable-text .button-container {
  margin: auto 0;
}
.editable-text .editable-text-display {
  position: relative;
  white-space: pre-wrap;
  margin: auto;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  word-break: break-all;
  word-break: break-word;
}
.editable-text .editable-text-editor {
  padding: 6px;
  height: 12px;
  margin: auto 12px;
  font-size: 12px;
  border: 1px solid #cccccc;
  border-radius: 6px;
}
.editable-text .editable-text-editor:hover {
  border: 1px solid #3ebfc2;
}
.editable-text button {
  color: #3ebfc2;
  white-space: nowrap;
}
.editable-text .input-error {
  color: #ef5455;
}
.file-list {
  border-collapse: collapse;
}
.file-list .editable-text {
  margin-left: 6px;
}
.file-list th:nth-of-type(2) {
  text-align: left;
  white-space: nowrap;
}
.file-list th:nth-of-type(3) {
  width: 60px;
  padding-right: 18px;
  white-space: nowrap;
}
.file-list td:nth-of-type(1) {
  padding: 0;
}
.file-list td:nth-of-type(1) .toggle-expanded {
  margin: 0;
}
.file-list td {
  text-align: left;
}
.file-list td .link {
  word-break: break-all;
  word-break: break-word;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  cursor: pointer;
  text-align: left;
  color: #3ebfc2;
  text-decoration: underline;
  width: fit-content;
  width: -moz-fit-content;
}
.file-list td .editable-text-editor {
  height: 18px;
}
.file-list td form.editable-text {
  margin: auto;
  width: 85%;
}
.file-list button.delete-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;
  display: inline;
  color: #00b0b9;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
}
.file-list button.delete-button::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.file-list button.delete-button:hover {
  text-decoration: underline;
}
.upload-file-button-container {
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  place-content: center;
  align-items: center;
}
.file-upload-progress {
  display: flex;
}
.file-upload-progress .file-upload-progress-box {
  border: 1px solid #cccccc;
  height: 18px;
  flex: auto;
  border-radius: 18px;
}
.file-upload-progress .file-upload-progress-bar {
  height: 100%;
  background-color: #3ebfc2;
  border-radius: inherit;
}
.file-upload-progress .file-upload-progress-cancel {
  padding: 0;
}
#modal-root .form-modal-controls {
  display: flex;
  margin: 12px;
}
#modal-root .form-modal-controls .call-to-action-item {
  margin: 6px;
  flex-basis: 0;
  flex-grow: 1;
  white-space: nowrap;
}
#modal-root .section-expander {
  margin: 12px;
  user-select: none;
}
#modal-root .expanded-content label {
  user-select: none;
  font-size: 12px;
  margin: 12px 6px 0;
  display: flex;
}
#modal-root .form-modal-content {
  margin: 24px;
}
#modal-root .working.modal-form {
  visibility: hidden;
}
#modal-root .working.modal-form-loader {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
#modal-root .excess-error {
  color: #ef5455;
  text-align: center;
}
#modal-root .excess-error .plans-link {
  padding-top: 12px;
}
#modal-root .excess-error .plans-link a {
  color: #3ebfc2;
}
.modal.insert-text-modal .modal-window {
  padding: 6px 12px;
  width: 450px;
}
.modal.insert-text-modal .modal-body {
  margin: 12px;
}
.modal.insert-text-modal .insert-text-actions {
  display: flex;
}
.modal.insert-text-modal .call-to-action-item {
  margin: 12px;
  flex-basis: 0;
  flex-grow: 1;
  width: 0;
}
.member-list {
  margin: 36px;
}
.member-list.small-margin {
  margin: 0 auto;
}
.member-list.small-margin .member-list-item a {
  padding: 6px 0;
}
.member-list.overflow-container {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 24px;
}
.member-list .member-list-item {
  border-bottom: 1px solid #cccccc;
  background: white;
  position: relative;
  transition: background 150ms ease-in;
  padding-bottom: 4px;
}
.member-list .member-list-item a:hover {
  background: #f4f6f6;
}
.member-list .member-list-item:first-of-type {
  border-top: 1px solid #cccccc;
}
.member-list .member-list-item:last-of-type {
  border-bottom: none;
}
.member-list .member-list-item .member-list-item-content {
  color: #333333;
  display: inline-block;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  padding: 12px 0;
  text-decoration: none;
  width: 100%;
}
.member-list .member-list-item .member-list-item-content .avatar,
.member-list .member-list-item .member-list-item-content span {
  word-break: break-all;
  word-break: break-word;
  display: inline-block;
  margin: 0 6px 0 12px;
  vertical-align: middle;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.member-list .member-list-item .member-list-item-content .display-name {
  max-width: 60%;
}
.member-list .member-list-item .member-list-item-content img {
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
}
.member-list .member-list-item .member-list-item-body {
  display: flex;
  align-items: center;
  position: absolute;
  right: 48px;
  top: 0;
  bottom: 0;
}
.member-list .member-list-item .direct-chat-action {
  height: 48px;
}
.member-list .member-list-item .control-list {
  display: inline-block;
  position: absolute;
  right: 0;
  padding: 12px 0;
}
.member-list .member-list-item .control-list a,
.member-list .member-list-item .control-list 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;
  padding: 0 12px;
}
.member-list .member-list-item .control-list a::-moz-focus-inner,
.member-list .member-list-item .control-list button::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.member-list .member-list-item .control-list-item:hover svg.direct-action {
  cursor: pointer;
  transition: color 200ms, border-color 200ms;
}
.member-list .member-list-item .control-list-item:hover svg.direct-action:hover {
  color: #3ebfc2;
  border-color: #3ebfc2;
}
.member-list .member-list-item .control-list-item:hover svg.direct-action:hover * {
  stroke: #3ebfc2;
}
.member-list .member-list-item .control-list-item:hover svg.direct-action:hover.no-fill {
  -webkit-text-stroke: 2px #3ebfc2;
}
#main.safari .member-list .member-list-item:last-of-type,
#main.firefox .member-list .member-list-item:last-of-type {
  margin-bottom: 80px;
}
.group-header {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 200;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
  position: absolute;
  user-select: none;
  text-align: center;
  top: -15%;
  right: 50%;
  z-index: 0;
  color: #cccccc;
  width: 60px;
  border-radius: 6px;
  background: white;
  background-clip: 'padding-box';
  padding: 3px;
}
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-list-builder-container .member-selector-filter {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
}
.member-list-builder-container .member-selector-filter:disabled {
  background-color: #f4f6f6;
}
.member-list-builder-container .member-list-builder.scrollable-page {
  height: auto;
  overflow-y: auto;
}
.member-list-builder-container .member-list-builder.scrollable-page .scrollable-page-body {
  height: auto;
}
.member-list-builder-container .member-list-builder.scrollable-page.small {
  max-height: 150px;
}
.member-list-builder-container .member-list-builder.scrollable-page.medium {
  max-height: 300px;
}
.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;
}
.modal-overlay {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.2);
  bottom: -10px;
  display: flex;
  flex-direction: column;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 100;
  overflow: auto;
}
.modal-overlay.non-blocking {
  margin: auto;
  background: none;
  width: fit-content;
  width: -moz-fit-content;
}
.modal-overlay.pristine {
  display: none;
}
.modal-overlay.hidden {
  animation: hide-theme-context-menu 100ms ease-out;
  -webkit-animation-fill-mode: forwards;
  /* Safari 4.0 - 8.0 */
  animation-fill-mode: forwards;
}
.modal-overlay.visible {
  animation: show-theme-context-menu 150ms ease-out;
  -webkit-animation-fill-mode: forwards;
  /* Safari 4.0 - 8.0 */
  animation-fill-mode: forwards;
}
.modal-window {
  height: fit-content;
  background-color: white;
  border: 1px solid #cccccc;
  position: relative;
  top: 10%;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -webkit-box-shadow: 0px 3px 56px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 3px 56px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 3px 56px 1px rgba(0, 0, 0, 0.2);
}
.modal-window h2 {
  font-size: 1.5em;
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 100;
  text-decoration: none;
  margin: 12px;
  padding: 0;
  text-align: center;
  cursor: auto;
}
.modal-window button.close-button {
  background: #fff;
  border: 1px solid transparent;
  outline: none !important;
  transition: box-shadow 150ms, transform 100ms cubic-bezier(0.5, -0.5, 0.5, 5);
  cursor: pointer;
  position: absolute;
  width: 30px;
  height: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  top: -10px;
  right: -10px;
  z-index: 210;
}
.modal-window button.close-button:not(:hover) {
  border: 1px solid #cccccc;
}
.modal-window button.close-button:hover,
.modal-window button.close-button:focus {
  -webkit-box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
}
.modal-window button.close-button:active,
.modal-window button.close-button:focus {
  border: 1px solid #3ebfc2;
}
.modal-window button.close-button:active {
  transform: scale(0.95);
  transform-origin: center;
  transition: box-shadow 150ms, transform 100ms;
  -webkit-box-shadow: unset;
  -moz-box-shadow: unset;
  box-shadow: unset;
}
.modal-window button.close-button:hover {
  border: 1px solid #3ebfc2;
}
.modal.notify-modal .modal-window {
  padding: 6px 12px;
  width: 450px;
}
.modal.notify-modal .modal-body {
  margin: 12px;
}
.modal.notify-modal .modal-body strong {
  font-weight: unset;
  color: #00b0b9;
}
.modal.notify-modal .modal-body a {
  color: #00b0b9;
  font-size: 1.17em;
  line-height: 1.17em;
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 100;
  text-decoration: none;
  text-decoration: underline;
}
.modal.notify-modal .notify-actions {
  display: flex;
  justify-content: flex-end;
}
.modal.notify-modal .call-to-action-item {
  margin: 12px;
  flex: none;
  width: 150px;
}
.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;
  grid-gap: 12px;
}
.tabbed-page-tab-items .tabbed-page-tab-item {
  font-size: 12px;
  color: #8a9292;
  padding: 4px 10px;
  text-decoration: none;
  cursor: pointer;
}
.tabbed-page-tab-items .tabbed-page-tab-item.active {
  color: #333333;
  background-color: #f4f6f6;
  border-radius: 10px;
}
.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;
  font-size: 12px;
  padding: 12px;
  color: white;
  background-color: #333333;
  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;
}
.scrollable-page-scroll-top.hidden {
  opacity: 0;
  pointer-events: none;
}
.scrollable-page-scroll-top img {
  padding: 0 2px;
  margin-right: 16px;
  transition: margin 0.2s ease-in;
}
.scrollable-page-scroll-top span {
  margin-right: -75px;
  transition: margin 0.2s ease-in;
}
.scrollable-page-scroll-top:hover img {
  margin-right: 6px;
}
.scrollable-page-scroll-top:hover span {
  margin-left: 0;
  margin-right: 0;
}
.scrollable-page-sticky-header {
  overflow-x: hidden;
}
.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;
}
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 .call-to-action-item {
  margin: auto;
  white-space: nowrap;
}
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;
}
.tab-list {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 12px;
}
.tab-list .tab-list-item {
  display: inline-block;
  font-size: 1.17em;
  line-height: 1.17em;
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 100;
  text-decoration: none;
}
.tab-list .tab-list-item a,
.tab-list .tab-list-item span {
  color: #555555;
  display: inline-block;
  margin: 0 12px;
  padding: 6px 6px;
  position: relative;
  text-decoration: none;
}
.tab-list .tab-list-item a .trailing-trivia,
.tab-list .tab-list-item span .trailing-trivia {
  background-color: #3ebfc2;
  bottom: 3px;
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transform: scaleX(0);
  transform-origin: center center;
  transition: transform 100ms;
}
.tab-list .tab-list-item a.active,
.tab-list .tab-list-item span.active {
  cursor: default;
}
.tab-list .tab-list-item a:not(.active),
.tab-list .tab-list-item span:not(.active) {
  cursor: pointer;
}
.tab-list .tab-list-item a:not(.active):hover,
.tab-list .tab-list-item span:not(.active):hover {
  color: #3ebfc2;
}
.tab-list .tab-list-item a.active .trailing-trivia,
.tab-list .tab-list-item span.active .trailing-trivia {
  transform: scaleX(1.1);
}
.toggle-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;
  animation: button-bounce 100ms;
  display: block;
  line-height: 0;
  padding: 6px;
  transition: box-shadow 100ms, transform 100ms;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  -webkit-box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
}
.toggle-button::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.toggle-button:hover {
  -webkit-box-shadow: 0px 2px 12px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 2px 12px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 2px 12px 1px rgba(0, 0, 0, 0.2);
}
.toggle-button.affirmative {
  background-color: #00960a;
}
.toggle-button.negative {
  background-color: #ef5455;
}
.toggle-button.neutral {
  background-color: #3ebfc2;
}
.toggle-button.dismissed {
  background-color: #555555;
}
.toggle-button:active {
  -webkit-box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
  transform: scale(0.95);
  transform-origin: center center;
  animation: none;
}
.toggle-button.pristine {
  animation: none;
}
.toggle-button.disabled {
  opacity: 0.5;
}
@keyframes button-bounce {
  0% {
    transform: scale(0.95);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.tooltip {
  color: #333333;
  z-index: 500;
  background-color: white;
  position: absolute;
  white-space: nowrap;
  margin-top: 24px;
  font-size: 12px;
  border-radius: 6px;
  padding: 0 6px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  user-select: none;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.tooltip.left {
  right: 30%;
}
.tooltip.right {
  left: 30%;
}
.tooltip.left-top {
  right: 30%;
  margin-top: -18px;
}
.tooltip.right-top {
  left: 30%;
  margin-top: -18px;
}
.tooltip-button {
  padding: 6px;
  border-radius: 6px;
  border-style: none;
  font-size: 16px;
  background-color: transparent;
  margin: 0 0 0 6px;
  transition: background-color 200ms;
  position: relative;
}
.tooltip-button:hover {
  border-color: #333333;
}
.tooltip-button.clickable {
  cursor: pointer;
}
.tooltip-button.disabled {
  opacity: 0.5;
}
.tooltip-button.onDark {
  background-color: #404040;
  color: white;
}
.tooltip-button.affirmative {
  background-color: #3ebfc2;
  color: white;
  border: 1px solid transparent;
}
.tooltip-button.affirmative:hover {
  background-color: #00b0b9;
}
.tooltip-button.negative {
  background-color: red;
  color: white;
}
.icon-button {
  border: none;
  background-color: transparent;
  padding: 0;
}
.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 .icon-wrapper {
  opacity: 0.4;
}
.icon-button.clickable:not(.disabled) {
  cursor: pointer;
}
.icon-button.primary {
  color: white;
  background-color: #3ebfc2;
}
.icon-button .inherit-size {
  width: inherit;
  height: inherit;
}
.icon-button .icon-wrapper {
  width: 100%;
  margin: auto;
}
.invite-link-copy-wrapper {
  position: relative;
}
.invite-link-copy-wrapper .invite-link-copy-success {
  position: absolute;
  left: 0;
  right: 0;
  color: #3ebfc2;
  text-align: center;
  margin-bottom: 6px;
  opacity: 0;
  transition: opacity 300ms;
}
.invite-link-copy-wrapper .invite-link-copy-success.visible {
  opacity: 1;
  transition: opacity 300ms;
}
.invite-link-copy-wrapper .invite-link-copy {
  display: flex;
  height: 40px;
}
.invite-link-copy-wrapper .invite-link-copy input {
  width: 100%;
  height: 100%;
  padding-left: 6px;
  border: 1px solid #cccccc;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.invite-link-copy-wrapper .invite-link-copy input:hover {
  border: 1px solid #3ebfc2;
}
.invite-link-copy-wrapper .invite-link-copy .invite-link-copy-button {
  border: 1px solid #cccccc;
  margin-left: -1px;
  padding: 4px 6px 4px 2px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.invite-link-copy-wrapper .invite-link-copy .invite-link-copy-button:not(.disabled):hover {
  border: 1px solid #3ebfc2;
}
.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 .overlay i {
  position: absolute;
  top: 45%;
  font-size: 100px;
}
.with-overlay .overlay i.fixed {
  position: fixed;
}
.safari .scrollable-page-body > .with-overlay {
  height: 100%;
}
.squad-list-modal .modal-window {
  padding: 18px;
  width: 450px;
}
.squad-list-modal .modal-body {
  margin: 12px;
}
.squad-list-modal .squad-list-actions {
  display: flex;
  flex: 1;
}
.squad-list-modal .squad-list-actions .call-to-action-item {
  margin: 12px;
  flex-basis: 0;
  flex-grow: 1;
  width: 0;
}
.squad-list-modal .squad-list-invite-action {
  height: 36px;
  margin: auto;
}
.squad-list-modal ul {
  height: 400px;
  overflow: auto;
}
.squad-list-modal ul li {
  padding: 12px;
  display: flex;
  cursor: pointer;
}
.squad-list-modal .squad-list-name {
  margin: auto 18px;
  flex: 3;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.squad-list-modal .squad-list-ignore {
  text-align: center;
}
.squad-list-modal .squad-list-ignore u {
  cursor: pointer;
}
.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: 3px;
  margin-left: 6px;
}
.preview .modal-overlay {
  overflow: hidden;
}
.preview .modal-overlay .modal-window {
  display: flex;
  flex-direction: column;
  user-select: text;
  top: 12px;
  background: #333333;
  width: 80%;
}
.preview .modal-overlay .modal-window:hover .modal-edge {
  opacity: 1;
}
.preview .modal-overlay .modal-window .file-download-link {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 95%;
  width: fit-content;
  width: -moz-fit-content;
  margin: auto;
  font-size: 14px;
  background: transparent;
  color: #3ebfc2;
  position: relative;
  text-align: center;
}
.preview .modal-overlay .modal-window .file-download-link:hover {
  cursor: pointer;
  text-decoration: underline;
}
.preview .modal-overlay .modal-window .download-help-text {
  display: block;
  position: relative;
  color: white;
  text-align: center;
  font-size: 10px;
  margin-bottom: 6px;
}
.preview .modal-overlay .modal-window .image-count {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 200;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  background: transparent;
  color: white;
  padding: 6px 0 12px;
  user-select: none;
}
.preview .modal-overlay .modal-window .gallery-thumbnails {
  position: relative;
  display: flex;
  background-color: transparent;
  place-content: center;
  width: 100%;
  height: 100px;
}
.preview .modal-overlay .modal-window .gallery-thumbnails .thumbnail {
  border: 2px solid #cccccc;
  border-radius: 18px;
  background-color: rgba(3, 3, 3, 0.25);
  margin: 12px;
  overflow: hidden;
  height: 75px;
  width: 75px;
  object-fit: cover;
  user-select: none;
  cursor: pointer;
}
.preview .modal-overlay .modal-window .gallery-thumbnails .thumbnail.highlight {
  border-color: #3ebfc2;
}
.preview .modal-overlay .modal-window .gallery-thumbnails .thumbnail.hidden {
  display: none;
}
.preview .modal-overlay .modal-window .gallery-thumbnails .thumbnail img {
  height: 75px;
  width: 75px;
  object-fit: cover;
  cursor: pointer;
}
.preview .modal-overlay .modal-window .gallery-thumbnails .thumbnail:hover .fa-play-circle {
  opacity: 1;
}
.preview .modal-overlay .modal-window .gallery-thumbnails .thumbnail .fa-images {
  color: white;
  width: 100%;
  text-align: center;
  font-size: 36px;
  margin: 18px auto;
}
.preview .modal-overlay .modal-window .gallery-thumbnails .thumbnail .fa-play-circle {
  display: block;
  position: absolute;
  height: 75px;
  width: 75px;
  line-height: 75px;
  text-align: center;
  font-size: 48px;
  color: #3ebfc2;
  z-index: 2;
  transition: opacity 200ms;
}
.preview .modal-overlay .modal-window .gallery-thumbnails .thumbnail .fa-play-circle:hover {
  color: #00b0b9;
}
.preview .modal-overlay .modal-window .gallery-thumbnails .thumbnail label {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  position: absolute;
  height: auto;
  width: 90px;
  font-size: 12px;
  font-weight: normal;
  margin: 24px 6px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  z-index: 1;
}
.preview .modal-overlay .modal-window .gallery-thumbnails .thumbnail .with-overlay .overlay {
  font-size: 30px;
  top: 24px;
  color: white;
}
.preview .modal-overlay .modal-window .gallery-thumbnails .thumbnail .with-overlay .overlay i {
  font-size: 30px;
  top: 0;
}
.preview .modal-overlay .modal-window .preview-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background-color: transparent;
}
.preview .modal-overlay .modal-window .image-container {
  background-color: transparent;
  overflow: hidden;
  max-height: 100%;
  height: 100%;
}
.preview .modal-overlay .modal-window .image-container .loading-image {
  text-align: center;
  display: block;
  margin: 12px auto;
  width: fit-content;
  width: -moz-fit-content;
}
.preview .modal-overlay .modal-window .image-container .preview-warning {
  display: block;
  color: white;
  font-size: 18px;
  text-align: center;
  margin: 35vh auto;
  width: fit-content;
  width: -moz-fit-content;
  user-select: none;
}
.preview .modal-overlay .modal-window .image-container video.preview {
  display: block;
  margin: 0 auto 6px;
  width: 100%;
  height: 70vh;
}
.preview .modal-overlay .modal-window .image-container video.preview.gallery {
  width: calc(100% - 160px);
}
.preview .modal-overlay .modal-window .image-container img.preview {
  display: block;
  width: 100%;
  height: 70vh;
  min-height: 100px;
  margin: 0 auto 6px;
  object-fit: contain;
  user-select: none;
}
.preview .modal-overlay .modal-window h2 {
  margin: 6px 0 0;
  padding: 4px 0 6px;
  text-align: center;
  font-size: 12px;
}
.preview .modal-overlay .modal-window h2 a {
  color: #333333;
}
.preview .modal-overlay .modal-window h2 p {
  display: inline-block;
  text-decoration: underline;
  margin: auto 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 24px);
}
.preview .modal-overlay .modal-window .modal-edge {
  opacity: 0;
  transition: opacity 200ms;
  cursor: pointer;
  position: absolute;
  min-width: 80px;
  top: 0;
  height: 100%;
  width: fit-content;
  width: -moz-fit-content;
  margin: 0;
  z-index: 201;
  color: white;
  font-size: 24px;
  background: rgba(0, 0, 0, 0.3);
}
.preview .modal-overlay .modal-window .modal-edge:hover p i {
  transform: scale(1.3);
}
.preview .modal-overlay .modal-window .modal-edge p {
  font-variant: all-small-caps;
  position: relative;
  text-align: center;
  color: white;
  top: 50%;
  height: 50px;
  width: 50px;
  border-radius: 36px;
  margin: auto;
  user-select: none;
}
.preview .modal-overlay .modal-window .modal-edge p i {
  font-size: 36px;
  transition: transform 200ms;
  margin-top: 6px;
}
.preview .modal-overlay .modal-window .modal-edge.previous {
  border-bottom-left-radius: 12px;
  left: 0;
}
.preview .modal-overlay .modal-window .modal-edge.previous p i {
  margin-right: 3px;
}
.preview .modal-overlay .modal-window .modal-edge.next {
  border-bottom-right-radius: 12px;
  right: 0;
}
.preview .modal-overlay .modal-window .modal-edge.next p i {
  margin-left: 3px;
}
.edit-name-avatar-modal .modal-window {
  padding: 12px 24px;
  width: 400px;
}
.edit-name-avatar-modal .edit-name-avatar-actions {
  display: flex;
}
.edit-name-avatar-modal .call-to-action-item {
  margin: 12px auto;
  width: 150px;
}
.edit-name-avatar-modal .avatar-editor-section {
  align-items: center;
  justify-items: center;
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}
.edit-name-avatar-modal .avatar-editor-section label.avatar-editor,
.edit-name-avatar-modal .avatar-editor-section label.avatar {
  margin-top: 6px;
  height: 150px;
  width: 150px;
  padding: 0;
}
.edit-name-avatar-modal .avatar-editor-section label.avatar-editor .watermark-background,
.edit-name-avatar-modal .avatar-editor-section label.avatar .watermark-background {
  z-index: 201;
}
.edit-name-avatar-modal .avatar-editor-section label.avatar-editor .watermark-text,
.edit-name-avatar-modal .avatar-editor-section label.avatar .watermark-text {
  z-index: 202;
}
.edit-name-avatar-modal .avatar-editor-section label.avatar-editor img,
.edit-name-avatar-modal .avatar-editor-section label.avatar img {
  -webkit-border-radius: 77px;
  -moz-border-radius: 77px;
  border-radius: 77px;
}
.preview-container {
  background: white;
  display: flex;
  flex-direction: column;
  width: auto;
  padding: 3px;
  margin: 0;
  border: 1px solid #cccccc;
  border-radius: 12px;
  color: #333333;
}
.preview-container a.link-preview,
.preview-container a.link-preview:visited {
  text-decoration: none;
  width: fit-content;
  width: -moz-fit-content;
  display: block;
  color: #333333;
}
.preview-container a.link-preview h3,
.preview-container a.link-preview:visited h3 {
  color: #333333;
}
.preview-container a.link-preview .source,
.preview-container a.link-preview:visited .source {
  display: block;
  width: 100%;
  font-size: 12px;
  font-variant: all-petite-caps;
}
.preview-container:hover {
  border-color: #3ebfc2;
}
.preview-container.narrow {
  width: fit-content;
  width: -moz-fit-content;
  max-width: 800px;
  margin-top: 12px;
}
.preview-container .content-preview {
  display: block;
  margin: auto;
  width: fit-content;
  width: -moz-fit-content;
  max-height: 270px;
  max-width: 270px;
  overflow: hidden;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
}
.preview-container .content-preview .icon {
  height: 100px;
  width: 100px;
  display: block;
  margin: auto;
}
.preview-container .content-preview img {
  height: auto;
  width: auto;
  border-radius: 12px;
  border: 1px solid #cccccc;
  max-height: 150px;
  max-width: calc(100% - 2px);
  object-fit: contain;
}
.preview-container .link-preview-description {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  text-decoration: none;
  color: #333333;
  margin: 6px;
}
.preview-container .content-container {
  margin: 0 6px;
  display: grid;
  grid-gap: 0 6px;
  min-width: 200px;
}
.preview-container .content-container.no-description {
  grid-template-columns: 1fr;
}
.preview-container .content-container .preview-footer {
  grid-column: span 2;
}
.preview-container .content-container iframe {
  width: calc(100% - 2px);
  border: 1px solid #cccccc;
  border-radius: 6px;
}
.preview-container .preview-footer {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 200;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
  padding: 0 6px;
  max-height: 24px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  margin-left: auto;
  margin-top: auto;
  text-align: right;
}
.preview-container h3 {
  font-size: 1.17em;
  line-height: 1.17em;
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 100;
  text-decoration: none;
  margin: 6px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.existing-file-modal h2 {
  font-size: 18px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 100;
  text-decoration: none;
  text-align: center;
  font-family: 'Poppins', Arial, sans-serif;
}
.existing-file-modal div.title {
  font-size: 1.17em;
  line-height: 1.17em;
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 100;
  text-decoration: none;
  text-align: center;
  margin-bottom: 12px;
}
.existing-file-modal div.warning {
  font-size: 1.17em;
  line-height: 1.17em;
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 100;
  text-decoration: none;
  text-align: center;
  margin-top: 50px;
}
.existing-file-modal .button-container {
  margin: 18px auto 0;
  width: fit-content;
  width: -moz-fit-content;
  display: flex;
  flex-direction: row;
  place-content: space-evenly;
}
.existing-file-modal.confirm-modal .modal-window {
  width: auto;
  cursor: auto;
  min-width: 450px;
}
.existing-file-modal.confirm-modal .modal-window .modal-body {
  max-height: 400px;
  min-height: 160px;
  overflow: auto;
  display: block;
}
.existing-file-modal.confirm-modal .modal-window .confirm-actions {
  white-space: nowrap;
  width: fit-content;
  width: -moz-fit-content;
  margin: auto;
}
.existing-file-modal.confirm-modal .modal-window .message-attachment {
  display: block;
  margin: auto;
  width: fit-content;
  width: -moz-fit-content;
  pointer-events: none;
}
.existing-file-modal .standard-table {
  margin: 18px auto 0;
  width: 80vw;
}
.existing-file-modal .standard-table th:nth-of-type(2) {
  width: 150px;
}
.existing-file-modal .standard-table tbody tr.no-results:hover td {
  background-color: white;
}
.existing-file-modal .standard-table td:first-of-type {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.existing-file-modal .standard-table tbody tr:not(.no-results) {
  cursor: pointer;
}
.existing-file-modal .standard-table tbody tr:not(.no-results):hover {
  color: #3ebfc2;
  text-decoration: underline;
}
.existing-file-modal .text-filter {
  background: url(/assets/search-icon.svg) 10px center no-repeat transparent;
  padding: 6px 6px 6px 36px;
  border-radius: 6px;
  border: 1px solid #cccccc;
  margin: 6px 12px 0;
  width: 200px;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
}
.existing-file-modal .text-filter.in-use {
  border: 1px solid #3ebfc2;
}
.existing-file-modal .text-filter:focus {
  border: 1px solid #3ebfc2;
}
.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;
}
.giphy-wrapper .giphy-header {
  padding-right: 24px;
}
.giphy-wrapper .giphy-header input {
  width: 100%;
  background: url(/assets/search-icon.svg) 10px center no-repeat transparent;
  padding: 6px 6px 6px 36px;
  border-radius: 6px;
  border: 1px solid #cccccc;
  margin: 6px;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
}
.giphy-wrapper .giphy-grid {
  overflow-y: auto;
  height: 320px;
  width: 450px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.giphy-wrapper .giphy-grid .no-results {
  grid-column: span 2;
}
.giphy-wrapper .giphy-grid .giphy {
  padding: 6px;
  cursor: pointer;
  background: white;
  border-radius: 12px;
}
.giphy-wrapper .giphy-grid .giphy:hover {
  background: #333333;
}
.giphy-wrapper .giphy-grid .giphy img {
  width: 100%;
  height: 150px;
  border-radius: inherit;
}
.info-callout-wrapper {
  font-size: 14px;
}
.info-callout-wrapper.error {
  color: #ef5455;
}
.info-callout-wrapper.warning {
  color: #f7cd3b;
}
.info-callout-wrapper.success {
  color: #00960a;
}
.info-callout-wrapper .info-callout-icon {
  cursor: pointer;
  margin-left: 6px;
}
.info-callout .callout-window {
  padding: 12px;
  width: 200px;
}
.reaction-container {
  display: flex;
  flex-direction: row;
  margin-top: auto;
}
.reaction-container .reaction-stack {
  display: flex;
  flex-wrap: nowrap;
  width: fit-content;
  width: -moz-fit-content;
  transition: max-width 200ms, opacity 200ms, margin 200ms, padding 200ms;
  background: #f4f6f6;
  border: 1px solid #cccccc;
  border-radius: 18px;
  padding: 0;
  margin: 0;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
}
.reaction-container .reaction-stack:hover:not(.reaction-container .reaction-stack.readonly) {
  border-color: #00b0b9;
}
.reaction-container .reaction-stack.readonly {
  cursor: auto;
  border: none;
}
.reaction-container .reaction-stack.hidden {
  opacity: 0;
  max-width: 0;
  margin: 0;
  padding: 0;
}
.reaction-container .count {
  cursor: pointer;
  font-family: 'Poppins', Arial, sans-serif;
  margin: auto 6px;
  transition: color 200ms;
}
.reaction-container .count:hover {
  color: #3ebfc2;
}
.callout .add-reaction-callout {
  display: grid;
  grid-auto-rows: 30px;
  grid-template-columns: 36px 36px 36px 36px;
}
.callout .add-reaction-callout .tooltip-button {
  transition: transform 200ms, background-color 200ms;
  margin: auto;
  padding: 0 6px;
  user-select: none;
  border-radius: 6px;
}
.callout .add-reaction-callout .tooltip-button:hover {
  transform: scale(1.25);
  background-color: #3ebfc2;
}
.callout .add-reaction-callout .tooltip-button:hover.self {
  opacity: 0.8;
}
.callout .add-reaction-callout .tooltip-button.self {
  background-color: #00b0b9;
}
.callout .reaction-member-callout {
  padding: 6px;
  max-height: 200px;
  overflow-y: auto;
}
.callout .reaction-member-callout.empty {
  display: block;
  text-align: center;
}
.callout .reaction-member-callout .reaction-member-list-item {
  white-space: nowrap;
  max-width: 500px;
  text-overflow: ellipsis;
  overflow: hidden;
}
.callout .reaction-member-callout .reaction-member-list-item span.name {
  display: inline-flex;
  vertical-align: super;
  margin-left: 6px;
}
.chat-message:not(.self) {
  place-content: flex-end;
}
.chat-message .reaction-container {
  position: absolute;
  display: flex;
  text-align: left;
  z-index: 301;
  margin: 0 6px 0px 24px;
}
.chat-message .reaction-container .reaction {
  padding: 3px 0 3px 3px;
  margin: 3px;
  font-size: 10px;
  z-index: 302;
}
.chat-message .reaction-container .reaction-stack {
  height: 14px;
}
.chat-message .reaction-container .reaction-stack img {
  height: 14px;
  width: 14px;
}
.chat-message .reaction-container.empty {
  opacity: 0;
}
.chat-message .reaction-container.empty .count {
  margin: auto 3px;
  display: none;
}
.chat-message .count {
  font-size: 12px;
}
.chat-message:hover .reaction-container.empty {
  opacity: 1;
  transition: opacity 200ms 500ms ease-in;
}
.title-header {
  display: grid;
  grid-template-columns: 1fr 8fr 1fr;
}
.title-header .title-header-title {
  display: block;
  color: #333333;
  font-weight: 300;
  text-align: center;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 24px;
  margin: auto;
}
.title-header .go-back-button,
.title-header .callout-button {
  position: relative;
  margin: auto;
  font-size: 18px;
}
.block-list-item {
  position: relative;
  display: grid;
  grid-template-columns: max-content auto;
  grid-gap: 12px;
  align-items: center;
}
.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.with-on-hover {
  border-radius: 6px;
}
.block-list-item.with-on-hover:hover {
  background-color: #f4f6f6;
}
.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: auto 0;
  word-break: break-all;
  word-break: break-word;
}
.block-list-item .block-list-item-title {
  color: #333333;
  font-weight: 500;
  margin-right: 12px;
}
.block-list-item .block-list-item-subtext {
  font-size: 12px;
  white-space: nowrap;
}
.block-list-item.small .block-list-item-subtext {
  font-size: 10px;
}
.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,
.block-list-item .block-list-item-content {
  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;
}
.with-selection .selection-bar {
  position: absolute;
  left: 0;
  width: 5px;
  height: 100%;
  background-color: #3ebfc2;
}
.with-selection .selection-circle {
  position: absolute;
  top: calc(50% - 4px);
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background-color: #3ebfc2;
}
.search-input {
  position: relative;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  padding: 10px 36px 10px 12px;
  border-radius: 6px;
  background-color: #f4f6f6;
}
.search-input input {
  border: none;
  background-color: inherit;
  width: 100%;
}
.search-input .clear-icon,
.search-input .search-icon {
  position: absolute;
  font-size: 16px;
  right: 12px;
}
.search-input .clear-icon {
  cursor: pointer;
}
.search-input .search-icon {
  color: #888888;
}
.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-weight: bold;
  text-align: left;
  font-size: 22px;
  margin: auto 0;
}
.header-title.small .header-title-text {
  font-size: 14px;
}
.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;
}
.filter-list {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-transform: capitalize;
  border-radius: 8px;
  font-size: 12px;
  color: #888888;
  border: 1px solid #f4f6f6;
  background-color: #f4f6f6;
}
.filter-list .filter-list-item {
  flex: 1;
  text-align: center;
  border-radius: inherit;
  padding: 6px;
  text-decoration: none;
  cursor: pointer;
}
.filter-list .filter-list-item.selected {
  font-weight: 500;
  color: #555555;
  background-color: white;
}
.text-on-background {
  border-radius: 8px;
  font-size: 13px;
  padding: 9px 12px;
  text-align: center;
  user-select: none;
}
.text-on-background.with-icon {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 8px;
  justify-content: center;
  align-items: center;
}
.text-on-background.with-icon .icon {
  font-size: 14px;
}
.text-on-background.with-icon.small {
  height: 18px;
}
.text-on-background.with-icon.small .icon {
  font-size: 12px;
}
.text-on-background.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.text-on-background.primary {
  color: white;
  background-color: #3ebfc2;
}
.text-on-background.primary-tint {
  color: #3ebfc2;
  background-color: #e4f6f7;
}
.text-on-background.secondary {
  background-color: #f4f6f6;
  color: #333333;
  font-weight: 500;
}
.text-on-background.transparent {
  background-color: transparent;
  color: #333333;
  font-weight: 500;
}
.text-on-background.danger {
  color: white;
  background-color: #ff585d;
}
.text-on-background.dark {
  color: #ffffff;
  background-color: #333333;
}
.text-on-background.small {
  padding: 4px 8px;
  font-size: 11px;
}
.text-on-background.large {
  padding: 12px 24px;
}
.stopwatch {
  width: fit-content;
  width: -moz-fit-content;
  height: 18px;
  user-select: none;
  margin: 6px;
  padding: 0 6px;
  border-radius: 18px;
}
.expanded-file-modal h2,
.expanded-file-modal .editable-text-display {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
}
.expanded-file-modal .message-attachment {
  display: block;
  width: fit-content;
  width: -moz-fit-content;
  margin: 12px auto 18px;
}
.expanded-file-modal .expanded-file-details {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-auto-rows: 30px;
  grid-gap: 6px;
}
.expanded-file-modal .expanded-file-details .text-container {
  width: 100%;
}
.expanded-file-modal .expanded-file-details .text-container .editable-text-display {
  margin-left: 0;
}
.expanded-file-modal .expanded-file-details .text-container .editable-text-editor {
  width: 100%;
  padding: 12px 0;
}
.expanded-file-modal .expanded-file-details label {
  grid-column: 1;
  font-weight: 600;
  margin: auto auto auto 0;
  white-space: nowrap;
}
.expanded-file-modal .expanded-file-details label:after {
  content: ': ';
}
.expanded-file-modal .expanded-file-details .labeled-content {
  margin: auto 0;
}
.expanded-file-modal .button-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.file-versions {
  margin: 6px 0;
}
.file-versions .file-versions-expander {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.file-versions .file-versions-list {
  max-height: 180px;
  overflow: auto;
}
.file-versions .file-versions-list .file-versions-list-item {
  display: grid;
  grid-template-columns: auto max-content;
  margin: 12px 0;
  padding: 0 12px;
}
.file-versions .file-versions-list .file-versions-list-item-preview {
  cursor: pointer;
}
.file-versions .file-versions-list .file-versions-list-item-preview:hover .file-versions-list-item-name {
  color: #3ebfc2;
}
.file-versions .file-versions-list .file-versions-list-item-name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  word-break: break-word;
}
.file-versions .file-versions-list .file-versions-list-item-details {
  font-size: 12px;
  color: #888888;
}
.file-versions .file-versions-list .file-versions-list-item-action {
  color: #3ebfc2;
  margin: auto;
  padding: 6px;
  cursor: pointer;
}
.file-versions .file-versions-upload {
  width: 250px;
  margin: auto;
}
.video-icon-button {
  cursor: pointer;
  white-space: nowrap;
  border-radius: 6px;
  border-style: none;
  text-align: center;
  font-size: 16px;
  background-color: transparent;
  margin: 0 0 0 6px;
  transition: background-color 200ms;
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  place-content: space-evenly;
}
.video-icon-button .icon-wrapper {
  padding: 3px;
  width: 100%;
  margin: auto;
}
.video-icon-button.onDark {
  background-color: #404040;
  color: white;
}
.giphy-wrapper-new .giphy-header {
  padding: 12px;
}
.giphy-wrapper-new .giphy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  grid-gap: 6px;
  padding-left: 12px;
}
.giphy-wrapper-new .giphy-grid .giphy {
  cursor: pointer;
  background: white;
  border-radius: 12px;
}
.giphy-wrapper-new .giphy-grid .giphy:hover {
  background: #333333;
}
.giphy-wrapper-new .giphy-grid .giphy img {
  width: 100%;
  height: 150px;
  border-radius: inherit;
}
.kebab-menu {
  display: grid;
  grid-gap: 18px;
  padding: 20px 0;
  white-space: nowrap;
}
.kebab-menu .kebab-menu-item {
  display: flex;
  align-items: center;
  font-weight: 500;
}
.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.divider {
  border-bottom: 1px solid #ebf0f0;
}
.kebab-menu .kebab-menu-item.default,
.kebab-menu .kebab-menu-item.primary,
.kebab-menu .kebab-menu-item.danger {
  padding: 0 30px;
}
.action-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.action-list-item .action-list-item-text {
  display: flex;
  align-items: center;
  font-weight: 500;
}
.info-popup-callout .callout-window {
  max-width: 50vw;
  max-height: 50vh;
  overflow: auto;
  padding: 12px 24px;
}
label.input-box {
  display: block;
  position: relative;
  margin: 24px 0;
}
label.input-box input {
  border: 0;
  border-bottom: 1px solid #cccccc;
  color: #555555;
  display: block;
  font-size: 18px;
  line-height: 22px;
  outline: none;
  padding: 18px 0 6px;
  width: 100%;
}
label.input-box input.invalid {
  border-bottom: 1px solid #ef5455;
}
label.input-box .placeholder,
label.input-box .error {
  left: 0;
  position: absolute;
}
label.input-box .placeholder {
  color: #555555;
  cursor: text;
  bottom: 6px;
  transition: bottom 200ms, font-size 200ms;
}
label.input-box .error {
  color: #ef5455;
  bottom: -18px;
  font-size: 14px;
}
label.input-box input:focus + .placeholder,
label.input-box input.filled + .placeholder {
  font-size: 14px;
  bottom: 30px;
  transition: bottom 200ms, font-size 200ms;
  cursor: default;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
label.input-box .show-password {
  position: absolute;
  right: 0;
  bottom: 10px;
  color: #3ebfc2;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}
label.input-box input.with-show-password::-webkit-credentials-auto-fill-button {
  position: absolute;
  right: 36px;
}
.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;
}
.empty-state {
  position: absolute;
  top: 30vh;
  width: 100%;
  text-align: center;
  margin: auto;
  display: grid;
  grid-gap: 24px;
}
.badge-new {
  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;
}
/* Support for FeatureKey.newSidebar */
nav.left-side-bar {
  width: 60px;
  background-color: #333333;
  color: white;
  flex: 0 0 auto;
  max-width: unset;
  position: relative;
  user-select: none;
}
nav.left-side-bar .hidden {
  display: none;
}
nav.left-side-bar .menu-item-list {
  padding: 0;
  border-top: 1px solid #cccccc;
}
nav.left-side-bar .menu-item-icon i {
  -webkit-text-stroke: 1px white;
  font-size: 22px;
  color: transparent;
}
nav.left-side-bar .menu-item-icon svg.icon {
  margin: -6px;
  padding: 12px;
}
nav.left-side-bar .user-status .status-active a {
  font-weight: bold !important;
}
nav.left-side-bar .user-status .status-active i {
  transform: scale(1.2);
}
nav.left-side-bar .user-status .status-online {
  color: #00960a;
}
nav.left-side-bar .user-status .status-busy {
  color: #ef5455;
}
nav.left-side-bar .user-status .status-away {
  color: #f7cd3b;
}
nav.left-side-bar .user-status .status-offline {
  color: #555555;
}
nav.left-side-bar .side-bar-item {
  position: relative;
}
nav.left-side-bar .side-bar-item .tooltip-button {
  height: 100%;
  width: 100%;
  transition: transform 200ms;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
nav.left-side-bar .side-bar-item .tooltip-button .tooltip {
  white-space: pre-line;
  top: 18px;
  width: max-content;
  max-width: 120px;
}
nav.left-side-bar .side-bar-item .menu-nav-link {
  display: flex;
  color: white;
  cursor: pointer;
  align-items: center;
  text-decoration: none;
  transition: background-color 150ms;
  background-color: #333333;
}
nav.left-side-bar .side-bar-item .menu-nav-link:hover {
  background-color: #404040;
}
nav.left-side-bar .side-bar-item .menu-nav-link.active {
  background-color: #3ebfc2;
}
nav.left-side-bar .side-bar-item .menu-nav-link.active i {
  color: white;
}
nav.left-side-bar .menu-item-icon {
  display: flex;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 100%;
}
nav.left-side-bar .side-bar-popout {
  background: white;
  border: 1px solid #cccccc;
  top: 0;
  right: -274px;
  width: 250px;
  position: absolute;
  transform: translate(-18px, 6px);
  z-index: 320;
  color: #333333;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
}
nav.left-side-bar .side-bar-popout.hidden {
  display: none;
}
nav.left-side-bar .side-bar-popout h2,
nav.left-side-bar .side-bar-popout .popout-content {
  padding: 18px;
  margin: 0;
}
nav.left-side-bar .side-bar-popout h2 svg.icon,
nav.left-side-bar .side-bar-popout .popout-content svg.icon {
  margin-right: 12px;
}
nav.left-side-bar .side-bar-popout .avatar,
nav.left-side-bar .side-bar-popout .badge {
  flex-grow: 0;
  flex-shrink: 0;
}
nav.left-side-bar .side-bar-popout .chat-room-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
nav.left-side-bar .side-bar-popout svg.badge {
  margin-left: 6px;
}
nav.left-side-bar .side-bar-popout .call-to-action-item {
  margin: 18px auto;
}
nav.left-side-bar .side-bar-popout h2 {
  border-bottom: 1px solid #cccccc;
  display: flex;
  align-items: center;
  font-size: 1.5em;
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 100;
  text-decoration: none;
  font-weight: bold;
}
nav.left-side-bar .side-bar-popout .popout-content {
  position: relative;
}
nav.left-side-bar .side-bar-popout .popout-content a {
  color: #333333;
  text-decoration: none;
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  align-items: center;
  text-overflow: ellipsis;
  padding: 3px 0;
}
nav.left-side-bar .side-bar-popout ul.popout-context-menu {
  user-select: none;
}
nav.left-side-bar .side-bar-popout ul.popout-context-menu,
nav.left-side-bar .side-bar-popout ul.popout-context-menu li,
nav.left-side-bar .side-bar-popout ul.popout-context-menu ul {
  display: block;
}
nav.left-side-bar .side-bar-popout ul.popout-context-menu > li:not(:last-of-type) {
  border-bottom: 1px solid #cccccc;
}
nav.left-side-bar .side-bar-popout ul.popout-context-menu ul.popout-context-menu-section {
  padding: 6px 0;
}
nav.left-side-bar .side-bar-popout ul.popout-context-menu ul.popout-context-menu-section button {
  width: 100%;
}
nav.left-side-bar .side-bar-popout ul.popout-context-menu ul.popout-context-menu-section a,
nav.left-side-bar .side-bar-popout ul.popout-context-menu ul.popout-context-menu-section button {
  background-color: transparent !important;
  border: none !important;
  color: #333333;
  cursor: pointer;
  display: block !important;
  margin: 0 !important;
  padding: 3px 12px;
  text-align: left;
  transition: background-color 150ms;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
}
nav.left-side-bar .side-bar-popout ul.popout-context-menu ul.popout-context-menu-section a .fa,
nav.left-side-bar .side-bar-popout ul.popout-context-menu ul.popout-context-menu-section button .fa,
nav.left-side-bar .side-bar-popout ul.popout-context-menu ul.popout-context-menu-section a .fas,
nav.left-side-bar .side-bar-popout ul.popout-context-menu ul.popout-context-menu-section button .fas {
  transition: transform 200ms, color 200ms;
  width: 24px;
  font-size: 18px;
}
nav.left-side-bar .side-bar-popout ul.popout-context-menu ul.popout-context-menu-section a:hover .fa,
nav.left-side-bar .side-bar-popout ul.popout-context-menu ul.popout-context-menu-section button:hover .fa,
nav.left-side-bar .side-bar-popout ul.popout-context-menu ul.popout-context-menu-section a:hover .fas,
nav.left-side-bar .side-bar-popout ul.popout-context-menu ul.popout-context-menu-section button:hover .fas {
  transform: scale(1.2);
}
nav.left-side-bar .side-bar-popout ul.popout-context-menu ul.popout-context-menu-section a:hover,
nav.left-side-bar .side-bar-popout ul.popout-context-menu ul.popout-context-menu-section button:hover,
nav.left-side-bar .side-bar-popout ul.popout-context-menu ul.popout-context-menu-section a:focus,
nav.left-side-bar .side-bar-popout ul.popout-context-menu ul.popout-context-menu-section button:focus {
  background-color: #d6eff2 !important;
  outline: none;
  transition: background-color 150ms;
}
nav.left-side-bar .side-bar-popout ul.popout-context-menu ul.popout-context-menu-section .side-bar-squad-item {
  display: grid;
  grid-template-columns: 20px auto 20px;
  grid-gap: 6px;
  align-items: center;
  padding: 6px 12px;
}
nav.left-side-bar .side-bar-popout ul.popout-context-menu ul.popout-context-menu-section .side-bar-squad-item span {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
nav.left-side-bar .side-bar-popout ul.popout-context-menu ul.popout-context-menu-section .side-bar-squad-item.header {
  font-weight: bold;
  font-size: 14px;
}
nav.left-side-bar .side-bar-popout ul.popout-context-menu ul.popout-context-menu-section .side-bar-squad-item.border {
  border-bottom: 1px solid #cccccc;
}
nav.left-side-bar .side-bar-popout ul.popout-context-menu ul.popout-context-menu-section .side-bar-squad-item.action {
  color: #3ebfc2;
}
nav.left-side-bar .side-bar-popout ul.popout-context-menu ul.popout-context-menu-section .side-bar-squad-item.no-avatar {
  grid-template-columns: auto 20px;
}
nav.left-side-bar .side-bar-popout ul.popout-context-menu ul.popout-context-menu-section .side-bar-squad-item.no-badge {
  grid-template-columns: 20px auto;
}
nav.left-side-bar .side-bar-popout ul.popout-context-menu ul.popout-context-menu-section .side-bar-squad-item.no-badge.no-avatar {
  grid-template-columns: auto;
}
nav.left-side-bar .side-bar-popout ul.popout-context-menu ul.popout-context-menu-section .side-bar-squad-item:not(.header):hover {
  background-color: #d6eff2;
  cursor: pointer;
}
nav.left-side-bar .side-bar-popout .avatar {
  flex: 0 0 auto;
  margin-right: 6px;
}
nav.left-side-bar .side-bar-popout button.popout-nav-create,
nav.left-side-bar .side-bar-popout a.popout-nav-create {
  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;
  color: white;
  background: #3ebfc2;
  position: absolute;
  top: -18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border: 1px solid #cccccc;
  -webkit-box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 48px;
  -moz-border-radius: 48px;
  border-radius: 48px;
  border-radius: 36px;
}
nav.left-side-bar .side-bar-popout button.popout-nav-create::-moz-focus-inner,
nav.left-side-bar .side-bar-popout a.popout-nav-create::-moz-focus-inner {
  border: 0;
  padding: 0;
}
nav.left-side-bar .side-bar-popout h3 {
  margin: 0;
  padding: 12px 0 0 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 200;
  letter-spacing: 1.2px;
  text-decoration: none;
}
nav.left-side-bar .menu-item-content {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  width: 180px;
}
nav.left-side-bar .menu-item-text {
  padding-right: 24px;
}
nav.left-side-bar .profile-item-list .side-bar-item .menu-nav-link {
  height: 52px;
}
nav.left-side-bar .menu-item-list .side-bar-item .menu-nav-link {
  height: 36px;
}
.side-bar-nav {
  background-color: #333333;
  color: white;
}
.side-bar-nav .side-bar-nav-menu {
  height: 100%;
  margin: 0 auto;
  padding: 12px;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 100px minmax(0, 20%) auto 100px;
}
.side-bar-nav .side-bar-nav-menu .side-bar-nav-first {
  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, 40px);
  grid-gap: 18px;
}
.side-bar-nav .side-bar-nav-menu .side-bar-nav-last {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  grid-template-rows: repeat(auto-fill, 40px);
  margin-bottom: 18px;
  grid-gap: 18px;
}
.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 .activities-unread-dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 7px;
  height: 7px;
  color: #ffffff;
  background-color: #3ebfc2;
  border-radius: 7px;
  border: 2px solid #333333;
}
#app-top-menu {
  width: 100%;
  height: 52px;
  position: relative;
  display: flex;
  flex-direction: row;
  background-color: #333333;
  place-content: flex-end;
}
#app-top-menu .top-menu-container {
  position: fixed;
  right: 0;
}
#app-top-menu .top-menu-item-list {
  position: sticky;
  display: inline-flex;
  float: right;
  margin: 0 6px 6px 48px;
  right: 0;
  max-width: 100%;
}
#app-top-menu .top-menu-item-list input {
  text-align: left;
  position: relative;
  font-size: 12px;
  visibility: visible;
  height: 36px;
  transition: width 400ms;
  margin-top: 6px;
  margin-left: 6px;
  width: 300px;
  border: none;
  padding: 6px;
}
#app-top-menu .top-menu-item-list input.hidden {
  width: 0px;
  border: 0px;
  margin: 0px;
  padding: 0px;
  visibility: hidden;
}
#app-top-menu .clear-button {
  position: relative;
  font-size: 14px;
  padding: 6px;
  top: 6px;
  height: 36px;
  margin-left: -6px;
  background-color: white;
  cursor: pointer;
  text-align: center;
  border-left: 1px solid;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
#app-top-menu .clear-button:hover {
  background-color: #3ebfc2;
  color: white;
}
.top-menu-action:not(.expander) {
  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;
  display: block;
  margin: 6px;
  padding: 6px;
  text-align: center;
  -webkit-border-radius: 48px;
  -moz-border-radius: 48px;
  border-radius: 48px;
  border-radius: 36px;
  border: 1px solid transparent;
}
.top-menu-action:not(.expander)::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.top-menu-action:not(.expander):hover {
  background-color: #404040;
  border: 1px solid #3ebfc2;
}
i.top-menu-action.expander {
  margin: 0 6px;
  padding: 12px;
  -webkit-border-radius: 48px;
  -moz-border-radius: 48px;
  border-radius: 48px;
  border-radius: 36px;
  border: 1px solid transparent;
}
i.top-menu-action.expander:hover {
  background-color: #404040;
  border: 1px solid #3ebfc2;
}
.top-menu-action.font-icon {
  width: 38px;
  height: 40px;
}
.top-menu-action.font-icon .fa {
  color: white;
  font-size: 18px;
}
.top-menu-action.active {
  -webkit-appearance: none;
  -webkit-box-shadow: #3ebfc2 2px 2px;
  box-shadow: #3ebfc2 2px 2px;
}
.top-menu-action svg,
.top-menu-action i.fa {
  margin: -6px;
  overflow: visible;
  padding: 6px;
  width: 24px;
}
.top-menu-action .tooltip {
  left: unset;
  top: 10px;
  margin-right: 18px;
}
.top-menu-action .tooltip.left {
  right: 5%;
}
a.top-menu-action {
  height: 36px;
  width: 36px;
}
button.top-menu-action {
  height: 40px;
  width: 40px;
}
.top-menu-search {
  display: flex;
}
.top-menu-search .tab-list {
  font-size: 12px;
}
.top-menu-search .top-menu-search-results {
  overflow-y: auto;
  overflow-x: hidden;
  background: white;
  border: none;
  border-top: 1px solid #ccc;
  max-height: 400px;
  width: 385px;
}
.top-menu-search .top-menu-search-results .no-results {
  padding: 18px;
}
.top-menu-search .top-menu-search-results svg {
  width: 100%;
}
.top-menu-search .top-menu-search-results .text-preview {
  display: grid;
  grid-template-columns: 36px 1fr;
  color: #333333;
  text-decoration: none;
  transition: color 200ms, background-color 300ms, padding 200ms;
  margin: 0;
  padding: 0 6px;
  align-items: center;
  user-select: none;
  cursor: default;
}
.top-menu-search .top-menu-search-results .text-preview .search-content {
  display: contents;
}
.top-menu-search .top-menu-search-results .text-preview .search-content .content-paragraph {
  padding: 0;
}
.top-menu-search .top-menu-search-results .text-preview .search-hit-context {
  word-break: break-all;
  word-break: break-word;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  max-height: 64px;
  grid-column: 2;
  text-align: left;
  margin: 6px;
}
.top-menu-search .top-menu-search-results .text-preview .search-hit-date {
  grid-column: 2;
  white-space: nowrap;
  font-style: italic;
  text-align: right;
  font-variant: all-petite-caps;
}
.top-menu-search .top-menu-search-results .text-preview .task-icon {
  margin-right: 12px;
  font-size: 24px;
  margin: auto;
  -webkit-text-stroke: 1.5px black;
  color: transparent;
}
.top-menu-search .top-menu-search-results .text-preview p {
  display: none;
}
.top-menu-search .top-menu-search-results .text-preview p.has-highlight {
  word-break: break-all;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  grid-column: span 2;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 24px;
  margin: 6px;
}
.top-menu-search .top-menu-search-results .text-preview svg {
  justify-self: center;
  margin: auto;
}
.top-menu-search .top-menu-search-results .text-preview:nth-child(odd) {
  background-color: #f4f6f6;
}
.top-menu-search .top-menu-search-results .text-preview:hover {
  background-color: #3ebfc2;
  color: white;
  white-space: normal;
}
.top-menu-search .top-menu-search-results .text-preview:hover p {
  -webkit-line-clamp: 5;
}
.incoming-video-call {
  animation: shake 0.8s 10 ease;
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 50000;
  width: 310px;
  height: 135px;
  background-color: #ffffff;
  padding: 4px 18px 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  clear: both;
  display: flex;
  flex-direction: column;
  text-align: center;
  box-shadow: 0 6px 12px 0 rgba(138, 146, 146, 0.2);
}
.incoming-video-call .incoming-video-call-title {
  margin-top: auto;
  font-family: 'Poppins';
  font-size: 14px;
  font-weight: bold;
  word-break: break-all;
  word-break: break-word;
}
.incoming-video-call .incoming-video-call-timer {
  margin: 6px auto;
}
.incoming-video-call .incoming-video-call-button-container {
  margin-bottom: auto;
  display: flex;
  justify-content: space-evenly;
  margin-top: 6px;
  clear: both;
}
.incoming-video-call .incoming-video-call-button-container .join-incoming-call-button,
.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);
  }
}
.activity-items .unread.activity-item {
  background-color: #d6eff2;
}
.activity-items .read.activity-item {
  background-color: white;
}
.activity-items .unread.activity-item:hover .activity-icon,
.activity-items .read.activity-item:hover .activity-icon {
  transform: scale(1.2);
}
.activity-items .activity-item {
  border-bottom: 1px solid #cccccc;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-items .activity-item .activity-item-link,
.activity-items .activity-item button {
  border: none;
  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;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  padding: 6px 12px;
  text-decoration: none;
}
.activity-items .activity-item .activity-item-link::-moz-focus-inner,
.activity-items .activity-item button::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.activity-items .activity-icon {
  padding-right: 12px;
  transition: transform 200ms;
}
.activity-items .activity-icon .task-icon {
  -webkit-text-stroke: 1.5px black;
  color: transparent;
  font-size: 30px;
}
.activity-items .activity-icon svg {
  height: 30px;
  width: 30px;
}
.activity-items .activity-content {
  overflow: hidden;
}
.activity-items .activity-title {
  color: #555555;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-wrap;
  word-break: break-all;
  word-break: break-word;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
}
.activity-items .activity-message {
  color: #333333;
  text-overflow: ellipsis;
  white-space: pre-wrap;
  word-break: break-all;
  word-break: break-word;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.activity-items .activity-context {
  color: #555555;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-wrap;
  word-break: break-all;
  word-break: break-word;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
}
.activity-items time::before {
  content: '\B7';
  padding-left: 6px;
  padding-right: 6px;
}
.activity-items .activity-loader {
  text-align: center;
}
.top-menu-search .activity-actions {
  display: flex;
  border-bottom: 1px solid black;
  font-size: 12px;
  text-align: center;
}
.top-menu-search .activity-button {
  border: 1px solid black;
  background-color: #d6eff1;
  font-size: 12px;
  padding: 6px;
  margin: 12px;
  border-radius: 6px;
}
.top-menu-search .activity-view {
  padding: 6px;
  margin: 12px;
  border-radius: 6px;
  cursor: pointer;
}
.top-menu-search .activity-view.selected {
  text-decoration: underline;
  font-weight: 600;
}
.top-menu-search .activity-items .activity-button:hover {
  background-color: #d6eff2;
}
.activity-actions {
  border-bottom: 1px solid #cccccc;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.activity-actions .tab-list {
  place-content: space-evenly;
}
.activity-actions .call-to-action-item {
  white-space: nowrap;
  height: fit-content;
  margin: auto;
}
.activity-items .activity-button:hover {
  background-color: #d6eff2;
}
.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%;
}
#app > header {
  background: transparent;
  flex: 0 0;
}
.error-page {
  width: 100%;
  padding: 12px;
  margin: 0 auto;
  text-align: center;
}
.error-page .text-danger {
  color: #ef5455;
}
.error-page .fa-ghost {
  color: #3ebfc2;
}
.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-content {
  display: flex;
  height: calc(100% - 52px);
  width: 100%;
}
#main .fullscreen {
  width: 100%;
}
@media screen and (max-width: 750px) {
  #main .right-side-bar {
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100% - 52px);
  }
  #main .right-side-bar.collapsed {
    margin-left: 100%;
  }
}
#main > nav:not(.left-side-bar) {
  background: #333333;
  color: white;
  transition: margin 250ms;
  flex: 0 0 280px;
  max-width: 280px;
}
#main > nav:not(.left-side-bar).collapsed {
  margin-left: -140px;
  margin-right: -140px;
  transition: margin 500ms;
}
#main > section {
  background: white;
  flex: 1 1 auto;
  position: relative;
  width: 100%;
}
#main > aside {
  background: #3ebfc2;
  flex: 0 0 280px;
  transition: margin 250ms;
}
#main > aside.collapsed {
  margin-right: -280px;
  transition: margin 250ms;
}
.scrollable-sidebar {
  flex-shrink: 1;
  overflow-y: auto;
  padding-bottom: 12px;
}
.fixed-section {
  height: 100%;
}
.scroll-section {
  height: 100%;
  overflow-y: scroll;
}
.scroll-section > * {
  max-width: 820px;
  margin: 0 auto;
}
.zEWidget-launcher,
#launcher {
  left: -12px !important;
  display: none;
}
.faux-app-loader {
  position: absolute;
  font-size: 80px;
  top: 40%;
  width: 100%;
  text-align: center;
}
.faux-app-loader .loader-text {
  font-size: 24px;
  margin-top: 24px;
}
#squad-layout {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 60px minmax(250px, 20%) auto min-content;
  overflow: hidden;
}
#squad-layout.chat-collapsed .main-content {
  grid-column: span 2;
}
#squad-layout.chat-collapsed .side-chat {
  display: none;
}
#squad-layout.menu-collapsed .list-menu {
  display: none;
  width: 0;
}
#squad-layout.menu-collapsed .main-content {
  grid-column: span 2;
}
#squad-layout.main-only,
#squad-layout.menu-only {
  grid-template-columns: 60px auto;
}
#squad-layout.main-only .side-chat,
#squad-layout.menu-only .side-chat {
  display: none;
}
#squad-layout.main-only .list-menu {
  display: none;
}
#squad-layout.menu-only .main-content {
  display: none;
}
#squad-layout .side-bar-nav {
  width: 60px;
  z-index: 2;
}
#squad-layout .list-menu {
  width: 100%;
  height: 100vh;
  position: relative;
  z-index: 0;
}
#squad-layout .slide-menu {
  position: absolute;
  left: 60px;
  overflow: hidden;
  background-color: white;
  min-width: 250px;
  max-width: 20%;
  width: 100%;
  height: 100vh;
  z-index: 2;
  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;
}
#squad-layout .main-content .main-content-margin {
  margin-left: 24px;
  margin-right: 24px;
  margin-top: 24px;
}
#squad-layout .side-chat {
  position: relative;
  transition: width 500ms;
  height: 100vh;
  width: 25vw;
  max-width: 550px;
}
@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: 0;
  }
}
@media screen and (max-width: 430px) {
  #squad-layout.main-only,
  #squad-layout.menu-only {
    grid-template-columns: auto;
  }
  #squad-layout.main-only .side-bar-nav,
  #squad-layout.menu-only .side-bar-nav {
    position: absolute;
    height: 100vh;
    margin-left: -52px;
    background-color: transparent;
  }
  #squad-layout.main-only .side-bar-nav:hover,
  #squad-layout.menu-only .side-bar-nav:hover {
    margin-left: 0px;
    background-color: #333333;
  }
  #squad-layout.main-only .slide-menu,
  #squad-layout.menu-only .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;
  }
}
.post-create-walkthrough {
  position: fixed;
  top: 0;
  z-index: 1;
  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;
}
.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: 600px;
  margin: 12px;
}
.invite-accept-carousel-modal .carousel-card-image {
  width: 200px;
  height: 200px;
}
.signup-wrapper {
  width: 100%;
  display: grid;
  grid-template-columns: 2fr 3fr;
}
.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-description {
  font-size: 18px;
  text-align: center;
  margin: 24px 0;
}
.network-issue .network-issue-actions .call-to-action-item {
  margin: auto;
}
#incompatible-browser {
  text-align: center;
}
#incompatible-browser .call-to-action-item {
  margin: 6px;
}
#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/login-background.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;
  }
  .info-section {
    display: none;
  }
}
.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 .call-to-action-item {
  white-space: nowrap;
}
.style-guide-controls .style-guide-control-list .call-to-action-item .fa {
  font-size: unset;
}
.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;
}
.invite-link-modal .invite-link-text {
  margin: 24px 0;
  font-size: 16px;
  text-align: center;
}
.invite-link-modal .invite-link-ignore {
  margin-top: 12px;
  text-align: center;
}
#team-picker {
  user-select: none;
}
#team-picker h1,
#team-picker h2 {
  display: block;
  font-weight: 300;
  text-align: center;
}
#team-picker h1 {
  font-family: 'Poppins', Arial, sans-serif;
  color: #333333;
  font-size: 32px;
  margin: auto;
  clear: both;
}
#team-picker h2 {
  font-family: 'Poppins', Arial, sans-serif;
  color: #555555;
  font-size: 23px;
  margin: 24px auto;
}
#team-picker .team-picker-info {
  text-align: center;
  font-family: 'Poppins', Arial, sans-serif;
}
#team-picker .team-list-item-action {
  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;
  display: grid;
  grid-template-columns: 36px auto;
  grid-gap: 10px;
  text-decoration: none;
  max-width: 100%;
}
#team-picker .team-list-item-action::-moz-focus-inner {
  border: 0;
  padding: 0;
}
#team-picker .ellipsis-wrap {
  padding-left: 6px;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 385px;
  white-space: nowrap;
  display: block;
  font-size: 18px;
  line-height: 36px;
}
#team-picker img {
  float: left;
}
#team-picker ul.team-list {
  margin: 36px 0;
}
#team-picker ul.team-list .create-squad {
  position: relative;
  z-index: 20;
}
#team-picker ul.team-list li:last-of-type {
  padding-bottom: 6px;
}
#team-picker .team-list-item {
  margin: 18px 0;
  position: relative;
  display: flex;
  justify-content: space-between;
}
#team-picker .team-list-item.invite {
  display: grid;
  grid-template-columns: auto 125px;
  align-items: center;
}
#team-picker .inline-control-list {
  position: relative;
  top: 6px;
}
#team-picker i.fa-spinner {
  width: 100%;
  text-align: center;
  font-size: 100px;
}
#team-create .team-create-title {
  text-align: center;
  font-size: 1.5em;
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 100;
  text-decoration: none;
  font-family: 'Poppins', Arial, sans-serif;
}
#team-create .team-create-title-success {
  text-align: center;
  color: #3ebfc2;
  font-size: 1.5em;
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 100;
  text-decoration: none;
  font-family: 'Poppins', Arial, sans-serif;
}
#team-create .team-create-name-info {
  text-align: center;
  margin: 24px 0;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  font-family: 'Poppins', Arial, sans-serif;
}
#team-create .team-create-invite-info {
  text-align: center;
  font-family: 'Poppins', Arial, sans-serif;
}
#team-create .team-create-actions {
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24px;
}
#team-create .call-to-action-item {
  margin: 12px;
  flex-basis: 0;
  flex-grow: 1;
  width: 0;
}
#team-create .team-create-input input {
  font-weight: 600;
  color: #3ebfc2;
}
#team-create .invite-link-copy-wrapper {
  margin: 12px 0 24px;
}
.profile-details-page {
  background-color: #ffffff;
  padding: 24px;
}
table.invitation-list {
  top: 48px;
  width: 80vw;
  position: absolute;
  table-layout: auto;
}
table.invitation-list tr th {
  white-space: nowrap;
}
table.invitation-list tr th:nth-of-type(1) {
  width: 12px;
}
table.invitation-list tr th:nth-of-type(2) {
  text-align: left;
}
table.invitation-list tr td {
  padding: 0 6px;
  white-space: nowrap;
}
table.invitation-list tr td .call-to-action-item {
  margin: 0;
}
table.invitation-list tr td:nth-of-type(2) {
  text-align: left;
}
table.invitation-list tr td:nth-of-type(6),
table.invitation-list tr td:nth-of-type(7) {
  padding: 0;
}
table.invitation-list tr td .email-cell-text {
  cursor: pointer;
}
table.invitation-list tr td .alias-cell-text {
  cursor: pointer;
  color: #3ebfc2;
}
table.invitation-list .invite-send-status {
  font-size: 12px;
  margin-top: 2px;
  text-transform: capitalize;
}
table.invitation-list .invite-send-status.sent {
  color: #3ebfc2;
}
table.invitation-list .invite-send-status.failed {
  color: #ef5455;
}
table.invitation-list .invitation-cell-role-dropdown {
  max-width: 120px;
  margin: auto;
}
table.invitation-list .status,
.expanded-invitation-dialog .status {
  display: block;
  color: white;
  cursor: default;
  padding: 6px 12px;
  text-align: center;
  user-select: none;
  opacity: 0.7;
  text-overflow: ellipsis;
  overflow: hidden;
  transition: background-color 200ms;
  white-space: nowrap;
  border-radius: 12px;
  width: 100px;
}
table.invitation-list .status:not(:first-of-type),
.expanded-invitation-dialog .status:not(:first-of-type) {
  margin-left: 6px;
}
table.invitation-list .status.affirmative,
.expanded-invitation-dialog .status.affirmative,
table.invitation-list .status.sent,
.expanded-invitation-dialog .status.sent {
  background-color: #00960a;
}
table.invitation-list .status.negative,
.expanded-invitation-dialog .status.negative,
table.invitation-list .status.failed,
.expanded-invitation-dialog .status.failed {
  background-color: #ef5455;
}
table.invitation-list .status.neutral,
.expanded-invitation-dialog .status.neutral,
table.invitation-list .status.pending,
.expanded-invitation-dialog .status.pending {
  background-color: #3ebfc2;
}
table.invitation-list .status.dismissed,
.expanded-invitation-dialog .status.dismissed {
  background-color: #555555;
}
.invitations-page {
  display: flex;
  flex-direction: column;
  place-content: center;
}
.invitations-page .call-to-action-item {
  margin-right: auto;
}
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 12px;
  margin: auto;
}
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .header {
  font-size: 1.5em;
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 100;
  text-decoration: none;
  text-align: center;
}
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-alias-field,
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-status-field,
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-sent-date-field,
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-accept-date-field,
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-role-field {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-auto-rows: 24px;
  grid-gap: 6px;
  align-items: center;
}
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-alias-field .dropdown-control,
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-status-field .dropdown-control,
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-sent-date-field .dropdown-control,
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-accept-date-field .dropdown-control,
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-role-field .dropdown-control {
  width: 100px;
}
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-alias-field input,
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-status-field input,
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-sent-date-field input,
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-accept-date-field input,
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-role-field input {
  padding: 6px;
  width: 50%;
  border-radius: 6px;
  border: 1px solid #cccc;
}
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-alias-field label,
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-status-field label,
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-sent-date-field label,
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-accept-date-field label,
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-role-field label {
  font-weight: 700;
  margin: 3px 6px 0 auto;
}
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-alias-field .alias-content,
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-status-field .alias-content,
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-sent-date-field .alias-content,
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-accept-date-field .alias-content,
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-role-field .alias-content {
  display: flex;
  align-items: baseline;
}
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-alias-field .alias-content .alias-read-only,
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-status-field .alias-content .alias-read-only,
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-sent-date-field .alias-content .alias-read-only,
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-accept-date-field .alias-content .alias-read-only,
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-role-field .alias-content .alias-read-only {
  word-break: break-word;
  max-height: 36px;
  overflow: auto;
}
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-alias-field .alias-content.editing,
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-status-field .alias-content.editing,
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-sent-date-field .alias-content.editing,
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-accept-date-field .alias-content.editing,
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-role-field .alias-content.editing {
  display: grid;
  grid-template-columns: auto 24px 24px;
}
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-alias-field .alias-content.editing input,
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-status-field .alias-content.editing input,
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-sent-date-field .alias-content.editing input,
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-accept-date-field .alias-content.editing input,
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .expanded-invite-role-field .alias-content.editing input {
  width: 100%;
}
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .resend-button {
  grid-column: 1;
}
.confirm-modal.expanded-invitation-modal .expanded-invitation-dialog .revoke-button {
  grid-column: 2;
}
.member-filter {
  display: flex;
  color: #555555;
}
.member-filter label,
.member-filter input {
  display: block;
}
.member-filter label {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
}
.member-filter input {
  background: url('/assets/search-icon.svg') 10px center no-repeat transparent !important;
  border: 1px solid #cccccc;
  border-radius: 6px;
  font-size: 14px;
  margin: 6px 0;
  padding: 6px 12px 6px 36px;
}
.member-profile {
  height: 100%;
  flex: 1;
}
.member-profile .scrollable-page-sticky-header {
  height: 209px;
}
.member-profile .profile-header {
  background: #3ebfc2;
  display: block;
  margin-top: 0;
}
.member-profile .profile-header .profile-header-content {
  display: block;
  height: 130px;
  position: relative;
}
.member-profile .profile-header h1 {
  bottom: 0;
  color: white;
  font-family: helvetica;
  font-size: 36px;
  font-weight: 100;
  left: 168px;
  margin-bottom: 6px;
  position: absolute;
}
.member-profile .profile-header .editable {
  font-size: 100px;
  margin: 24px;
}
.member-profile .profile-header img,
.member-profile .profile-header label {
  background-color: white;
  height: 150px;
  width: 150px;
  -webkit-border-radius: 77px;
  -moz-border-radius: 77px;
  border-radius: 77px;
}
.member-profile .profile-header img.avatar,
.member-profile .profile-header label.avatar,
.member-profile .profile-header img.avatar-editor,
.member-profile .profile-header label.avatar-editor {
  left: 0;
  position: absolute;
  top: 53px;
  border: 4px solid white;
}
.member-profile p {
  margin: 0 0 6px 0;
}
.member-profile fieldset {
  border: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
.member-profile label {
  display: block;
}
.member-profile span.dt,
.member-profile span.dd,
.member-profile input,
.member-profile textarea,
.member-profile .content-editor {
  line-height: 20px;
  margin: 3px 0;
  vertical-align: top;
}
.member-profile span.dt {
  display: inline-block;
  font-size: 11px;
  padding: 5px 18px 0 0;
  text-align: right;
  text-transform: uppercase;
  width: 150px;
}
.member-profile span.dd,
.member-profile input,
.member-profile textarea,
.member-profile .content-editor {
  cursor: text;
  display: inline-block;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  min-height: 20px;
  padding: 3px;
  width: 75%;
}
.member-profile textarea,
.member-profile .content-editor {
  min-height: 150px;
  resize: vertical;
}
.member-profile input,
.member-profile textarea,
.member-profile .content-editor {
  border: 1px solid #cccccc;
}
.member-profile span.dd {
  border: 1px solid white;
}
.member-profile .control-list {
  margin-top: 24px;
  margin-left: 168px;
}
.member-profile .control-list li {
  display: inline-block;
  margin-right: 12px;
}
.member-profile .control-list .call-to-action-item {
  min-width: 100px;
}
.member-profile .update-profil-error {
  margin-left: 170px;
  color: #ef5455;
  font-size: 12px;
}
.member-profile input.invalid {
  border-color: #ef5455;
}
.users-view.scroll-section label,
.profile-view.scroll-section label {
  display: block;
  margin-right: 12px;
}
.users-view.scroll-section label input,
.profile-view.scroll-section label input,
.users-view.scroll-section label textarea,
.profile-view.scroll-section label textarea {
  display: block;
  width: 400px;
}
.users-view.scroll-section label,
.profile-view.scroll-section label {
  margin: 12px;
}
.users-view.scroll-section form,
.profile-view.scroll-section form {
  width: 100%;
}
.users-view.scroll-section button,
.profile-view.scroll-section button {
  padding: 12px;
}
img.avatar {
  height: 50px;
  width: 50px;
}
.handles .wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
}
.handles .wrapper .option {
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.handles .wrapper .seperator {
  align-items: center;
  display: flex;
  position: relative;
  margin-top: 6px;
}
.handles .wrapper .seperator .seperator-line {
  border-bottom: 1px solid #333333;
  margin: 0;
  position: absolute;
  width: 100%;
}
.handles .wrapper .seperator .seperator-text {
  background: white;
  margin: 0 auto;
  padding: 0 6px;
  z-index: 1;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
}
.handles img.avatar {
  height: 50px;
  width: 50px;
}
.handles .wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
}
.handles .wrapper .option {
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.handles .wrapper .seperator {
  align-items: center;
  display: flex;
  position: relative;
  margin-top: 6px;
}
.handles .wrapper .seperator .seperator-line {
  border-bottom: 1px solid #333333;
  margin: 0;
  position: absolute;
  width: 100%;
}
.handles .wrapper .seperator .seperator-text {
  background: white;
  margin: 0 auto;
  padding: 0 6px;
  z-index: 1;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
}
.handles img.avatar {
  height: 50px;
  width: 50px;
}
.chat-room {
  height: 100%;
}
.chat-room .chat-room-banner {
  background: #3ebfc2;
  color: white;
  font-weight: 700;
}
.chat-room .chat-room-nav {
  display: grid;
  grid-template-columns: 1fr 7fr 1fr 1fr;
  justify-items: center;
  padding: 6px;
  background: white;
  border-bottom: 1px solid #cccccc;
}
.chat-room .chat-room-nav .chat-heading {
  display: grid;
  grid-template-columns: 40px auto;
  grid-gap: 6px;
  line-height: 36px;
}
.chat-room .chat-room-nav .chat-heading .chat-name {
  word-break: break-all;
  word-break: break-word;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 18px;
  margin: auto;
}
.chat-room .chat-room-nav .go-back-button {
  cursor: pointer;
  line-height: 36px;
  width: 100%;
  text-align: center;
  font-size: 16px;
}
.chat-room .chat-room-nav .direct-call {
  line-height: 12px;
}
.chat-room .chat-room-nav .callout-button {
  width: 100%;
}
.chat-room .chat-room-nav .go-back-button:hover,
.chat-room .chat-room-nav .callout-button:hover {
  color: #3ebfc2;
}
.chat-room .chat-sub-header {
  font-size: 18px;
  text-align: right;
}
.chat-room .chat-sub-header i {
  padding: 6px 12px;
  cursor: pointer;
}
.chat-room .chat-sub-header i:hover {
  color: #3ebfc2;
}
.chat-room .old-messages-loader {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 200;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  margin: 6px 0 12px;
  padding-bottom: 0;
}
form.new-chat-message {
  width: 100%;
  position: relative;
  margin-bottom: 0;
}
form.new-chat-message .content-editor {
  border: 1px solid #cccccc;
  display: block;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  height: 74px;
  margin: 0;
}
form.new-chat-message .content-editor .DraftEditor-root .DraftEditor-editorContainer,
form.new-chat-message .content-editor .public-DraftEditorPlaceholder-root {
  width: 100%;
  height: 100%;
}
form.new-chat-message .content-editor .DraftEditor-root .DraftEditor-editorContainer .public-DraftEditorPlaceholder-inner,
form.new-chat-message .content-editor .public-DraftEditorPlaceholder-root .public-DraftEditorPlaceholder-inner,
form.new-chat-message .content-editor .DraftEditor-root .DraftEditor-editorContainer .public-DraftEditor-content,
form.new-chat-message .content-editor .public-DraftEditorPlaceholder-root .public-DraftEditor-content {
  height: calc(100% - 24px);
  padding: 12px;
}
form.new-chat-message .content-editor.is-dragging {
  border: 2px dashed #cccccc;
}
form.new-chat-message .content-editor.error {
  border-color: #ef5455;
}
form.new-chat-message .input-error {
  text-align: center;
  margin-top: 6px;
  color: #ef5455;
  font-size: 12px;
}
form.new-chat-message.disabled {
  pointer-events: none;
  opacity: 0.5;
}
ul.composer-controls {
  height: 40px;
  align-items: center;
  background-color: #f4f6f6;
  border: 1px solid #cccccc;
  border-top: none;
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  padding: 0 6px;
}
ul.composer-control-list {
  display: flex;
}
li.composer-control-list-item button {
  border: none;
  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;
  cursor: pointer;
  padding: 0 6px;
}
li.composer-control-list-item button::-moz-focus-inner {
  border: 0;
  padding: 0;
}
li.composer-control-list-item button:disabled {
  opacity: 0.5;
  cursor: default;
}
ol.chat-messages {
  flex: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100%;
  margin-left: 24px;
  margin-right: 6px;
}
ol.chat-messages .date-divider {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 200;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
  text-decoration: underline;
  margin: 24px 0 6px;
  text-align: 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: 3px;
}
.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 .preview-container {
  grid-template-columns: 1fr;
  margin: 6px 0;
}
.chat-message .chat-message-body .preview-container .footnote {
  margin-top: 6px;
}
.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 .content-preview {
  max-height: 400px;
  margin: 0 auto;
}
.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 .chat-message-body .preview-container {
  background-color: white;
}
.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 3px;
  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-rooms-page {
  overflow-x: hidden;
}
.chat-rooms-page .add-chat-room {
  display: flex;
  place-content: center;
}
.chat-rooms-page .scrollable-page-sticky-header {
  display: flex;
  flex-direction: column;
  place-content: center;
  width: calc(100% - 12px);
  margin: 12px 6px 6px;
}
.chat-rooms-page .scrollable-page-sticky-header .inline-control-list .control-list-item.dropdown-control {
  width: 100%;
}
.chat-rooms-page .scrollable-page-sticky-header .inline-control-list .control-list-item.dropdown-control .dropdown-control-list {
  width: calc(100% - 12px);
}
.chat-rooms-page .scrollable-page-sticky-header .inline-control-list .control-list-item.dropdown-control .dropdown-control-list .icon {
  place-content: center;
}
.chat-rooms-page .scrollable-page-sticky-header h1 {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 28px;
  font-weight: 100;
  text-align: center;
}
.chat-rooms-page .filter-container {
  display: flex;
  margin: auto;
  width: fit-content;
  width: -moz-fit-content;
}
.chat-rooms-page .filter-container .tooltip-button.hidden {
  opacity: 0;
  pointer-events: none;
}
.chat-rooms-page .tab-list-item {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 200;
  letter-spacing: 1.2px;
  text-decoration: none;
  font-size: 10px;
  letter-spacing: 1px;
}
.chat-rooms-page .chat-room-list {
  width: 100%;
  padding-top: 0;
}
.chat-rooms-page .chat-room-list:last-child {
  padding-bottom: 24px;
}
.chat-rooms-page .chat-room-list .with-overlay {
  padding-bottom: 150px;
}
.chat-rooms-page .chat-room-list .card-star-icon {
  font-weight: 900;
  margin: 0;
  cursor: pointer;
  position: relative;
  transition: color 200ms;
}
.chat-rooms-page .chat-room-list .card-star-icon.no-fill {
  color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;
}
.chat-rooms-page .chat-room-list .card-star-icon.no-fill:hover {
  -webkit-text-stroke-color: #3ebfc2;
}
.chat-rooms-page .chat-room-list .card-star-icon:hover {
  color: #3ebfc2;
}
.chat-rooms-page .start-direct-chat-list:last-child {
  padding-bottom: 24px;
}
.chat-rooms-page .start-direct-chat-item {
  font-size: 18px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 100;
  text-decoration: none;
  display: grid;
  grid-template-columns: 50px auto;
  grid-gap: 6px;
  padding: 12px 24px;
  margin: 0;
  border-top: 1px solid #cccccc;
  height: 60px;
  cursor: pointer;
}
.chat-rooms-page .start-direct-chat-item:hover {
  background-color: #f4f6f6;
}
.chat-rooms-page .start-direct-chat-item div {
  margin: auto 0;
}
.chat-rooms-page .chat-room-loader {
  text-align: center;
  display: block;
  font-size: 12px;
}
.chat-rooms-page .chat-room-list-item {
  padding: 6px 0 0;
  cursor: pointer;
  background: white;
  border-bottom: 1px solid #cccccc;
  transition: background 150ms ease-in;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
.chat-rooms-page .chat-room-list-item .card-star-icon {
  cursor: pointer;
}
.chat-rooms-page .chat-room-list-item .card-star-icon.no-fill {
  visibility: hidden;
}
.chat-rooms-page .chat-room-list-item:hover .no-fill {
  visibility: visible;
}
.chat-rooms-page .chat-room-list-item.unread {
  background: #d6eff2;
}
.chat-rooms-page .chat-room-list-item:hover {
  background-color: #f4f6f6;
}
.chat-rooms-page .chat-room-list-item:last-of-type {
  border-bottom: none;
}
.chat-rooms-page .chat-room-list-item .chat-room-list-item-header {
  display: grid;
  grid-template-columns: 25px 50px auto 25px;
  margin: 6px 0;
  max-height: 60px;
}
.chat-rooms-page .chat-room-list-item .chat-room-list-item-header .chat-favorite-button {
  font-size: 14px;
  padding: 0;
  margin: 0;
  height: 18px;
}
.chat-rooms-page .chat-room-list-item .chat-room-list-item-header .subscription-tier .tooltip-button {
  padding: unset;
  margin: unset;
}
.chat-rooms-page .chat-room-list-item .chat-room-list-item-body {
  display: flex;
  flex-direction: column;
  margin: 6px 0;
  overflow: hidden;
}
.chat-rooms-page .chat-room-list-item a {
  align-items: center;
  color: #333333;
  display: flex;
  text-decoration: none;
}
.chat-rooms-page .chat-room-list-item h2 {
  font-size: 18px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 100;
  text-decoration: none;
  overflow-y: auto;
  margin: auto;
  margin-left: 6px;
  height: fit-content;
  max-height: 100px;
  padding: 0;
  word-break: break-all;
  word-break: break-word;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.chat-rooms-page .chat-room-list-item time {
  white-space: nowrap;
}
.chat-rooms-page .chat-room-list-item span.chat-room-list-subheader {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 200;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
  display: block;
  text-align: right;
  margin: 6px 0 0;
  white-space: nowrap;
}
.chat-rooms-page .chat-room-list-item span.chat-room-list-item-text {
  color: #555555;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  word-break: break-all;
  word-break: break-word;
  padding: 0;
  margin: 0 6px;
}
.chat-rooms-page .chat-room-list-item span.chat-room-list-item-text .chat-room-list-item-preview-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-left: 6px;
}
.chat-rooms-page .chat-room-list-item span.chat-room-list-item-text time.separator::before {
  content: '\B7';
  padding-right: 6px;
  padding-left: 6px;
}
.chat-rooms-page .chat-room-create label {
  display: block;
  margin: 12px 0;
}
.chat-rooms-page .chat-room-create input {
  margin: 6px 0;
}
.chat-rooms-page .chat-room-create .chat-room-input {
  border: 1px solid #cccccc;
  display: block;
  font-size: 16px;
  padding: 6px;
  width: 250px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.chat-rooms-page .chat-room-create .control-list li {
  display: inline-block;
  margin-right: 12px;
}
.chat-rooms-page .chat-room-create .call-to-action-item {
  margin-right: 6px;
}
.chat-rooms-page .calls-to-action {
  padding-bottom: 48px;
}
.chat-rooms-page .calls-to-action .call-to-action-item {
  margin: 0 auto;
}
.chat-files .chat-upload-file-button {
  margin: 6px;
  padding: 0 24px;
}
.chat-files td .expanded-file .labeled-content-container {
  text-align: left;
  display: block;
}
.chat-files td .expanded-file .labeled-content-container .labeled-content {
  margin: 6px 18px 6px;
}
.chat-files .editable-text {
  display: flex;
}
.chat-files .editable-text .button-container {
  white-space: nowrap;
  left: 0;
  display: block;
}
.chat-files .file-drop-hint {
  display: none;
  border: 2px dashed #cccccc;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  border-radius: 24px;
}
.chat-files.file-hovering .file-drop-hint {
  display: block;
  position: absolute;
  top: 12px;
  right: 12px;
  bottom: 12px;
  left: 12px;
}
.chat-files table {
  width: 100%;
  display: inline-table;
}
.chat-files .file-list .primary {
  width: 9001px;
}
.chat-users .member-selector {
  margin-bottom: 18px;
}
.chat-users .member-selector .member-selector-filter {
  width: 100%;
}
.chat-users-list {
  margin: 12px 0;
}
.chat-users-list .member-list-item a {
  padding: 12px 0 18px;
}
.chat-users-list .member-list-item .member-list-item-body {
  position: absolute;
  right: 6px;
}
.chat-users-list .member-list-item .member-list-item-body .inline-control-list .tool-tip-buttons {
  display: flex;
  margin: 0;
  justify-content: center;
}
.chat-users-list .chat-users-item-icons {
  position: relative;
  float: right;
  display: inline-grid;
  grid-template-columns: 2fr;
}
.chat-users-list .chat-users-item-icons .button-main.readonly {
  background-color: #3ebfc2;
  color: white;
  border: none;
}
.chat-users-list .dropdown-control,
.chat-users-list .tag-control {
  clear: both;
  float: left;
}
.chat-users-list .tooltip-button {
  cursor: pointer;
  margin: 0;
}
.chat-new .chat-header {
  height: 85px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  border-bottom: 1px solid #cccccc;
  background-color: #ffffff;
}
.chat-new .chat-create {
  border-top: 1px solid #cccccc;
}
.chat-new .chat-messages-new {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  min-height: 100%;
  padding: 6px 12px 0;
  background-color: #ffffff;
  overflow-x: hidden;
}
.chat-new .chat-messages-new .date-divider {
  font-size: 12px;
  text-align: center;
  color: #333333;
  margin: 12px 0;
}
.chat-new .chat-message-new .chat-message-layout {
  position: relative;
  display: grid;
  grid-gap: 6px;
}
.chat-new .chat-message-new .chat-message-body-new {
  position: relative;
  padding: 12px;
  overflow-wrap: break-word;
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  border-radius: 18px;
  word-break: break-all;
  word-break: break-word;
  width: fit-content;
  display: grid;
}
.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: -8px;
  padding: 3px;
  background-color: white;
  border-radius: 6px;
  box-shadow: 2px 2px 2px #8a9292;
}
.chat-new .chat-message-new .chat-message-footer {
  display: flex;
  color: #888888;
  margin-top: 2px;
  font-size: 12px;
  grid-column: span 2;
}
.chat-new .chat-message-new .chat-message-footer .message-footer-separator {
  margin: 0 4px;
}
.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:not(.self) .chat-message-layout {
  grid-template-columns: 30px auto min-content;
  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) .new-message-image {
  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-footer,
.chat-new .chat-message-new:not(.self) .chat-message-menu {
  justify-content: flex-start;
}
.chat-new .chat-message-new:not(.self) .user-mention,
.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: min-content 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 .new-message-image {
  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-footer,
.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: 6px;
}
.chat-new .chat-message-file .new-message-image {
  max-width: 100%;
  object-fit: cover;
  border-radius: 12px;
}
.chat-new .chat-message-file .new-message-image:not(.loading) {
  height: 170px;
}
.chat-new .chat-message-file .attachment-unpreviewable {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100px;
  height: 100px;
  color: #ffffff;
  background-color: #333333;
  border-radius: 12px;
  cursor: pointer;
}
.chat-new .notice-message {
  display: flex;
  justify-content: center;
  color: #8a9292;
  font-size: 12px;
  margin: 6px auto;
}
.chat-new .notice-message .user-mention {
  color: #3ebfc2;
}
.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-new .message-editor-advanced {
    height: 173px;
  }
  .chat-new .giphy-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  .chat-new .giphy-grid .giphy img {
    height: 100px;
  }
}
.chat-page .chat-header,
.chat-page .chat-details {
  border-top-left-radius: 12px;
}
.right-side-bar,
.full-page-chat {
  flex: 0 0 auto;
  width: 30%;
  background-color: white;
  z-index: 200;
  transition: margin 500ms;
  border-left: 1px solid #cccccc;
}
.right-side-bar.full-page-chat,
.full-page-chat.full-page-chat {
  width: 100%;
  overflow: hidden;
}
.right-side-bar .text-filter,
.full-page-chat .text-filter {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  background: url(/assets/search-icon.svg) 10px center no-repeat transparent;
  padding: 6px 6px 6px 36px;
  margin: 6px;
  border-radius: 6px;
  border: 1px solid #cccccc;
  width: calc(100% - 12px);
}
.right-side-bar.collapsed,
.full-page-chat.collapsed {
  margin-right: -30%;
  border-left: none;
}
.right-side-bar.collapsed .add-chat-room,
.full-page-chat.collapsed .add-chat-room {
  margin-right: -32%;
}
.channel-categories {
  /**************************|
  |**     Page Header      **|
  |**************************/
  /**************************|
  |**   Category   **|
  |**************************/
  /**************************|
  |**  Card Border Style   **|
  |**************************/
  /**************************|
  |**   Channel Content    **|
  |**************************/
  /**************************|
  |**  New Bolster Style   **|
  |**************************/
}
.channel-categories .channel-view-panel {
  display: grid;
  grid-template-columns: 300px 1fr;
}
.channel-categories .channel-view-panel .tooltip-button {
  padding: 6px;
  margin-left: 6px;
  border: 1px solid transparent;
}
.channel-categories .channel-view-panel .tooltip-button:hover {
  border: 1px solid #333333;
}
.channel-categories .channel-view-panel .tooltip-button.clicked {
  border: 1px solid #3ebfc2;
  color: #3ebfc2;
}
.channel-categories .channel-view-panel div {
  margin: auto 0;
}
.channel-categories table {
  width: 100%;
}
.channel-categories table tr.unread {
  background-color: #d6eff2;
}
.channel-categories table th {
  padding: 0;
}
.channel-categories table th:nth-of-type(1) {
  width: 70px;
}
.channel-categories table th:nth-of-type(2) {
  min-width: 140px;
  text-align: left;
  padding-left: 0;
}
.channel-categories table th:nth-of-type(4) {
  min-width: 140px;
}
.channel-categories table th:nth-of-type(5) {
  width: 80px;
}
.channel-categories table td:nth-of-type(1) {
  white-space: nowrap;
}
.channel-categories table td:nth-of-type(1) .tooltip-button {
  opacity: 1;
}
.channel-categories table td:nth-of-type(2) {
  padding-left: 0;
}
.channel-categories table td:nth-of-type(3) {
  white-space: nowrap;
}
.channel-categories table .channel-link {
  word-break: break-all;
  word-break: break-word;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #333333;
  text-align: left;
}
.channel-categories table .channel-link:hover {
  text-decoration: underline;
}
.channel-categories .header-label {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 200;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
  margin-left: 12px;
}
.channel-categories .inline-control-list {
  display: flex;
}
.channel-categories .inline-control-list button:nth-of-type(2) {
  margin-left: 6px;
}
.channel-categories .text-filter {
  background: url(/assets/search-icon.svg) 10px center no-repeat transparent;
  padding: 6px 6px 6px 36px;
  border-radius: 6px;
  border: 1px solid #cccccc;
  margin: 12px 0;
  width: 200px;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
}
.channel-categories .text-filter.in-use {
  border: 1px solid #3ebfc2;
}
.channel-categories .text-filter:focus {
  border: 1px solid #3ebfc2;
}
.channel-categories .channel-categories-wrapper {
  position: absolute;
  display: flex;
  flex-direction: column;
  padding-bottom: 24px;
}
.channel-categories li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.channel-categories a {
  text-decoration: none;
}
.channel-categories 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;
}
.channel-categories button::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.channel-categories .categories-header {
  font-size: 32px;
  padding-bottom: 18px;
}
.channel-categories .categories-nav li {
  display: inline-block;
  font-size: 16px;
  padding: 0 1em 1em 0;
  /* todo: not this */
}
.channel-categories .category:not(.dropping) {
  border: 2px dashed white;
  transition: border 250ms;
}
.channel-categories .category.dropping {
  border: 2px dashed #3ebfc2;
  transition: border 250ms;
}
.channel-categories .category .category-menu {
  position: relative;
  display: flex;
}
.channel-categories .category .category-board {
  display: inline-flex;
  flex-wrap: wrap;
  padding-top: 6px;
}
.channel-categories .category.scroll-target {
  animation: shimmer 2s linear;
}
.channel-categories .category .category-name {
  color: #555555;
  font-size: 17px;
  position: relative;
  padding: 0 6px;
  margin: auto;
}
.channel-categories .category .category-edit-button {
  margin-left: 12px;
}
.channel-categories .category .category-actions {
  display: flex;
  padding: 2px 0 !important;
  text-align: left;
}
.channel-categories .category .category-actions .expander-button {
  display: flex;
  margin-left: 12px;
}
.channel-categories .category .category-actions .icon {
  transition: transform 0.3s;
  vertical-align: middle;
}
.channel-categories .category .category-actions .icon.expanded {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.channel-categories .category .category-actions .badge {
  position: absolute;
  left: 12px;
}
.channel-categories .category .category-actions .info {
  color: #555555;
  font-size: 12px;
  margin: auto;
}
.channel-categories .category .category-edit-form {
  margin: 0 0 0 12px;
}
.channel-categories .category .category-edit-form input {
  font-size: 17px;
  margin-right: 6px !important;
}
.channel-categories .category .category-edit-form button {
  padding-left: 6px !important;
  padding-right: 6px !important;
}
.channel-categories .category .category-menu:not(.editing) .category-edit-form {
  display: none;
}
.channel-categories .category .category-menu.editing h2 {
  display: none;
}
.channel-categories .card {
  background-color: white;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.channel-categories .card a {
  display: grid;
  grid-template-rows: 50px 65px 20px;
}
.channel-categories .card .card-star-icon {
  font-size: 16px;
  color: #333333;
  cursor: pointer;
  transition: color 200ms, border-color 200ms;
}
.channel-categories .card .card-star-icon:hover {
  color: #3ebfc2;
  border-color: #3ebfc2;
}
.channel-categories .card .card-star-icon:hover * {
  stroke: #3ebfc2;
}
.channel-categories .card .card-star-icon:hover.no-fill {
  -webkit-text-stroke: 2px #3ebfc2;
}
.channel-categories .card:not(.placeholder) {
  cursor: -moz-grab;
  cursor: -webkit-grab;
  cursor: grab;
  -webkit-box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.2s ease-in-out;
}
.channel-categories .card:hover:not(.placeholder) {
  -webkit-box-shadow: 0px 2px 12px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 2px 12px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 2px 12px 1px rgba(0, 0, 0, 0.2);
}
.channel-categories .card.placeholder {
  border: 1px dashed #cccccc;
}
.channel-categories .card {
  color: #333333;
  display: grid;
  grid-template-columns: 1fr 25px;
  font-size: 13px;
  height: 135px;
  margin: 6px;
  position: relative;
  width: 230px;
  /* Bolster Description */
  /* Favorites, etc */
  /* Member count, etc */
}
.channel-categories .card.dragging {
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.channel-categories .card .channel-link {
  display: grid;
  grid-template-columns: 45px 1fr;
  position: relative;
  z-index: 10;
}
.channel-categories .card .channel-link .avatar {
  margin: auto;
}
.channel-categories .card .channel-link svg.badge {
  flex-grow: 0;
  flex-shrink: 0;
  height: 20px;
  position: absolute;
  width: 18px;
}
.channel-categories .card .channel-link svg.badge circle {
  fill: #3ebfc2;
  stroke: none;
}
.channel-categories .card .channel-link svg.badge text {
  fill: white;
  text-anchor: middle;
  dominant-baseline: central;
  font-size: 12px;
}
.channel-categories .card .channel-link .channel-name {
  word-break: break-all;
  word-break: break-word;
  font-size: 15px;
  line-height: 20px;
  margin: auto 0;
  padding: 0 6px;
  color: #555555;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.channel-categories .card .description {
  color: #404040;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 13px;
  font-weight: 400;
  height: 54.6px;
  /* Fallback for non-webkit */
  line-height: 1.4;
  margin: 0 auto;
  margin-left: 0;
  max-width: 230px;
  padding-left: 6px;
  word-break: break-all;
  word-break: break-word;
}
.channel-categories .card .controls {
  margin: 12px 0;
}
.channel-categories .card .controls .subscription-tier {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  margin-right: 6px;
  position: relative;
  text-align: center;
  top: 85px;
}
.channel-categories .card .controls .subscription-tier .tooltip-button.disabled {
  opacity: 1;
}
.channel-categories .card .info {
  display: grid;
  color: #555555;
  font-size: 11px;
  padding: 0 6px;
}
.channel-categories .placeholder.card .new-bolster-button {
  width: 100%;
  height: 100%;
}
.channel-categories .placeholder.card .icon {
  display: block;
  margin: 6px auto;
}
.attachment-list .discussion-attachment-item,
.reply-list-item .comment-attachment-item,
.comment-list-item .comment-attachment-item {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.attachment-list .discussion-attachment-item button,
.reply-list-item .comment-attachment-item button,
.comment-list-item .comment-attachment-item button {
  z-index: 20;
  width: 60px;
  margin: 12px 36px 0;
  padding: 6px;
  border-radius: 6px;
  position: relative;
  top: -6px;
  border: none;
  transition: background-color 200ms, color 200ms;
}
.attachment-list .discussion-attachment-item button:hover,
.reply-list-item .comment-attachment-item button:hover,
.comment-list-item .comment-attachment-item button:hover {
  color: white;
  background-color: #3ebfc2;
}
.comment-list-item,
.reply-list-item {
  align-items: flex-start;
  display: flex;
  margin-top: 6px;
}
.comment-list-item .comment-content,
.reply-list-item .comment-content {
  margin: 6px 12px;
}
.comment-list-item .avatar,
.reply-list-item .avatar {
  flex-shrink: 0;
}
.comment-list-item .comment-controls,
.reply-list-item .comment-controls {
  display: flex;
  place-content: flex-start;
  align-items: baseline;
  margin-top: 6px;
}
.comment-list-item .comment-authorship,
.reply-list-item .comment-authorship,
.comment-list-item .reply-authorship,
.reply-list-item .reply-authorship {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  display: flex;
  place-content: space-between;
  margin-bottom: 6px;
}
.comment-list-item .comment-authorship .comment-timestamp,
.reply-list-item .comment-authorship .comment-timestamp,
.comment-list-item .reply-authorship .comment-timestamp,
.reply-list-item .reply-authorship .comment-timestamp,
.comment-list-item .comment-authorship .reply-timestamp,
.reply-list-item .comment-authorship .reply-timestamp,
.comment-list-item .reply-authorship .reply-timestamp,
.reply-list-item .reply-authorship .reply-timestamp {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 200;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
}
.comment-list-item .comment-authorship .info,
.reply-list-item .comment-authorship .info,
.comment-list-item .reply-authorship .info,
.reply-list-item .reply-authorship .info {
  font-size: 12px;
  margin-left: 6px;
  color: #404040;
}
.comment-list-item .comment-authorship time,
.reply-list-item .comment-authorship time,
.comment-list-item .reply-authorship time,
.reply-list-item .reply-authorship time {
  color: #555555;
  padding-left: 6px;
}
.comment-list-item .deleted-comment,
.reply-list-item .deleted-comment,
.comment-list-item .deleted-reply,
.reply-list-item .deleted-reply {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 200;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
}
.comment-list-item .comment-display,
.reply-list-item .comment-display,
.comment-list-item .reply-display,
.reply-list-item .reply-display {
  margin-left: 12px;
  width: 100%;
}
.comment-list-item .comment-body,
.reply-list-item .comment-body,
.comment-list-item .reply-body,
.reply-list-item .reply-body {
  width: 100%;
  background-color: white;
  display: table;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.comment-list-item .comment-body.editing,
.reply-list-item .comment-body.editing,
.comment-list-item .reply-body.editing,
.reply-list-item .reply-body.editing {
  width: 100%;
}
.comment-list-item .discussion-message-composer,
.reply-list-item .discussion-message-composer {
  margin-top: 6px;
}
.comment-list-item .comment-body.inline-editor,
.reply-list-item .comment-body.inline-editor,
.comment-list-item .reply-body.inline-editor,
.reply-list-item .reply-body.inline-editor {
  background-color: unset;
}
.comment-list-item .comment-body.inline-editor .discussion-message-composer,
.reply-list-item .comment-body.inline-editor .discussion-message-composer,
.comment-list-item .reply-body.inline-editor .discussion-message-composer,
.reply-list-item .reply-body.inline-editor .discussion-message-composer {
  margin-top: unset;
}
.comment-list-item .reply-button,
.reply-list-item .reply-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;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  margin-top: 3px;
  border-radius: 0;
  margin-left: 6px;
  padding-left: 6px;
  border-left: 1px solid #333333;
}
.comment-list-item .reply-button::-moz-focus-inner,
.reply-list-item .reply-button::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.comment-list-item .inline,
.reply-list-item .inline {
  margin-left: 32px;
}
.comment-list-item .reply-editor,
.reply-list-item .reply-editor {
  margin-left: 24px;
}
.comment-list-item .reply-editor .editor-bar,
.reply-list-item .reply-editor .editor-bar {
  padding-left: 6px;
}
.comment-list-item.scroll-target,
.reply-list-item.scroll-target {
  animation: shimmer 2s linear;
}
.channel-page .direct-call:hover svg path {
  stroke: #3ebfc2;
}
.channel-page .channel-header {
  text-align: center;
}
.channel-page .channel-header 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;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  margin: 12px;
  color: #00b0b9 !important;
}
.channel-page .channel-header button::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.channel-page .channel-header button:hover {
  text-decoration: underline !important;
}
.channel-page .channel-header h1 {
  display: grid;
  grid-template-columns: 50px auto;
  margin: 12px 18px 0;
}
.channel-page .channel-header h1 .info {
  font-size: 12px;
}
.channel-page .channel-header h1 .input-error {
  font-size: 12px;
  color: #ef5455;
}
.channel-page .channel-header h1 .pod-nav-button {
  cursor: pointer;
  margin: auto;
  transition: color 200ms;
  font-size: 18px;
}
.channel-page .channel-header h1 .pod-nav-button:hover {
  color: #3ebfc2;
}
.channel-page .channel-header h1 .pod-title {
  display: grid;
  grid-template-columns: 50px auto;
  grid-gap: 12px;
  margin: auto;
  width: fit-content;
  width: -moz-fit-content;
}
.channel-page .channel-header h1 .pod-title h2 {
  word-break: break-all;
  word-break: break-word;
  font-size: 18px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 100;
  text-decoration: none;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: auto 0;
}
.channel-page .pod-room-banner {
  background: #3ebfc2;
  color: white;
  font-weight: 700;
}
.no-channel-page {
  margin: 18px;
  text-align: center;
}
.no-channel-page .call-to-action-item {
  display: inline-flex;
}
.no-channel-page .call-to-action-item .icon {
  position: relative;
  margin: 6px;
}
.channel-message-time {
  word-break: break-all;
  word-break: break-word;
  color: #555555;
  font-size: 14px;
}
.channel-message-time time.separator::after {
  content: '\B7';
  padding-right: 6px;
  padding-left: 6px;
}
.discussions-list {
  padding-bottom: 24px;
}
.discussions-list .discussions-loader {
  text-align: center;
  font-size: 16px;
  margin-top: 6px;
}
.discussions-list .discussions-loader i {
  margin-right: 6px;
  color: #3ebfc2;
}
.discussions-list .discussions-loader span:hover:not('end-loader') {
  color: #3ebfc2;
  cursor: pointer;
}
.discussions-list .discussions-loader .end-loader {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 200;
  letter-spacing: 1.2px;
  text-decoration: none;
}
.discussions-list .date-divider {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 200;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
  text-decoration: underline;
  margin: 18px 0 6px;
  text-align: center;
}
.notice-list-item {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  display: flex;
  justify-content: center;
  margin: 6px 24px;
  text-align: center;
  width: auto;
}
.notice-list-item p {
  display: inline;
}
.discussion-list-item {
  margin: 12px 0;
  position: relative;
  display: grid;
  -webkit-box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.discussion-list-item .discussion-content {
  margin: 0 24px;
}
.discussion-list-item .discussion-message-composer {
  margin-left: 12px;
}
.discussion-list-item .message-editor .draftJsEmojiPlugin__emojiSelectPopover__1J1s0 {
  margin-bottom: 80px;
  margin-top: 0px;
}
.discussion-list-item .deleted-discussion {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 200;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
}
.discussion-list-item .discussion-authorship {
  display: inline-flex;
  margin-top: 12px;
}
.discussion-list-item .discussion-authorship ul.discussion-authorship-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 12px;
  word-break: break-all;
  word-break: break-word;
}
.discussion-list-item .discussion-authorship ul.discussion-authorship-meta .discussion-timestamp {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 200;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
}
.discussion-list-item .discussion-authorship ul.discussion-authorship-meta .pod-link label {
  font-variant: all-petite-caps;
}
.discussion-list-item .discussion-authorship ul.discussion-authorship-meta .pod-link a {
  color: #3ebfc2;
  font-size: 12px;
}
.discussion-list-item .discussion-authorship ul.discussion-authorship-meta .info {
  font-size: 12px;
  margin-left: 6px;
  color: #404040;
}
.discussion-list-item .discussion-authorship .edited-discussion {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 200;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
}
.discussion-list-item .discussion-authorship time {
  color: #555555;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
}
.discussion-list-item .discussion-edit-menu.callout-handler {
  position: absolute;
  right: 0;
  top: 6px;
}
.discussion-list-item .discussion-edit-menu.callout-handler .tooltip-button {
  font-size: 14px;
}
.discussion-list-item .discussion-edit-menu.callout-handler i {
  width: 18px;
}
.discussion-list-item .discussion-comments {
  background-color: #d6eff2;
}
.discussion-list-item .discussion-attachment-item {
  overflow: hidden;
}
.discussion-list-item .comment-composer {
  margin: 0 24px;
}
.discussion-list-item .comment-toggle {
  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;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
}
.discussion-list-item .comment-toggle::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.discussion-list-item .comment-toggle:hover {
  text-decoration: underline;
}
.discussion-list-item .discussion-controls {
  display: flex;
  place-content: flex-start;
  align-items: baseline;
  margin: 6px 12px;
}
.discussion-list-item .discussion-controls 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;
}
.discussion-list-item .discussion-controls button::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.discussion-list-item .discussion-controls .comment-button-activator,
.discussion-list-item .discussion-controls .pin-button-activator,
.discussion-list-item .discussion-controls .comment-button-count {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
}
.discussion-list-item .discussion-controls .pin-button-activator {
  padding-left: 12px;
}
.discussion-list-item .discussion-controls .pin-button-activator i {
  font-size: 18px;
  width: 22px;
  height: 22px;
  transform: rotate(45deg);
  margin-right: 3px;
}
.discussion-list-item .discussion-controls .pin-button-activator i.no-fill {
  -webkit-text-stroke: 1.5px black;
  color: transparent;
}
.discussion-list-item .discussion-controls .pin-button {
  position: absolute;
  border: 1px solid transparent;
  padding: 6px;
  right: 12px;
  bottom: 6px;
  transition: border-color 200ms;
}
.discussion-list-item .discussion-controls .pin-button:hover {
  border-color: #3ebfc2;
}
.discussion-list-item .discussion-controls .pin-button:hover i {
  color: #3ebfc2;
}
.discussion-list-item .discussion-controls .pin-button i {
  transition: color 200ms;
  font-size: 18px;
  transform: rotate(45deg);
}
.discussion-list-item .discussion-controls .comment-button-activator {
  position: relative;
  padding-left: 28px;
}
.discussion-list-item .discussion-controls .comment-button-activator svg.icon {
  position: absolute;
  top: -3px;
  left: 0;
}
.discussion-list-item .discussion-authorship,
.discussion-list-item .discussion-controls,
.discussion-list-item .comment-list,
.discussion-list-item .comment-toggle {
  margin: 6px 18px;
}
.discussion-list-item.scroll-target {
  animation: shimmer 2s linear;
}
.show-message-editor .call-to-action-item {
  margin: 6px auto;
}
#main.safari .discussion-list-item.last-message,
#main.firefox .discussion-list-item.last-message {
  margin-bottom: 150px;
}
.message-editor.group-controls .editor-bar .editor-control:last-of-type {
  margin-top: 6px;
  margin-left: 0;
}
.message-editor .content-editor {
  width: 100%;
  margin-top: auto;
  max-height: 250px;
  border-radius: 0;
  border: 2px solid transparent;
  border-bottom: 1px solid #3ebfc2;
  overflow-y: auto;
}
.message-editor .editor-bar {
  display: flex;
  align-items: flex-start;
  padding: 6px 0;
  height: fit-content;
  height: -moz-fit-content;
}
.message-editor .editor-bar .editor-control {
  display: flex;
  position: relative;
  margin: auto 6px;
}
.message-editor .editor-bar .editor-control:first-of-type {
  margin-right: 12px;
  margin-left: 0;
}
.message-editor .editor-bar button.editor-control-item {
  margin-left: 6px;
  height: 36px;
  width: 36px;
  cursor: pointer;
}
.message-editor .editor-bar button.editor-control-item svg.icon path {
  transition: fill 100ms;
}
.message-editor .editor-bar button.editor-control-item:active {
  background-color: #3ebfc2;
  color: white;
}
.message-editor .editor-bar button.editor-control-item:active svg.icon path {
  fill: white;
}
.message-editor .editor-bar .editor-control-item {
  font-size: 14px !important;
  transition: border 150ms, background-color 100ms, color 100ms;
}
.message-editor .editor-bar .editor-control-item.neutral {
  background: white;
  border: 1px solid #cccccc;
}
.message-editor .editor-bar .editor-control-item:active.tooltip-button,
.message-editor .editor-bar .editor-control-item:focus.tooltip-button,
.message-editor .editor-bar .editor-control-item:focus-within.tooltip-button,
.message-editor .editor-bar .editor-control-item:hover.tooltip-button {
  border: 1px solid #3ebfc2;
}
.message-editor .editor-bar .editor-control-item:disabled {
  opacity: 0.5;
  cursor: default;
}
.message-editor .editor-bar .editor-control-item.error {
  border-color: #ef5455;
}
.message-editor .tooltip {
  margin-top: 30px;
  margin-left: -24px;
}
.message-editor .input-error {
  color: #ef5455;
  font-size: 12px;
}
.editor-attachment-list {
  display: grid;
  padding: 0 6px;
  grid-gap: 6px;
  grid-template-columns: repeat(auto-fit, 120px);
  border-top: 1px solid #cccccc;
  max-height: 300px;
  overflow: auto;
}
.editor-attachment-list-item {
  display: block;
  overflow: hidden;
  margin: 18px 0 6px;
}
.right-side-bar .editor-bar {
  flex-direction: column;
}
.right-side-bar .editor-bar button.editor-control-item {
  margin-left: 0 !important;
  margin-right: 6px !important;
}
.giphy-icon-callout-item {
  display: flex;
}
.channel-settings h2 {
  font-size: 18px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 100;
  text-decoration: none;
  text-align: center;
}
.channel-settings .channel-settings-list .with-overlay {
  height: auto;
}
.channel-settings .channel-settings-list .channel-settings-list-item {
  display: grid;
  grid-template-columns: 200px auto;
  grid-gap: 12px;
  margin: 12px;
}
.channel-settings .channel-settings-list .channel-settings-list-item.read-only {
  grid-template-columns: auto;
}
.channel-settings .channel-settings-list .channel-settings-list-item p {
  margin: auto;
  margin-left: 6px;
}
.channel-settings .channel-settings-list .channel-settings-list-item p:only-child {
  grid-column: span 2;
}
.channel-settings .channel-settings-list .channel-settings-list-item .call-to-action-item {
  width: 100%;
  height: fit-content;
  margin: auto;
  white-space: nowrap;
}
.channel-settings .channel-settings-list .channel-settings-list-item .call-to-action-item.delete-button {
  width: 180px;
  margin-top: 12px;
  grid-column: span 2;
}
.channel-settings .channel-settings-list .channel-settings-list-item .read-only-icon {
  margin: auto;
  margin-right: 0;
  padding: 12px;
  border-radius: 12px;
  box-shadow: 2px 2px 6px #cccccc;
}
.channel-settings .channel-settings-list .channel-customization-list-item {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 12px;
  width: 100%;
  margin: auto;
}
.channel-settings .channel-settings-list .channel-customization-list-item label {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 200;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
}
.channel-settings .channel-settings-list .channel-customization-list-item label.field {
  text-align: right;
  margin: auto 0;
}
.channel-settings .channel-settings-list .channel-customization-list-item label.field:after {
  content: ': ';
}
.channel-settings .channel-settings-list .channel-customization-list-item label.avatar-label {
  line-height: 50px;
}
.channel-settings .channel-settings-list .channel-customization-list-item .category-describer .dropdown-control {
  padding: 0 6px;
  margin: auto 0;
}
.channel-settings .channel-settings-list .channel-customization-list-item .pod-name {
  margin: 6px;
}
.channel-settings .channel-settings-list .channel-customization-list-item .pod-name input {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  padding: 0;
}
.channel-settings .channel-settings-list .channel-customization-list-item .read-only-field {
  word-break: break-all;
  word-break: break-word;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  margin: 0;
  white-space: pre-wrap;
}
.channel-settings .channel-settings-list .channel-customization-list-item .read-only-field:empty:after {
  content: '-';
  margin-left: 12px;
}
.channel-settings .channel-settings-list .channel-customization-list-item .category-name,
.channel-settings .channel-settings-list .channel-customization-list-item .pod-description {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  resize: vertical;
  padding: 6px;
  margin: 6px;
  border-radius: 6px;
  border: 1px solid #cccccc;
  max-width: 300px;
}
.channel-settings .channel-settings-list .channel-customization-list-item .pod-description {
  height: 60px;
}
.channel-settings .channel-settings-list .channel-customization-list-item .avatar,
.channel-settings .channel-settings-list .channel-customization-list-item .avatar img {
  width: 50px;
  height: 50px;
  border-radius: 50px;
}
.channel-settings .channel-settings-list .channel-customization-list-item .avatar .watermark-text,
.channel-settings .channel-settings-list .channel-customization-list-item .avatar img .watermark-text {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  text-decoration: none;
  user-select: none;
  line-height: 24px;
  height: auto;
  margin-top: 25%;
}
.channel-settings .channel-settings-list .button-container {
  display: grid;
  max-width: 500px;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 'a b';
  grid-gap: 24px;
  margin: 24px auto;
}
.channel-settings .channel-settings-list .button-container .primary {
  grid-area: b;
}
.channel-settings .channel-settings-list .button-container .secondary {
  grid-area: a;
}
.bolster-member-list .invite-badge {
  background-color: #00960a;
  color: white;
  cursor: default;
  display: inline-block;
  font-size: 75%;
  min-width: 55px;
  padding: 6px;
  text-align: center;
  user-select: none;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.channel-files .file-list {
  width: 85%;
  margin: auto;
}
.channel-files .bolster-upload-file-button {
  background-color: transparent;
  cursor: pointer;
  display: inline;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 32px;
  margin-right: 12px;
  padding: 0 24px !important;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  border-radius: 18px;
  border: 2px solid #3ebfc2 !important;
  color: #3ebfc2;
}
.channel-files .file-drop-hint {
  display: none;
  border: 2px dashed #cccccc;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  border-radius: 24px;
}
.channel-files.file-hovering .file-drop-hint {
  display: block;
  position: absolute;
  top: 12px;
  right: 12px;
  bottom: 12px;
  left: 12px;
}
.channel-files .scrollable-content-container {
  max-height: fit-content;
  height: -moz-max-content;
}
.channel-files .file-list.standard-table th:nth-of-type(3) {
  width: 120px;
}
.channel-files .file-list.standard-table td:nth-of-type(3) {
  white-space: nowrap;
}
.channel-files .file-list.standard-table time {
  white-space: nowrap;
}
.discussion-page .posts-list .date-divider {
  font-size: 12px;
  text-align: center;
  color: #333333;
}
.discussion-page .discussion-message-item {
  background-color: white;
  position: relative;
  display: grid;
  border-radius: 10px;
}
.discussion-page .discussion-message-item.highlight-target {
  -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-header {
  display: grid;
  grid-template-columns: auto max-content;
  padding: 0 18px;
}
.discussion-page .discussion-message-body {
  overflow-x: auto;
}
.discussion-page .discussion-message-footer {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  min-height: 22px;
  padding: 0 18px;
}
.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 .pin-action {
  display: flex;
  align-items: center;
  grid-gap: 6px;
  cursor: pointer;
}
.discussion-page .comments-list {
  margin-top: 18px;
  border-top: 2px solid #f4f6f6;
  border-bottom: 2px solid #f4f6f6;
}
.discussion-page .post-indention {
  padding-left: 60px;
}
.confirm-modal.confirm-edit-post .modal-window {
  width: 700px;
}
.video-container .video-call-content {
  background-color: black;
  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.fullscreen-video {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}
.video-container .fullscreen-enabled .video-call-content.fullscreen-video .video-presenter .main-track video {
  height: calc(100vh - 120px);
}
.video-container .video-call-content.fullscreen-video {
  max-height: 100%;
  border-left: 1px solid #404040;
  left: 70px;
  top: 0;
  background-color: black;
}
.video-container .video-call-content.fullscreen-video .video-content-container {
  background-color: #333333;
}
.video-container .video-call-content.fullscreen-video .video-call-controls {
  margin: 0 12px;
  bottom: 12px;
  opacity: 1;
}
.video-container .video-call-content.fullscreen-video .video-call-controls .button-actions-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.video-container .video-call-content.fullscreen-video .video-call-controls .user-count-button {
  width: auto;
}
.video-container .video-call-content.fullscreen-video .video-call-controls .user-count-button .user-count {
  margin: auto 3px auto 6px;
}
.video-container .not-connected-text {
  color: white;
}
.video-container .participant-disconnected-avatar-icon {
  display: flex;
  margin: auto;
  align-items: center;
  color: white;
  font-size: 48px;
  height: 100%;
  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 {
  height: 100%;
}
.video-container .video-availability .video-preview {
  margin-top: auto;
  width: 400px;
  height: 300px;
  background: #333333;
}
.video-container .video-availability .video-preview video {
  position: relative;
  z-index: 20;
}
.video-container .video-availability .video-preview video.video-off {
  background: none;
}
.video-container .video-availability .video-preview video.mirror-video {
  transform: scaleX(-1);
}
.video-container .video-availability .video-preview.hidden {
  display: none;
}
.video-container .video-availability .video-preview .avatar-preview {
  position: relative;
  top: -300px;
  z-index: 0;
}
.video-container .video-availability .video-preview-button-container {
  margin: 6px auto auto;
}
@media screen and (max-height: 700px) {
  .video-container .video-availability {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .video-container .video-availability .video-preview {
    grid-row: span 2;
    margin: auto;
  }
  .video-container .video-availability .video-loading-text {
    margin-top: auto;
  }
}
.video-container .video-call-detail-container {
  margin-top: 30px;
}
.video-container .video-call-title {
  font-size: 1.5em;
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 100;
  text-decoration: none;
  color: white;
}
.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: 3px 0;
  align-items: center;
}
.video-call-placeholder {
  width: 100%;
  height: 100%;
  background-color: black;
}
.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: 3px;
  user-select: none;
  margin: 0 0 3px;
}
.video-room-messages .video-room-message .content-text .content-text .content-paragraph .content-block {
  color: white;
}
.expanded-row-content .expanded-video-log-item .member-list-item .control-list {
  padding: 0;
}
.expanded-row-content .expanded-video-log-item .detail-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  width: fit-content;
  width: -moz-fit-content;
  margin: 12px auto;
}
.expanded-row-content .expanded-video-log-item .detail-list label {
  font-weight: 600;
}
.expanded-row-content .expanded-video-log-item .detail-list label:after {
  content: ': ';
}
.expanded-row-content .expanded-video-log-item .call-to-action-item {
  margin: auto;
}
.video-call-log-detail .video-call-detail-page-header {
  grid-template-columns: auto 1fr auto;
}
.video-call-log-detail .video-call-detail-page-header .avatar {
  border-radius: 11px;
  width: 100%;
  height: 100%;
  background-color: #f4f6f6;
}
.video-call-log-detail .video-call-detail-page-header .video-avatar-icon {
  width: 40px;
  height: 40px;
}
.video-call-log-detail .video-call-detail-page-header .video-avatar-icon svg {
  margin: 8px;
}
.video-call-list .standard-table {
  margin-top: 24px;
  width: 90%;
  position: absolute;
}
.video-call-list .standard-table th:nth-of-type(2) {
  text-align: left;
}
.video-call-list .standard-table th:nth-of-type(2),
.video-call-list .standard-table th:nth-of-type(3),
.video-call-list .standard-table th:nth-of-type(4) {
  width: 140px;
}
.video-call-list .standard-table th:nth-of-type(5) {
  width: 80px;
}
.video-call-list .standard-table td {
  word-break: break-all;
  word-break: break-word;
}
.video-call-list .standard-table td:nth-of-type(2) {
  text-align: left;
}
.video-call-list .standard-table td .link {
  cursor: pointer;
  color: #3ebfc2;
  text-decoration: underline;
}
.video-call-list .video-call-loader {
  text-align: center;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 200;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
  margin-top: 6px;
}
.video-call-list .video-call-loader i {
  margin-right: 6px;
  color: #3ebfc2;
}
.video-call-list .video-call-loader span.clickable:hover {
  color: #3ebfc2;
  cursor: pointer;
}
.video-call-list .member-list {
  margin: 0 36px;
  overflow-y: auto;
  max-height: 135px;
  width: fit-content;
  width: -moz-fit-content;
}
.video-call-list .member-list .control-list {
  top: -10%;
}
.video-call-list .member-list .participant-count {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 200;
  letter-spacing: 1.2px;
  text-decoration: none;
  text-transform: uppercase;
  padding: 0 12px;
  text-align: left;
  white-space: nowrap;
}
.video-call-list .member-list .member-list-item {
  background: none;
}
.video-call-list .member-list .member-list-item a {
  display: flex;
  align-items: center;
  margin-right: 48px;
}
.video-device-management-modal .device-management-container {
  display: grid;
  grid-gap: 8px;
  grid-template-columns: auto auto;
  margin: 12px auto 8px;
  width: fit-content;
}
.video-device-management-modal .device-actions label {
  cursor: pointer;
}
.video-device-management-modal .device-actions label:hover {
  color: #3ebfc2;
}
.video-device-management-modal .modal-form {
  width: 100%;
}
.video-device-management-modal .modal-window {
  width: 480px;
}
.video-device-management-modal h1 {
  text-align: center;
  cursor: default;
  font-size: 2em;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 100;
  letter-spacing: 0.07em;
  text-decoration: none;
}
.video-device-management-modal h4 {
  margin: 12px;
}
.video-device-management-modal .clickable-link {
  margin: 18px auto;
  display: flex;
  cursor: pointer;
  width: fit-content;
  width: -moz-fit-content;
  place-content: center;
  text-decoration: underline;
  color: #3ebfc2;
}
.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;
}
.video-call-log .active-video-call-block-container .join-active-call-button {
  margin: auto;
  margin-right: 12px;
  width: 40px;
}
.video-call-log .active-video-call-list-item {
  margin-left: 18px;
}
.video-call-log .active-video-call-list-item .block-list-item-title {
  margin-right: 0;
}
.video-call-log .inactive-video-call-list-item .inactive-video-call-list-item-subtext {
  grid-template-columns: 1fr;
  font-size: 13px;
  color: #8a9292;
}
.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;
}
.video-call-content.draggable-video {
  z-index: 205;
  position: absolute;
}
.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;
  bottom: 6px;
  place-content: center;
}
.video-call-content.draggable-video .video-call-controls .expand-positioning {
  position: absolute;
  width: [object Object],[object Object],[object Object],[object Object];
  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 .video-call-controls .button-actions .fa-phone {
  transform: rotate(-140deg);
}
.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.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%;
}
.video-call-content.fullscreen-video .video-grid {
  display: grid;
  height: 100%;
  width: auto;
  margin: auto;
  grid-template-rows: calc(100% - 120px) 120px;
  grid-template-columns: 1fr;
}
.video-call-content.fullscreen-video .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.fullscreen-video .video-grid .participant-tracks .participant-disconnected {
  box-shadow: none;
  border: 1px solid black;
}
.video-call-content.fullscreen-video .video-grid .participant-tracks .video-participant {
  border: 1px solid black;
  margin: auto;
}
.video-call-content.fullscreen-video .video-grid .participant-tracks.solo {
  grid-auto-rows: minmax(175px, calc(100% - 4px));
}
.video-call-content.fullscreen-video .video-grid .participant-tracks.two-per-column {
  grid-auto-rows: calc(50% - 2px);
}
.video-call-content.fullscreen-video .video-grid .participant-tracks.three-per-column {
  grid-auto-rows: calc(32% - 2px);
}
.video-call-content.fullscreen-video .video-grid .participant-tracks.four-per-column {
  grid-auto-rows: calc(25% - 2px);
}
.video-call-content.fullscreen-video .video-grid .participant-tracks.five-per-column {
  grid-auto-rows: calc(20% - 2px);
}
.video-call-content.fullscreen-video .video-grid .participant-tracks.two-per-row {
  grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
}
.video-call-content.fullscreen-video .video-grid .participant-tracks.three-per-row {
  grid-template-columns: repeat(auto-fit, minmax(32%, 1fr));
}
.video-call-content.fullscreen-video .video-grid .participant-tracks.four-per-row {
  grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
}
.video-call-content.fullscreen-video .video-grid .participant-tracks.five-per-row {
  grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
  place-content: unset;
}
.video-call-content.fullscreen-video .video-grid .video-call-controls {
  grid-column: span 2;
}
.video-call-content.fullscreen-video .video-presenter {
  display: grid;
  height: 100%;
  grid-template-columns: 280px auto;
}
.video-call-content.fullscreen-video .video-presenter.hide-participants {
  grid-template-columns: auto;
}
.video-call-content.fullscreen-video .video-presenter.hide-participants .participant-track-container {
  display: none;
}
.video-call-content.fullscreen-video .video-presenter .participant-tracks {
  display: grid;
  grid-row: span 2;
  grid-auto-rows: 175px;
  border-right: 1px solid #404040;
}
.video-call-content.fullscreen-video .video-presenter .participant-tracks .video-participant {
  grid-column: 1;
  height: 100%;
  width: calc(100% - 2px);
  border: 1px solid black;
}
.video-call-content.fullscreen-video .video-presenter .not-connected-text {
  color: white;
}
.video-call-content.fullscreen-video .video-presenter .main-track {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 120px;
}
.video-call-content.fullscreen-video .video-presenter .main-track video {
  height: calc(100vh - 120px);
}
.video-call-content.fullscreen-video .video-presenter .main-track .hide-participants-action {
  opacity: 0;
  transition: opacity 100ms;
  position: absolute;
  top: 12px;
  left: 350px;
}
.video-call-content.fullscreen-video .video-presenter .main-track .hide-participants-action.hidden {
  left: 75px;
}
.video-call-content.fullscreen-video .video-presenter .main-track:hover .hide-participants-action {
  opacity: 1;
}
.video-call-content.fullscreen-video .video-presenter .participant-disconnected {
  box-shadow: none;
  height: calc(100% - 2px);
  width: calc(100% - 2px);
}
.video-participant {
  position: relative;
  display: flex;
  flex-direction: column;
  place-content: center;
  border: 1px solid #333333;
  background: #333333;
  height: calc(100% - 2px);
  width: calc(100% - 2px);
}
.video-participant .pin-track-action {
  position: absolute;
  top: 6px;
  right: 6px;
  opacity: 0;
  transition: opacity 100ms;
  z-index: 320;
  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:hover .pin-track-action {
  opacity: 1;
}
.video-participant .participant-dropdown-button {
  opacity: 0;
  position: absolute;
  z-index: 320;
  transition: opacity 100ms;
}
.video-participant:hover .participant-dropdown-button {
  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 {
  border: 1px solid transparent;
  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: relative;
  display: flex;
  place-content: space-between;
  width: calc(100% - 18px);
  padding: 0 12px 0px 6px;
  height: 51px;
  margin-top: -50px;
  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 0;
}
.video-participant .video-participant-detail-container .video-participant-icon-container {
  margin: auto 0 6px;
  width: 36px;
}
.video-participant.participant-disconnected .video-participant-detail-container {
  background: none;
}
.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;
  place-content: space-between;
  margin: auto;
}
.video-track-controls.align-bottom {
  height: 100%;
}
.video-track-controls.align-bottom .video-icon-button {
  margin-top: auto;
  margin-bottom: 6px;
}
.video-track-controls .button-actions {
  height: 30px;
  display: flex;
  place-content: space-evenly;
  bottom: 0;
}
.add-participant-modal .error-text {
  color: #ef5455;
}
.video-call-device-help-callout .callout-window {
  left: 5vw !important;
  top: 12px !important;
}
.date-picker {
  margin: 12px 0;
}
.date-picker > div {
  margin-left: 6px;
  display: inline;
}
.date-picker .react-datepicker__input-container input {
  padding: 6px 12px;
  transition: border 150ms;
  width: 250px;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid #ebf0f0;
  font-family: 'Roboto', Arial, sans-serif;
}
.date-picker .react-datepicker__input-container input:disabled {
  border: 1px solid #f4f6f6;
  background-color: #f4f6f6;
}
.date-picker .react-datepicker__time-list {
  overflow-x: hidden;
}
.date-picker .react-datepicker__time-container,
.date-picker .react-datepicker__time-box,
.date-picker .react-datepicker__time-list-item {
  width: 100px !important;
}
.date-picker .react-datepicker__close-icon::after,
.date-picker .react-datepicker__day--selected,
.date-picker .react-datepicker__day--keyboard-selected,
.date-picker .react-datepicker__time-list-item--selected {
  background-color: #3ebfc2 !important;
}
.date-picker .react-datepicker__time-list-item {
  padding: 6px 0 !important;
  line-height: 12px !important;
  height: 12px !important;
}
.date-picker .react-datepicker__navigation--next {
  right: 110px !important;
}
.date-picker .react-datepicker__header.react-datepicker__header--time {
  padding-bottom: 12px;
}
.sort-header {
  display: flex;
  align-items: center;
  padding-bottom: 6px;
  padding-top: 6px;
  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;
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 200 !important;
  letter-spacing: 1.2px !important;
  text-decoration: none !important;
}
.sort-header::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.sort-header-icon {
  padding-left: 6px;
}
.sort-header-icon rect {
  width: 0;
  transition: width 250ms;
}
.sort-header-icon.sort-asc rect.top,
.sort-header-icon.sort-desc rect.bot {
  width: 6px;
}
.sort-header-icon.sort-asc rect.mid,
.sort-header-icon.sort-desc rect.mid {
  width: 10px;
}
.sort-header-icon.sort-asc rect.bot,
.sort-header-icon.sort-desc rect.top {
  width: 14px;
}
.task-list-page .task-list-page-header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  width: 90%;
}
.task-list-page .task-list-page-header .call-to-action-item {
  height: fit-content;
  margin: 0 6px;
}
.task-list-page .task-list-page-header .task-layout-button-container {
  margin: auto 6px;
  align-items: baseline;
  display: flex;
  flex-wrap: nowrap;
}
.task-list-page .task-list-page-header .tooltip-button {
  border: 1px solid transparent;
  margin-top: auto;
}
.task-list-page .task-list-page-header .tooltip-button:hover {
  border: 1px solid #333333;
}
.task-list-page .task-list-page-header .tooltip-button.clicked {
  border: 1px solid #3ebfc2;
  color: #3ebfc2;
}
.task-list-page .task-list-page-header .task-filter .button-main {
  height: 28px;
}
.task-list-page .header-label {
  font-family: 'Poppins', Arial, sans-serif;
  margin: auto 6px;
}
.task-list-page table {
  position: absolute;
  width: 90%;
  margin: 12px 48px 24px;
}
.task-list-page table .assigned-users {
  display: grid;
  grid-column-gap: 6px;
  grid-template-columns: repeat(auto-fit, minmax(auto, 10px));
  place-content: center;
}
.task-list-page table .assigned-users .tooltip-button {
  padding: 0;
  margin: 0;
}
.task-list-page table .tooltip-button.pod-button {
  padding: 0;
  margin: 0;
}
.task-list-page table .tooltip-button.pod-button .tooltip {
  margin-top: 36px;
}
.task-list-page table th {
  white-space: nowrap;
  text-align: center;
  width: 100px;
}
.task-list-page table th:nth-of-type(1) {
  width: 150px;
  text-align: left;
}
.task-list-page table th:nth-of-type(4) {
  width: 80px;
}
.task-list-page table th:nth-last-of-type(1),
.task-list-page table th:nth-last-of-type(2) {
  width: 120px;
}
.task-list-page table td {
  white-space: nowrap;
  width: 95px;
}
.task-list-page table td ul {
  width: 100%;
}
.task-list-page table td:nth-of-type(1) .task-name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  padding: 0;
  text-align: left;
}
.task-list-page table td:nth-of-type(2) .button-main,
.task-list-page table td:nth-of-type(3) .button-main {
  width: 100px;
}
.task-list-page table .assigned-member-list {
  display: flex;
}
.task-list-page table .assigned-member-list-item {
  margin-left: 6px;
}
.task-list-page table .assigned-member-list-item .button {
  padding: 6px;
}
.task-list-page table .task-name {
  word-break: break-all;
  word-break: break-word;
  white-space: pre-wrap;
}
.task-list-page table .task-name a {
  color: #333333;
  padding-top: 6px;
  padding-bottom: 6px;
  text-decoration: none;
}
.task-list-page table .task-name a:hover {
  text-decoration: underline;
}
.task-list-page table .task-pod-name button {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.input-error {
  color: #ef5455;
  font-size: 12px;
  display: block;
  padding: 0 12px 0;
}
.task-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.task-board .big-loader {
  font-size: 100px;
  position: relative;
  left: 50%;
}
.task-board .task-column {
  padding: 2px;
  min-width: 230px;
  min-height: 190px;
}
.task-board .task-column.isHovering {
  opacity: 0.8;
  padding: 0;
  border: 2px dashed #cccccc;
}
.task-board .dropdown-control {
  display: flex;
}
.task-board .task-header {
  font-family: 'Poppins', Arial, sans-serif;
  border-bottom: 1px solid #cccccc;
  white-space: nowrap;
  padding: 0 12px;
  text-align: left;
  margin-left: 12px;
}
.task-board .card-tab {
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 12px;
  height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  color: white;
  padding: 6px 6px 0;
  margin: 0 -12px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}
.task-board .card-tab i {
  border: 1px solid white;
  border-radius: 48px;
  padding: 3px 6px 3px 1px;
  margin: 0 6px 0 0;
  font-size: 12px;
  position: relative;
  bottom: 3px;
  float: left;
  cursor: pointer;
}
.task-board .card-tab i:hover {
  background-color: white;
  border-color: #cccccc;
  color: #333333;
}
.task-board .card-tab.high {
  background-color: #ef5455;
}
.task-board .card-tab.normal {
  background-color: #3ebfc2;
}
.task-board .card-tab.low {
  background-color: #00960a;
}
.task-board .task-card {
  height: auto;
  flex: 1;
  overflow: hidden;
  background-color: #d6eff2;
  transition: width 200ms ease-out, border 150ms, color 100ms;
  width: auto;
  margin: 6px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid #cccccc;
}
.task-board .task-card.dragging {
  opacity: 0.5;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.task-board .task-card.collapsed {
  flex: 0;
}
.task-board .task-card .assignee-list {
  text-align: right;
  flex-wrap: wrap;
  font-size: 12px;
}
.task-board .task-card .display-name {
  word-break: break-all;
  word-break: break-word;
}
.task-board .task-card .task-actions {
  display: flex;
  flex-direction: row;
  text-align: right;
  margin-left: auto;
  width: 100%;
}
.task-board .task-card .task-actions li {
  margin-left: 6px;
}
.task-board .task-card .member-selector .member-selector-filter {
  font-size: 12px;
  width: 220px;
  max-width: 90%;
}
.task-board .task-card .member-selector .member-selector-list {
  position: sticky;
  margin: 6px;
  min-width: unset;
}
.task-board .task-card .date-picker {
  display: flex;
  flex-direction: column;
  place-content: space-between;
  margin: auto;
}
.task-board .task-card .date-picker .react-datepicker__input-container {
  max-width: 100%;
}
.task-board .task-card .date-picker .react-datepicker__close_icon {
  right: 42px;
  top: 12px;
}
.task-board .task-card .date-picker .react-datepicker__input-container input {
  margin: 6px;
  padding: 6px;
  font-size: 12px;
  max-width: 80%;
}
.task-board .task-card .member-list .member-list-item {
  margin: 12px 0;
  border-radius: 6px;
  border: 0;
}
.task-board .task-card .member-list .member-list-item .control-list {
  top: 0%;
}
.task-board .task-card .member-list .member-list-item a {
  padding: 0;
}
.task-board .task-card .editable-text {
  flex-direction: column;
}
.task-board .task-card .editable-text-editor {
  word-break: break-all;
  word-break: break-word;
  border-radius: 6px;
  border: 1px solid #cccccc;
  width: 95%;
  margin: 6px 0;
  font-size: 12px;
  resize: vertical;
}
.task-board .task-card .task-name {
  font-size: 18px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 100;
  text-decoration: none;
  word-break: break-all;
  word-break: break-word;
  margin: 6px 0 12px;
  text-align: center;
}
.task-board .task-card:hover:not(.active) {
  cursor: pointer;
}
.task-board .task-card:hover:not(.active) label {
  cursor: pointer;
}
.task-board .task-card:hover.low {
  border: 1px solid #00960a;
}
.task-board .task-card:hover.normal {
  border: 1px solid #3ebfc2;
}
.task-board .task-card:hover.high {
  border: 1px solid #ef5455;
}
.task-board .task-card form.editable-text {
  flex-wrap: wrap;
  flex-direction: column;
}
.task-board .attribute {
  word-break: break-all;
  word-break: break-word;
  margin: 6px 0;
  display: flex;
  justify-content: space-between;
}
.task-board .attribute.inline {
  display: block;
  text-align: center;
}
.task-board .attribute-label {
  white-space: nowrap;
  padding-bottom: 6px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
}
.task-board .attribute-label:after {
  content: ': ';
}
.task-board .value {
  text-align: right;
  font-size: 12px;
}
.task-board time:before {
  content: ' (';
}
.task-board time:after {
  content: ')';
}
.task-board .timestamp {
  width: 100%;
  margin: 6px 6px 18px;
  display: inline-flex;
  flex-direction: column;
}
.task-board .task-pod-name button {
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.assigned-member-list {
  display: flex;
}
.assigned-member-list-item {
  margin-left: 6px;
}
.dashboard-container {
  padding: 0 18px;
}
.dashboard-container .dashboard-header {
  font-size: 3em;
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 100;
  text-decoration: none;
  -webkit-text-stroke: 1px #333333;
  font-weight: 700;
  text-align: center;
  margin: 24px;
  word-break: break-all;
  word-break: break-word;
}
.dashboard-container .dashboard-card-container {
  display: grid;
  grid-gap: 18px;
  margin: 18px auto;
  justify-content: center;
}
.dashboard-container .dashboard-card-container.narrow-card {
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  max-width: 1800px;
}
.dashboard-container .dashboard-card-container.wide-card {
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  max-width: 1200px;
}
@media screen and (max-width: 1000px) {
  .dashboard-container .dashboard-card-container.narrow-card .dashboard-card:last-child {
    grid-column-start: 1;
    grid-column-end: 3;
    width: 50%;
  }
}
@media screen and (max-width: 800px) {
  .dashboard-container .dashboard-card-container {
    margin: 18px 36px;
  }
  .dashboard-container .dashboard-card-container.narrow-card {
    grid-template-columns: minmax(100px, 1fr);
  }
  .dashboard-container .dashboard-card-container.narrow-card .dashboard-card:last-child {
    grid-column-start: unset;
    grid-column-end: unset;
    width: 100%;
  }
  .dashboard-container .dashboard-card-container.wide-card {
    grid-template-columns: minmax(100px, 1fr);
  }
}
@media screen and (max-width: 500px) {
  .dashboard-container .dashboard-card-container {
    margin: 18px auto;
  }
}
.dashboard-card {
  background-color: #f4f6f6;
  margin: 6px auto;
  padding: 24px 0 36px;
  width: 100%;
  display: grid;
  border-radius: 12px;
}
.dashboard-card.clickable {
  cursor: pointer;
}
.dashboard-card .dashboard-icon {
  text-align: center;
  width: 100%;
  font-size: 48px;
  margin-top: 24px;
}
.dashboard-card .dashboard-icon path {
  fill: #333333 !important;
}
.dashboard-card .dashboard-title {
  font-size: 2em;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 100;
  letter-spacing: 0.07em;
  text-decoration: none;
  font-weight: 700;
  text-align: center;
  margin: 6px;
  -webkit-text-stroke: 1px #333333;
}
.dashboard-card .dashboard-text {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  margin: 18px;
  text-align: center;
  color: #888888;
}
.dashboard-card .dashboard-button {
  width: fit-content;
  width: -moz-fit-content;
  margin: auto auto 12px;
}
.main-content .dashboard-card {
  background-color: white;
}
.tips-and-tricks-page-container .tips-cards-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  grid-gap: 24px;
  padding: 24px;
}
.tips-and-tricks-page-container .tips-cards-wrapper .tips-card-container {
  text-align: center;
  margin: auto;
  border: 1px solid transparent;
  background: white;
  width: 100%;
  padding: 18px 0;
  border-radius: 12px;
  box-shadow: 0 6px 12px 0 rgba(138, 146, 146, 0.2);
}
.tips-and-tricks-page-container .tips-cards-wrapper .tips-card-container .card-title {
  font-size: 24px;
  font-family: 'Poppins';
  font-weight: bold;
  margin-bottom: 6px;
}
.tips-and-tricks-page-container .tips-cards-wrapper .tips-card-container .card-content {
  width: fit-content;
  text-align: left;
  margin: auto;
}
.tips-and-tricks-page-container .tips-cards-wrapper .tips-card-container .card-action {
  width: 300px;
  margin: auto;
  margin-top: 24px;
}
.tips-and-tricks-page-container .contact-container {
  margin: auto;
  height: 100%;
}
.tips-and-tricks-page-container .contact-container .contact-card {
  text-align: center;
  width: auto;
  margin: 50px 24px auto;
  border: 1px solid transparent;
  padding: 24px 50px;
  border-radius: 12px;
  background: white;
  box-shadow: 0 6px 12px 0 rgba(138, 146, 146, 0.2);
}
.tips-and-tricks-page-container .contact-container .contact-card .contact-subtext {
  font-weight: bold;
  font-family: 'Poppins';
  font-size: 24px;
  margin: auto;
  margin-bottom: 18px;
  width: fit-content;
}
.tips-and-tricks-page-container .contact-container .contact-card .contact-button {
  width: 300px;
  margin: auto;
}
.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;
}
.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 .call-to-action-item {
  width: fit-content;
  width: -moz-fit-content;
  margin: 6px;
}
.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-items .call-to-action-item.medium {
  width: 48px;
  font-size: 48px;
  font-weight: 400;
  margin: auto;
}
.confirm-modal.create-billing-item-modal .modal-window {
  width: 700px;
}
.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: 3px;
}
.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: 3px;
}
.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: 3px;
  border: 1px solid #cccccc;
}
.support-select-billing select {
  margin-bottom: 12px;
}
.support-select-billing button {
  margin: 0 auto;
}
.terms-and-conditions-modal .modal-window {
  padding: 6px 12px;
  width: 450px;
}
.terms-and-conditions-modal .modal-body {
  margin: 12px;
}
.terms-and-conditions-modal .terms-and-conditions-actions {
  display: flex;
}
.terms-and-conditions-modal .call-to-action-item {
  margin: 12px;
  flex-basis: 0;
  flex-grow: 1;
  width: 0;
}
.terms-and-conditions-form {
  padding: 12px 6px;
  font-size: 14px;
  font-family: 'Poppins', Arial, sans-serif;
}
.terms-and-conditions-error {
  color: #ef5455;
  font-size: 14px;
}
.team-invite-links {
  padding: 0 36px;
}
.team-invite-links .invite-link-block {
  padding-bottom: 24px;
}
.team-invite-links .invite-link-name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.team-invite-links .invite-link-row {
  display: grid;
  grid-template-columns: 10fr 1fr 1fr;
  grid-gap: 6px;
  margin-top: 6px;
}
.team-invite-links .invite-link-role {
  margin: auto;
  padding-left: 6px;
}
.team-invite-links .create-invite-link {
  display: grid;
  grid-template-columns: 6fr 3fr 3fr;
  align-items: center;
  grid-gap: 6px;
}
.team-invite-links .create-invite-link .dropdown-control {
  margin: auto;
}
.team-invite-links .create-invite-link .call-to-action-item {
  width: unset;
  height: 40px;
  margin: auto;
}
.team-invite-links hr {
  margin: 12px 0 24px;
}
.create-invites.modal .modal-window {
  padding: 6px 12px;
  min-width: 350px;
}
.create-invites .create-invites-header {
  margin-bottom: 36px;
  padding: 0 12px;
}
.create-invites .create-invite-methods {
  display: grid;
  grid-gap: 12px;
  margin: 36px;
}
.create-invites .invitation-form .invite-create {
  margin-top: 18px;
  transition: margin 0.7s;
}
.create-invites .invitation-form .invite-create .dropdown-control {
  padding: 0px;
  height: 35px;
}
.create-invites .invitation-form .invite-create input {
  height: 35px;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  border: unset;
  border-radius: unset;
  border-bottom: 1px solid #cccccc;
}
.create-invites .invitation-form .invite-create .phone-input {
  position: relative;
}
.create-invites .invitation-form .invite-create .phone-input .react-tel-input .form-control {
  width: 100%;
}
.create-invites .invitation-form .invite-create .phone-input .react-tel-input .form-control.open {
  z-index: unset;
}
.create-invites .invitation-form .invite-create .phone-input .phone-input-placeholder {
  color: #797979;
  position: absolute;
  left: 70px;
  bottom: 10px;
  pointer-events: none;
  user-select: none;
  display: none;
}
.create-invites .invitation-form .invite-create .phone-input.is-empty .react-tel-input input {
  color: #797979;
}
.create-invites .invitation-form .invite-create .phone-input.is-empty .phone-input-placeholder {
  display: unset;
}
.create-invites .invitation-form .invite-create .alias-input {
  z-index: 1;
}
.create-invites .invitation-form .invite-create .invite-create-inputs {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(140px, 1fr) auto auto;
  grid-gap: 6px;
}
.create-invites .invitation-form .invite-create .invite-create-inputs.success {
  opacity: 0.5;
}
.create-invites .invitation-form .invite-create .invite-create-inputs.success input {
  border-bottom: 2px solid #00960a;
}
.create-invites .invitation-form .invite-create .invite-create-inputs.error input {
  border-bottom: 2px solid #ef5455;
}
.create-invites .invitation-form .invite-create .phone-input-error {
  margin-left: 42px;
}
.create-invites .invitation-form .invite-create .remove-input {
  position: relative;
  top: 6px;
  cursor: pointer;
  color: #333333;
}
.create-invites .invitation-form .invite-create.is-last {
  margin-top: 0;
  opacity: 0;
  pointer-events: none;
  user-select: none;
}
.create-invites .invitation-form.team-create-invite-form .invite-create .invite-create-inputs {
  grid-template-columns: 4fr 3fr auto;
}
.create-invites .invite-by-email {
  padding: 0 12px;
}
.create-invites .tab-list {
  margin-bottom: 12px;
}
#account-management .account-management-actions .callout-button .fa-cog {
  font-size: 24px;
}
.squad-slide-bar .squad-bar-squad-list,
.squad-slide-bar .squad-bar-invites-list {
  max-height: 160px;
  overflow: auto;
}
.admin-invites .admin-invites-item {
  padding: 12px 24px;
  background-color: #ffffff;
  border-bottom: 1px solid #ebf0f0;
}
.admin-invites .admin-invites-item:hover {
  background-color: #f4f6f6;
}
.admin-invites .admin-invites-item.SENT .sent-status {
  color: #3ebfc2;
}
.admin-invites .admin-invites-item.FAILED .sent-status {
  color: #ff585d;
}
.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;
}
.plans-and-billing-page .draggable-content-container {
  height: 100%;
}
.plans-and-billing-page .plan-info-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.plan-description-items-container {
  display: grid;
  grid-gap: 9px 6px;
  grid-template-columns: 24px 1fr;
}
.upgrade-plan-modal {
  max-width: calc(100vw - 50px);
}
.upgrade-plan-modal .success-subtext,
.upgrade-plan-modal .payment-subtext,
.upgrade-plan-modal .subscription-subtext {
  margin-top: 24px;
  color: #8a9292;
  font-size: 13px;
  line-height: 1.65;
}
.upgrade-plan-modal .selection-billing-item-panel-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.upgrade-plan-modal .plan-select-description {
  display: grid;
  grid-gap: 9px 6px;
  grid-template-columns: 24px 1fr;
}
.upgrade-plan-modal .plan-confirmation-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 30px;
  margin-left: 12px;
  margin-right: 12px;
}
.upgrade-plan-modal .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;
}
.stripe-form-container {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-gap: 9px;
}
.stripe-form-container .string-input-container .text-error {
  margin-top: 0;
}
.stripe-form-container .stripe-card-number-element,
.stripe-form-container .stripe-card-expiration-element,
.stripe-form-container .stripe-card-cvc-element {
  padding: 9px;
  border-radius: 6px;
  border: 1px solid #ebf0f0;
}
.stripe-form-container .stripe-card-number-element.disabled,
.stripe-form-container .stripe-card-expiration-element.disabled,
.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;
}
.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;
  border: 1px dashed #ebf0f0;
  padding: 18px;
  height: 70px;
  cursor: pointer;
}
.admin-people-content .member-list-container {
  margin-top: 0;
  padding: 24px;
  background-color: #ffffff;
  border-top: 1px solid #ebf0f0;
}
.admin-people-content .member-list-builder {
  height: 100%;
}
.people-page .people-page-member-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
}
.people-page .people-page-member-details .people-page-details-box {
  background-color: #f4f6f6;
  padding: 12px 24px;
  border-radius: 6px;
}
.people-page .people-page-member-details .people-page-details-box div:first-child {
  color: #8a9292;
  font-size: 12px;
}
.people-page .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;
}
.search-page .content-text .content-paragraph {
  padding-left: 0px;
}
.search-page .search-item-display .search-item-icon {
  font-size: 22px;
  color: #666;
}
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: 0px 3px 56px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 3px 56px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 3px 56px 1px rgba(0, 0, 0, 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: 3px 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);
  }
}