@charset "UTF-8";
/* Functions BEGIN */
/* Functions */
/* Pixels to Ems function */
/* Functions END */
/* Variables BEGIN */
/**
 * Base
 */
/**
* Controls
*/
/**
* Buttons
*/
/**
* Color variables
**/
/**
 * Dialog colors
 **/
/**
* Inlay colors
**/
/**
 * Forms
 */
/**
 * TODO: Replace by themed component.
 */
/**
 * Style variables
 */
/**
 * Size variables.
 */
/**
 * Color variables.
 */
/**
 * Toolbar
 */
/**
 * Video layout
 */
/**
 * Feedback Modal
 */
/**
 * Modals
 */
/**
 * Chat
 */
/**
 * Misc.
 */
/**
 * Z-indexes. TODO: Replace this by a function.
 */
/**
 * Font Colors
 */
/**
 * Forms
 */
/**
 * Unsupported browser
 */
/**
 * The size of the default watermark.
 */
/**
 * Welcome page variables.
 */
/**
 * Deep-linking page variables.
 */
/**
* Chrome extension banner variables.
*/
/**
* media type thresholds
*/
/* Variables END */
/* Mixins BEGIN */
/**
 * Animation mixin.
 */
/**
 * Keyframes mixin.
 */
/**
* Absolute position the element at the top left corner
**/
/**
* Defines the maximum width and height
**/
/**
 * Mixin styling a placeholder.
 **/
/**
 * Mixin styling a slider track for different browsers.
 **/
/**
 * Mixin styling a slider thumb for different browsers.
 **/
/**
 * Creates a semi-transparent background with the given color and alpha
 * (opacity) value.
 */
/**
 * Avatar status badge mixin
 */
/* Mixins END */
/* Animations END */
/* Flags BEGIN */
/*@import "../node_modules/bc-css-flags/dist/css/bc-css-flags.scss";*/
/* Flags END */
/* Modules BEGIN */
/* Fonts and line heights */
/**
 * RESET
 */
html,
body,
p,
div,
h1,
h2,
h3,
h4,
h5,
h6,
img,
pre,
form,
fieldset {
  margin: 0;
  padding: 0; }

ul,
ol,
dl {
  margin: 0; }

img,
fieldset {
  border: 0; }

@-moz-document url-prefix() {
  img {
    font-size: 0; }
  img:-moz-broken {
    font-size: inherit; } }

/* https://github.com/necolas/normalize.css */
/* Customised to remove styles for unsupported browsers */
details,
main,
summary {
  display: block; }

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline; }

audio:not([controls]) {
  display: none;
  height: 0; }

[hidden],
template {
  display: none; }

input[type="button"],
input[type="submit"],
input[type="reset"] {
  -webkit-appearance: button; }

/**
 * TYPOGRAPHY - 14px base font size, agnostic font stack
 */
body {
  color: #333;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857142857143; }

/* International Font Stacks*/
[lang|=en] {
  font-family: Arial, sans-serif; }

[lang|=ja] {
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Verdana, Arial, sans-serif; }

/* Default margins */
p,
ul,
ol,
dl,
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
pre {
  margin: 10px 0 0 0; }

/* No top margin to interfere with box padding */
p:first-child,
ul:first-child,
ol:first-child,
dl:first-child,
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child,
blockquote:first-child,
pre:first-child {
  margin-top: 0; }

/* Headings: desired line height in px / font size = unitless line height */
h1 {
  color: #333;
  font-size: 32px;
  font-weight: normal;
  line-height: 1.25;
  text-transform: none;
  margin: 30px 0 0 0; }

h2 {
  color: #333;
  font-size: 24px;
  font-weight: normal;
  line-height: 1.25;
  text-transform: none;
  margin: 30px 0 0 0; }

h3 {
  color: #333;
  font-size: 20px;
  font-weight: normal;
  line-height: 1.5;
  text-transform: none;
  margin: 30px 0 0 0; }

h4 {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.25;
  text-transform: none;
  margin: 20px 0 0 0; }

h5 {
  color: #333;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.42857143;
  text-transform: none;
  margin: 20px 0 0 0; }

h6 {
  color: #707070;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.66666667;
  text-transform: uppercase;
  margin: 20px 0 0 0; }

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
  margin-top: 0; }

/* Nice styles for using subheadings */
h1 + h2,
h2 + h3,
h3 + h4,
h4 + h5,
h5 + h6 {
  margin-top: 10px; }

/* Other typographical elements */
small {
  color: #707070;
  font-size: 12px;
  line-height: 1.33333333333333; }

code,
kbd {
  font-family: monospace; }

var,
address,
dfn,
cite {
  font-style: italic; }

cite:before {
  content: "\2014 \2009"; }

blockquote {
  border-left: 1px solid #ccc;
  color: #707070;
  margin-left: 19px;
  padding: 10px 20px; }

blockquote > cite {
  display: block;
  margin-top: 10px; }

q {
  color: #707070; }

q:before {
  content: open-quote; }

q:after {
  content: close-quote; }

abbr {
  border-bottom: 1px #707070 dotted;
  cursor: help; }

a {
  color: #3572b0;
  text-decoration: none; }

a:focus,
a:hover,
a:active {
  text-decoration: underline; }

/**
 * Move the @atlaskit/flag container up a little bit so it does not cover the
 * toolbar with the first notification.
 */
.jIMojv {
  bottom: calc(calc(40px + 24px)) !important; }

/**
 * Disable the slide-in animation for @atlaskit/flag due to the animation
 * repeating for each queued flag once it becomes the top flag.
 */
.mIBKA:first-child {
  animation: cbfRuT 0s !important;
  -webkit-animation: cbfRuT 0s !important; }

.modal-dialog-form {
  /**
     * Update the @atlaskit/dropdown-menu trigger wrapper to make sure it looks
     * click-able.
     */
  /**
     * Override @atlaskit/dropdown-menu styling when in a modal because the
     * dropdown backgrounds clash with the modal backgrounds.
     */ }
  .modal-dialog-form .cjJUnw {
    cursor: pointer; }
  .modal-dialog-form .cksvax[data-role=droplistContent] {
    border: 1px solid #455166; }

/**
 * Override @atlaskit/theme styling for the top toolbar so it displays over
 * the video thumbnail while obscuring as little as possible.
 */
.videocontainer .tOoji {
  background: none; }

/**
 * Override @atlaskit/InlineDialog styling for the overflowmenu so it displays
 * with the correct height.
 */
.toolbox-button-wth-dialog .eYJELv {
  max-height: initial; }

/**
 * Safari will limit input in input elements to one character when user-select
 * none is applied. Other browsers already support selecting within inputs while
 * user-select is none. As such, disallow user-select except on inputs.
 */
* {
  -webkit-user-select: none;
  user-select: none; }

input,
textarea {
  -webkit-user-select: text;
  user-select: text; }

html {
  height: 100%;
  width: 100%; }

body {
  margin: 0px;
  width: 100%;
  height: 100%;
  font-size: 12px;
  font-weight: 400;
  overflow: hidden;
  color: #F1F1F1;
  background: #474747; }
  body.filmstrip-only {
    background: transparent; }

/**
 * This will hide the focus indicator if an element receives focus via the mouse,
 * but it will still show up on keyboard focus, thus preserving accessibility.
 */
.js-focus-visible :focus:not(.focus-visible) {
  outline: none; }

/**
 * AtlasKit sets a default margin on the rendered modals, so
 * when the shift-right class is set when the chat opens, we
 * pad the modal container in order for the modals to be centered
 * while also taking the chat size into consideration.
*/
@media (min-width: 855px) {
  .shift-right [class^="Modal__FillScreen"] {
    padding-left: 375px; } }

/**
 * Similarly, we offset the notifications when the chat is open by
 * padding the container.
*/
.shift-right [class^="styledFlagGroup-"] {
  padding-left: 375px; }

.jitsi-icon svg {
  fill: white; }

.jitsi-icon.gray svg {
  fill: #5E6D7A;
  cursor: pointer; }

/**
 * AtlasKitThemeProvider sets a background color on an app-wrapping div, thereby
 * preventing transparency in filmstrip-only mode. The selector chosen to
 * override this behavior is specific to where the AtlasKitThemeProvider might
 * be placed within the app hierarchy.
 */
.filmstrip-only #react > .ckAJgx {
  background: transparent; }

p {
  margin: 0; }

body, input, textarea, keygen, select, button {
  font-family: -apple-system, BlinkMacSystemFont, "open_sanslight", "Helvetica Neue", Helvetica, Arial, sans-serif !important; }

#nowebrtc {
  display: none; }

button, input, select, textarea {
  margin: 0;
  vertical-align: baseline;
  font-size: 1em; }

button, select, input[type="button"],
input[type="reset"], input[type="submit"] {
  cursor: pointer; }

textarea {
  word-wrap: break-word;
  resize: none;
  line-height: 1.5em; }

input[type='text'], input[type='password'], textarea {
  outline: none;
  /* removes the default outline */
  resize: none;
  /* prevents the user-resizing, adjust to taste */ }

button {
  color: #FFF;
  background-color: #44A5FF;
  border-radius: 4px; }
  button.no-icon {
    padding: 0 1em; }

button,
form {
  display: block; }

.watermark {
  display: block;
  position: absolute;
  top: 15;
  width: 186px;
  height: 74px;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2; }

.leftwatermark {
  left: 32px;
  top: 32px;
  background-position: center left;
  background-repeat: no-repeat;
  background-size: contain; }

.rightwatermark {
  right: 32px;
  top: 32px;
  background-position: center right; }

.poweredby {
  position: absolute;
  left: 25;
  bottom: 7;
  font-size: 11pt;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  z-index: 100; }

.connected {
  color: #21B9FC;
  font-size: 12px; }

.lastN, .disconnected {
  color: #a3a3a3;
  font-size: 12px; }

/**
* Dialogs fade
*/
.aui-blanket {
  background: #000;
  transition: opacity 0.2s, visibility 0.2s;
  transition-delay: 0.1s;
  visibility: visible; }

#inviteLinkRef {
  -webkit-user-select: text;
  user-select: text; }

/**
 * Re-style default OS scrollbar.
 */
::-webkit-scrollbar {
  background: transparent;
  width: 7px;
  height: 7px; }

::-webkit-scrollbar-button {
  display: none; }

::-webkit-scrollbar-track {
  background: transparent; }

::-webkit-scrollbar-track-piece {
  background: transparent; }

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px; }

.flip-x {
  transform: scaleX(-1); }

.hidden {
  display: none; }

/**
 * Hides an element.
 */
.hide {
  display: none !important; }

.invisible {
  visibility: hidden; }

/**
 * Shows an element.
 */
.show {
  display: block !important; }

/**
 * Shows an inline element.
 */
.show-inline {
  display: inline-block !important; }

/**
 * Shows a flex element.
 */
.show-flex {
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important; }

.overlay__container, .overlay__container-light {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 1016;
  background: #474747; }
  .overlay__container.filmstrip-only, .overlay__container-light.filmstrip-only {
    background-color: rgba(0, 0, 0, 0.8); }

.overlay__container-light {
  background-color: rgba(71, 71, 71, 0.7); }
  .overlay__container-light.filmstrip-only {
    background-color: rgba(0, 0, 0, 0.2); }

.overlay__content {
  position: absolute;
  margin: 0 auto;
  height: 100%;
  width: 56%;
  left: 50%;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%); }
  .overlay__content.filmstrip-only {
    left: 0px;
    width: 100%;
    -moz-transform: none;
    -ms-transform: none;
    -webkit-transform: none;
    -o-transform: none;
    transform: none; }
  .overlay__content_bottom {
    position: absolute;
    bottom: 0; }

.overlay__policy {
  position: absolute;
  bottom: 24px;
  width: 100%; }

.inlay {
  margin-top: 14%;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  /* stops bg color from leaking outside the border: */
  background-clip: padding-box;
  padding: 40px 38px 44px;
  color: #fff;
  background: #7a7a7a;
  text-align: center; }
  .inlay__title {
    margin: 17px 0;
    padding-bottom: 17px;
    color: #ffffff !important;
    font-size: 21px;
    letter-spacing: 0.3px;
    border-bottom: 1px solid white; }
  .inlay__text {
    color: #ffffff !important;
    display: block;
    margin-top: 22px;
    font-size: 16px; }
  .inlay__icon {
    margin: 0 10px;
    font-size: 50px; }
  .inlay-filmstrip-only {
    background-color: #fff;
    color: #474747;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    bottom: 30px;
    position: absolute;
    display: flex;
    max-height: 120px;
    height: 80%;
    right: 0px;
    border-radius: 4px;
    overflow: hidden; }
    .inlay-filmstrip-only__content {
      padding: 20px;
      display: flex;
      justify-content: center;
      position: relative; }
      .inlay-filmstrip-only__content > .button-control {
        align-self: center; }
      .inlay-filmstrip-only__content > #reloadProgressBar {
        position: absolute;
        left: 0px;
        bottom: 0px;
        margin-bottom: 0px;
        width: 100%;
        border-radius: 0px; }
    .inlay-filmstrip-only__title {
      font-size: 18px;
      font-weight: 600; }
    .inlay-filmstrip-only__container {
      align-self: center; }
    .inlay-filmstrip-only__text {
      margin-top: 10px;
      font-size: 14px;
      font-weight: 600; }
    .inlay-filmstrip-only__icon {
      font-size: 50px;
      align-self: center;
      color: #fff;
      opacity: 0.6; }
    .inlay-filmstrip-only__icon-container {
      text-align: center;
      display: flex;
      justify-content: center;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0px; }
    .inlay-filmstrip-only__avatar-container {
      height: 100%;
      position: relative; }
      .inlay-filmstrip-only__avatar-container > img {
        height: 100%; }
    .inlay-filmstrip-only__icon-background {
      background: #000;
      opacity: 0.6;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0px; }

.reload_overlay_title {
  display: block;
  font-size: 16px;
  line-height: 20px; }

.reload_overlay_text {
  display: block;
  font-size: 12px;
  line-height: 30px; }

#reloadProgressBar {
  background: #e9e9e9;
  border-radius: 3px;
  height: 5px;
  margin: 5px auto;
  overflow: hidden;
  width: 180px; }
  #reloadProgressBar .progress-indicator-fill {
    background: #0074E0;
    height: 100%;
    transition: width .5s; }

.filmstrip-toolbox,
.always-on-top-toolbox {
  background-color: rgba(22, 38, 55, 0.8);
  border-radius: 3px;
  display: flex;
  z-index: 350; }
  .filmstrip-toolbox .toolbox-icon,
  .always-on-top-toolbox .toolbox-icon {
    cursor: pointer;
    padding: 7px; }
    .filmstrip-toolbox .toolbox-icon.toggled,
    .always-on-top-toolbox .toolbox-icon.toggled {
      background: #0e1423; }
    .filmstrip-toolbox .toolbox-icon.disabled,
    .always-on-top-toolbox .toolbox-icon.disabled {
      cursor: initial; }

.always-on-top-toolbox {
  flex-direction: row;
  left: 50%;
  position: absolute;
  top: 10px;
  transform: translateX(-50%); }
  .always-on-top-toolbox .toolbox-button:first-child .toolbox-icon {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px; }
  .always-on-top-toolbox .toolbox-button:nth-child(2) svg {
    fill: #bf2117; }
  .always-on-top-toolbox .toolbox-button:last-child .toolbox-icon {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px; }

.filmstrip-toolbox {
  flex-direction: column; }
  .filmstrip-toolbox .toolbox-button:nth-child(1) svg {
    fill: #bf2117; }
  .filmstrip-toolbox .toolbox-button .toolbox-icon {
    border-radius: 3px; }

.copy-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 8px 8px 16px;
  margin-top: 8px;
  width: calc(100% - 24px);
  height: 24px;
  background: #0376DA;
  border-radius: 4px;
  cursor: pointer; }
  .copy-button:hover {
    background: #278ADF;
    font-weight: 600; }
  .copy-button-content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 292px;
    margin-right: 16px; }
    .copy-button-content.selected {
      font-weight: 600; }
  .copy-button.clicked {
    background: #31B76A; }
  .copy-button > div > svg > path {
    fill: #fff; }

.desktop-picker-pane {
  height: 320px;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%; }
  .desktop-picker-pane.source-type-screen .desktop-picker-source {
    margin-left: auto;
    margin-right: auto;
    width: 50%; }
  .desktop-picker-pane.source-type-screen .desktop-source-preview-thumbnail {
    width: 100%; }
  .desktop-picker-pane.source-type-screen .desktop-source-preview-label {
    display: none; }
  .desktop-picker-pane.source-type-window .desktop-picker-source {
    display: inline-block;
    width: 30%; }
  .desktop-picker-pane-spinner {
    justify-content: center;
    display: flex;
    height: 100%;
    align-items: center; }

.desktop-picker-source {
  margin-top: 10px;
  text-align: center; }
  .desktop-picker-source.is-selected .desktop-source-preview-image-container {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px; }

.desktop-source-preview-label {
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.desktop-source-preview-thumbnail {
  box-shadow: 5px 5px 5px grey;
  height: auto;
  max-width: 100%; }

.desktop-source-preview-image-container {
  padding: 10px; }

.device-selection .device-selectors {
  font-size: 14px;
  /* device-selector-trigger stylings attempt to mimic AtlasKit button */ }
  .device-selection .device-selectors > div {
    display: block;
    margin-bottom: 4px; }
  .device-selection .device-selectors .device-selector-icon {
    align-self: center;
    color: inherit;
    font-size: 20px;
    margin-left: 3px; }
  .device-selection .device-selectors .device-selector-label {
    margin-bottom: 1px; }
  .device-selection .device-selectors .device-selector-trigger {
    background-color: #0E1624;
    border: 1px solid #455166;
    border-radius: 5px;
    display: flex;
    height: 2.3em;
    justify-content: space-between;
    line-height: 2.3em;
    overflow: hidden;
    padding: 0 8px; }
  .device-selection .device-selectors .device-selector-trigger-disabled .device-selector-trigger {
    color: #a5adba;
    cursor: default; }
  .device-selection .device-selectors .device-selector-trigger-text {
    overflow: hidden;
    margin-left: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%; }

.device-selection .device-selection-column {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top; }
  .device-selection .device-selection-column.column-selectors {
    margin-left: 15px;
    width: 45%; }
  .device-selection .device-selection-column.column-video {
    width: 50%; }

.device-selection .device-selection-video-container {
  border-radius: 3px;
  margin-bottom: 5px; }
  .device-selection .device-selection-video-container .video-input-preview {
    margin-top: 2px;
    position: relative; }
    .device-selection .device-selection-video-container .video-input-preview > video {
      border-radius: 3px; }
    .device-selection .device-selection-video-container .video-input-preview .video-input-preview-error {
      color: #fff;
      display: none;
      left: 0;
      position: absolute;
      right: 0;
      text-align: center;
      top: 50%; }
    .device-selection .device-selection-video-container .video-input-preview.video-preview-has-error {
      background: black; }
      .device-selection .device-selection-video-container .video-input-preview.video-preview-has-error .video-input-preview-error {
        display: block; }
    .device-selection .device-selection-video-container .video-input-preview .video-input-preview-display {
      height: auto;
      overflow: hidden;
      width: 100%; }

.device-selection .audio-output-preview {
  font-size: 14px; }
  .device-selection .audio-output-preview a {
    color: #2684FF;
    cursor: pointer;
    text-decoration: none; }
  .device-selection .audio-output-preview a:hover {
    color: #B3D4FF; }

.device-selection .audio-input-preview {
  background: #1B2638;
  border-radius: 5px;
  height: 8px; }
  .device-selection .audio-input-preview .audio-input-preview-level {
    background: #4C9AFF;
    border-radius: 5px;
    height: 100%;
    -webkit-transition: width .1s ease-in-out;
    -moz-transition: width .1s ease-in-out;
    -o-transition: width .1s ease-in-out;
    transition: width .1s ease-in-out; }

.dialog {
  box-sizing: border-box;
  height: auto;
  min-height: 131px;
  overflow: visible;
  visibility: visible;
  width: 400px; }
  .dialog h1, .dialog h2, .dialog h3, .dialog h4, .dialog h5, .dialog h6 {
    color: #eceef1; }
  .dialog .aui-dialog2-header, .dialog .aui-dialog2-footer {
    background-color: #253858;
    border: none; }
  .dialog .aui-dialog2-header {
    border-bottom: 1px solid #253858;
    border-radius: 5px 5px 0 0;
    box-sizing: border-box;
    color: #333;
    display: table;
    font-weight: normal;
    height: 4.83333em;
    margin-top: -69px;
    padding: 0 20px;
    width: 100%; }
    .dialog .aui-dialog2-header h2 {
      font-size: 1.66667em;
      font-weight: 400;
      color: #eceef1; }
    .dialog .aui-dialog2-header-main {
      display: table-cell;
      padding-right: 0;
      max-width: 400px;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
      white-space: nowrap; }
  .dialog .aui-dialog2-footer {
    border-top: 1px solid #253858;
    border-radius: 0 0 5px 5px;
    box-sizing: border-box;
    height: 51px;
    overflow: hidden;
    padding: 10px 20px;
    width: 100%; }
    .dialog .aui-dialog2-footer:empty {
      height: 5px;
      padding: 0; }
  .dialog .aui-dialog2-content {
    background-color: #253858;
    box-sizing: border-box;
    color: #eceef1;
    font-size: 1.16667em;
    overflow: auto;
    max-height: 100%;
    padding: 20px; }
    .dialog .aui-dialog2-content p, .dialog .aui-dialog2-content span, .dialog .aui-dialog2-content h3 {
      font-weight: 400; }
    .dialog .aui-dialog2-content:last-child {
      border-bottom-right-radius: 5px;
      border-bottom-left-radius: 5px; }
    .dialog .aui-dialog2-content:first-child {
      border-top-right-radius: 5px;
      border-top-left-radius: 5px; }
  .dialog .aui-hide {
    display: none; }
  .dialog .input-control {
    background-color: #344563;
    color: #eceef1; }
  .dialog .form-control:not(:last-child) {
    border-bottom: 1px solid #253858; }

@media all and (max-width: 420px) {
  .aui-dialog2-small .aui-dialog2-content {
    height: 100%; } }

.modal-dialog-form {
  margin-top: 5px !important; }
  .modal-dialog-form .input-control {
    background: #fafbfc;
    border: 1px solid #f4f5f7;
    color: inherit; }
  .modal-dialog-form-error {
    margin-bottom: 8px; }

.modal-dialog-footer {
  font-size: 14px; }

/**
 * Styling inline dialog errors.
 */
.inline-dialog-error {
  margin-top: 16px; }
  .inline-dialog-error-text {
    color: #344563;
    margin-bottom: 8px;
    text-align: center; }
  .inline-dialog-error-button {
    display: block;
    margin: 16px auto 0 auto; }

.embed-meeting-dialog {
  display: flex;
  flex-direction: column; }
  .embed-meeting-dialog-header {
    display: flex;
    justify-content: space-between;
    margin: 16px 16px 24px;
    width: calc(100% - 32px);
    color: #fff;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px; }
    .embed-meeting-dialog-header > div > svg {
      cursor: pointer;
      fill: #A4B8D1; }

.embed-meeting-copy {
  color: white;
  font-size: 15px;
  margin-left: auto;
  margin-top: 16px;
  width: auto; }

.embed-meeting-code {
  background: transparent;
  border: 1px solid #A4B8D1;
  color: white;
  font-size: 15px;
  height: 165px;
  line-height: 24px;
  padding: 8px;
  width: 100%;
  resize: vertical; }

.embed-meeting-trigger {
  display: flex;
  align-items: center;
  padding: 8px 8px 8px 16px;
  margin-top: 24px;
  width: calc(100% - 24px);
  height: 24px;
  background: #2A3A4B;
  border: 1px solid #5E6D7A;
  border-radius: 4px;
  cursor: pointer; }
  .embed-meeting-trigger .jitsi-icon {
    margin-right: 20px; }

@-webkit-keyframes shake-rotate {
  0% {
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg); }
  50% {
    -webkit-transform: scale(0.8) rotate(-5deg);
    transform: scale(0.8) rotate(-5deg); }
  to {
    -webkit-transform: scale(1) rotate(3deg);
    transform: scale(1) rotate(3deg); } }

@keyframes shake-rotate {
  0% {
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg); }
  50% {
    -webkit-transform: scale(0.8) rotate(-5deg);
    transform: scale(0.8) rotate(-5deg); }
  to {
    -webkit-transform: scale(1) rotate(3deg);
    transform: scale(1) rotate(3deg); } }

.shake-rotate {
  display: inline-block;
  -webkit-animation-duration: .4s;
  animation-duration: .4s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: shake-rotate;
  animation-name: shake-rotate;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out; }

.feedback-dialog .details textarea {
  min-height: 100px; }

.feedback-dialog .input-control {
  background-color: #fff;
  color: #333; }
  .feedback-dialog .input-control::-webkit-input-placeholder {
    color: #777; }
  .feedback-dialog .input-control::-moz-placeholder {
    /* Firefox 19+ */
    color: #777; }
  .feedback-dialog .input-control:-ms-input-placeholder {
    color: #777; }

.feedback-dialog .rating {
  line-height: 1.2;
  margin-top: 10px;
  text-align: center; }
  .feedback-dialog .rating .star-label {
    font-size: 14px;
    height: 16px; }
  .feedback-dialog .rating .star-btn {
    color: inherit;
    cursor: pointer;
    display: inline-block;
    font-size: 34px;
    outline: none;
    position: relative;
    text-decoration: none;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease; }
    .feedback-dialog .rating .star-btn.active, .feedback-dialog .rating .star-btn:hover, .feedback-dialog .rating .star-btn.starHover {
      color: #36B37E; }

.info-dialog {
  cursor: default;
  display: flex;
  font-size: 14px; }
  .info-dialog .info-dialog-column {
    margin-right: 10px;
    overflow: hidden; }
    .info-dialog .info-dialog-column a,
    .info-dialog .info-dialog-column a:active,
    .info-dialog .info-dialog-column a:focus,
    .info-dialog .info-dialog-column a:hover {
      text-decoration: none; }
  .info-dialog .info-dialog-password,
  .info-dialog .info-password,
  .info-dialog .info-password-form {
    align-items: baseline;
    display: flex; }
  .info-dialog .info-label {
    font-weight: bold; }
  .info-dialog .info-password-field {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  .info-dialog .info-password-none,
  .info-dialog .info-password-remote {
    opacity: 0.5; }
  .info-dialog .info-password-input {
    width: 100%;
    background-color: transparent;
    border: none;
    color: inherit;
    padding-left: 0; }
  .info-dialog .info-password-local {
    user-select: text; }

.dial-in-numbers-list {
  margin-top: 20px;
  font-size: 12px;
  line-height: 24px;
  border-collapse: collapse; }
  .dial-in-numbers-list thead {
    text-align: left; }
  .dial-in-numbers-list tr {
    border-bottom: 1px solid #d1dbe8; }
  .dial-in-numbers-list .flag-cell {
    vertical-align: top;
    width: 30px; }
  .dial-in-numbers-list .flag {
    display: block;
    margin: 5px 5px 0px 5px; }
  .dial-in-numbers-list .country {
    font-weight: bold;
    vertical-align: top;
    padding: 0 20px 0 0; }
  .dial-in-numbers-list ul {
    padding: 0px 0px 0px 0px; }
  .dial-in-numbers-list .numbers-list {
    list-style: none;
    padding: 0 20px 0 0; }
  .dial-in-numbers-list .toll-free-list {
    font-weight: bold;
    list-style: none;
    vertical-align: top; }
  .dial-in-numbers-list li.toll-free:empty:before {
    content: '.';
    visibility: hidden; }

.dial-in-page {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  max-height: 100%;
  overflow: auto;
  padding: 15pt;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  width: 100%; }
  .dial-in-page .dial-in-conference-id {
    text-align: center;
    min-width: 200px;
    margin-top: 40px; }
  .dial-in-page .dial-in-conference-name,
  .dial-in-page .dial-in-conference-pin {
    font-size: 18px; }
  .dial-in-page .dial-in-conference-description {
    margin: 12px; }

.info-dialog *,
.dial-in-page * {
  user-select: text;
  -moz-user-select: text;
  -webkit-user-select: text; }

.settings-pane {
  display: flex;
  width: 100%; }
  .settings-pane.profile-pane {
    flex-direction: column; }
  .settings-pane .auth-name {
    margin-bottom: 4px; }
  .settings-pane .calendar-tab,
  .settings-pane .device-selection {
    margin-top: 20px; }
  .settings-pane .mock-atlaskit-label {
    color: #56637A;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.33;
    padding: 20px 0px 4px 0px; }
  .settings-pane .calendar-tab,
  .settings-pane .more-tab,
  .settings-pane .profile-edit {
    display: flex;
    width: 100%; }
  .settings-pane .profile-edit-field {
    flex: 1; }
  .settings-pane .settings-sub-pane {
    flex-grow: 1; }
  .settings-pane .profile-edit-field {
    margin-right: 20px; }
  .settings-pane .language-settings {
    max-width: 50%; }
  .settings-pane .calendar-tab {
    align-items: center;
    flex-direction: column;
    font-size: 14px;
    min-height: 100px;
    text-align: center; }
  .settings-pane .calendar-tab-sign-in {
    margin-top: 20px; }
  .settings-pane .sign-out-cta {
    margin-bottom: 20px; }

.speaker-stats {
  list-style: none;
  padding: 0;
  width: 100%;
  font-weight: 500; }
  .speaker-stats .speaker-stats-item__status-dot {
    position: relative;
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin: 0 auto; }
    .speaker-stats .speaker-stats-item__status-dot.status-active {
      background: green; }
    .speaker-stats .speaker-stats-item__status-dot.status-inactive {
      background: gray; }
  .speaker-stats .status-user-left {
    color: #a7a7a7; }
  .speaker-stats .speaker-stats-item__status,
  .speaker-stats .speaker-stats-item__name,
  .speaker-stats .speaker-stats-item__time {
    display: inline-block;
    margin: 5px 0;
    vertical-align: middle; }
  .speaker-stats .speaker-stats-item__status {
    width: 5%; }
  .speaker-stats .speaker-stats-item__name {
    width: 40%; }
  .speaker-stats .speaker-stats-item__time {
    width: 55%; }
  .speaker-stats .speaker-stats-item__name,
  .speaker-stats .speaker-stats-item__time {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }

.video-quality-dialog .hide-warning {
  height: 0;
  visibility: hidden; }

.video-quality-dialog .video-quality-dialog-title {
  margin-bottom: 10px; }

.video-quality-dialog .video-quality-dialog-contents {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 10px;
  min-width: 250px; }
  .video-quality-dialog .video-quality-dialog-contents .video-quality-dialog-slider-container {
    width: 100%;
    text-align: center; }
  .video-quality-dialog .video-quality-dialog-contents .video-quality-dialog-slider {
    width: calc(100% - 5px); }
    .video-quality-dialog .video-quality-dialog-contents .video-quality-dialog-slider::-ms-track {
      height: 15px;
      border-radius: 10px;
      background: #0e1624; }
    .video-quality-dialog .video-quality-dialog-contents .video-quality-dialog-slider::-moz-range-track {
      height: 15px;
      border-radius: 10px;
      background: #0e1624; }
    .video-quality-dialog .video-quality-dialog-contents .video-quality-dialog-slider::-webkit-slider-runnable-track {
      height: 15px;
      border-radius: 10px;
      background: #0e1624; }
    .video-quality-dialog .video-quality-dialog-contents .video-quality-dialog-slider::-ms-thumb {
      top: 50%;
      border: none;
      position: relative;
      opacity: 0; }
    .video-quality-dialog .video-quality-dialog-contents .video-quality-dialog-slider::-moz-range-thumb {
      top: 50%;
      border: none;
      position: relative;
      opacity: 0; }
    .video-quality-dialog .video-quality-dialog-contents .video-quality-dialog-slider::-webkit-slider-thumb {
      top: 50%;
      border: none;
      position: relative;
      opacity: 0; }
  .video-quality-dialog .video-quality-dialog-contents .video-quality-dialog-labels {
    box-sizing: border-box;
    display: flex;
    margin-top: 5px;
    position: relative;
    width: 90%; }
  .video-quality-dialog .video-quality-dialog-contents .video-quality-dialog-label-container {
    position: absolute;
    text-align: center;
    transform: translate(-50%, 0%); }
    .video-quality-dialog .video-quality-dialog-contents .video-quality-dialog-label-container::before {
      content: '';
      border-radius: 50%;
      left: 0;
      height: 6px;
      margin: 0 auto;
      pointer-events: none;
      position: absolute;
      right: 0;
      top: -16px;
      width: 6px; }
  .video-quality-dialog .video-quality-dialog-contents .video-quality-dialog-label-container.active {
    color: #4C9AFF; }
    .video-quality-dialog .video-quality-dialog-contents .video-quality-dialog-label-container.active::before {
      background: #4C9AFF;
      height: 12px;
      top: -19px;
      width: 12px; }
  .video-quality-dialog .video-quality-dialog-contents .video-quality-dialog-label-container:first-child {
    position: relative; }
  .video-quality-dialog .video-quality-dialog-contents .video-quality-dialog-label {
    display: table-caption;
    word-spacing: unset; }

.video-quality-dialog.video-not-supported .video-quality-dialog-labels {
  color: gray; }

.video-quality-dialog.video-not-supported .video-quality-dialog-slider::-ms-track {
  background: rgba(14, 22, 36, 0.1); }

.video-quality-dialog.video-not-supported .video-quality-dialog-slider::-moz-range-track {
  background: rgba(14, 22, 36, 0.1); }

.video-quality-dialog.video-not-supported .video-quality-dialog-slider::-webkit-slider-runnable-track {
  background: rgba(14, 22, 36, 0.1); }

.modal-dialog-form .video-quality-dialog-title {
  display: none; }

#videoResolutionLabel {
  z-index: 4; }

.localrec-participant-stats {
  list-style: none;
  padding: 0;
  width: 100%;
  font-weight: 500; }
  .localrec-participant-stats .localrec-participant-stats-item__status-dot {
    position: relative;
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin: 0 auto; }
    .localrec-participant-stats .localrec-participant-stats-item__status-dot.status-on {
      background: green; }
    .localrec-participant-stats .localrec-participant-stats-item__status-dot.status-off {
      background: gray; }
    .localrec-participant-stats .localrec-participant-stats-item__status-dot.status-unknown {
      background: darkgoldenrod; }
    .localrec-participant-stats .localrec-participant-stats-item__status-dot.status-error {
      background: darkred; }
  .localrec-participant-stats .localrec-participant-stats-item__status,
  .localrec-participant-stats .localrec-participant-stats-item__name,
  .localrec-participant-stats .localrec-participant-stats-item__sessionid {
    display: inline-block;
    margin: 5px 0;
    vertical-align: middle; }
  .localrec-participant-stats .localrec-participant-stats-item__status {
    width: 5%; }
  .localrec-participant-stats .localrec-participant-stats-item__name {
    width: 40%; }
  .localrec-participant-stats .localrec-participant-stats-item__sessionid {
    width: 55%; }
  .localrec-participant-stats .localrec-participant-stats-item__name,
  .localrec-participant-stats .localrec-participant-stats-item__sessionid {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }

.localrec-control-info-label {
  font-weight: bold; }

.localrec-control-info-label:after {
  content: ' '; }

.localrec-control-action-link {
  display: inline-block;
  line-height: 1.5em; }
  .localrec-control-action-link a {
    cursor: pointer;
    vertical-align: middle; }

.localrec-control-action-link:before {
  color: #489afe;
  content: '\2022';
  font-size: 1.5em;
  padding: 0 10px;
  vertical-align: middle; }

.localrec-control-action-link:first-child:before {
  content: '';
  padding: 0; }

.localrec-control-action-links {
  font-weight: bold;
  margin-top: 10px;
  white-space: nowrap; }

#videoconference_page {
  min-height: 100%; }

#videospace {
  display: block;
  height: 100%;
  width: 100%;
  min-height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  overflow: hidden; }

#largeVideoBackgroundContainer,
.large-video-background {
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%; }
  #largeVideoBackgroundContainer #largeVideoBackground,
  .large-video-background #largeVideoBackground {
    min-height: 100%;
    min-width: 100%; }

#largeVideoBackgroundContainer {
  filter: blur(40px); }

.videocontainer {
  position: relative;
  text-align: center;
  /**
     * The toolbar of the video thumbnail.
     */ }
  .videocontainer__background {
    position: absolute;
    top: 0;
    left: 0;
    background-color: black;
    border-radius: 4px;
    width: 100%;
    height: 100%; }
  .videocontainer__toolbar, .videocontainer__toptoolbar {
    position: absolute;
    left: 0;
    pointer-events: none;
    z-index: 10;
    width: 100%;
    box-sizing: border-box;
    /**
         * FIXME (lenny): Disabling pointer-events is a pretty big sin that
         * sidesteps the problems. There are z-index wars occurring within
         * videocontainer and AtlasKit Tooltips rely on their parent z-indexe
         * being higher than whatever they need to appear over. So set a higher
         * z-index for the tooltip containers but make any empty space not block
         * mouse overs for various mouseover triggers.
         */
    pointer-events: none; }
    .videocontainer__toolbar *, .videocontainer__toptoolbar * {
      pointer-events: auto; }
    .videocontainer__toolbar .indicator-container, .videocontainer__toptoolbar .indicator-container {
      display: inline-block;
      float: left;
      pointer-events: all; }
  .videocontainer__toolbar {
    bottom: 0;
    height: 22px;
    padding: 0 5px 0 5px; }
  .videocontainer__toptoolbar {
    top: 0;
    padding-bottom: 0;
    /**
         * Override text-align center as icons need to be left justified.
         */
    text-align: left;
    /**
         * Intentionally use margin on the icon itself as AtlasKit InlineDialog
         * positioning depends on the trigger (indicator icon).
         */ }
    .videocontainer__toptoolbar .indicator {
      margin-left: 5px;
      margin-top: 5px; }
    .videocontainer__toptoolbar .indicator-container:nth-child(1) .indicator {
      margin-left: 5px; }
    .videocontainer__toptoolbar .indicator-container {
      display: inline-block;
      vertical-align: top; }
      .videocontainer__toptoolbar .indicator-container .popover-trigger {
        display: inline-block; }
    .videocontainer__toptoolbar .connection-indicator,
    .videocontainer__toptoolbar .indicator {
      position: relative;
      font-size: 8px;
      text-align: center;
      line-height: 22px;
      padding: 0;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      box-sizing: border-box;
      z-index: 3;
      background: #165ecc;
      color: #fff;
      border: 2px solid #fff; }
      .videocontainer__toptoolbar .connection-indicator .indicatoricon,
      .videocontainer__toptoolbar .indicator .indicatoricon {
        top: 50%;
        left: 50%;
        position: absolute;
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
      .videocontainer__toptoolbar .connection-indicator .connection,
      .videocontainer__toptoolbar .indicator .connection {
        position: relative;
        display: inline-block;
        margin: 0 auto;
        left: 0;
        -moz-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        -webkit-transform: translate(0, -50%);
        -o-transform: translate(0, -50%);
        transform: translate(0, -50%); }
        .videocontainer__toptoolbar .connection-indicator .connection_empty, .videocontainer__toptoolbar .connection-indicator .connection_lost,
        .videocontainer__toptoolbar .indicator .connection_empty,
        .videocontainer__toptoolbar .indicator .connection_lost {
          color: #8B8B8B;
          /*#FFFFFF*/
          overflow: hidden; }
        .videocontainer__toptoolbar .connection-indicator .connection_full,
        .videocontainer__toptoolbar .indicator .connection_full {
          position: absolute;
          top: 0;
          left: 0;
          color: #FFFFFF;
          /*#15A1ED*/
          overflow: hidden; }
        .videocontainer__toptoolbar .connection-indicator .connection_ninja,
        .videocontainer__toptoolbar .indicator .connection_ninja {
          font-size: 1.5em; }
      .videocontainer__toptoolbar .connection-indicator .icon-gsm-bars,
      .videocontainer__toptoolbar .indicator .icon-gsm-bars {
        cursor: pointer;
        font-size: 1em; }
    .videocontainer__toptoolbar .hide-connection-indicator {
      display: none; }
  .videocontainer__hoverOverlay {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 4px;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    visibility: hidden;
    z-index: 2; }
  .videocontainer.shift-right#largeVideoContainer {
    margin-left: 375px;
    width: calc(100% - 375px); }

#localVideoWrapper {
  display: inline-block; }

.flipVideoX {
  transform: scale(-1, 1);
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1); }

#localVideoWrapper video,
#localVideoWrapper object {
  border-radius: 4px !important;
  cursor: hand;
  object-fit: cover; }

#largeVideo,
#largeVideoWrapper,
#largeVideoContainer {
  overflow: hidden;
  text-align: center; }

#largeVideoContainer {
  height: 100%;
  width: 100%; }

#largeVideoWrapper {
  box-shadow: 0 0 20px -2px #444; }

#largeVideo,
#largeVideoWrapper {
  object-fit: cover; }

#sharedVideo,
#etherpad,
#localVideoWrapper video,
#localVideoWrapper object,
#localVideoWrapper,
#largeVideoWrapper,
#largeVideoWrapper > video,
#largeVideoWrapper > object,
.videocontainer > video,
.videocontainer > object {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%; }

#etherpad {
  text-align: center; }

#etherpad {
  z-index: 0; }

/**
 * Positions video thumbnail display name and editor.
 */
#alwaysOnTop .displayname,
.videocontainer .displayname,
.videocontainer .editdisplayname {
  display: inline-block;
  position: absolute;
  left: 10%;
  width: 80%;
  top: 50%;
  -moz-transform: translateY(-40%);
  -ms-transform: translateY(-40%);
  -webkit-transform: translateY(-40%);
  -o-transform: translateY(-40%);
  transform: translateY(-40%);
  color: #fff;
  text-align: center;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 100;
  overflow: hidden;
  white-space: nowrap;
  line-height: 22px;
  z-index: 2; }

#alwaysOnTop .displayname {
  font-size: 15px;
  position: inherit;
  width: 100%;
  left: 0px;
  top: 0px;
  margin-top: 10px; }

/**
 * Positions video thumbnail display name editor.
 */
.videocontainer .editdisplayname {
  outline: none;
  border: none;
  background: none;
  box-shadow: none;
  padding: 0; }

#localVideoContainer .displayname:hover {
  cursor: text; }

.videocontainer .displayname {
  pointer-events: none;
  padding: 0 3px 0 3px; }

.videocontainer .editdisplayname {
  height: auto; }

#localDisplayName {
  pointer-events: auto !important; }

.videocontainer > a.displayname {
  display: inline-block;
  position: absolute;
  color: #FFFFFF;
  bottom: 0;
  right: 0;
  padding: 3px 5px;
  font-size: 9pt;
  cursor: pointer;
  z-index: 2; }

/**
 * Video thumbnail toolbar icon.
 */
.videocontainer .toolbar-icon {
  font-size: 8pt;
  text-align: center;
  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), 0px -1px 0px rgba(0, 0, 0, 0.7);
  color: #FFFFFF;
  width: 12px;
  line-height: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  margin: 0px 5px 0px 0px; }

/**
 * Toolbar icon internal i elements (font icons).
 */
.toolbar-icon > div {
  height: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center; }

/**
 * Toolbar icons positioned on the right.
 */
.moderator-icon {
  display: inline-block; }
  .moderator-icon.right {
    float: right;
    margin: 0px 0px 0px 5px; }
  .moderator-icon .toolbar-icon {
    margin: 0; }

.raisehandindicator {
  background: #D6D61E; }

.connection-indicator {
  background: #165ecc; }
  .connection-indicator.status-high {
    background: green; }
  .connection-indicator.status-med {
    background: #FFD740; }
  .connection-indicator.status-lost {
    background: gray; }
  .connection-indicator.status-low {
    background: #BF2117; }
  .connection-indicator.status-other {
    background: #165ecc; }

.remote-video-menu-trigger,
.remotevideomenu {
  display: inline-block;
  position: absolute;
  top: 0px;
  right: 0;
  z-index: 2;
  width: 18px;
  height: 13px;
  color: #FFF;
  font-size: 10pt;
  margin-right: initial; }
  .remote-video-menu-trigger > i,
  .remotevideomenu > i {
    cursor: hand; }

.remote-video-menu-trigger {
  margin-top: 7px; }

/**
 * Audio indicator on video thumbnails.
 */
.videocontainer > span.audioindicator,
.videocontainer > .audioindicator-container {
  position: absolute;
  display: inline-block;
  left: 6px;
  top: 50%;
  margin-top: -17px;
  width: 6px;
  height: 35px;
  z-index: 2;
  border: none; }
  .videocontainer > span.audioindicator .audiodot-top,
  .videocontainer > span.audioindicator .audiodot-bottom,
  .videocontainer > span.audioindicator .audiodot-middle,
  .videocontainer > .audioindicator-container .audiodot-top,
  .videocontainer > .audioindicator-container .audiodot-bottom,
  .videocontainer > .audioindicator-container .audiodot-middle {
    opacity: 0;
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(9, 36, 77, 0.9);
    margin: 1px 0 1px 0;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out; }
  .videocontainer > span.audioindicator span.audiodot-top::after,
  .videocontainer > span.audioindicator span.audiodot-bottom::after,
  .videocontainer > span.audioindicator span.audiodot-middle::after,
  .videocontainer > .audioindicator-container span.audiodot-top::after,
  .videocontainer > .audioindicator-container span.audiodot-bottom::after,
  .videocontainer > .audioindicator-container span.audiodot-middle::after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    -webkit-filter: blur(0.5px);
    filter: blur(0.5px);
    background: #44A5FF; }

#reloadPresentation {
  display: none;
  position: absolute;
  color: #FFFFFF;
  top: 0;
  right: 0;
  padding: 10px 10px;
  font-size: 11pt;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  background-clip: padding-box;
  -webkit-border-radius: 5px;
  -webkit-background-clip: padding-box;
  z-index: 20;
  /*The reload button should appear on top of the header!*/ }

.audiolevel {
  display: inline-block;
  position: absolute;
  z-index: 0;
  border-radius: 1px;
  pointer-events: none; }

#dominantSpeaker {
  visibility: hidden;
  width: 300px;
  height: 300px;
  margin: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%); }

#mixedstream {
  display: none !important; }

#dominantSpeakerAvatarContainer,
.dynamic-shadow {
  width: 200px;
  height: 200px; }

#dominantSpeakerAvatarContainer {
  top: 50px;
  margin: auto;
  position: relative;
  overflow: hidden;
  visibility: inherit; }

.dynamic-shadow {
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -100px;
  transition: box-shadow 0.3s ease; }

.avatar-container {
  max-width: 60px;
  max-height: 60px;
  top: 50%;
  left: 50%;
  position: absolute;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  height: 50%;
  width: auto;
  overflow: hidden; }
  .avatar-container .userAvatar {
    height: 100%;
    object-fit: cover;
    width: 100%;
    top: 0px;
    left: 0px;
    position: absolute; }

#videoNotAvailableScreen {
  text-align: center; }
  #videoNotAvailableScreen #avatarContainer {
    border-radius: 50%;
    display: inline-block;
    height: 50vh;
    margin-top: 25vh;
    overflow: hidden;
    width: 50vh; }
    #videoNotAvailableScreen #avatarContainer #avatar {
      height: 100%;
      object-fit: cover;
      width: 100%; }

.sharedVideoAvatar {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  object-fit: cover; }

.videoMessageFilter {
  -webkit-filter: grayscale(0.5) opacity(0.8);
  filter: grayscale(0.5) opacity(0.8); }

#remotePresenceMessage,
#remoteConnectionMessage {
  position: absolute;
  width: auto;
  z-index: 2;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  color: #FFF;
  left: 50%;
  transform: translate(-50%, 0); }

#remotePresenceMessage .presence-label,
#remoteConnectionMessage {
  opacity: .80;
  text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.3), 1px 0px 1px rgba(0, 0, 0, 0.3), 0px 0px 1px rgba(0, 0, 0, 0.3);
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px; }

#remoteConnectionMessage {
  display: none; }

.display-avatar-with-name .avatar-container {
  visibility: visible; }

.display-avatar-with-name .displayNameContainer {
  visibility: visible; }

.display-avatar-with-name .videocontainer__hoverOverlay {
  visibility: visible; }

.display-avatar-with-name video {
  visibility: hidden; }

.display-name-on-black .avatar-container {
  visibility: hidden; }

.display-name-on-black .displayNameContainer {
  visibility: visible; }

.display-name-on-black .videocontainer__hoverOverlay {
  visibility: hidden; }

.display-name-on-black video {
  opacity: 0.2;
  visibility: visible; }

.display-video .avatar-container {
  visibility: hidden; }

.display-video .displayNameContainer {
  visibility: hidden; }

.display-video .videocontainer__hoverOverlay {
  visibility: hidden; }

.display-video video {
  visibility: visible; }

.display-name-on-video .avatar-container {
  visibility: hidden; }

.display-name-on-video .displayNameContainer {
  visibility: visible; }

.display-name-on-video .videocontainer__hoverOverlay {
  visibility: visible; }

.display-name-on-video video {
  visibility: visible; }

.display-avatar-only .avatar-container {
  visibility: visible; }

.display-avatar-only .displayNameContainer {
  visibility: hidden; }

.display-avatar-only .videocontainer__hoverOverlay {
  visibility: hidden; }

.display-avatar-only video {
  visibility: hidden; }

.presence-label {
  color: #fff;
  font-size: 12px;
  font-weight: 100;
  left: 0;
  margin: 0 auto;
  overflow: hidden;
  pointer-events: none;
  right: 0;
  text-align: center;
  text-overflow: ellipsis;
  top: calc(50% + 30px);
  white-space: nowrap;
  width: 100%; }

.notice {
  position: absolute;
  left: 50%;
  z-index: 3;
  margin-top: 6px;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%); }
  .notice__message {
    background-color: #000000;
    color: white;
    padding: 3px;
    border-radius: 5px; }

.subject {
  top: -120px;
  transition: top .3s ease-in;
  height: 95px;
  width: 100%;
  pointer-events: none;
  position: absolute;
  padding: 25px 140px 0 140px;
  text-align: center;
  font-size: 17px;
  color: #fff;
  z-index: 10;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  white-space: nowrap;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }
  .subject.visible {
    top: 0px; }
  .subject-text {
    vertical-align: middle; }
  .subject-conference-timer {
    display: block;
    font-size: 15px;
    opacity: 0.6; }

.participants-count {
  background: #fff;
  border-radius: 4px;
  color: #5e6d7a;
  cursor: pointer;
  display: inline-block;
  font-size: 13px;
  line-height: 20px;
  margin-left: 16px;
  padding: 4px 8px;
  pointer-events: auto; }
  .participants-count-number {
    margin-right: 8px;
    vertical-align: middle; }
  .participants-count-icon {
    background: url("../images/user-groups.svg");
    background-repeat: no-repeat;
    display: inline-block;
    height: 16px;
    width: 16px;
    vertical-align: middle; }

/**
* Initialize
**/
.popupmenu {
  min-width: 75px;
  text-align: left;
  padding: 0px;
  width: 180px;
  white-space: nowrap; }
  .popupmenu__item {
    list-style-type: none;
    height: 35px; }
  .popupmenu__link, .popupmenu__contents {
    display: block;
    box-sizing: border-box;
    text-decoration: none;
    height: 100%;
    font-size: 9pt;
    width: 100%;
    cursor: pointer;
    padding: 0 5px;
    color: #ffffff !important; }
    .popupmenu__link:hover, .popupmenu__contents:hover {
      background-color: rgba(255, 255, 255, 0.1);
      color: #ffffff !important; }
    .popupmenu__link.disabled, .popupmenu__contents.disabled {
      pointer-events: none; }
  .popupmenu__text {
    display: inline-block;
    vertical-align: middle; }
  .popupmenu__link i {
    cursor: pointer; }
  .popupmenu__contents {
    display: flex;
    /**
         * Positioning styles on the slider and its container are used to make
         * the container fit the popup width, by removing the slider from the
         * page flow, and then making the slider fit the container.
         */ }
    .popupmenu__contents .popupmenu__slider_container {
      position: relative;
      width: 100%; }
      .popupmenu__contents .popupmenu__slider_container .popupmenu__slider {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        width: 100%; }
        .popupmenu__contents .popupmenu__slider_container .popupmenu__slider::-webkit-slider-runnable-track {
          background-color: #0376da; }
        .popupmenu__contents .popupmenu__slider_container .popupmenu__slider::-moz-range-track {
          background-color: #0376da; }
        .popupmenu__contents .popupmenu__slider_container .popupmenu__slider::-ms-fill-lower {
          background-color: #0376da; }
  .popupmenu__icon {
    vertical-align: middle;
    position: relative;
    display: inline-block;
    min-width: 20px;
    height: 100%;
    padding-right: 10px; }
    .popupmenu__icon > * {
      top: 50%;
      left: 50%;
      position: absolute;
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }
  .popupmenu .icon-kick,
  .popupmenu .icon-play,
  .popupmenu .icon-stop {
    font-size: 8pt; }

/**
 * Override reset css styling modifying all lists and set negative margin to
 * reduce the visibility of padding on AtlasKit
 * InlineDialogs.
 */
ul.popupmenu {
  margin: -16px -24px; }

span.remotevideomenu:hover ul.popupmenu, ul.popupmenu:hover {
  display: block !important; }

.recordingSpinner {
  vertical-align: top; }

.recording-dialog {
  flex: 0;
  flex-direction: column; }
  .recording-dialog .recording-header {
    display: flex;
    flex: 0;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 32px; }
    .recording-dialog .recording-header .recording-title {
      display: inline-flex;
      align-items: center;
      font-size: 16px;
      margin-left: 16px; }
  .recording-dialog .recording-header-line {
    border-top: 1px solid #5e6d7a; }
  .recording-dialog .recording-switch-disabled {
    opacity: 0.5; }
  .recording-dialog .recording-icon-container {
    display: inline-flex;
    align-items: center; }
  .recording-dialog .recording-icon {
    width: 32px;
    height: 32px;
    object-fit: contain; }
  .recording-dialog .recording-switch {
    margin-left: auto; }
  .recording-dialog .authorization-panel {
    display: flex;
    flex-direction: column;
    margin: 0 40px 10px 40px;
    padding-bottom: 10px; }
    .recording-dialog .authorization-panel .logged-in-panel {
      padding: 10px; }

.live-stream-dialog {
  /**
     * Set font-size to be consistent with Atlaskit FieldText.
     */
  font-size: 14px; }
  .live-stream-dialog .broadcast-dropdown,
  .live-stream-dialog .broadcast-dropdown-trigger {
    text-align: left; }
  .live-stream-dialog .form-footer {
    display: flex;
    margin-top: 5px;
    text-align: right;
    flex-direction: column; }
    .live-stream-dialog .form-footer .help-container {
      display: flex; }
  .live-stream-dialog .live-stream-cta a {
    cursor: pointer; }
  .live-stream-dialog .google-api {
    margin-top: 10px;
    min-height: 36px;
    text-align: center;
    width: 100%; }
  .live-stream-dialog .google-error {
    color: #c61600; }
  .live-stream-dialog .google-panel {
    align-items: center;
    border-bottom: 2px solid rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    padding-bottom: 10px; }
  .live-stream-dialog .helper-link {
    cursor: pointer;
    display: inline-block;
    flex-shrink: 0;
    margin-left: auto; }
  .live-stream-dialog .warning-text {
    color: #FFD740;
    font-size: 12px; }

/*Initialize*/
div.loginmenu {
  position: absolute;
  margin: 0;
  padding: 5px;
  top: 40px;
  left: 20px; }

a.disabled {
  color: gray !important;
  pointer-events: none; }

.loginmenu.extendedToolbarPopup {
  top: 20px;
  left: 40px; }

#sideToolbarContainer {
  background-color: rgba(22, 38, 55, 0.8);
  box-sizing: border-box;
  color: #FFF;
  display: flex;
  flex-direction: column;
  height: 100%;
  left: -375px;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 375px;
  z-index: 300;
  /**
     * The sidebar (chat) is off-screen when hidden. Move it flush to the left
     * side of the window when it should be visible.
     */ }
  #sideToolbarContainer.slideInExt {
    left: 0; }

#chatconversation {
  box-sizing: border-box;
  flex: 1;
  font-size: 10pt;
  line-height: 20px;
  overflow: auto;
  padding: 16px;
  text-align: left;
  width: 375px;
  word-wrap: break-word; }
  #chatconversation a {
    display: block; }
  #chatconversation a:link {
    color: #b8b8b8; }
  #chatconversation a:visited {
    color: white; }
  #chatconversation a:hover {
    color: #d5d5d5; }
  #chatconversation a:active {
    color: black; }
  #chatconversation::-webkit-scrollbar {
    background: #06a5df;
    width: 7px; }
  #chatconversation::-webkit-scrollbar-button {
    display: none; }
  #chatconversation::-webkit-scrollbar-track {
    background: black; }
  #chatconversation::-webkit-scrollbar-track-piece {
    background: black; }
  #chatconversation::-webkit-scrollbar-thumb {
    background: #06a5df;
    border-radius: 4px; }

#chat-recipient {
  align-items: center;
  background-color: #99454d;
  display: flex;
  flex-direction: row;
  font-weight: 100;
  padding: 10px; }
  #chat-recipient span {
    color: white;
    display: flex;
    flex: 1; }
  #chat-recipient div svg {
    cursor: pointer;
    fill: white; }

.chat-header {
  background-color: rgba(42, 58, 75, 0.9);
  height: 70px;
  position: relative;
  width: 100%;
  z-index: 1; }
  .chat-header .chat-close {
    align-items: center;
    bottom: 8px;
    color: white;
    cursor: pointer;
    display: flex;
    font-size: 18px;
    height: 40px;
    justify-content: center;
    line-height: 15px;
    padding: 4px;
    position: absolute;
    right: 5px;
    width: 40px; }
    .chat-header .chat-close:hover {
      color: rgba(255, 255, 255, 0.8); }

#chat-input {
  border-top: 1px solid #A4B8D1;
  display: flex;
  padding: 5px 10px; }
  #chat-input * {
    background-color: transparent; }

.remoteuser {
  color: #B8C7E0; }

.usrmsg-form {
  flex: 1; }

#usermsg {
  border: 0px none;
  border-radius: 0;
  box-shadow: none;
  color: white;
  font-size: 15px;
  padding: 10px;
  overflow-y: auto;
  resize: none;
  width: 100%;
  word-break: break-word; }

#usermsg:hover {
  border: 0px none;
  box-shadow: none; }

#nickname {
  text-align: center;
  color: #9d9d9d;
  font-size: 18px;
  margin-top: 30px;
  left: 5px;
  right: 5px; }

.sideToolbarContainer * {
  -webkit-user-select: text;
  user-select: text; }

.sideToolbarContainer .display-name {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden; }

.chatmessage {
  background-color: #566572;
  border-radius: 0px 6px 6px 6px;
  box-sizing: border-box;
  color: white;
  margin-top: 3px;
  max-width: 100%;
  position: relative; }
  .chatmessage.localuser {
    background-color: #0462b2;
    border-radius: 6px 0px 6px 6px; }
  .chatmessage .usermessage {
    white-space: pre-wrap; }
  .chatmessage.error {
    border-radius: 0px; }
    .chatmessage.error .timestamp,
    .chatmessage.error .display-name {
      display: none; }
    .chatmessage.error .usermessage {
      color: red;
      padding: 0; }
  .chatmessage .privatemessagenotice {
    font-size: 11px;
    font-weight: 100; }
  .chatmessage .messagecontent {
    margin: 5px 10px;
    max-width: 100%;
    overflow: hidden; }

.smiley {
  font-size: 14pt; }

#smileys {
  font-size: 20pt;
  margin: auto;
  cursor: pointer; }

#smileys img {
  width: 22px;
  padding: 2px; }

#smileysarea {
  display: flex;
  max-height: 150px;
  min-height: 35px;
  overflow: hidden; }

.smiley-input {
  display: flex;
  position: relative; }

.smileys-panel {
  bottom: 100%;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.6) !important;
  height: auto;
  max-height: 0;
  overflow: hidden;
  position: absolute;
  width: 375px;
  /**
     * CSS transitions do not apply for auto dimensions. So to produce the css
     * accordion effect for showing and hiding the smiley-panel, while allowing
     * for variable panel, height, use a very large max-height and animate off
     * of that.
     */
  transition: max-height 0.3s; }
  .smileys-panel.show-smileys {
    max-height: 500%; }
  .smileys-panel #smileysContainer {
    background-color: rgba(22, 38, 55, 0.8);
    border-bottom: 1px solid;
    border-top: 1px solid; }

#smileysContainer .smiley {
  font-size: 20pt; }

.smileyContainer {
  width: 40px;
  height: 36px;
  display: inline-block;
  text-align: center; }

.smileyContainer:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  cursor: pointer; }

#usermsg::-webkit-scrollbar-track-piece {
  background: #3a3a3a; }

.chat-message-group {
  display: flex;
  flex-direction: column; }
  .chat-message-group.local {
    align-items: flex-end; }
    .chat-message-group.local .chatmessage {
      background-color: #0462b2;
      border-radius: 6px 0px 6px 6px; }
      .chat-message-group.local .chatmessage.privatemessage {
        background-color: #99454d; }
    .chat-message-group.local .display-name {
      display: none; }
    .chat-message-group.local .timestamp {
      text-align: right; }
  .chat-message-group.error .chatmessage {
    background-color: #d77976;
    border-radius: 0px;
    font-weight: 100; }
  .chat-message-group.error .display-name {
    display: none; }
  .chat-message-group .chatmessage-wrapper {
    max-width: 100%; }
    .chat-message-group .chatmessage-wrapper .replywrapper {
      display: flex;
      flex-direction: row;
      align-items: center; }
      .chat-message-group .chatmessage-wrapper .replywrapper .messageactions {
        align-self: stretch;
        border-left: 1px solid #ad6970;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 5px; }
        .chat-message-group .chatmessage-wrapper .replywrapper .messageactions .toolbox-icon {
          cursor: pointer; }
  .chat-message-group .chatmessage {
    background-color: #566572;
    border-radius: 0px 6px 6px 6px;
    display: inline-block;
    margin-top: 3px;
    color: white; }
    .chat-message-group .chatmessage.privatemessage {
      background-color: #99454d; }

.ringing {
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 300;
  background-color: rgba(40, 52, 71, 0.95); }
  .ringing.solidBG {
    background: #474747; }
  .ringing__content {
    position: absolute;
    width: 400px;
    height: 250px;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -125px;
    text-align: center;
    font-weight: normal;
    color: #FFFFFF; }
  .ringing__avatar {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    border: 2px solid #1B2638; }
  .ringing__status {
    margin-top: 15px;
    font-size: 14px;
    line-height: 20px; }
  .ringing__name {
    font-size: 24px;
    line-height: 32px; }

body.welcome-page {
  background: inherit;
  overflow: auto; }

.welcome {
  background-image: linear-gradient(-90deg, #FFFFFF 0, #64b32c -100%, #2b520f 100%);
  display: flex;
  flex-direction: column;
  font-family: inherit;
  justify-content: space-between;
  min-height: 100vh;
  position: relative; }
  .welcome .header {
    background-image: none;
    background-position: none;
    background-repeat: none;
    background-size: none;
    padding-bottom: 0px;
    align-items: center;
    display: flex;
    flex-direction: column;
    min-height: fit-content;
    overflow: hidden;
    position: relative;
    text-align: center; }
    .welcome .header .header-text {
      display: flex;
      flex-direction: column;
      margin-top: 109px;
      margin-bottom: 35px;
      max-width: calc(100% - 40px);
      width: 650px;
      z-index: 2; }
    .welcome .header .header-text-title {
      color: #fff;
      font-size: 2.5rem;
      font-weight: 500;
      line-height: 1.18;
      margin-bottom: 16px;
      opacity: 1; }
    .welcome .header .header-text-description {
      display: inherit;
      color: #fff;
      font-size: 1rem;
      font-weight: 400;
      line-height: 24px;
      margin-bottom: 20px;
      align-self: inherit; }
    .welcome .header #enter_room {
      display: flex;
      align-items: center;
      max-width: calc(100% - 40px);
      width: 680px;
      z-index: 2;
      background-color: #fff;
      padding: 25px 30px;
      border-radius: 0px; }
      .welcome .header #enter_room .enter-room-input-container {
        width: 100%;
        padding: 0 8px 5px 0px;
        text-align: left;
        color: #000000;
        height: fit-content; }
        .welcome .header #enter_room .enter-room-input-container .enter-room-title {
          display: inherit;
          font-size: 18px;
          font-weight: bold;
          padding-bottom: 5px; }
        .welcome .header #enter_room .enter-room-input-container .enter-room-input {
          border-width: 0px 0px 2px 0px;
          border-style: solid;
          border-image: linear-gradient(to right, #dee1e6, #fff) 1;
          display: inline-block;
          width: 100%;
          font-size: 14px; }
        .welcome .header #enter_room .enter-room-input-container .insecure-room-name-warning {
          align-items: center;
          color: #d77976;
          display: flex;
          flex-direction: row;
          margin-top: 5px; }
          .welcome .header #enter_room .enter-room-input-container .insecure-room-name-warning .jitsi-icon {
            margin-right: 15px; }
            .welcome .header #enter_room .enter-room-input-container .insecure-room-name-warning .jitsi-icon svg {
              fill: #d77976; }
        .welcome .header #enter_room .enter-room-input-container ::placeholder {
          color: #253858; }
    .welcome .header #moderated-meetings {
      max-width: calc(100% - 40px);
      padding: 16px 0 39px 0;
      width: 680px; }
      .welcome .header #moderated-meetings p {
        color: #fff;
        text-align: left; }
        .welcome .header #moderated-meetings p a {
          color: inherit;
          font-weight: 600; }
    .welcome .header .tab-container {
      font-size: 16px;
      position: relative;
      text-align: left;
      min-height: 354px;
      width: 710px;
      background: #FFFFFF;
      display: flex;
      flex-direction: column; }
      .welcome .header .tab-container .tab-content {
        display: inherit;
        margin: 5px 0px;
        overflow: hidden;
        flex-grow: 1;
        position: relative; }
        .welcome .header .tab-container .tab-content > * {
          position: absolute; }
      .welcome .header .tab-container .tab-buttons {
        font-size: 18px;
        color: #FFFFFF;
        display: flex;
        flex-grow: 0;
        flex-direction: row;
        min-height: 54px;
        width: 100%; }
        .welcome .header .tab-container .tab-buttons .tab {
          display: block;
          text-align: center;
          background: rgba(9, 30, 66, 0.37);
          height: 55px;
          line-height: 54px;
          flex-grow: 1;
          cursor: pointer; }
          .welcome .header .tab-container .tab-buttons .tab.selected, .welcome .header .tab-container .tab-buttons .tab:hover {
            background: rgba(9, 30, 66, 0.71); }
          .welcome .header .tab-container .tab-buttons .tab:last-child {
            margin-left: 1px; }
  .welcome .welcome-page-button {
    width: 51px;
    min-width: inherit;
    height: 35px;
    font-size: 14px;
    font-weight: inherit;
    background: #64b32c;
    border-radius: 4px;
    color: #FFFFFF;
    text-align: center;
    vertical-align: middle;
    line-height: 35px;
    cursor: pointer; }
  .welcome .welcome-page-settings {
    color: #fff;
    position: absolute;
    top: 32px;
    right: 32px;
    z-index: 2; }
    .welcome .welcome-page-settings * {
      cursor: pointer;
      font-size: 32px; }
  .welcome .welcome-watermark {
    position: absolute;
    width: 100%;
    height: 100%; }
    .welcome .welcome-watermark .watermark.leftwatermark {
      width: 186px;
      height: 74px; }

/** Insert custom CSS for any additional content in the welcome page **/
/** Insert custom CSS for any additional content in the welcome page settings toolbar **/
/**
 * Round badge.
 */
.badge-round {
  background-color: #165ECC;
  border-radius: 50%;
  box-sizing: border-box;
  color: #FFFFFF;
  font-family: -apple-system, BlinkMacSystemFont, "open_sanslight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 13px;
  min-width: 13px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  vertical-align: middle; }

/**
 * TODO: when the old filmstrip has been removed, remove the "new-" prefix.
 */
.new-toolbox {
  bottom: calc((40px * 2) * -1);
  left: 0;
  position: absolute;
  right: 0;
  transition: bottom .3s ease-in;
  width: 100%; }
  .new-toolbox.visible {
    bottom: 0; }
    .new-toolbox.visible .toolbox-background {
      bottom: 0px; }
  .new-toolbox.no-buttons {
    display: none; }
  .new-toolbox.shift-right {
    margin-left: 375px;
    width: calc(100% - 375px); }
  .new-toolbox .toolbox-background {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
    transition: bottom .3s ease-in;
    height: 160px;
    width: 100%;
    bottom: -160px;
    pointer-events: none;
    position: absolute;
    z-index: 4; }
  .new-toolbox .toolbox-content {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 16px;
    position: relative;
    width: 100%;
    z-index: 350; }
    .new-toolbox .toolbox-content .button-group-center,
    .new-toolbox .toolbox-content .button-group-left,
    .new-toolbox .toolbox-content .button-group-right {
      display: flex;
      width: 33%; }
    .new-toolbox .toolbox-content .button-group-center {
      justify-content: center; }
      .new-toolbox .toolbox-content .button-group-center .toolbox-button .toolbox-icon {
        background-color: #fff;
        border-radius: 50%;
        border: 1px solid #d1dbe8;
        margin: 0px 4px;
        width: 38px;
        height: 38px; }
        .new-toolbox .toolbox-content .button-group-center .toolbox-button .toolbox-icon:hover {
          background-color: #daebfa;
          border: 1px solid #daebfa; }
        .new-toolbox .toolbox-content .button-group-center .toolbox-button .toolbox-icon.toggled {
          background: #2a3a4b;
          border: 1px solid #5e6d7a; }
          .new-toolbox .toolbox-content .button-group-center .toolbox-button .toolbox-icon.toggled svg {
            fill: #fff; }
          .new-toolbox .toolbox-content .button-group-center .toolbox-button .toolbox-icon.toggled:hover {
            background-color: #5e6d7a; }
        .new-toolbox .toolbox-content .button-group-center .toolbox-button .toolbox-icon.disabled, .disabled .new-toolbox .toolbox-content .button-group-center .toolbox-button .toolbox-icon {
          cursor: initial;
          color: #fff;
          background-color: #a4b8d1; }
        .new-toolbox .toolbox-content .button-group-center .toolbox-button .toolbox-icon svg {
          fill: #5e6d7a; }
      .new-toolbox .toolbox-content .button-group-center .toolbox-button:nth-child(2) .toolbox-icon {
        background-color: #bf2117;
        border: 1px solid #bf2117;
        width: 40px;
        height: 40px; }
        .new-toolbox .toolbox-content .button-group-center .toolbox-button:nth-child(2) .toolbox-icon:hover {
          background-color: #bf2117; }
        .new-toolbox .toolbox-content .button-group-center .toolbox-button:nth-child(2) .toolbox-icon svg {
          fill: #fff; }
    .new-toolbox .toolbox-content .button-group-right {
      justify-content: flex-end; }
    .new-toolbox .toolbox-content .overflow-menu {
      font-size: 1.2em;
      list-style-type: none;
      background-color: initial;
      /**
             * Undo atlaskit padding by reducing margins.
             */
      margin: -16px -24px;
      padding: 4px 0; }
      .new-toolbox .toolbox-content .overflow-menu .overflow-menu-item {
        align-items: center;
        color: #B8C7E0;
        cursor: pointer;
        display: flex;
        font-size: 14px;
        height: 22px;
        padding: 5px 12px; }
        .new-toolbox .toolbox-content .overflow-menu .overflow-menu-item div {
          display: flex;
          flex-direction: row;
          align-items: center; }
        .new-toolbox .toolbox-content .overflow-menu .overflow-menu-item:hover {
          background-color: #313D52;
          color: #B8C7E0; }
        .new-toolbox .toolbox-content .overflow-menu .overflow-menu-item.unclickable {
          cursor: default; }
        .new-toolbox .toolbox-content .overflow-menu .overflow-menu-item.unclickable:hover {
          background: inherit; }
        .new-toolbox .toolbox-content .overflow-menu .overflow-menu-item.disabled {
          cursor: initial;
          color: #3b475c; }
      .new-toolbox .toolbox-content .overflow-menu .beta-tag {
        background: #B8C7E0;
        border-radius: 2px;
        color: initial;
        font-size: 11px;
        font-weight: bold;
        margin-left: 8px;
        padding: 0 6px; }
      .new-toolbox .toolbox-content .overflow-menu .overflow-menu-item-icon {
        margin-right: 10px; }
        .new-toolbox .toolbox-content .overflow-menu .overflow-menu-item-icon i {
          display: inline;
          font-size: 24px; }
        .new-toolbox .toolbox-content .overflow-menu .overflow-menu-item-icon i:hover {
          background-color: initial; }
        .new-toolbox .toolbox-content .overflow-menu .overflow-menu-item-icon img {
          max-width: 24px;
          max-height: 24px; }
        .new-toolbox .toolbox-content .overflow-menu .overflow-menu-item-icon svg {
          fill: #B8C7E0 !important; }
      .new-toolbox .toolbox-content .overflow-menu .profile-text {
        max-width: 150px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap; }
    .new-toolbox .toolbox-content .toolbox-button {
      color: #FFFFFF;
      cursor: pointer;
      display: inline-block;
      line-height: 40px;
      margin: 0 8px;
      text-align: center; }
    .new-toolbox .toolbox-content .toolbar-button-with-badge {
      position: relative; }
      .new-toolbox .toolbox-content .toolbar-button-with-badge .badge-round {
        bottom: -5px;
        font-size: 12px;
        line-height: 20px;
        min-width: 20px;
        pointer-events: none;
        position: absolute;
        right: -5px; }
    .new-toolbox .toolbox-content .toolbox-button-wth-dialog {
      display: inline-block; }
    .new-toolbox .toolbox-content .toolbox-icon {
      display: flex;
      border-radius: 5px;
      flex-direction: column;
      font-size: 24px;
      height: 40px;
      justify-content: center;
      width: 40px; }
      .new-toolbox .toolbox-content .toolbox-icon:hover, .new-toolbox .toolbox-content .toolbox-icon.toggled {
        background: rgba(255, 255, 255, 0.15); }
      .new-toolbox .toolbox-content .toolbox-icon.disabled {
        cursor: initial !important;
        background-color: #a4b8d1 !important; }
        .new-toolbox .toolbox-content .toolbox-icon.disabled svg {
          fill: #fff !important; }

/**
 * START of fade in animation for main toolbar
 */
.fadeIn {
  opacity: 1;
  -moz-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  -webkit-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in; }

.fadeOut {
  opacity: 0;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out; }

/*!
 * jQuery contextMenu - Plugin for simple contextMenu handling
 *
 * Version: v2.1.1
 *
 * Authors: Björn Brala (SWIS.nl), Rodney Rehm, Addy Osmani (patches for FF)
 * Web: http://swisnl.github.io/jQuery-contextMenu/
 *
 * Copyright (c) 2011-2016 SWIS BV and contributors
 *
 * Licensed under
 *   MIT License http://www.opensource.org/licenses/mit-license
 *
 * Date: 2016-02-28T09:53:18.890Z
 */
@font-face {
  font-family: "context-menu-icons";
  font-style: normal;
  font-weight: normal;
  src: url("font/context-menu-icons.eot?2qmzf");
  src: url("font/context-menu-icons.eot?2qmzf#iefix") format("embedded-opentype"), url("font/context-menu-icons.woff2?2qmzf") format("woff2"), url("font/context-menu-icons.woff?2qmzf") format("woff"), url("font/context-menu-icons.ttf?2qmzf") format("truetype"); }

.context-menu-icon:before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 28px;
  font-family: "context-menu-icons";
  font-size: 16px;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  color: #2980b9;
  text-align: center;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.context-menu-icon-add:before {
  content: ""; }

.context-menu-icon-copy:before {
  content: ""; }

.context-menu-icon-cut:before {
  content: ""; }

.context-menu-icon-delete:before {
  content: ""; }

.context-menu-icon-edit:before {
  content: ""; }

.context-menu-icon-paste:before {
  content: ""; }

.context-menu-icon-quit:before {
  content: ""; }

.context-menu-icon.context-menu-hover:before {
  color: #fff; }

.context-menu-list {
  position: absolute;
  display: inline-block;
  min-width: 180px;
  max-width: 360px;
  padding: 4px 0;
  margin: 5px;
  font-family: inherit;
  font-size: inherit;
  list-style-type: none;
  background: #fff;
  border: 1px solid #bebebe;
  border-radius: 4px;
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); }

.context-menu-item {
  position: relative;
  padding: 3px 28px;
  color: #2f2f2f;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #fff; }

.context-menu-separator {
  padding: 0;
  margin: 5px 0;
  border-bottom: 1px solid #e6e6e6; }

.context-menu-item > label > input,
.context-menu-item > label > textarea {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text; }

.context-menu-item.context-menu-hover {
  color: #fff;
  cursor: pointer;
  background-color: #2980b9; }

.context-menu-item.context-menu-disabled {
  color: #626262;
  background-color: #fff; }

.context-menu-item.context-menu-disabled {
  color: #626262; }

.context-menu-input.context-menu-hover,
.context-menu-item.context-menu-disabled.context-menu-hover {
  cursor: default;
  background-color: #eee; }

.context-menu-submenu:after {
  position: absolute;
  top: 50%;
  right: 8px;
  z-index: 1;
  width: 0;
  height: 0;
  content: '';
  border-color: transparent transparent transparent #2f2f2f;
  border-style: solid;
  border-width: 4px 0 4px 4px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%); }

/**
 * Inputs
 */
.context-menu-item.context-menu-input {
  padding: 5px 10px; }

/* vertically align inside labels */
.context-menu-input > label > * {
  vertical-align: top; }

/* position checkboxes and radios as icons */
.context-menu-input > label > input[type="checkbox"],
.context-menu-input > label > input[type="radio"] {
  position: relative;
  top: 3px; }

.context-menu-input > label,
.context-menu-input > label > input[type="text"],
.context-menu-input > label > textarea,
.context-menu-input > label > select {
  display: block;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.context-menu-input > label > textarea {
  height: 100px; }

.context-menu-item > .context-menu-list {
  top: 5px;
  /* re-positioned by js */
  right: -5px;
  display: none; }

.context-menu-item.context-menu-visible > .context-menu-list {
  display: block; }

.context-menu-accesskey {
  text-decoration: underline; }

.shortcuts-list {
  list-style-type: none;
  padding: 0; }
  .shortcuts-list__item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5em; }

.redirectPageMessage {
  width: 30%;
  margin: 20% auto;
  text-align: center;
  font-size: 24px; }
  .redirectPageMessage .thanks-msg {
    border-bottom: 1px solid #FFFFFF;
    padding-left: 30px;
    padding-right: 30px; }
    .redirectPageMessage .thanks-msg p {
      margin: 30px auto;
      font-size: 24px;
      line-height: 24px; }
  .redirectPageMessage .hint-msg p {
    margin: 26px auto;
    font-weight: 600;
    font-size: 16px;
    line-height: 18px; }
    .redirectPageMessage .hint-msg p .hint-msg__holder {
      font-weight: 200; }
  .redirectPageMessage .hint-msg .happy-software {
    width: 120px;
    height: 86px;
    margin: 0 auto;
    background: transparent; }

.form-control {
  padding: 16px 0; }
  .form-control:first-child {
    padding-top: 0; }
  .form-control:last-child {
    padding-bottom: 0; }
  .form-control__text {
    margin: 8px 0;
    font-size: 1em; }
  .form-control__label {
    font-size: 1em;
    font-weight: 400; }
  .form-control__em {
    color: #f29424; }
  .form-control__container {
    position: relative;
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex; }
    .form-control__container .button-control {
      margin: 1px 0 1px 10px; }
  .form-control__right {
    position: absolute;
    right: 0; }

/**
 * Set a specific color for read only style.
 */
input:read-only {
  color: #a7a7a7; }

.link, .helper-link {
  cursor: pointer;
  color: #489afe;
  -moz-transition: color 0.1s ease-out;
  -o-transition: color 0.1s ease-out;
  -webkit-transition: color 0.1s ease-out;
  transition: color 0.1s ease-out; }
  .link:hover, .helper-link:hover {
    color: #287ade;
    text-decoration: underline;
    -moz-transition: color 0.1s ease-in;
    -o-transition: color 0.1s ease-in;
    -webkit-transition: color 0.1s ease-in;
    transition: color 0.1s ease-in; }

/**
 * Helper links are links that are meant to open a documentation page or more
 * detailed info.
 */
.helper-link {
  font-size: 12px; }

.button-control {
  box-sizing: border-box;
  display: inline-block;
  border: 1px solid transparent;
  vertical-align: baseline;
  height: 30px;
  min-width: 60px;
  padding: 4px 10px;
  margin: 0;
  line-height: 1.5em;
  outline: none;
  background-color: transparent;
  float: right;
  font-size: 14px;
  margin-left: 10px;
  color: #eceef1;
  font-weight: 400;
  -moz-transition: background-color 0.1s ease-out;
  -o-transition: background-color 0.1s ease-out;
  -webkit-transition: background-color 0.1s ease-out;
  transition: background-color 0.1s ease-out; }
  .button-control[disabled] {
    color: #666;
    cursor: default; }
  .button-control_full-width {
    margin: 0;
    width: 100%; }
  .button-control:hover {
    border: 1px solid transparent;
    background-color: #2c4062;
    -moz-transition: background-color 0.1s ease-in;
    -o-transition: background-color 0.1s ease-in;
    -webkit-transition: background-color 0.1s ease-in;
    transition: background-color 0.1s ease-in; }
  .button-control:active {
    -webkit-box-shadow: inset 0 0 1px #192d4f;
    -moz-box-shadow: inset 0 0 1px #192d4f;
    box-shadow: inset 0 0 1px #192d4f; }
  .button-control_light {
    color: #2b3d5c;
    background-color: #f5f5f5;
    border: 1px solid #ccc; }
    .button-control_light:hover {
      border: 1px solid #999;
      background-color: #e9e9e9; }
  .button-control_link {
    color: #0090e8;
    background-color: transparent; }
    .button-control_link:hover {
      background-color: transparent; }
  .button-control_overlay {
    color: #FFFFFF;
    background-color: #0074E0;
    border-radius: 2px;
    border: none; }
    .button-control_overlay:hover {
      background-color: #3572b0;
      border: none; }
  .button-control_primary {
    background-color: #3572b0;
    border: 1px solid #3572b0;
    color: #FFFFFF !important;
    font-weight: 400; }
    .button-control_primary:hover {
      border: 1px solid #2a67a5;
      background-color: #2a67a5; }
    .button-control_primary[disabled] {
      color: #FFFFFF; }
  .button-control_close {
    color: #777; }
  .button-control_submit {
    color: #489afe; }
    .button-control_submit:hover {
      color: #287ade; }
  .button-control_center {
    float: none !important; }

.input-control {
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  display: inline-block;
  width: 100%;
  padding: 5px 7px;
  border-radius: 4px;
  line-height: 32px;
  height: 32px;
  text-align: left;
  margin-bottom: 8px; }
  .input-control:last-child {
    margin-bottom: inherit; }
  .input-control::selection {
    background-color: #ccc; }
  .input-control.error {
    color: #c61600;
    border-color: #c61600; }

::-webkit-input-placeholder {
  color: #a7a7a7; }

::-moz-placeholder {
  color: #a7a7a7; }

:-moz-placeholder {
  color: #a7a7a7; }

:-ms-input-placeholder {
  color: #a7a7a7; }

/**
 * Disable the default webkit styles for range inputs (sliders).
 */
input[type=range] {
  -webkit-appearance: none;
  background: none; }

/**
 * Disable the default focus styles for webkit range inputs (sliders).
 */
input[type=range]:focus {
  outline: none; }

/**
 * Include the mixin for a range input style.
 */
input[type=range]::-webkit-slider-runnable-track {
  background: #474747;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  height: 6px;
  width: 100%; }

input[type=range]::-moz-range-track {
  background: #474747;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  height: 6px;
  width: 100%; }

input[type=range]::-ms-track {
  background: #474747;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  height: 6px;
  width: 100%; }

/**
 * Include the mixin for a range input thumb style.
 */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: white;
  border: 1px solid #3572b0;
  border-radius: 50%;
  box-shadow: 0px 0px 1px #3572b0;
  cursor: pointer;
  height: 14px;
  margin-top: -4px;
  width: 14px; }

input[type=range]::-moz-range-thumb {
  -webkit-appearance: none;
  background: white;
  border: 1px solid #3572b0;
  border-radius: 50%;
  box-shadow: 0px 0px 1px #3572b0;
  cursor: pointer;
  height: 14px;
  margin-top: -4px;
  width: 14px; }

input[type=range]::-ms-thumb {
  -webkit-appearance: none;
  background: white;
  border: 1px solid #3572b0;
  border-radius: 50%;
  box-shadow: 0px 0px 1px #3572b0;
  cursor: pointer;
  height: 14px;
  margin-top: -4px;
  width: 14px; }

.connection-info, .connection-info > table {
  font-size: 12px;
  font-weight: 400; }
  .connection-info td {
    padding: 2px 0; }

.connection-info {
  /**
     * Apply negative margin to reduce the appearance of padding in AtlasKit
     * InlineDialog.
     */
  margin: -15px; }
  .connection-info > table {
    white-space: nowrap; }
  .connection-info td:nth-child(n-1) {
    padding-left: 5px; }
  .connection-info__icon, .connection-info__download, .connection-info__upload {
    margin-right: 2px; }
  .connection-info__status {
    font-weight: bold; }
  .connection-info .connection-actions {
    margin: 10px auto;
    text-align: center; }

.select2-container.aui-select2-container {
  background-color: transparent !important;
  margin-top: 2px; }
  .select2-container.aui-select2-container a.select2-choice {
    height: 28px !important;
    line-height: 18px !important;
    width: 100% !important;
    background-color: #FFFFFF !important;
    border-color: #FFFFFF !important;
    color: #333333 !important;
    text-shadow: none !important;
    font-size: 12px !important;
    margin: 0 auto !important; }
    .select2-container.aui-select2-container a.select2-choice:after {
      border-top-color: #333333; }
  .select2-container.aui-select2-container.select2-dropdown-open a.select2-choice {
    background-color: #f2f2f2 !important;
    border-color: #f2f2f2 !important; }

.select2-drop.aui-select2-drop.aui-style-default {
  z-index: 901;
  background-color: #f2f2f2;
  border-color: #f2f2f2; }
  .select2-drop.aui-select2-drop.aui-style-default .select2-results {
    background-color: #f2f2f2;
    border-color: #f2f2f2; }
    .select2-drop.aui-select2-drop.aui-style-default .select2-results::-webkit-scrollbar {
      background-color: transparent; }
    .select2-drop.aui-select2-drop.aui-style-default .select2-results::-webkit-scrollbar-track {
      background-color: transparent; }
    .select2-drop.aui-select2-drop.aui-style-default .select2-results::-webkit-scrollbar-track-piece {
      background-color: transparent; }
    .select2-drop.aui-select2-drop.aui-style-default .select2-results::-webkit-scrollbar-thumb {
      background-color: #cccccc; }
    .select2-drop.aui-select2-drop.aui-style-default .select2-results .select2-result.select2-highlighted {
      background-color: #cccccc; }
    .select2-drop.aui-select2-drop.aui-style-default .select2-results .select2-result .select2-result-label {
      font-size: 12px;
      color: #333333 !important;
      line-height: 20px; }

.select2-drop-mask {
  z-index: 900; }

.error_page {
  width: 60%;
  margin: 20% auto;
  text-align: center; }
  .error_page h2 {
    font-size: 36px; }
  .error_page__message {
    font-size: 24px;
    margin-top: 20px; }

.policy__logo {
  display: block;
  width: 200px;
  height: 50px;
  margin: 30px auto 0; }

.policy__text {
  text-align: center;
  font-size: 14px;
  line-height: 21px;
  font-weight: 300; }

/**
 * Mousemove padding styles are used to add invisible elements to the popover
 * to allow mouse movement from the popover trigger to the popover itself
 * without triggering a mouseleave event.
 */
.popover-mousemove-padding-bottom {
  bottom: -15px;
  height: 20px;
  position: absolute;
  right: 0;
  width: 100%; }

.popover-mousemove-padding-left, .popover-mousemove-padding-right {
  height: 100%;
  position: absolute;
  top: 0;
  width: 40px; }

.popover-mousemove-padding-left {
  left: -20px; }

.popover-mousemove-padding-right {
  right: -20px; }

/**
 * An invisible element is added to the top of the popover to ensure the mouse
 * stays over the popover when the popover's height is shrunk, which would then
 * normally leave the mouse outside of the popover itself and cause a mouseleave
 * event.
 */
.popover-mouse-padding-top {
  height: 30px;
  position: absolute;
  right: 0;
  top: -25px;
  width: 100%; }

.popover {
  background-color: initial;
  border-radius: 3px;
  margin: -16px -24px;
  padding: 16px 24px; }

.filmstrip__toolbar {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: nowrap;
  position: relative;
  width: 17px; }
  .filmstrip__toolbar button {
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
    background: transparent;
    opacity: 0.7;
    height: auto;
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    -webkit-appearance: none; }
    .filmstrip__toolbar button:hover {
      opacity: 1; }
    .filmstrip__toolbar button i {
      cursor: pointer; }

.horizontal-filmstrip .filmstrip, .horizontal-filmstrip .filmstrip__videos, .vertical-filmstrip .filmstrip, .vertical-filmstrip .filmstrip .filmstrip__videos {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  justify-content: flex-start; }

.horizontal-filmstrip .filmstrip {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 10px 5px;
  transition: bottom .3s;
  z-index: 5;
  box-sizing: border-box;
  width: 100%;
  position: fixed;
  /*
     * Firefox sets flex items to min-height: auto and min-width: auto,
     * preventing flex children from shrinking like they do on other browsers.
     * Setting min-height and min-width 0 is a workaround for the issue so
     * Firefox behaves like other browsers.
     * https://bugzilla.mozilla.org/show_bug.cgi?id=1043520
     */
  /**
     * Style the filmstrip videos in filmstrip-only mode.
     */ }
  .horizontal-filmstrip .filmstrip.reduce-height {
    bottom: calc(calc(40px + 24px) + 7px); }
  .horizontal-filmstrip .filmstrip__videos {
    position: relative;
    padding: 0;
    /* The filmstrip should not be covered by the left toolbar. */
    bottom: 0;
    width: auto;
    overflow: visible !important;
    /**
         * The local video identifier.
         */ }
    .horizontal-filmstrip .filmstrip__videos#remoteVideos {
      border: 2px solid transparent;
      transition: bottom 2s;
      flex-grow: 1;
      min-height: 0;
      min-width: 0; }
    .horizontal-filmstrip .filmstrip__videos#filmstripLocalVideo {
      align-self: flex-end;
      display: block;
      margin-bottom: 8px; }
    .horizontal-filmstrip .filmstrip__videos.hidden {
      bottom: calc(-196px - calc(40px + 24px)); }
    .horizontal-filmstrip .filmstrip__videos .remote-videos-container {
      display: flex; }
  .horizontal-filmstrip .filmstrip__videos-filmstripOnly {
    margin-top: auto;
    margin-bottom: auto; }
    .horizontal-filmstrip .filmstrip__videos-filmstripOnly .filmstrip__videos#filmstripLocalVideo {
      bottom: 0px; }
  .horizontal-filmstrip .filmstrip .remote-videos-container {
    transition: opacity 1s; }
  .horizontal-filmstrip .filmstrip.hide-videos .remote-videos-container {
    opacity: 0;
    pointer-events: none; }
  .horizontal-filmstrip .filmstrip #filmstripRemoteVideos {
    min-height: 0;
    min-width: 0;
    display: flex;
    flex: 1;
    width: auto;
    justify-content: flex-end;
    flex-direction: row; }
    .horizontal-filmstrip .filmstrip #filmstripRemoteVideos #filmstripRemoteVideosContainer {
      flex-direction: row-reverse;
      /**
             * Add padding as a hack for Firefox not to show scrollbars when
             * unnecessary.
             */
      padding: 1px 0;
      overflow-y: hidden;
      overflow-x: scroll; }
  .horizontal-filmstrip .filmstrip .videocontainer {
    margin-bottom: 10px; }

/**
 * Workarounds for Edge and Firefox not handling scrolling properly with
 * flex-direction: row-reverse.
 */
/** Firefox detection hack **/
@-moz-document url-prefix() {
  .horizontal-filmstrip #remoteVideos #filmstripRemoteVideos #filmstripRemoteVideosContainer {
    flex-direction: row; } }

/** Edge detection hack **/
@supports (-ms-ime-align: auto) {
  .horizontal-filmstrip #remoteVideos #filmstripRemoteVideos #filmstripRemoteVideosContainer {
    flex-direction: row; } }

.filmstrip__videos .videocontainer {
  display: inline-block;
  position: relative;
  background-size: contain;
  border: 2px solid transparent;
  border-radius: 4px;
  margin: 0 2px;
  /**
     * Focused video thumbnail.
     */
  /**
     * Hovered video thumbnail.
     */ }
  .filmstrip__videos .videocontainer.videoContainerFocused, .filmstrip__videos .videocontainer:hover {
    cursor: hand; }
  .filmstrip__videos .videocontainer.videoContainerFocused {
    border: 2px solid #165ECC;
    box-shadow: inset 0 0 3px #165ECC, 0 0 3px #165ECC; }
  .filmstrip__videos .videocontainer .remotevideomenu > .icon-menu {
    display: none; }
  .filmstrip__videos .videocontainer:hover:not(.videoContainerFocused):not(.active-speaker) {
    cursor: hand;
    border: 2px solid rgba(22, 94, 204, 0.4);
    box-shadow: inset 0 0 3px rgba(22, 94, 204, 0.4), 0 0 3px rgba(22, 94, 204, 0.4); }
    .filmstrip__videos .videocontainer:hover:not(.videoContainerFocused):not(.active-speaker) .remotevideomenu > .icon-menu {
      display: inline-block; }
  .filmstrip__videos .videocontainer > video {
    cursor: hand;
    border-radius: 4px;
    object-fit: cover;
    overflow: hidden; }
  .filmstrip__videos .videocontainer .presence-label {
    position: absolute;
    z-index: 3; }

/**
 * CSS styles that are specific to the filmstrip that shows the thumbnail tiles.
 */
.tile-view {
  /**
     * Add a border around the active speaker to make the thumbnail easier to
     * see.
     */
  /**
     * Regardless of the user setting, do not let the filmstrip be in a hidden
     * state.
     */
  /**
     * The size of the thumbnails should be set with javascript, based on
     * desired column count and window width. The rows are created using flex
     * and allowing the thumbnails to wrap.
     */
  /**
     * Firefox flex acts a little differently. To make sure the bottom row of
     * thumbnails is not overlapped by the horizontal toolbar, margin is added
     * to the local thumbnail to keep it from the bottom of the screen. It is
     * assumed the local thumbnail will always be on the bottom row.
     */ }
  .tile-view .active-speaker {
    box-shadow: 0 0 5px 3px #165ECC; }
  .tile-view #filmstripRemoteVideos {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    width: 100vw;
    margin: 100px 0px; }
  .tile-view .filmstrip__videos .videocontainer:not(.active-speaker), .tile-view .filmstrip__videos .videocontainer:hover:not(.active-speaker) {
    border: none;
    box-shadow: none; }
  .tile-view #remoteVideos {
    /**
         * Height is modified with an inline style in horizontal filmstrip mode
         * so !important is used to override that.
         */
    height: 100% !important;
    width: 100%; }
  .tile-view .filmstrip {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 5; }
    .tile-view .filmstrip.shift-right {
      margin-left: 375px;
      width: calc(100% - 375px); }
      .tile-view .filmstrip.shift-right #filmstripRemoteVideos {
        width: calc(100vw - 375px); }
  .tile-view .filmstrip__videos.hidden {
    display: block; }
  .tile-view #filmstripRemoteVideos {
    box-sizing: border-box;
    /**
         * Allow vertical scrolling of the thumbnails.
         */
    overflow-x: hidden;
    overflow-y: auto; }
  .tile-view #filmstripRemoteVideosContainer {
    align-content: center;
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    margin-top: auto;
    margin-bottom: auto;
    justify-content: center; }
    .tile-view #filmstripRemoteVideosContainer .videocontainer {
      border: 0;
      box-sizing: border-box;
      display: block;
      margin: 5px; }
    .tile-view #filmstripRemoteVideosContainer video {
      object-fit: contain; }
  .tile-view .has-overflow#filmstripRemoteVideosContainer {
    align-content: baseline; }
  .tile-view .has-overflow .videocontainer {
    align-self: baseline; }
  .tile-view .has-overflow #localVideoContainer {
    margin-bottom: 100px !important; }

/**
 * Various overrides outside of the filmstrip to style the app to support a
 * tiled thumbnail experience.
 */
.tile-view {
  /**
     * Let the avatar grow with the tile.
     */
  /**
     * Hide various features that should not be displayed while in tile view.
     */
  /**
     * The follow styling uses !important to override inline styles set with
     * javascript.
     *
     * TODO: These overrides should be more easy to remove and should be removed
     * when the components are in react so their rendering done declaratively,
     * making conditional styling easier to apply.
     */
  /**
     * Thumbnail popover menus can overlap other thumbnails. Setting an auto
     * z-index will allow AtlasKit InlineDialog's large z-index to be
     * respected and thereby display over elements in other thumbnails,
     * specifically the various status icons.
     */ }
  .tile-view .avatar-container {
    max-height: initial;
    max-width: initial; }
  .tile-view #dominantSpeaker,
  .tile-view #filmstripLocalVideoThumbnail,
  .tile-view #largeVideoElementsContainer,
  .tile-view #sharedVideo,
  .tile-view .filmstrip__toolbar {
    display: none; }
  .tile-view #remoteConnectionMessage,
  .tile-view .watermark {
    z-index: 6; }
  .tile-view #largeVideoElementsContainer,
  .tile-view #remoteConnectionMessage,
  .tile-view #remotePresenceMessage {
    display: none !important; }
  .tile-view .remotevideomenu,
  .tile-view .videocontainer__toptoolbar {
    z-index: auto; }

.vertical-filmstrip .filmstrip {
  /*
     * Firefox sets flex items to min-height: auto and min-width: auto,
     * preventing flex children from shrinking like they do on other browsers.
     * Setting min-height and min-width 0 is a workaround for the issue so
     * Firefox behaves like other browsers.
     * https://bugzilla.mozilla.org/show_bug.cgi?id=1043520
     */
  align-items: flex-end;
  bottom: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column-reverse;
  height: 100%;
  width: 100%;
  padding: 20px 5px 10px;
  /**
     * fixed positioning is necessary for remote menus and tooltips to pop
     * out of the scrolling filmstrip. AtlasKit dialogs and tooltips use
     * a library called popper which will position its elements fixed if
     * any parent is also fixed.
     */
  position: fixed;
  top: 0;
  transition: height .3s ease-in;
  right: 0;
  z-index: 5;
  /**
     * Hide videos by making them slight to the right.
     */
  /**
     * Re-styles the local Video to better fit vertical filmstrip layout.
     */
  /**
     * Remove unnecssary padding that is normally used to prevent horizontal
     * filmstrip from overlapping the left edge of the screen.
     */ }
  .vertical-filmstrip .filmstrip.hide-videos .remote-videos-container {
    opacity: 0;
    pointer-events: none; }
  .vertical-filmstrip .filmstrip.reduce-height {
    height: calc(100% - calc(40px + 24px)); }
  .vertical-filmstrip .filmstrip .filmstrip__videos {
    bottom: 0;
    padding: 0;
    position: relative;
    right: 0;
    width: auto;
    /**
         * An id selector is used to match id specificity with existing
         * filmstrip styles.
         */ }
    .vertical-filmstrip .filmstrip .filmstrip__videos.hidden {
      bottom: auto;
      right: -196px; }
    .vertical-filmstrip .filmstrip .filmstrip__videos#remoteVideos {
      border: 2px solid transparent;
      padding-left: 0;
      transition: right 2s;
      width: 100%; }
  .vertical-filmstrip .filmstrip #filmstripLocalVideo {
    align-self: initial;
    bottom: 5px;
    display: flex;
    flex-direction: column-reverse;
    height: auto;
    justify-content: flex-start; }
    .vertical-filmstrip .filmstrip #filmstripLocalVideo #filmstripLocalVideoThumbnail {
      width: calc(100% - 15px); }
      .vertical-filmstrip .filmstrip #filmstripLocalVideo #filmstripLocalVideoThumbnail .videocontainer {
        height: 0px;
        width: 100%; }
  .vertical-filmstrip .filmstrip #filmstripLocalVideo,
  .vertical-filmstrip .filmstrip #filmstripRemoteVideos {
    padding: 0; }
  .vertical-filmstrip .filmstrip #filmstripRemoteVideos {
    min-height: 0;
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column-reverse;
    height: auto;
    overflow-x: hidden;
    overflow-y: scroll; }
    .vertical-filmstrip .filmstrip #filmstripRemoteVideos #filmstripRemoteVideosContainer {
      min-height: 0;
      min-width: 0;
      flex-direction: column-reverse;
      overflow: visible;
      width: calc(100% - 8px); }
      .vertical-filmstrip .filmstrip #filmstripRemoteVideos #filmstripRemoteVideosContainer .videocontainer {
        height: 0px;
        width: 100%; }
  .vertical-filmstrip .filmstrip #remoteVideos {
    min-height: 0;
    min-width: 0;
    flex-direction: column;
    flex-grow: 1; }
  .vertical-filmstrip .filmstrip .remote-videos-container {
    display: flex;
    transition: opacity 1s; }
  .vertical-filmstrip .filmstrip .hide-scrollbar#filmstripRemoteVideos {
    margin-right: 7px; }
    .vertical-filmstrip .filmstrip .hide-scrollbar#filmstripRemoteVideos::-webkit-scrollbar {
      display: none; }

/**
 * Override other styles to support vertical filmstrip mode.
 */
.filmstrip-only .vertical-filmstrip .filmstrip {
  flex-direction: row-reverse; }

.filmstrip-only .vertical-filmstrip .filmstrip__videos-filmstripOnly {
  margin-top: auto;
  margin-bottom: auto;
  height: 100%; }

.filmstrip-only .vertical-filmstrip .filmstrip__videos#filmstripLocalVideo {
  bottom: 0px; }

/**
 * Workarounds for Edge and Firefox not handling scrolling properly with
 * flex-direction: column-reverse. The remove videos in filmstrip should
 * start scrolling from the bottom of the filmstrip, but in those browsers the
 * scrolling won't happen. Per W3C spec, scrolling should happen from the
 * bottom. As such, use css hacks to get around the css issue, with the intent
 * being to remove the hacks as the spec is supported.
 */
/**
 * FF does not include the scroll width when calculating the size of the content. That's why we need to include
 * ourselves the width of the scroll so that the remote videos are aligned with the local one.
 */
/** Firefox detection hack **/
@-moz-document url-prefix() {
  .vertical-filmstrip #remoteVideos #filmstripRemoteVideos #filmstripRemoteVideosContainer {
    flex-direction: column; }
  .vertical-filmstrip #remoteVideos #filmstripRemoteVideos #filmstripRemoteVideosContainer {
    width: calc(100% - 15px); } }

/** Edge detection hack **/
@supports (-ms-ime-align: auto) {
  .vertical-filmstrip #remoteVideos #filmstripRemoteVideos #filmstripRemoteVideosContainer {
    flex-direction: column; } }

/**
 * Rotate the hide filmstrip icon so it points towards the right edge
 * of the screen.
 */
.vertical-filmstrip .filmstrip__toolbar {
  transform: rotate(-90deg); }

/**
 * Overrides for video containers that should not be centered aligned to avoid=
 * clashing with the filmstrip.
 */
.vertical-filmstrip #etherpad,
.vertical-filmstrip #sharedvideo {
  text-align: left; }

/**
 * Overrides for small videos in vertical filmstrip mode.
 */
.vertical-filmstrip .filmstrip__videos .videocontainer {
  /**
     * Move status icons to the bottom right of the thumbnail.
     */
  /**
     * Apply hardware acceleration to prevent flickering on scroll. The
     * selectors are specific to icon wrappers to prevent fixed position dialogs
     * and tooltips from getting a new location context due to translate3d.
     */
  /**
     * Move the remote video menu trigger to the bottom left of the video
     * thumbnail.
     */ }
  .vertical-filmstrip .filmstrip__videos .videocontainer .videocontainer__toolbar {
    /**
         * FIXME: disable pointer to allow any elements moved below to still
         * be clickable. The real fix would to make sure those moved elements
         * are actually part of the toolbar instead of positioning being faked.
         */
    pointer-events: none;
    text-align: right; }
    .vertical-filmstrip .filmstrip__videos .videocontainer .videocontainer__toolbar > div {
      pointer-events: none; }
    .vertical-filmstrip .filmstrip__videos .videocontainer .videocontainer__toolbar .right {
      float: none;
      margin: auto; }
    .vertical-filmstrip .filmstrip__videos .videocontainer .videocontainer__toolbar .toolbar-icon {
      pointer-events: all; }
  .vertical-filmstrip .filmstrip__videos .videocontainer .connection-indicator,
  .vertical-filmstrip .filmstrip__videos .videocontainer .remote-video-menu-trigger,
  .vertical-filmstrip .filmstrip__videos .videocontainer .indicator-icon-container {
    transform: translate3d(0, 0, 0); }
  .vertical-filmstrip .filmstrip__videos .videocontainer .indicator-icon-container {
    display: inline-block; }
  .vertical-filmstrip .filmstrip__videos .videocontainer .indicator-container {
    float: none; }
  .vertical-filmstrip .filmstrip__videos .videocontainer .remotevideomenu,
  .vertical-filmstrip .filmstrip__videos .videocontainer .remote-video-menu-trigger {
    bottom: 0;
    left: 0;
    top: auto;
    right: auto; }
  .vertical-filmstrip .filmstrip__videos .videocontainer .remote-video-menu-trigger {
    margin-bottom: 7px;
    margin-left: initial; }

/**
 * Overrides for quality labels in filmstrip only mode. The styles adjust the
 * labels' positioning as the filmstrip itself or filmstrip's remote videos
 * appear and disappear.
 *
 * The class with-filmstrip is for when the filmstrip is visible.
 * The class without-filmstrip is for when the filmstrip has been toggled to
 * be hidden.
 * The class opening is for when the filmstrip is transitioning from hidden
 * to visible.
 */
.vertical-filmstrip .large-video-labels.with-filmstrip {
  right: 150px; }

.vertical-filmstrip .large-video-labels.with-filmstrip.opening {
  transition: 0.9s;
  transition-timing-function: ease-in-out; }

.vertical-filmstrip .large-video-labels.without-filmstrip {
  transition: 1.2s ease-in-out;
  transition-delay: 0.1s; }

.large-video-labels {
  display: flex;
  position: absolute;
  top: 30px;
  right: 30px;
  transition: right 0.5s;
  z-index: 6; }
  .large-video-labels .circular-label {
    align-items: center;
    color: white;
    display: flex;
    font-weight: bold;
    justify-content: center;
    margin-left: 8px;
    opacity: 0.8; }
  .large-video-labels .circular-label {
    background: #B8C7E0; }
  .large-video-labels .circular-label.e2ee {
    align-items: center;
    background: #76CF9C;
    display: flex;
    justify-content: center; }
  .large-video-labels .circular-label.file {
    background: #FF5630; }
  .large-video-labels .circular-label.local-rec {
    background: #FF5630; }
  .large-video-labels .circular-label.stream {
    background: #0065FF; }
  .large-video-labels .circular-label.insecure {
    background: #d77976; }
  .large-video-labels .recording-label.center-message {
    background: rgba(0, 0, 0, 0.5);
    bottom: 50%;
    display: block;
    left: 50%;
    padding: 10px;
    position: fixed;
    transform: translate(-50%, -50%);
    z-index: 1010; }

.circular-label {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  box-sizing: border-box;
  cursor: default;
  font-size: 13px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  min-width: 40px; }

#lobby-screen .content .container {
  align-items: center;
  display: flex;
  flex-direction: column; }
  #lobby-screen .content .container .spinner {
    margin: 30px; }
  #lobby-screen .content .container .joining-message {
    margin: 10px; }

#lobby-section {
  display: flex;
  flex-direction: column; }
  #lobby-section .description {
    font-size: 13px; }
  #lobby-section .control-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 15px; }
    #lobby-section .control-row label {
      font-size: 14px;
      font-weight: bold; }

#knocking-participant-list {
  background-color: rgba(22, 38, 55, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  left: 0;
  margin: 20px;
  position: fixed;
  top: 20;
  transition: top 1s ease;
  z-index: 100; }
  #knocking-participant-list.toolbox-visible {
    top: 120px; }
  #knocking-participant-list .title {
    background-color: rgba(0, 0, 0, 0.2);
    font-size: 1.2em;
    padding: 15px; }
  #knocking-participant-list ul {
    list-style-type: none;
    padding: 0 15px 15px 15px; }
    #knocking-participant-list ul li {
      align-items: center;
      display: flex;
      flex-direction: row;
      margin: 8px 0; }
      #knocking-participant-list ul li .details {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: space-evenly;
        margin: 0 30px 0 10px; }
      #knocking-participant-list ul li button {
        align-self: unset;
        margin: 0 5px; }
  #knocking-participant-list button {
    align-self: stretch;
    margin: 8px 0;
    padding: 12px;
    transition: .2s transform ease; }
    #knocking-participant-list button:disabled {
      opacity: .5; }
    #knocking-participant-list button:hover {
      transform: scale(1.05); }
      #knocking-participant-list button:hover:disabled {
        transform: none; }
    #knocking-participant-list button.borderLess {
      background-color: transparent;
      border-width: 0; }
    #knocking-participant-list button.primary {
      background-color: #0376da;
      border-width: 0; }

.unsupported-desktop-browser {
  top: 50%;
  left: 50%;
  position: absolute;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: block;
  text-align: center; }
  .unsupported-desktop-browser__title {
    color: #fff;
    font-weight: 300;
    font-size: 24px;
    letter-spacing: 1px; }
  .unsupported-desktop-browser__description, .unsupported-desktop-browser__description_small {
    color: rgba(255, 255, 255, 0.7);
    font-size: 21px;
    font-weight: 300;
    letter-spacing: 1px;
    margin-top: 16px; }
    .unsupported-desktop-browser__description_small {
      font-size: 17px; }
  .unsupported-desktop-browser__link {
    color: #489afe;
    -moz-transition: color 0.1s ease-out;
    -o-transition: color 0.1s ease-out;
    -webkit-transition: color 0.1s ease-out;
    transition: color 0.1s ease-out; }
    .unsupported-desktop-browser__link:hover {
      color: #287ade;
      cursor: pointer;
      text-decoration: none;
      -moz-transition: color 0.1s ease-in;
      -o-transition: color 0.1s ease-in;
      -webkit-transition: color 0.1s ease-in;
      transition: color 0.1s ease-in; }

/**
 * Styles errors and links in the AddPeopleDialog.
 */
.modal-dialog-form .add-people-form-wrap {
  margin-top: 8px; }
  .modal-dialog-form .add-people-form-wrap .error {
    padding-left: 5px; }
    .modal-dialog-form .add-people-form-wrap .error a {
      padding-left: 5px; }
  .modal-dialog-form .add-people-form-wrap .add-telephone-icon {
    display: flex;
    height: 28px;
    transform: scaleX(-1);
    width: 28px; }
    .modal-dialog-form .add-people-form-wrap .add-telephone-icon i {
      line-height: 28px;
      margin: auto; }
  .modal-dialog-form .add-people-form-wrap .footer-text-wrap {
    display: flex; }
  .modal-dialog-form .add-people-form-wrap .footer-telephone-icon {
    display: flex;
    transform: scaleX(-1);
    padding-left: 10px; }
    .modal-dialog-form .add-people-form-wrap .footer-telephone-icon i {
      line-height: 20px;
      margin: auto; }

/**
 * Styles errors in the MultiSelectAutocomplete.
 */
.autocomplete-error {
  min-width: 260px; }

.deep-linking-desktop {
  background-color: #fff;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column; }
  .deep-linking-desktop .header {
    width: 100%;
    height: 55px;
    background-color: #f1f2f5;
    padding-top: 15px;
    padding-left: 50px;
    display: flex;
    flex-flow: row;
    flex: 0 0 55px; }
    .deep-linking-desktop .header .logo {
      height: 40px; }
  .deep-linking-desktop .content {
    padding-top: 40px;
    padding-bottom: 40px;
    left: 0px;
    right: 0px;
    display: flex;
    width: 100%;
    height: 100%;
    flex-flow: row; }
    .deep-linking-desktop .content .leftColumn {
      left: 0px;
      width: 50%;
      min-height: 156px;
      display: flex;
      flex-flow: column; }
      .deep-linking-desktop .content .leftColumn .leftColumnContent {
        padding: 20px;
        display: flex;
        flex-flow: column;
        height: 100%; }
        .deep-linking-desktop .content .leftColumn .leftColumnContent .image {
          background-image: url("../images/deep-linking-image.png");
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
          height: 100%;
          width: 100%; }
    .deep-linking-desktop .content .rightColumn {
      top: 0px;
      width: 50%;
      min-height: 156px;
      display: flex;
      flex-flow: row;
      align-items: center; }
      .deep-linking-desktop .content .rightColumn .rightColumnContent {
        display: flex;
        flex-flow: column;
        padding: 20px 20px 20px 60px; }
        .deep-linking-desktop .content .rightColumn .rightColumnContent .title {
          color: #1c2946; }
        .deep-linking-desktop .content .rightColumn .rightColumnContent .description {
          color: #606a80;
          margin-top: 8px; }
        .deep-linking-desktop .content .rightColumn .rightColumnContent .buttons {
          margin-top: 16px; }

.deep-linking-mobile {
  background-color: #fff;
  height: 100vh;
  overflow: auto;
  position: relative;
  width: 100vw; }
  .deep-linking-mobile .header {
    width: 100%;
    height: 70px;
    background-color: #f1f2f5;
    text-align: center; }
    .deep-linking-mobile .header .logo {
      margin-top: 15px;
      margin-left: auto;
      margin-right: auto;
      height: 40px; }
  .deep-linking-mobile a {
    text-decoration: none;
    color: inherit; }
  .deep-linking-mobile__body {
    color: #4a4a4a;
    margin: auto;
    max-width: 40em;
    padding: 35px 0 40px 0;
    text-align: center;
    width: 90%; }
    .deep-linking-mobile__body a:active {
      text-decoration: none; }
    .deep-linking-mobile__body .image {
      max-width: 80%; }
  .deep-linking-mobile__text {
    font-weight: bolder;
    font-size: inherit;
    line-height: inherit;
    padding: 10px 10px 0px 10px; }
  .deep-linking-mobile__text,
  .deep-linking-mobile .deep-linking-dial-in {
    font-size: 1em;
    line-height: 1.38095em;
    margin-bottom: 0.65em; }
    .deep-linking-mobile__text_small,
    .deep-linking-mobile .deep-linking-dial-in_small {
      font-size: 1.5em;
      margin-bottom: 1em;
      margin-top: 1.16667em; }
      .deep-linking-mobile__text_small strong,
      .deep-linking-mobile .deep-linking-dial-in_small strong {
        font-size: 1.16667em; }
    .deep-linking-mobile__text table,
    .deep-linking-mobile .deep-linking-dial-in table {
      font-size: 1em; }
    .deep-linking-mobile__text .dial-in-conference-id,
    .deep-linking-mobile .deep-linking-dial-in .dial-in-conference-id {
      margin: 10px 0 10px 0;
      padding: inherit;
      background-color: inherit;
      border-radius: inherit; }
    .deep-linking-mobile__text .dial-in-conference-name,
    .deep-linking-mobile .deep-linking-dial-in .dial-in-conference-name {
      font-size: inherit;
      line-height: inherit;
      margin-bottom: none;
      font-weight: inherit; }
    .deep-linking-mobile__text .dial-in-conference-description,
    .deep-linking-mobile .deep-linking-dial-in .dial-in-conference-description {
      font-size: 0.8em;
      line-height: inherit;
      margin-bottom: none; }
    .deep-linking-mobile__text .dial-in-conference-pin,
    .deep-linking-mobile .deep-linking-dial-in .dial-in-conference-pin {
      font-size: inherit;
      line-height: inherit; }
    .deep-linking-mobile__text .toll-free-list,
    .deep-linking-mobile .deep-linking-dial-in .toll-free-list {
      min-width: 80px; }
    .deep-linking-mobile__text .numbers-list,
    .deep-linking-mobile .deep-linking-dial-in .numbers-list {
      min-width: 150px; }
    .deep-linking-mobile__text li.toll-free:empty:before,
    .deep-linking-mobile .deep-linking-dial-in li.toll-free:empty:before {
      content: '.';
      visibility: hidden; }
  .deep-linking-mobile__href {
    height: 2.2857142857142856em;
    line-height: 2.28571em;
    margin: 18px auto 20px;
    max-width: 300px;
    width: auto;
    font-weight: bolder;
    font-size: inherit; }
  .deep-linking-mobile__button {
    border: 0;
    height: 2.28571em;
    line-height: 2.28571em;
    margin: 18px auto 10px;
    padding: 0px 10px 0px 10px;
    max-width: 300px;
    width: auto;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    /* stops bg color from leaking outside the border: */
    background-clip: padding-box;
    background-color: rgba(9, 30, 66, 0.04);
    color: #505F79;
    font-weight: bold;
    font-size: inherit; }
    .deep-linking-mobile__button:active {
      background-color: rgba(9, 30, 66, 0.04); }
    .deep-linking-mobile__button_primary {
      background-color: #0052CC;
      color: #FFFFFF;
      border-radius: inherit; }
      .deep-linking-mobile__button_primary:active {
        background-color: #0052CC; }
  .deep-linking-mobile .deep-linking-dial-in {
    display: none; }
    .deep-linking-mobile .deep-linking-dial-in.has-numbers {
      align-items: center;
      display: flex;
      flex-direction: column; }
    .deep-linking-mobile .deep-linking-dial-in .dial-in-numbers-list {
      color: #4a4a4a;
      padding-left: 20px; }
    .deep-linking-mobile .deep-linking-dial-in .dial-in-numbers-body {
      vertical-align: top; }

.no-mobile-app {
  margin: 30% auto 0;
  max-width: 25em;
  text-align: center;
  width: auto; }
  .no-mobile-app__title {
    border-bottom: 1px solid white;
    color: #fff;
    font-weight: 400;
    letter-spacing: 0.5px;
    padding-bottom: 0.70833em; }
  .no-mobile-app__description {
    font-size: 17px;
    font-weight: 300;
    letter-spacing: 1px;
    margin-top: 1em; }

.transcription-subtitles {
  bottom: 10%;
  font-size: 16px;
  font-weight: 1000;
  left: 50%;
  max-width: 50vw;
  opacity: 0.80;
  pointer-events: none;
  position: absolute;
  text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.3), 1px 0px 1px rgba(0, 0, 0, 0.3), 0px 0px 1px rgba(0, 0, 0, 0.3);
  transform: translateX(-50%);
  z-index: 6; }
  .transcription-subtitles span {
    background: black; }

.meetings-list {
  font-size: 14px;
  color: #000000;
  line-height: 20px;
  text-align: left;
  text-overflow: ellipsis;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto; }
  .meetings-list .meetings-list-empty {
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-grow: 1;
    flex-direction: column; }
    .meetings-list .meetings-list-empty .description {
      font-size: 16px;
      padding: 20px; }
  .meetings-list .button {
    background: #0074E0;
    border-radius: 4px;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 10px;
    cursor: pointer; }
  .meetings-list .calendar-action-buttons .button {
    margin: 0px 10px; }
  .meetings-list .item {
    background: rgba(255, 255, 255, 0.5);
    box-sizing: border-box;
    display: inline-flex;
    margin-top: 5px;
    min-height: 92px;
    width: 100%;
    word-break: break-word;
    display: flex;
    flex-direction: row;
    text-align: left; }
    .meetings-list .item:first-child {
      margin-top: 0px; }
    .meetings-list .item .left-column {
      display: flex;
      flex-direction: column;
      width: 140px;
      flex-grow: 0;
      padding-left: 30px;
      padding-top: 25px; }
      .meetings-list .item .left-column .date {
        font-weight: bold;
        padding-bottom: 5px; }
    .meetings-list .item .right-column {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      padding-left: 30px;
      padding-top: 25px; }
      .meetings-list .item .right-column .title {
        font-size: 16px;
        font-weight: bold;
        padding-bottom: 5px; }
    .meetings-list .item .actions {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-grow: 0;
      padding-right: 30px; }
    .meetings-list .item.with-click-handler {
      cursor: pointer; }
    .meetings-list .item.with-click-handler:hover {
      background-color: #64b32c; }
    .meetings-list .item .add-button {
      width: 30px;
      height: 30px;
      padding: 0px; }
    .meetings-list .item i {
      cursor: inherit; }
    .meetings-list .item .join-button {
      display: none; }
    .meetings-list .item:hover .join-button {
      display: block; }

.navigate-section-tile-body, .navigate-section-tile-title, .navigate-section-section-header {
  width: 100%;
  font-size: 14px;
  line-height: 20px;
  color: #fff;
  text-align: left;
  font-family: 'open_sanslight', Helvetica, sans-serif; }

.navigate-section-tile-body, .navigate-section-tile-title {
  overflow: hidden;
  text-overflow: ellipsis;
  float: left; }

.navigate-section-list-tile {
  background-color: #1754A9;
  border-radius: 4px;
  box-sizing: border-box;
  display: inline-flex;
  margin-bottom: 8px;
  margin-right: 8px;
  min-height: 100px;
  padding: 16px;
  width: 100%; }
  .navigate-section-list-tile.with-click-handler {
    cursor: pointer; }
  .navigate-section-list-tile.with-click-handler:hover {
    background-color: #1a5dbb; }
  .navigate-section-list-tile i {
    cursor: inherit; }
  .navigate-section-list-tile .element-after {
    display: flex;
    align-items: center;
    justify-content: center; }
  .navigate-section-list-tile .join-button {
    display: none; }
  .navigate-section-list-tile:hover .join-button {
    display: block; }

.navigate-section-tile-body {
  font-weight: normal;
  line-height: 24px; }

.navigate-section-list-tile-info {
  flex: 1;
  word-break: break-word; }

.navigate-section-tile-title {
  font-weight: bold;
  line-height: 24px; }

.navigate-section-section-header {
  font-weight: bold;
  margin-bottom: 16px;
  display: block; }

.navigate-section-list {
  position: relative;
  margin-top: 36px;
  margin-bottom: 36px;
  width: 100%; }

.navigate-section-list-empty {
  text-align: center; }

/**
 * The Google sign in button must follow Google's design guidelines.
 * See: https://developers.google.com/identity/branding-guidelines
 */
.google-sign-in {
  background-color: #4285f4;
  border-radius: 2px;
  cursor: pointer;
  display: inline-flex;
  font-family: Roboto, arial, sans-serif;
  font-size: 14px;
  padding: 1px; }
  .google-sign-in .google-cta {
    color: white;
    display: inline-block;
    /**
         * Hack the line height for vertical centering of text.
         */
    line-height: 32px;
    margin: 0 15px; }
  .google-sign-in .google-logo {
    background-color: white;
    border-radius: 2px;
    display: inline-block;
    padding: 8px;
    height: 18px;
    width: 18px; }

/**
 * The Microsoft sign in button must follow Microsoft's brand guidelines.
 * See: https://docs.microsoft.com/en-us/azure/active-directory/
 *     develop/active-directory-branding-guidelines
 */
.microsoft-sign-in {
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #8C8C8C;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  font-family: Segoe UI, Roboto, arial, sans-serif;
  height: 41px;
  padding: 12px; }
  .microsoft-sign-in .microsoft-cta {
    display: inline-block;
    color: #5E5E5E;
    font-size: 15px;
    line-height: 41px; }
  .microsoft-sign-in .microsoft-logo {
    display: inline-block;
    margin-right: 12px; }

.avatar {
  background-color: #AAA;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 100;
  object-fit: cover; }
  .avatar.avatar-small {
    height: 28px !important;
    width: 28px !important; }
  .avatar.avatar-xsmall {
    height: 16px !important;
    width: 16px !important; }
  .avatar .jitsi-icon {
    transform: translateY(50%); }

.avatar-svg {
  height: 100%;
  width: 100%; }

.defaultAvatar {
  opacity: 0.6; }

.avatar-badge {
  position: relative; }
  .avatar-badge-available::after {
    border-radius: 50%;
    content: '';
    display: block;
    height: 35%;
    position: absolute;
    bottom: 0;
    width: 35%;
    background-color: #6eb005; }
  .avatar-badge-away::after {
    border-radius: 50%;
    content: '';
    display: block;
    height: 35%;
    position: absolute;
    bottom: 0;
    width: 35%;
    background-color: #fac914; }
  .avatar-badge-busy::after {
    border-radius: 50%;
    content: '';
    display: block;
    height: 35%;
    position: absolute;
    bottom: 0;
    width: 35%;
    background-color: #e9001b; }
  .avatar-badge-idle::after {
    border-radius: 50%;
    content: '';
    display: block;
    height: 35%;
    position: absolute;
    bottom: 0;
    width: 35%;
    background-color: #acacac; }

/** Insert custom CSS for any additional content in the promotional footer **/
.chrome-extension-banner {
  position: fixed;
  width: 406px;
  height: 128px;
  background: #FFF;
  box-shadow: 0px 2px 48px rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  z-index: 1000;
  float: right;
  display: flex;
  flex-direction: column;
  padding: 20px 20px;
  top: 80px;
  right: 16px; }
  .chrome-extension-banner__pos_in_meeting {
    top: 10px;
    right: 10px; }
  .chrome-extension-banner__container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px; }
  .chrome-extension-banner__button-container {
    display: flex; }
  .chrome-extension-banner__checkbox-container {
    display: flex;
    margin-left: 45px;
    margin-top: 16px; }
  .chrome-extension-banner__checkbox-label {
    font-size: 14px;
    line-height: 18px;
    display: flex;
    align-items: center;
    letter-spacing: -0.006em;
    color: #1C2025; }
  .chrome-extension-banner__icon-container {
    display: flex;
    background: url("../images/chromeLogo.svg");
    background-repeat: no-repeat;
    width: 27px;
    height: 27px; }
  .chrome-extension-banner__text-container {
    font-size: 14px;
    line-height: 18px;
    display: flex;
    align-items: center;
    letter-spacing: -0.006em;
    color: #151531;
    width: 329px; }
  .chrome-extension-banner__close-container {
    display: flex;
    width: 12px;
    height: 12px; }
  .chrome-extension-banner__gray-close-icon {
    fill: #5E6D7A;
    width: 12px;
    height: 12px;
    cursor: pointer; }
  .chrome-extension-banner__button-open-url {
    background: #0A57EB;
    border-radius: 24px;
    margin-left: 45px;
    width: 236px;
    height: 40px;
    cursor: pointer; }
  .chrome-extension-banner__button-text {
    font-weight: 600;
    font-size: 14px;
    line-height: 40px;
    text-align: center;
    letter-spacing: -0.006em;
    color: #FFFFFF; }

.settings-button-container {
  position: relative; }
  .settings-button-container .toolbox-icon {
    align-items: center;
    cursor: pointer;
    display: flex;
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid #d1dbe8;
    justify-content: center;
    width: 38px;
    height: 38px; }
    .settings-button-container .toolbox-icon:hover {
      background-color: #daebfa;
      border: 1px solid #daebfa; }
    .settings-button-container .toolbox-icon.toggled {
      background: #2a3a4b;
      border: 1px solid #5e6d7a; }
      .settings-button-container .toolbox-icon.toggled svg {
        fill: #fff; }
      .settings-button-container .toolbox-icon.toggled:hover {
        background-color: #5e6d7a; }
    .settings-button-container .toolbox-icon.disabled, .disabled .settings-button-container .toolbox-icon {
      cursor: initial;
      color: #fff;
      background-color: #a4b8d1; }
      .settings-button-container .toolbox-icon.disabled:hover, .disabled .settings-button-container .toolbox-icon:hover {
        background-color: #a4b8d1; }
    .settings-button-container .toolbox-icon svg {
      fill: #5e6d7a; }

.settings-button-small-icon {
  background: #FFF;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  bottom: 0;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  height: 16px;
  position: absolute;
  text-align: center;
  right: 4px;
  width: 16px; }
  .settings-button-small-icon > svg {
    fill: #5e6d7a;
    margin-top: 5px; }
  .settings-button-small-icon--disabled {
    background-color: #a4b8d1;
    cursor: default; }
  .settings-button-small-icon--hovered {
    bottom: -1px;
    height: 20px;
    right: 2px;
    width: 20px; }
    .settings-button-small-icon--hovered > svg {
      margin-top: 6px; }

.jitsi-icon.metr {
  display: inline-block; }
  .jitsi-icon.metr > svg {
    fill: #4E5E6C;
    width: 38px; }

.jitsi-icon.metr--disabled > svg {
  fill: #4E5E6C; }

.metr-l-0 rect:first-child {
  fill: #31B76A; }

.metr-l-1 rect:nth-child(-n+2) {
  fill: #31B76A; }

.metr-l-2 rect:nth-child(-n+3) {
  fill: #31B76A; }

.metr-l-3 rect:nth-child(-n+4) {
  fill: #31B76A; }

.metr-l-4 rect:nth-child(-n+5) {
  fill: #31B76A; }

.metr-l-5 rect:nth-child(-n+6) {
  fill: #31B76A; }

.metr-l-6 rect:nth-child(-n+7) {
  fill: #31B76A; }

.metr-l-7 rect:nth-child(-n+8) {
  fill: #31B76A; }

.audio-preview-content {
  background: #2A3A4B;
  font-size: 15px;
  line-height: 24px;
  max-height: 456px;
  overflow: auto;
  width: 328px; }

.audio-preview-header {
  color: #fff;
  display: flex;
  padding: 16px; }
  .audio-preview-header-icon {
    color: #A4B8D1;
    display: inline-block; }
  .audio-preview-header-text {
    font-weight: bold;
    margin-left: 8px; }

.audio-preview-entry {
  align-items: center;
  color: #fff;
  cursor: pointer;
  display: flex;
  padding: 12px 0;
  margin-left: 48px; }
  .audio-preview-entry--selected {
    background: #1C2025;
    cursor: initial;
    margin-left: 0;
    padding-left: 21px; }
  .audio-preview-entry-text {
    color: #fff;
    font-size: 15px;
    display: inline-block;
    line-height: 24px;
    text-overflow: ellipsis;
    max-width: 213px;
    overflow: hidden;
    white-space: nowrap; }

.audio-preview-speaker {
  position: relative; }
  .audio-preview-speaker:hover .audio-preview-entry {
    background: #3F4E5E;
    margin-left: 0;
    padding-left: 48px; }
    .audio-preview-speaker:hover .audio-preview-entry--selected {
      padding-left: 21px; }
  .audio-preview-speaker:hover .audio-preview-test-button {
    display: inline-block; }
  .audio-preview-speaker:hover .audio-preview-entry-text {
    max-width: 196px; }
  .audio-preview-speaker .audio-preview-entry-text {
    max-width: 256px; }

.audio-preview-microphone {
  position: relative; }
  .audio-preview-microphone:hover .audio-preview-entry {
    background: #3F4E5E;
    margin-left: 0;
    padding-left: 48px; }
    .audio-preview-microphone:hover .audio-preview-entry--selected {
      padding-left: 21px; }
  .audio-preview-microphone .audio-preview-entry-text {
    max-width: 196px; }

.audio-preview-icon {
  border-radius: 50%;
  display: inline-block;
  width: 14px; }
  .audio-preview-icon svg {
    fill: #1C2025; }
  .audio-preview-icon--check {
    background: #31B76A;
    margin-right: 13px; }
  .audio-preview-icon--exclamation {
    margin-left: 6px; }
    .audio-preview-icon--exclamation svg {
      fill: #E54B4B; }

.audio-preview-test-button {
  display: none;
  background: #FFF;
  border: 1px solid #D1DBE8;
  border-radius: 3px;
  color: #1C2025;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  line-height: 24px;
  padding: 4px 16px;
  position: absolute;
  right: 16px;
  top: 8px; }

.audio-preview-meter-mic {
  position: absolute;
  right: 16px;
  top: 18px; }

.audio-preview > div > div:nth-child(2) > div > div {
  outline: none;
  padding: 0; }

.video-preview {
  background: none;
  max-height: 290px; }
  .video-preview-container {
    overflow: auto;
    padding: 16px; }
  .video-preview-entry {
    cursor: pointer;
    height: 135px;
    margin-bottom: 16px;
    position: relative;
    width: 240px; }
    .video-preview-entry:last-child {
      margin-bottom: 0; }
    .video-preview-entry--selected {
      border: 3px solid #31B76A;
      cursor: default;
      height: 129px;
      width: 234px; }
  .video-preview-video {
    height: 100%;
    object-fit: cover;
    width: 100%; }
  .video-preview-overlay {
    background: rgba(42, 58, 75, 0.6);
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 1; }
  .video-preview-error {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    position: absolute;
    width: 100%; }
  .video-preview-label {
    color: #fff;
    font-size: 13px;
    line-height: 20px;
    overflow: hidden;
    padding: 8px;
    position: absolute;
    text-align: center;
    text-overflow: ellipsis;
    width: 220px;
    z-index: 2; }
  .video-preview > div > div:nth-child(2) > div > div {
    outline: none;
    padding: 0; }

.prejoin-input-area {
  margin: 0 auto;
  text-align: center; }

.prejoin-title {
  color: #fff;
  font-size: 24px;
  line-height: 32px;
  margin-bottom: 16px; }

.prejoin-text-btns {
  display: flex;
  justify-content: space-between; }

.prejoin-input-label {
  color: #A4B8D1;
  font-size: 13px;
  line-height: 20px;
  margin-top: 32px 0 8px 0;
  text-align: center;
  width: 100%; }

.prejoin-checkbox {
  border: 0;
  height: 16px;
  margin-right: 8px;
  padding: 0;
  width: 16px; }

.prejoin-checkbox-container {
  margin-bottom: 14px;
  width: 100%; }

.prejoin-error {
  color: white;
  background-color: rgba(225, 45, 45, 0.6);
  border-radius: 3px;
  width: 100%;
  padding: 2px;
  box-sizing: border-box;
  margin-top: 4px;
  font-size: 13px;
  text-align: center; }

.prejoin-preview-status {
  align-items: center;
  align-self: stretch;
  color: #fff;
  display: flex;
  font-size: 13px;
  min-height: 24px;
  justify-content: center;
  text-align: center;
  z-index: 1; }
  .prejoin-preview-status--warning {
    background: rgba(241, 173, 51, 0.7); }
  .prejoin-preview-status--ok {
    background: rgba(49, 183, 106, 0.7); }

.prejoin-preview-icon {
  background-position: center;
  background-repeat: no-repeat;
  display: inline-block;
  height: 16px;
  margin-right: 8px;
  width: 16px; }

.prejoin-preview-error-desc {
  margin-right: 4px; }

.prejoin-preview .settings-button-container {
  width: 49px;
  margin: 0 8px; }

.prejoin-preview-dropdown-btns {
  width: 320px;
  padding: 8px 0; }

.prejoin-preview-dropdown-btn {
  align-items: center;
  color: #1C2025;
  cursor: pointer;
  display: flex;
  height: 40px;
  font-size: 15px;
  line-height: 24px;
  padding: 0 16px; }
  .prejoin-preview-dropdown-btn:hover {
    background-color: #DAEBFA; }

.prejoin-preview-dropdown-icon {
  display: inline-block;
  margin-right: 16px; }
  .prejoin-preview-dropdown-icon > svg {
    fill: #1C2025; }

.prejoin-preview-dropdown-container > div > div:nth-child(2) > div > div {
  background: #fff;
  padding: 0; }

.prejoin-dialog {
  background: #1C2025;
  box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  color: #fff;
  height: 400px;
  width: 375px; }
  .prejoin-dialog--small {
    height: 300;
    width: 400; }
  .prejoin-dialog-label {
    font-size: 15px;
    line-height: 24px; }
    .prejoin-dialog-label-num {
      background: #2b3b4b;
      border: 1px solid #A4B8D1;
      border-radius: 50%;
      color: #fff;
      display: inline-block;
      height: 24px;
      margin-right: 8px;
      width: 24px; }
  .prejoin-dialog-container {
    align-items: center;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    height: 100vh;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    width: 100vw;
    z-index: 3; }
  .prejoin-dialog-flag {
    display: inline-block;
    margin-right: 8px;
    transform: scale(1.2); }
  .prejoin-dialog-title {
    display: inline-block;
    font-size: 24px;
    line-height: 32px; }
  .prejoin-dialog-icon {
    cursor: pointer; }
    .prejoin-dialog-icon > svg {
      fill: #A4B8D1; }
  .prejoin-dialog-btn {
    width: 309px; }
  .prejoin-dialog-dialin-container {
    text-align: center; }
  .prejoin-dialog-delimiter {
    background: #5f6266;
    border: 0;
    height: 1px;
    margin: 0;
    padding: 0;
    width: 100%; }
    .prejoin-dialog-delimiter-container {
      margin: 16px 0 24px 0;
      position: relative; }
    .prejoin-dialog-delimiter-txt-container {
      position: absolute;
      text-align: center;
      top: -8px;
      width: 100%; }
    .prejoin-dialog-delimiter-txt {
      background: #1C2025;
      color: #5f6266;
      font-size: 11px;
      text-transform: uppercase;
      padding: 0 8px; }
  .prejoin-dialog .prejoin-dialog-btn.primary,
  .prejoin-dialog .action-btn.prejoin-dialog-btn.text {
    width: 310px; }

.prejoin-dialog-callout {
  padding: 16px; }
  .prejoin-dialog-callout-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px; }
  .prejoin-dialog-callout-picker {
    margin: 8px 0 16px 0; }

.prejoin-dialog-dialin {
  text-align: center; }
  .prejoin-dialog-dialin-header {
    align-items: center;
    margin: 16px 0 32px 16px;
    display: flex; }
  .prejoin-dialog-dialin-icon {
    margin-right: 16px; }
  .prejoin-dialog-dialin-num {
    background: #3e474f;
    border-radius: 4px;
    display: inline-block;
    font-size: 15px;
    line-height: 24px;
    margin: 4px;
    padding: 8px; }
    .prejoin-dialog-dialin-num-container {
      min-height: 48px;
      margin: 8px 0; }
  .prejoin-dialog-dialin-link {
    color: #6FB1EA;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    line-height: 20px;
    margin-bottom: 24px; }
  .prejoin-dialog-dialin-spaced-label {
    margin-bottom: 16px;
    margin-top: 28px; }
  .prejoin-dialog-dialin-btns > div {
    margin-bottom: 16px; }

.prejoin-dialog-calling {
  padding: 16px;
  text-align: center; }
  .prejoin-dialog-calling-header {
    text-align: right; }
  .prejoin-dialog-calling-label {
    font-size: 15px;
    margin: 8px 0 16px 0; }
  .prejoin-dialog-calling-number {
    font-size: 19px;
    line-height: 28px;
    margin: 16px 0; }

.cpick {
  border: 1px solid #A4B8D1;
  color: #fff;
  display: flex;
  font-size: 15px;
  height: 38px;
  line-height: 24px; }
  .cpick-selector {
    align-items: center;
    background-color: #283447;
    border-right: 1px solid #A4B8D1;
    cursor: pointer;
    display: flex;
    padding: 8px 10px;
    position: relative;
    width: 88px; }
  .cpick-icon {
    margin-right: 8px;
    position: absolute;
    right: 0;
    top: 12px; }
    .cpick-icon > svg {
      fill: #fff; }
  .cpick-input {
    padding: 8px;
    background: #1C2025;
    border: 0;
    margin: 0;
    color: #fff;
    caret-color: #0376DA;
    flex-grow: 1; }
  .cpick-dropdown {
    height: 190px;
    overflow-y: auto;
    width: 343px; }
  .cpick-dropdown-entry {
    align-items: center;
    cursor: pointer;
    display: flex;
    height: 40px;
    padding: 0 10px; }
    .cpick-dropdown-entry:hover {
      background-color: #66768b; }
    .cpick-dropdown-entry-text {
      color: #fff;
      flex-grow: 1;
      font-size: 15px;
      line-height: 24px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }

.cpick-container > div > div:nth-child(2) > div > div {
  outline: none;
  padding: 8px 0 0 0; }

.invite-more-container {
  color: #fff;
  font-weight: 600;
  position: absolute;
  width: 100%;
  text-align: center;
  z-index: 2;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }
  .invite-more-container.elevated {
    z-index: 6; }

.invite-more-header {
  font-size: 19px;
  line-height: 28px;
  margin: 24px 0 16px 0; }

.invite-more-button {
  display: flex;
  margin: auto;
  padding: 8px 16px;
  width: fit-content;
  width: -moz-fit-content;
  height: 24px;
  background: #0376DA;
  border-radius: 3px;
  font-size: 14px;
  line-height: 24px;
  cursor: pointer; }
  .invite-more-button:hover {
    background: #278ADF; }
  .invite-more-button-text {
    margin-left: 8px;
    font-size: 15px;
    line-height: 24px; }

.invite-more-dialog {
  color: #fff;
  font-size: 15px;
  line-height: 24px; }
  .invite-more-dialog.header {
    display: flex;
    justify-content: space-between;
    margin: 16px 16px 24px;
    width: calc(100% - 32px);
    color: #fff;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px; }
    .invite-more-dialog.header > div > svg {
      cursor: pointer;
      fill: #A4B8D1; }
  .invite-more-dialog.separator {
    margin: 24px 0 24px -20px;
    padding: 0 20px;
    width: 100%;
    height: 1px;
    background: #5E6D7A; }
  .invite-more-dialog.email-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 8px 8px 16px;
    margin-top: 24px;
    width: calc(100% - 26px);
    height: 22px;
    background: #2A3A4B;
    border: 1px solid #5E6D7A;
    border-radius: 3px;
    cursor: pointer; }
    .invite-more-dialog.email-container.active {
      border-radius: 3px 3px 0 0; }
  .invite-more-dialog.icon-container {
    display: none; }
    .invite-more-dialog.icon-container.active {
      display: flex;
      width: calc(100% - 26px);
      padding: 8px 8px 8px 16px;
      background: #2A3A4B;
      border: 1px solid #5E6D7A;
      border-top: none;
      border-radius: 0 0 3px 3px; }
      .invite-more-dialog.icon-container.active > * {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40px;
        width: 40px;
        border-radius: 4px;
        cursor: pointer; }
      .invite-more-dialog.icon-container.active:hover > div:hover {
        background-color: rgba(255, 255, 255, 0.2); }
      .invite-more-dialog.icon-container.active > :not(:last-child) {
        margin-right: 16px; }
      .invite-more-dialog.icon-container.active .copy-invite-icon > div > svg > path {
        fill: #A4B8D1; }
  .invite-more-dialog.dial-in-display .info-label {
    color: #A4B8D1; }
  .invite-more-dialog.dial-in-display .dial-in-copy {
    display: inline-block;
    vertical-align: middle;
    margin-left: 21px;
    cursor: pointer; }
  .invite-more-dialog.invite-buttons {
    width: 100%;
    text-align: right;
    margin-top: 8px; }
    .invite-more-dialog.invite-buttons > a {
      display: inline-block;
      height: 24px;
      width: 48px;
      border-radius: 3px;
      text-align: center;
      text-decoration: none;
      cursor: pointer; }
    .invite-more-dialog.invite-buttons-cancel {
      margin-right: 16px;
      padding: 7px 15px;
      background: #2A3A4B;
      border: 1px solid #5E6D7A; }
    .invite-more-dialog.invite-buttons-add {
      padding: 8px 16px;
      background: #0376DA; }
    .invite-more-dialog.invite-buttons.disabled > a {
      pointer-events: none; }
  .invite-more-dialog.stream {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 8px 8px 16px;
    margin-top: 8px;
    width: calc(100% - 26px);
    height: 22px;
    background: #2A3A4B;
    border: 1px solid #5E6D7A;
    border-radius: 3px;
    cursor: pointer; }
    .invite-more-dialog.stream:hover {
      font-weight: 600; }
    .invite-more-dialog.stream-text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 292px; }
      .invite-more-dialog.stream-text.selected {
        font-weight: 600; }
    .invite-more-dialog.stream.clicked {
      background: #31B76A;
      border: 1px solid #31B76A; }
    .invite-more-dialog.stream > div > svg > path {
      fill: #fff; }

.security-dialog {
  color: #fff;
  font-size: 15px;
  line-height: 24px; }
  .security-dialog.password-section {
    display: flex;
    flex-direction: column; }
    .security-dialog.password-section .description {
      font-size: 13px; }
    .security-dialog.password-section .password {
      align-items: center;
      display: flex;
      justify-content: space-between;
      margin-top: 15px; }
      .security-dialog.password-section .password-actions a {
        cursor: pointer;
        text-decoration: none;
        font-size: 14px;
        color: #6FB1EA; }
      .security-dialog.password-section .password-actions > :first-child:not(:last-child) {
        margin-right: 24px; }
  .security-dialog .separator-line {
    margin: 24px 0 24px -20px;
    padding: 0 20px;
    width: 100%;
    height: 1px;
    background: #5E6D7A; }
    .security-dialog .separator-line:last-child {
      display: none; }

.new-toolbox .toolbox-content .toolbox-icon.toggled.security-toolbar-button {
  border-width: 0; }
  .new-toolbox .toolbox-content .toolbox-icon.toggled.security-toolbar-button:not(:hover) {
    background: unset; }

/**
 * Shared style for full screen local track based dialogs/modals.
 */
.premeeting-screen,
.preview-overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0; }

.premeeting-screen {
  align-items: stretch;
  background: radial-gradient(50% 50% at 50% 50%, #2A3A4B 20.83%, #1E2A36 100%);
  display: flex;
  flex-direction: column;
  font-size: 1.3em;
  z-index: 351; }
  .premeeting-screen-avatar {
    background-color: #A4B8D1;
    margin-bottom: 24px; }
    .premeeting-screen-avatar text {
      fill: black;
      font-size: 26px;
      font-weight: 400; }
  .premeeting-screen .action-btn {
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 15px;
    line-height: 24px;
    margin-top: 16px;
    padding: 7px 16px;
    position: relative;
    text-align: center;
    width: 286px; }
    .premeeting-screen .action-btn.primary {
      background: #0376DA;
      border: 1px solid #0376DA; }
    .premeeting-screen .action-btn.secondary {
      background: transparent;
      border: 1px solid #5E6D7A; }
    .premeeting-screen .action-btn.text {
      width: auto;
      font-size: 13px;
      margin: 0;
      padding: 0; }
    .premeeting-screen .action-btn.disabled {
      background: #5E6D7A;
      border: 1px solid #5E6D7A;
      color: #AFB6BC;
      cursor: initial; }
      .premeeting-screen .action-btn.disabled .icon > svg {
        fill: #AFB6BC; }
    .premeeting-screen .action-btn .options {
      border-radius: 3px;
      align-items: center;
      display: flex;
      height: 100%;
      justify-content: center;
      position: absolute;
      right: 0;
      top: 0;
      width: 36px; }
      .premeeting-screen .action-btn .options:hover {
        background-color: #0262B6; }
      .premeeting-screen .action-btn .options svg {
        pointer-events: none; }
  .premeeting-screen .preview-overlay {
    background-image: linear-gradient(transparent, black);
    z-index: 351; }
  .premeeting-screen .content {
    align-items: center;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 352; }
    .premeeting-screen .content .title {
      color: #fff;
      font-size: 24px;
      line-height: 32px;
      margin-bottom: 16px; }
    .premeeting-screen .content .copy-meeting {
      align-items: center;
      cursor: pointer;
      color: #fff;
      display: flex;
      flex-direction: row;
      font-size: 15px;
      font-weight: 300;
      justify-content: center;
      line-height: 24px;
      margin-bottom: 16px; }
      .premeeting-screen .content .copy-meeting .url {
        background: rgba(28, 32, 37, 0.5);
        border-radius: 4px;
        display: flex;
        padding: 8px 10px;
        transition: background 0.16s ease-out; }
        .premeeting-screen .content .copy-meeting .url:hover {
          background: #1C2025; }
        .premeeting-screen .content .copy-meeting .url.done {
          background: #31B76A; }
        .premeeting-screen .content .copy-meeting .url .jitsi-icon {
          margin-left: 10px; }
      .premeeting-screen .content .copy-meeting .copy-meeting-text {
        width: 266px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; }
      .premeeting-screen .content .copy-meeting:hover {
        align-self: stretch; }
      .premeeting-screen .content .copy-meeting textarea {
        border-width: 0;
        height: 0;
        opacity: 0;
        padding: 0;
        width: 0; }
    .premeeting-screen .content input.field {
      background-color: white;
      border: none;
      outline: none;
      border-radius: 3px;
      font-size: 15px;
      line-height: 24px;
      color: #1C2025;
      padding: 8px 0;
      text-align: center;
      width: 320px; }
      .premeeting-screen .content input.field.error {
        box-shadow: 0px 0px 4px 3px rgba(225, 45, 45, 0.4); }
      .premeeting-screen .content input.field.focused {
        box-shadow: 0px 0px 4px 3px #0376DA; }
  .premeeting-screen .media-btn-container {
    display: flex;
    justify-content: center;
    margin: 24px 0 16px 0;
    width: 100%; }
    .premeeting-screen .media-btn-container > div {
      margin: 0 12px; }
    .premeeting-screen .media-btn-container .settings-button-small-icon {
      right: -8px; }
      .premeeting-screen .media-btn-container .settings-button-small-icon--hovered {
        right: -10px; }

#preview {
  height: 100%;
  position: absolute;
  width: 100%; }
  #preview.no-video {
    background: radial-gradient(50% 50% at 50% 50%, #5B6F80 0%, #365067 100%), #FFFFFF;
    text-align: center; }
  #preview .avatar {
    background: #A4B8D1;
    margin: 0 auto; }
  #preview video {
    height: 100%;
    object-fit: cover;
    position: absolute;
    width: 100%; }

.toggle-button {
  border-radius: 3px;
  cursor: pointer;
  color: #fff;
  font-size: 13px;
  height: 40px;
  margin: 0 auto;
  transition: background 0.16s ease-out;
  width: 320px;
  align-items: center;
  display: flex;
  justify-content: center; }
  .toggle-button svg {
    fill: transparent; }
  .toggle-button:hover {
    background: rgba(255, 255, 255, 0.1); }
    .toggle-button:hover .toggle-button-icon-container {
      background: #A4B8D1; }
      .toggle-button:hover .toggle-button-icon-container svg {
        fill: #1C2025; }
  .toggle-button-container {
    position: relative;
    align-items: center;
    display: flex;
    justify-content: center; }
  .toggle-button-icon-container {
    border-radius: 50%;
    left: -22px;
    padding: 2px;
    position: absolute; }
  .toggle-button--toggled .toggle-button-icon-container {
    background: white; }
    .toggle-button--toggled .toggle-button-icon-container svg {
      fill: #1C2025; }

#e2ee-section {
  display: flex;
  flex-direction: column; }
  #e2ee-section .description {
    font-size: 13px;
    margin: 15px 0; }
    #e2ee-section .description .read-more {
      cursor: pointer;
      opacity: .7; }
  #e2ee-section .control-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 15px; }
    #e2ee-section .control-row label {
      font-size: 14px;
      font-weight: bold; }

@media only screen and (max-width: 700px) {
  .watermark {
    width: 20%;
    height: 20%; }
  .new-toolbox .toolbox-content .button-group-center .toolbox-button .toolbox-icon, .new-toolbox .toolbox-content .button-group-left .toolbox-button .toolbox-icon, .new-toolbox .toolbox-content .button-group-right .toolbox-button .toolbox-icon {
    width: 28px;
    height: 28px; }
    .new-toolbox .toolbox-content .button-group-center .toolbox-button .toolbox-icon svg, .new-toolbox .toolbox-content .button-group-left .toolbox-button .toolbox-icon svg, .new-toolbox .toolbox-content .button-group-right .toolbox-button .toolbox-icon svg {
      width: 18px;
      height: 18px; }
  .new-toolbox .toolbox-content .button-group-center .toolbox-button:nth-child(2) .toolbox-icon, .new-toolbox .toolbox-content .button-group-left .toolbox-button:nth-child(2) .toolbox-icon, .new-toolbox .toolbox-content .button-group-right .toolbox-button:nth-child(2) .toolbox-icon {
    width: 30px;
    height: 30px; } }

@media only screen and (max-width: 500px) {
  #videoResolutionLabel {
    display: none; }
  .desktop-browser .vertical-filmstrip .filmstrip {
    display: none; }
  .new-toolbox .toolbox-content .button-group-center .settings-button-small-icon, .new-toolbox .toolbox-content .button-group-left .settings-button-small-icon, .new-toolbox .toolbox-content .button-group-right .settings-button-small-icon {
    display: none; }
  .new-toolbox .toolbox-content .button-group-center .toolbox-button .toolbox-icon, .new-toolbox .toolbox-content .button-group-left .toolbox-button .toolbox-icon, .new-toolbox .toolbox-content .button-group-right .toolbox-button .toolbox-icon {
    width: 18px;
    height: 18px; }
    .new-toolbox .toolbox-content .button-group-center .toolbox-button .toolbox-icon svg, .new-toolbox .toolbox-content .button-group-left .toolbox-button .toolbox-icon svg, .new-toolbox .toolbox-content .button-group-right .toolbox-button .toolbox-icon svg {
      width: 12px;
      height: 12px; }
  .new-toolbox .toolbox-content .button-group-center .toolbox-button:nth-child(2) .toolbox-icon, .new-toolbox .toolbox-content .button-group-left .toolbox-button:nth-child(2) .toolbox-icon, .new-toolbox .toolbox-content .button-group-right .toolbox-button:nth-child(2) .toolbox-icon {
    width: 20px;
    height: 20px; }
  .chrome-extension-banner {
    display: none; } }

.con-status {
  position: absolute;
  top: 24px;
  width: 100%;
  z-index: 353; }
  .con-status-container {
    border-radius: 3px;
    color: #fff;
    font-size: 13px;
    line-height: 13px;
    margin: 0 auto;
    width: 320px; }
  .con-status-header {
    background: rgba(28, 32, 37, 0.5);
    align-items: center;
    display: flex;
    justify-content: space-between; }
  .con-status-circle {
    border-radius: 50%;
    display: inline-block;
    padding: 4px;
    margin: 8px; }
  .con-status--good {
    background: #31B76A; }
  .con-status--poor {
    background: #E12D2D; }
  .con-status--non-optimal {
    background: #E39623; }
  .con-status-arrow {
    height: 36px;
    width: 36px;
    border-radius: 3px;
    margin-left: 8px;
    margin-right: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.16s ease-out; }
    .con-status-arrow--up {
      transform: rotate(180deg); }
    .con-status-arrow > svg {
      cursor: pointer; }
    .con-status-arrow:hover {
      background-color: rgba(1, 1, 1, 0.1); }
  .con-status-text {
    text-align: center; }
  .con-status-details {
    background: rgba(28, 32, 37, 0.5);
    border-top: 1px solid #5E6D7A;
    padding: 16px;
    transition: opacity 0.16s ease-out; }
    .con-status-details-visible {
      opacity: 1; }
    .con-status-details-hidden {
      opacity: 0; }

/* Modules END */