@stream-io/video-react-sdk 0.0.1-alpha.9

package/dist/css/styles.css

@@ -0,0 +1,2351 @@
+@charset "UTF-8";
+.str-video *,
+.str-video *::before,
+.str-video *::after {
+  box-sizing: border-box;
+}
+.str-video button {
+  cursor: pointer;
+  border-style: none;
+  box-shadow: none;
+}
+
+.str-video .ngxp__container {
+  opacity: 1;
+  z-index: 1;
+  padding: 0;
+  border: none;
+}
+.str-video .ngxp__container > .ngxp__arrow,
+.str-video .ngxp__container > .ngxp__arrow:before {
+  width: 0;
+  height: 0;
+}
+
+.str-video {
+  /* Used for elements where sizing is necessary (such as icons, avatar), you can use this variable to scale those elements */
+  --str-video__spacing-px: 1px;
+  /* Used for margins and paddings */
+  --str-video__spacing-0_5: 0.125rem;
+  /* Used for margins and paddings */
+  --str-video__spacing-1: 0.25rem;
+  /* Used for margins and paddings */
+  --str-video__spacing-1_5: 0.375rem;
+  /* Used for margins and paddings */
+  --str-video__spacing-2: 0.5rem;
+  /* Used for margins and paddings */
+  --str-video__spacing-2_5: 0.625rem;
+  /* Used for margins and paddings */
+  --str-video__spacing-3: 0.75rem;
+  /* Used for margins and paddings */
+  --str-video__spacing-3_5: 0.875rem;
+  /* Used for margins and paddings */
+  --str-video__spacing-4: 1rem;
+  /* Used for margins and paddings */
+  --str-video__spacing-5: 1.25rem;
+  /* Used for margins and paddings */
+  --str-video__spacing-6: 1.5rem;
+  /* Used for margins and paddings */
+  --str-video__spacing-7: 1.75rem;
+  /* Used for margins and paddings */
+  --str-video__spacing-8: 2rem;
+  /* Used for margins and paddings */
+  --str-video__spacing-9: 2.25rem;
+  /* Used for margins and paddings */
+  --str-video__spacing-10: 2.5rem;
+  /* Used for margins and paddings */
+  --str-video__spacing-11: 2.75rem;
+  /* Used for margins and paddings */
+  --str-video__spacing-12: 3rem;
+  /* Used for margins and paddings */
+  --str-video__spacing-14: 3.5rem;
+  /* Used for margins and paddings */
+  --str-video__spacing-16: 4rem;
+}
+
+.str-video {
+  /* Border radius used for slightly rounded elements */
+  --str-video__border-radius-xxxs: 2px;
+  /* Border radius used for slightly rounded elements */
+  --str-video__border-radius-xxs: 4px;
+  /* Border radius used for slightly rounded elements */
+  --str-video__border-radius-xs: 8px;
+  /* Border radius used for slightly rounded elements */
+  --str-video__border-radius-sm: 12px;
+  /* Border radius used for rounded elements */
+  --str-video__border-radius-md: 18px;
+  /* Border radius used for rounded elements */
+  --str-video__border-radius-lg: 20px;
+  /* Border radius used for rounded elements */
+  --str-video__border-radius-xl: 30px;
+  /* Border radius used for circular elements */
+  --str-video__border-radius-circle: 999px;
+  /* The font used in the video, by default, we use [preinstalled OS fonts](https://systemfontstack.com/) */
+  --str-video__font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu,
+    Cantarell, Helvetica Neue, sans-serif;
+  /* The font used for caption texts */
+  --str-video__caption-text: 0.75rem/1rem var(--str-video__font-family);
+  /* The font used for caption texts with emphasize */
+  --str-video__caption-medium-text: 500 0.75rem/1rem var(--str-video__font-family);
+  /* The font used for body texts */
+  --str-video__body-text: 0.875rem/1rem var(--str-video__font-family);
+  /* The font used for body texts with emphasize */
+  --str-video__body-medium-text: 500 0.875rem/1rem var(--str-video__font-family);
+  /* The font used for body texts */
+  --str-video__body2-text: 0.9375rem/1rem var(--str-video__font-family);
+  /* The font used for body texts with emphasize */
+  --str-video__body2-medium-text: 500 0.9375rem/1rem var(--str-video__font-family);
+  /* The font used for subtitle texts */
+  --str-video__subtitle-text: 1rem/1.25rem var(--str-video__font-family);
+  /* The font used for subtitle texts with emphasize */
+  --str-video__subtitle-medium-text: 500 1rem/1.25rem var(--str-video__font-family);
+  /* The font used for subtitle texts */
+  --str-video__subtitle2-text: 1.25rem/1.5rem var(--str-video__font-family);
+  /* The font used for subtitle texts with emphasize */
+  --str-video__subtitle2-medium-text: 500 1.25rem/1.5rem var(--str-video__font-family);
+  /* The font used for headline texts */
+  --str-video__headline-text: 1.5rem/1.5rem var(--str-video__font-family);
+  /* The font used for headline texts */
+  --str-video__headline2-text: 1.8rem/1.8rem var(--str-video__font-family);
+}
+
+.str-video,
+.str-video__theme-light {
+  /* Used for emphasis, brands can inject their main color using this variable */
+  --str-video__primary-color: var(--str-video__blue500);
+  /* Used for emphasised overlays - color of --str-video__primary-color with alpha channel */
+  --str-video__primary-overlay-color: rgba(0, 95, 255, 0.6);
+  /* Used for emphasis, brands can inject their main color using this variable, it has less emphasis than primary color */
+  --str-video__primary-color-low-emphasis: var(--str-video__blue300);
+  /* Used to indicate that a UI element with primary color is in an active state */
+  --str-video__active-primary-color: var(--str-video__blue600);
+  /* If the primary color is used as a background, text/icons are displayed in this color */
+  --str-video__on-primary-color: var(--str-video__grey50);
+  /* Used as a background color for the main video UI components */
+  --str-video__background-color: var(--str-video__grey50);
+  /* Used as a background color for the main video UI components */
+  --str-video__secondary-background-color: var(--str-video__grey50);
+  /* Used as a background color to give emphasis, but less vibrant than the primary color */
+  --str-video__primary-surface-color: var(--str-video__blue100);
+  /* Used as a background color to give emphasis, but less vibrant than the primary surface color */
+  --str-video__primary-surface-color-low-emphasis: var(--str-video__blue50);
+  /* A neutral color used to give emphasis to different surfaces */
+  --str-video__surface-color: var(--str-video__grey300);
+  /* A neutral color used to give emphasis to different surfaces */
+  --str-video__secondary-surface-color: var(--str-video__grey200);
+  /* A neutral color used to give emphasis to different surfaces */
+  --str-video__tertiary-surface-color: var(--str-video__grey100);
+  /* The main color used for texts/icons */
+  --str-video__text-color: var(--str-video__grey950);
+  /* Used for texts/icons that need less emphasis */
+  --str-video__text-low-emphasis-color: var(--str-video__grey500);
+  /* Used for displaying disabled UI elements (typically buttons) */
+  --str-video__disabled-color: var(--str-video__grey400);
+  /* Used for text/icon colors if disabled color is used as a background color */
+  --str-video__on-disabled-color: var(--str-video__grey50);
+  /* Used for error messages, and destructive actions */
+  --str-video__danger-color: var(--str-video__red400);
+  /* The background color used to highlight a message when jumping to a message. Only available in React SDK. */
+  --str-video__message-highlight-color: var(--str-video__yellow100);
+  /* Used for displaying the unread badge */
+  --str-video__unread-badge-color: var(--str-video__red400);
+  /* Used for text/icon colors if unread badge color is used as a background color */
+  --str-video__on-unread-badge-color: var(--str-video__grey50);
+  /* The background color used for overlays */
+  --str-video__overlay-color: rgba(252, 252, 252, 0.9);
+  /* The background color used for subtle overlays */
+  --str-video__secondary-overlay-color: rgba(0, 0, 0, 0.2);
+  /* The text/icon color used on subtle overlays */
+  --str-video__secondary-overlay-text-color: var(--str-video__grey50);
+  /* The background color used for opaque surfaces */
+  --str-video__opaque-surface-background-color: rgba(0, 0, 0, 0.8);
+  /* The text color used on opaque surfaces */
+  --str-video__opaque-surface-text-color: var(--str-video__grey50);
+  /* If a component has a box shadow applied to it, this will be the color used for the shadow */
+  --str-video__box-shadow-color: rgba(0, 0, 0, 0.18);
+  /* Used for online indicator and success messages */
+  --str-video__info-color: var(--str-video__green500);
+}
+
+.str-video__theme-dark {
+  --str-video__primary-color: var(--str-video__blue400);
+  --str-video__primary-overlay-color: rgba(51, 126, 255, 0.6);
+  --str-video__primary-color-low-emphasis: var(--str-video__blue700);
+  --str-video__active-primary-color: var(--str-video__blue600);
+  --str-video__on-primary-color: var(--str-video__grey50);
+  --str-video__background-color: var(--str-video__grey950);
+  --str-video__secondary-background-color: var(--str-video__grey900);
+  --str-video__primary-surface-color: var(--str-video__blue900);
+  --str-video__primary-surface-color-low-emphasis: var(--str-video__blue950);
+  --str-video__surface-color: var(--str-video__grey700);
+  --str-video__secondary-surface-color: var(--str-video__grey800);
+  --str-video__tertiary-surface-color: var(--str-video__grey900);
+  --str-video__text-color: var(--str-video__grey50);
+  --str-video__text-low-emphasis-color: var(--str-video__grey500);
+  --str-video__disabled-color: var(--str-video__grey600);
+  --str-video__on-disabled-color: var(--str-video__grey50);
+  --str-video__danger-color: var(--str-video__red600);
+  --str-video__message-highlight-color: var(--str-video__yellow900);
+  --str-video__unread-badge-color: var(--str-video__red400);
+  --str-video__on-unread-badge-color: var(--str-video__grey50);
+  --str-video__overlay-color: rgba(0, 0, 0, 0.7);
+  --str-video__secondary-overlay-color: rgba(0, 0, 0, 0.4);
+  --str-video__secondary-overlay-text-color: var(--str-video__grey50);
+  --str-video__opaque-surface-background-color: rgba(250, 250, 250, 0.85);
+  --str-video__opaque-surface-text-color: var(--str-video__grey900);
+  --str-video__box-shadow-color: rgba(0, 0, 0, 0.8);
+  --str-video__info-color: var(--str-video__green500);
+}
+
+.str-video {
+  --str-video__blue950: #001333;
+  --str-video__blue900: #00163d;
+  --str-video__blue800: #002666;
+  --str-video__blue700: #003999;
+  --str-video__blue600: #004ccc;
+  --str-video__blue500: #005fff;
+  --str-video__blue400: #337eff;
+  --str-video__blue300: #669fff;
+  --str-video__blue200: #ccdfff;
+  --str-video__blue100: #e0f0ff;
+  --str-video__blue50: #ebf5ff;
+  --str-video__grey950: #080707;
+  --str-video__grey900: #17191c;
+  --str-video__grey800: #1c1e22;
+  --str-video__grey700: #272a30;
+  --str-video__grey600: #4c525c;
+  --str-video__grey500: #72767e;
+  --str-video__grey400: #b4b7bb;
+  --str-video__grey300: #dbdde1;
+  --str-video__grey200: #e9eaed;
+  --str-video__grey100: #f4f4f5;
+  --str-video__grey50: #ffffff;
+  --str-video__red900: #330003;
+  --str-video__red800: #660006;
+  --str-video__red700: #990008;
+  --str-video__red600: #cc000b;
+  --str-video__red500: #ff000e;
+  --str-video__red400: #ff3742;
+  --str-video__red300: #ff666e;
+  --str-video__red200: #ff999f;
+  --str-video__red100: #ffe5e7;
+  --str-video__green900: #062d16;
+  --str-video__green800: #0d592c;
+  --str-video__green700: #138643;
+  --str-video__green600: #19b359;
+  --str-video__green500: #20e070;
+  --str-video__green400: #4ce68c;
+  --str-video__green300: #79eca9;
+  --str-video__green200: #a6f2c6;
+  --str-video__green100: #e9f1ff;
+  --str-video__yellow900: #332500;
+  --str-video__yellow800: #664900;
+  --str-video__yellow700: #996e00;
+  --str-video__yellow600: #cc9200;
+  --str-video__yellow500: #ffb700;
+  --str-video__yellow400: #ffd466;
+  --str-video__yellow300: #ffe299;
+  --str-video__yellow200: #fff1cc;
+  --str-video__yellow100: #fff8e5;
+}
+
+.str-video,
+.str-video__call,
+.str-video__theme-variables {
+  --str-video__background-color0: #000000;
+  --str-video__background-color1: #1c1e22;
+  --str-video__background-color2: #272a30;
+  --str-video__background-color3: #9e9e9e;
+  --str-video__background-color4: #121416;
+  --str-video__background-color5: #4a5059;
+  --str-video__danger-color1: #ff3742;
+  --str-video__danger-color2: #ff000e;
+  --str-video__overlay-color: rgba(39, 42, 48, 0.75);
+  --str-video__text-color1: #ffffff;
+  --str-video__text-color2: #b4b7bb;
+  --str-video__text-color3: #72767e;
+  --str-video__text-color4: #f7f7f8;
+  --str-video__border-radius1: 8px;
+  --str-video__border-radius2: 12px;
+  --str-video__border-radius-circle: 9999px;
+  --str-video__primary-color: #005fff;
+  --str-video__secondary-color: #337eff;
+  --str-video__icon--call-end: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAyNiAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzIDIuNDY4NzRDMTEuMzMzMyAyLjQ2ODc0IDkuNzE4NzUgMi43MjkxNiA4LjIwODMzIDMuMjE4NzRWNi40NDc5MUM4LjIwODMzIDYuODU0MTYgNy45Njg3NSA3LjIxODc0IDcuNjI1IDcuMzg1NDFDNi42MDQxNyA3Ljg5NTgzIDUuNjc3MDggOC41NTIwOCA0Ljg1NDE3IDkuMzEyNDlDNC42NjY2NyA5LjQ5OTk5IDQuNDA2MjUgOS42MDQxNiA0LjEyNSA5LjYwNDE2QzMuODMzMzMgOS42MDQxNiAzLjU3MjkyIDkuNDg5NTggMy4zODU0MiA5LjMwMjA4TDAuODAyMDgzIDYuNzE4NzRDMC42MTQ1ODMgNi41NDE2NiAwLjUgNi4yODEyNCAwLjUgNS45ODk1N0MwLjUgNS42OTc5MSAwLjYxNDU4MyA1LjQzNzQ5IDAuODAyMDgzIDUuMjQ5OTlDMy45NzkxNyAyLjIzOTU3IDguMjcwODMgMC4zODU0MDYgMTMgMC4zODU0MDZDMTcuNzI5MiAwLjM4NTQwNiAyMi4wMjA4IDIuMjM5NTcgMjUuMTk3OSA1LjI0OTk5QzI1LjM4NTQgNS40Mzc0OSAyNS41IDUuNjk3OTEgMjUuNSA1Ljk4OTU3QzI1LjUgNi4yODEyNCAyNS4zODU0IDYuNTQxNjYgMjUuMTk3OSA2LjcyOTE2TDIyLjYxNDYgOS4zMTI0OUMyMi40MjcxIDkuNDk5OTkgMjIuMTY2NyA5LjYxNDU4IDIxLjg3NSA5LjYxNDU4QzIxLjU5MzggOS42MTQ1OCAyMS4zMzMzIDkuNDk5OTkgMjEuMTQ1OCA5LjMyMjkxQzIwLjMyMjkgOC41NTIwOCAxOS4zODU0IDcuOTA2MjQgMTguMzY0NiA3LjM5NTgyQzE4LjAyMDggNy4yMjkxNiAxNy43ODEyIDYuODc0OTkgMTcuNzgxMiA2LjQ1ODMyVjMuMjI5MTZDMTYuMjgxMiAyLjcyOTE2IDE0LjY2NjcgMi40Njg3NCAxMyAyLjQ2ODc0WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==");
+  --str-video__icon--camera: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4LjExMTEgMTBWNS4zMzMzM0MxOC4xMTExIDQuNiAxNy41NjExIDQgMTYuODg4OSA0SDIuMjIyMjJDMS41NSA0IDEgNC42IDEgNS4zMzMzM1YxOC42NjY3QzEgMTkuNCAxLjU1IDIwIDIuMjIyMjIgMjBIMTYuODg4OUMxNy41NjExIDIwIDE4LjExMTEgMTkuNCAxOC4xMTExIDE4LjY2NjdWMTRMMjEuMjYyOCAxNy40MzgzQzIxLjg3OTEgMTguMTEwNSAyMyAxNy42NzQ1IDIzIDE2Ljc2MjVWNy4yMzc0N0MyMyA2LjMyNTQ2IDIxLjg3OTEgNS44ODk0NSAyMS4yNjI4IDYuNTYxNzRMMTguMTExMSAxMFoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=");
+  --str-video__icon--camera-off: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIzIDYuMjEwNTNMMTguMzY4NCAxMC44NDIxVjYuNzg5NDdDMTguMzY4NCA2LjE1MjYzIDE3Ljg0NzQgNS42MzE1OCAxNy4yMTA1IDUuNjMxNThIMTAuMDU0N0wyMyAxOC41NzY4VjYuMjEwNTNaTTIuNDcwNTMgMUwxIDIuNDcwNTNMNC4xNjEwNSA1LjYzMTU4SDMuMzE1NzlDMi42Nzg5NSA1LjYzMTU4IDIuMTU3ODkgNi4xNTI2MyAyLjE1Nzg5IDYuNzg5NDdWMTguMzY4NEMyLjE1Nzg5IDE5LjAwNTMgMi42Nzg5NSAxOS41MjYzIDMuMzE1NzkgMTkuNTI2M0gxNy4yMTA1QzE3LjQ1MzcgMTkuNTI2MyAxNy42NjIxIDE5LjQzMzcgMTcuODM1OCAxOS4zMTc5TDIxLjUyOTUgMjNMMjMgMjEuNTI5NUwyLjQ3MDUzIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
+  --str-video__icon--caret: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI1IiB2aWV3Qm94PSIwIDAgOSA1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0iTTQuNTAwMjQgMC43Njc3QzQuMzYzMjggMC43Njc3IDQuMjM4NCAwLjgyMDA2OCA0LjEzNzY5IDAuOTI4ODMzTDEuMDY4MTEgNC4wNjY4OUMwLjk3OTQ5MSA0LjE1NTUyIDAuOTM1MTggNC4yNjQyOCAwLjkzNTE4IDQuMzk3MjJDMC45MzUxOCA0LjY1OTA2IDEuMTQwNjIgNC44NjQ1IDEuMzk4NDQgNC44NjQ1QzEuNTI3MzQgNC44NjQ1IDEuNjQ4MTkgNC44MTIxMyAxLjczNjgyIDQuNzIzNTFMNC41MDAyNCAxLjg5MTZMNy4yNjM2NyA0LjcyMzUxQzcuMzU2MzIgNC44MTIxMyA3LjQ3MzE0IDQuODY0NSA3LjYwMjA1IDQuODY0NUM3Ljg2Mzg5IDQuODY0NSA4LjA2OTM0IDQuNjU5MDYgOC4wNjkzNCA0LjM5NzIyQzguMDY5MzQgNC4yNjgzMSA4LjAyMSA0LjE1NTUyIDcuOTMyMzcgNC4wNjY4OUw0Ljg2Mjc5IDAuOTI4ODMzQzQuNzU4MDYgMC44MjAwNjggNC42MzcyMSAwLjc2NzcgNC41MDAyNCAwLjc2NzdaIiBmaWxsPSIjNzI3NjdFIi8+Cjwvc3ZnPgo=");
+  --str-video__icon--chat: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNiAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIzIDMuMTk1MDdWMTcuNzI2M0g0LjQ2MjVMMyAxOS4xNDMxVjMuMTk1MDdIMjNaTTIzIDAuNzczMTkzSDNDMS42MjUgMC43NzMxOTMgMC41IDEuODYzMDQgMC41IDMuMTk1MDdWMjIuMDczNkMwLjUgMjMuMTUxMyAxLjg1IDIzLjY5NjIgMi42Mzc1IDIyLjkzMzNMNS41IDIwLjE0ODJIMjNDMjQuMzc1IDIwLjE0ODIgMjUuNSAxOS4wNTgzIDI1LjUgMTcuNzI2M1YzLjE5NTA3QzI1LjUgMS44NjMwNCAyNC4zNzUgMC43NzMxOTMgMjMgMC43NzMxOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
+  --str-video__icon--close: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEwIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNOS4xOTk0OSAwLjMwNTY3MUM4LjkzOTQ5IDAuMDQ1NjcwNyA4LjUxOTQ5IDAuMDQ1NjcwNyA4LjI1OTQ5IDAuMzA1NjcxTDQuOTk5NDkgMy41NTlMMS43Mzk0OSAwLjI5OTAwNEMxLjQ3OTQ5IDAuMDM5MDAzOSAxLjA1OTQ5IDAuMDM5MDAzOSAwLjc5OTQ5MiAwLjI5OTAwNEMwLjUzOTQ5MiAwLjU1OTAwNCAwLjUzOTQ5MiAwLjk3OTAwNCAwLjc5OTQ5MiAxLjIzOUw0LjA1OTQ5IDQuNDk5TDAuNzk5NDkyIDcuNzU5QzAuNTM5NDkyIDguMDE5IDAuNTM5NDkyIDguNDM5IDAuNzk5NDkyIDguNjk5QzEuMDU5NDkgOC45NTkgMS40Nzk0OSA4Ljk1OSAxLjczOTQ5IDguNjk5TDQuOTk5NDkgNS40MzlMOC4yNTk0OSA4LjY5OUM4LjUxOTQ5IDguOTU5IDguOTM5NDkgOC45NTkgOS4xOTk0OSA4LjY5OUM5LjQ1OTQ5IDguNDM5IDkuNDU5NDkgOC4wMTkgOS4xOTk0OSA3Ljc1OUw1LjkzOTQ5IDQuNDk5TDkuMTk5NDkgMS4yMzlDOS40NTI4MyAwLjk4NTY3MSA5LjQ1MjgzIDAuNTU5MDA0IDkuMTk5NDkgMC4zMDU2NzFaIiBmaWxsPSIjNzI3NjdFIi8+Cjwvc3ZnPgo=");
+  --str-video__icon--connection-quality-poor: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNSAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMC40OTgwNDciIHk9IjAuNTAwOTc3IiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHJ4PSI2IiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+CjxwYXRoIGQ9Ik0xMi40OTggMTYuNTAxTDEyLjQ5OCAxMS41MDEiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik03LjQ5ODA1IDE2LjUwMUw3LjQ5ODA1IDE0LjUwMSIgc3Ryb2tlPSIjRkYzNzQyIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgLz4KPHBhdGggZD0iTTE3LjQ5OCAxNi41MDFMMTcuNDk4IDguNTAwOTgiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPgo8L3N2Zz4K");
+  --str-video__icon--connection-quality-good: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNSAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMC40OTgwNDciIHk9IjAuNDk5MDIzIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHJ4PSI2IiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+CjxwYXRoIGQ9Ik0xMi40OTggMTYuNDk5TDEyLjQ5OCAxMS40OTkiIHN0cm9rZT0iIzAwNkNGRiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTcuNDk4MDUgMTYuNDk5TDcuNDk4MDUgMTQuNDk5IiBzdHJva2U9IiMwMDZDRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0xNy40OTggMTYuNDk5TDE3LjQ5OCA4LjQ5OTAyIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K");
+  --str-video__icon--connection-quality-excellent: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNSAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMC40OTgwNDciIHk9IjAuNDk5MDIzIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHJ4PSI2IiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+CjxwYXRoIGQ9Ik0xMi40OTggMTYuNDk5TDEyLjQ5OCAxMS40OTkiIHN0cm9rZT0iIzAwNkNGRiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTcuNDk4MDUgMTYuNDk5TDcuNDk4MDUgMTQuNDk5IiBzdHJva2U9IiMwMDZDRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0xNy40OTggMTYuNDk5TDE3LjQ5OCA4LjQ5OTAyIiBzdHJva2U9IiMwMDZDRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");
+  --str-video__icon--copy: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0zLjUgMCAxOSAxOSI+PHBhdGggZD0iTTExLjQxNSA1LjA2OHY5LjE2YS40NjMuNDYzIDAgMCAxLS40NjIuNDYxSDkuNDc3djEuNDc3YS40NjMuNDYzIDAgMCAxLS40NjIuNDYySDEuMDQ3YS40NjMuNDYzIDAgMCAxLS40NjItLjQ2MlY0Ljk3NmEuNDYzLjQ2MyAwIDAgMSAuNDYyLS40NjJoMS40NzZWMy4wMzdhLjQ2My40NjMgMCAwIDEgLjQ2Mi0uNDYyaDUuOTM3ek04LjM2OSA3Ljg3NEg2LjYyOGEuNTI5LjUyOSAwIDAgMS0uNTI3LS41MjdWNS42MjJIMS42OTN2OS44OTdIOC4zN3ptLTQuNzM3LTQuMTl2LjgzaDMuMzUybDEuMDk1IDEuMDk1YS41MTguNTE4IDAgMCAxLS4wNC0uMlYzLjY4NHptNS44NDUgMy4zMjN2Ni41NzRoLjgzVjUuOTM2aC0xLjc0YS41MTcuNTE3IDAgMCAxLS4yLS4wNHoiLz48L3N2Zz4K");
+  --str-video__icon--dominant-speaker: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMjMiIHZpZXdCb3g9IjAgMCAxNCAyMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuMDY4MzU5NCAxMi44NDE5QzAuMDY4MzU5NCAxMy4yMzIzIDAuMzczMDQ3IDEzLjUyNzQgMC43OTE5OTIgMTMuNTI3NEg2LjMxNDQ1TDMuNDEwNCAyMS4zMjU1QzMuMDIwMDIgMjIuMzYzNCA0LjA5NTk1IDIyLjkxNTYgNC43ODE0OSAyMi4wNzc3TDEzLjY3NDYgMTEuMDcwOUMxMy44NDU5IDEwLjg1MTkgMTMuOTMxNiAxMC42NTE5IDEzLjkzMTYgMTAuNDMzQzEzLjkzMTYgMTAuMDMzMSAxMy42MjcgOS43NDc0MSAxMy4yMDggOS43NDc0MUg3LjY4NTU1TDEwLjU4OTYgMS45Mzk3OUMxMC45OCAwLjkwMTk0NyA5LjkwNDA1IDAuMzQ5NzAxIDkuMjE4NTEgMS4xOTcxMUwwLjMzNDk2MSAxMi4yMDM5QzAuMTYzNTc0IDEyLjQxMzQgMC4wNjgzNTk0IDEyLjYxMzQgMC4wNjgzNTk0IDEyLjg0MTlaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
+  --str-video__icon--download: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGQ9Ik01MTIgNjY2LjUgMzY3LjIgNTIxLjdsMzYuMi0zNi4yIDgzIDgzVjI1Nmg1MS4ydjMxMi41bDgzLTgzIDM2LjIgMzYuMkw1MTIgNjY2LjV6bS0yMDQuOCA1MC4zVjc2OGg0MDkuNnYtNTEuMkgzMDcuMnoiLz48L3N2Zz4K");
+  --str-video__icon--ellipsis: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj4KCTxwYXRoCgkJZD0iTTM1MiAyNTZDMzUyIDIzOC4zIDM2Ni4zIDIyNCAzODQgMjI0QzQwMS43IDIyNCA0MTYgMjM4LjMgNDE2IDI1NkM0MTYgMjczLjcgNDAxLjcgMjg4IDM4NCAyODhDMzY2LjMgMjg4IDM1MiAyNzMuNyAzNTIgMjU2ek0xOTIgMjU2QzE5MiAyMzguMyAyMDYuMyAyMjQgMjI0IDIyNEMyNDEuNyAyMjQgMjU2IDIzOC4zIDI1NiAyNTZDMjU2IDI3My43IDI0MS43IDI4OCAyMjQgMjg4QzIwNi4zIDI4OCAxOTIgMjczLjcgMTkyIDI1NnpNOTYgMjU2Qzk2IDI3My43IDgxLjY3IDI4OCA2NCAyODhDNDYuMzMgMjg4IDMyIDI3My43IDMyIDI1NkMzMiAyMzguMyA0Ni4zMyAyMjQgNjQgMjI0QzgxLjY3IDIyNCA5NiAyMzguMyA5NiAyNTZ6IgoJLz4KPC9zdmc+Cg==");
+  --str-video__icon--film-roll: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMzQzLjY1NiA0NTEuMTA5QzQxMCA0MTEuNDM4IDQ1NC40MjIgMzM4LjkwNiA0NTQuNDIyIDI1NmMwLTEyNS40ODQtMTAxLjcxOS0yMjcuMjE5LTIyNy4yMDMtMjI3LjIxOUMxMDEuNzE5IDI4Ljc4MSAwIDEzMC41MTYgMCAyNTZzMTAxLjcxOSAyMjcuMjE5IDIyNy4yMTkgMjI3LjIxOUg1MTJWNDUxLjExSDM0My42NTZ6bS0yNS4xNzItMzA1LjIzNGMyMy41NDctMTMuNTk0IDUzLjY0MS01LjUzMSA2Ny4yMzQgMTguMDE2czUuNTMxIDUzLjY1Ni0xOC4wMTYgNjcuMjVjLTIzLjU0NyAxMy41NzgtNTMuNjQxIDUuNTE2LTY3LjIzNC0xOC4wMTYtMTMuNjA5LTIzLjU2Mi01LjUzLTUzLjY1NiAxOC4wMTYtNjcuMjV6bS0xOC4wMzEgMTUxLjgxM2MxMy42MDktMjMuNTQ3IDQzLjcwMy0zMS42MDkgNjcuMjUtMTguMDE2IDIzLjU0NyAxMy42MDkgMzEuNjA5IDQzLjcwMyAxOC4wMTYgNjcuMjVzLTQzLjY4OCAzMS42MDktNjcuMjUgMTguMDE2Yy0yMy41MzEtMTMuNTk0LTMxLjYxLTQzLjcwNC0xOC4wMTYtNjcuMjV6TTIyNy4yMTkgNzIuMzc1YzI3LjE4OCAwIDQ5LjIxOSAyMi4wMzEgNDkuMjE5IDQ5LjIxOXMtMjIuMDMxIDQ5LjI1LTQ5LjIxOSA0OS4yNS00OS4yNS0yMi4wNjMtNDkuMjUtNDkuMjUgMjIuMDYyLTQ5LjIxOSA0OS4yNS00OS4yMTl6TTI0OS45MzggMjU2YzAgMTIuNTYzLTEwLjE3MiAyMi43MTktMjIuNzE5IDIyLjcxOS0xMi41NjMgMC0yMi43MTktMTAuMTU2LTIyLjcxOS0yMi43MTlzMTAuMTU2LTIyLjcxOSAyMi43MTktMjIuNzE5YzEyLjU0NyAwIDIyLjcxOSAxMC4xNTcgMjIuNzE5IDIyLjcxOXpNNjguNzAzIDE2My44OTFjMTMuNTk0LTIzLjU0NyA0My43MDMtMzEuNjA5IDY3LjI1LTE4LjAxNnMzMS42MDkgNDMuNjg4IDE4LjAxNiA2Ny4yNWMtMTMuNTk0IDIzLjUzMS00My43MDMgMzEuNjA5LTY3LjI1IDE4LjAxNi0yMy41MzEtMTMuNTk0LTMxLjYxLTQzLjcwMy0xOC4wMTYtNjcuMjV6bTY3LjI2NiAyMDEuMDQ3Yy0yMy41NjMgMTMuNTk0LTUzLjY1NiA1LjUzMS02Ny4yNjYtMTguMDE2LTEzLjU3OC0yMy41NDctNS41MTYtNTMuNjU2IDE4LjAxNi02Ny4yNjYgMjMuNTQ3LTEzLjU5NCA1My42NTYtNS41MTYgNjcuMjUgMTguMDMxczUuNTMxIDUzLjY1Ny0xOCA2Ny4yNTF6bTQyIDI0LjI2NWMwLTI3LjE4OCAyMi4wNjMtNDkuMjM0IDQ5LjI1LTQ5LjIzNHM0OS4yMTkgMjIuMDQ3IDQ5LjIxOSA0OS4yMzQtMjIuMDMxIDQ5LjIzNC00OS4yMTkgNDkuMjM0LTQ5LjI1LTIyLjA0Ni00OS4yNS00OS4yMzR6Ii8+PC9zdmc+Cg==");
+  --str-video__icon--grid: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzMiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAzMyAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMzAuMzMxMSIgeT0iMTYiIHdpZHRoPSI0LjQ0NDQ0IiBoZWlnaHQ9IjUuMzMzMzMiIHJ4PSIxIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAzMC4zMzExIDE2KSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iMTYuMTA5NCIgeT0iMTYiIHdpZHRoPSI0LjQ0NDQ0IiBoZWlnaHQ9IjUuMzMzMzMiIHJ4PSIxIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAxNi4xMDk0IDE2KSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iMjMuMjIwNyIgeT0iMTYiIHdpZHRoPSI0LjQ0NDQ0IiBoZWlnaHQ9IjUuMzMzMzMiIHJ4PSIxIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAyMy4yMjA3IDE2KSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iOC45OTgwNSIgeT0iMTYiIHdpZHRoPSI0LjQ0NDQ0IiBoZWlnaHQ9IjUuMzMzMzMiIHJ4PSIxIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA4Ljk5ODA1IDE2KSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iMzAuMzMxMSIgeT0iOS43NzczNCIgd2lkdGg9IjQuNDQ0NDQiIGhlaWdodD0iNS4zMzMzMyIgcng9IjEiIHRyYW5zZm9ybT0icm90YXRlKDkwIDMwLjMzMTEgOS43NzczNCkiIGZpbGw9IndoaXRlIi8+CjxyZWN0IHg9IjMwLjMzMTEiIHk9IjMuNTU0NjkiIHdpZHRoPSI0LjQ0NDQ0IiBoZWlnaHQ9IjUuMzMzMzMiIHJ4PSIxIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAzMC4zMzExIDMuNTU0NjkpIiBmaWxsPSJ3aGl0ZSIvPgo8cmVjdCB4PSIyMy4yMjA3IiB5PSI5Ljc3NzM0IiB3aWR0aD0iNC40NDQ0NCIgaGVpZ2h0PSI1LjMzMzMzIiByeD0iMSIgdHJhbnNmb3JtPSJyb3RhdGUoOTAgMjMuMjIwNyA5Ljc3NzM0KSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iMjMuMjIwNyIgeT0iMy41NTQ2OSIgd2lkdGg9IjQuNDQ0NDQiIGhlaWdodD0iNS4zMzMzMyIgcng9IjEiIHRyYW5zZm9ybT0icm90YXRlKDkwIDIzLjIyMDcgMy41NTQ2OSkiIGZpbGw9IndoaXRlIi8+CjxyZWN0IHg9IjE2LjEwOTQiIHk9IjkuNzc3MzQiIHdpZHRoPSI0LjQ0NDQ0IiBoZWlnaHQ9IjUuMzMzMzMiIHJ4PSIxIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAxNi4xMDk0IDkuNzc3MzQpIiBmaWxsPSJ3aGl0ZSIvPgo8cmVjdCB4PSIxNi4xMDk0IiB5PSIzLjU1NDY5IiB3aWR0aD0iNC40NDQ0NCIgaGVpZ2h0PSI1LjMzMzMzIiByeD0iMSIgdHJhbnNmb3JtPSJyb3RhdGUoOTAgMTYuMTA5NCAzLjU1NDY5KSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iOC45OTgwNSIgeT0iOS43NzczNCIgd2lkdGg9IjQuNDQ0NDQiIGhlaWdodD0iNS4zMzMzMyIgcng9IjEiIHRyYW5zZm9ybT0icm90YXRlKDkwIDguOTk4MDUgOS43NzczNCkiIGZpbGw9IndoaXRlIi8+CjxyZWN0IHg9IjguOTk4MDUiIHk9IjMuNTU0NjkiIHdpZHRoPSI0LjQ0NDQ0IiBoZWlnaHQ9IjUuMzMzMzMiIHJ4PSIxIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA4Ljk5ODA1IDMuNTU0NjkpIiBmaWxsPSJ3aGl0ZSIvPgo8cmVjdCB4PSIxLjQ5ODA1IiB5PSIwLjUiIHdpZHRoPSIzMSIgaGVpZ2h0PSIyMyIgcng9IjIuNSIgc3Ryb2tlPSJ3aGl0ZSIvPgo8L3N2Zz4K");
+  --str-video__icon--info-document: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4LjUgMjNINC41QzMuNCAyMyAyLjUgMjIuMSAyLjUgMjFWN0g0LjVWMjFIMTguNVYyM1pNMTUuNSAxSDguNUM3LjQgMSA2LjUxIDEuOSA2LjUxIDNMNi41IDE3QzYuNSAxOC4xIDcuMzkgMTkgOC40OSAxOUgxOS41QzIwLjYgMTkgMjEuNSAxOC4xIDIxLjUgMTdWN0wxNS41IDFaTTE5LjUgMTdIOC41VjNIMTQuNjdMMTkuNSA3LjgzVjE3WiIgZmlsbD0iYmxhY2siLz4KPHBhdGggZD0iTTE0LjgwNjIgMTQuNTY5M0gxMi44MDYyTDEyLjgwNjIgOS41NjkzNEgxNC44MDYyTDE0LjgwNjIgMTQuNTY5M1oiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGQ9Ik0xNC44OTAxIDYuNTczMjRDMTQuODkwMSA3LjE3MTkxIDE0LjQwNDggNy42NTcyMyAxMy44MDYyIDcuNjU3MjNDMTMuMjA3NSA3LjY1NzIzIDEyLjcyMjIgNy4xNzE5MSAxMi43MjIyIDYuNTczMjRDMTIuNzIyMiA1Ljk3NDU3IDEzLjIwNzUgNS40ODkyNiAxMy44MDYyIDUuNDg5MjZDMTQuNDA0OCA1LjQ4OTI2IDE0Ljg5MDEgNS45NzQ1NyAxNC44OTAxIDYuNTczMjRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K");
+  --str-video__icon--info-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjRweCIgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTExIDdoMnYyaC0yem0wIDRoMnY2aC0yem0xLTlDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTAgMThjLTQuNDEgMC04LTMuNTktOC04czMuNTktOCA4LTggOCAzLjU5IDggOC0zLjU5IDgtOCA4eiIvPjwvc3ZnPg==");
+  --str-video__icon--loading: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzEiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAzMSAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzAuOTIxMyAxNUMzMC45MjEzIDIzLjI4NDMgMjQuMjA1NiAzMCAxNS45MjEzIDMwQzEwLjcxNTQgMzAgNi4xMjg5OSAyNy4zNDggMy40MzkyMSAyMy4zMjE0TDUuMTAzNDkgMjIuMjExOUM3LjQzNDYzIDI1LjcwMTYgMTEuNDA5NiAyOCAxNS45MjEzIDI4QzIzLjEwMSAyOCAyOC45MjEzIDIyLjE3OTcgMjguOTIxMyAxNUMyOC45MjEzIDcuODIwMyAyMy4xMDEgMiAxNS45MjEzIDJMMTUuOTIxMyAwQzI0LjIwNTYgMCAzMC45MjEzIDYuNzE1NzMgMzAuOTIxMyAxNVoiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcl8xODYwXzExMDYyMykiLz4KICAgIDxkZWZzPgogICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl8xODYwXzExMDYyMyIgeDE9IjMuNDM5MjEiIHkxPSIwIiB4Mj0iMy40MzkyMSIgeTI9IjMwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgICAgICAgIDxzdG9wIGlkPSJzdG9wLXNlbWl0cmFuc3BhcmVudCIgc3RvcC1vcGFjaXR5PSIwLjAxIi8+CiAgICAgICAgICAgIDxzdG9wIGlkPSJzdG9wLW9wYXF1ZSIgb2Zmc2V0PSIxIiAvPgogICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8L2RlZnM+Cjwvc3ZnPg==");
+  --str-video__icon--magnifier-glass: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik04LjQ4NDkxIDcuODYwM0g3Ljk1NTk3TDcuNzY4NSA3LjY3OTUyQzguNTcxOTUgNi43NDIxNiA4Ljk4NzA2IDUuNDYzMzQgOC43NTk0MiA0LjEwNDE4QzguNDQ0NzMgMi4yNDI4NSA2Ljg5MTQgMC43NTY0NzQgNS4wMTY2OSAwLjUyODgzQzIuMTg0NTMgMC4xODA2NjkgLTAuMTk5MDMxIDIuNTY0MjMgMC4xNDkxMyA1LjM5NjM5QzAuMzc2Nzc0IDcuMjcxMSAxLjg2MzE1IDguODI0NDMgMy43MjQ0OCA5LjEzOTEyQzUuMDgzNjQgOS4zNjY3NiA2LjM2MjQ2IDguOTUxNjUgNy4yOTk4MiA4LjE0ODJMNy40ODA2IDguMzM1NjdWOC44NjQ2MUwxMC4zMjYxIDExLjcxMDJDMTAuNjAwNyAxMS45ODQ3IDExLjA0OTIgMTEuOTg0NyAxMS4zMjM4IDExLjcxMDJDMTEuNTk4MyAxMS40MzU2IDExLjU5ODMgMTAuOTg3IDExLjMyMzggMTAuNzEyNUw4LjQ4NDkxIDcuODYwM1pNNC40Njc2NiA3Ljg2MDNDMi44MDA1MSA3Ljg2MDMgMS40NTQ3MyA2LjUxNDUyIDEuNDU0NzMgNC44NDczNkMxLjQ1NDczIDMuMTgwMjEgMi44MDA1MSAxLjgzNDQzIDQuNDY3NjYgMS44MzQ0M0M2LjEzNDgyIDEuODM0NDMgNy40ODA2IDMuMTgwMjEgNy40ODA2IDQuODQ3MzZDNy40ODA2IDYuNTE0NTIgNi4xMzQ4MiA3Ljg2MDMgNC40Njc2NiA3Ljg2MDNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
+  --str-video__icon--mic: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE0Ljg5NDdDMTMuODk3MSAxNC44OTQ3IDE1LjQyODYgMTMuMzQzMiAxNS40Mjg2IDExLjQyMTFWNC40NzM2OEMxNS40Mjg2IDIuNTUxNTggMTMuODk3MSAxIDEyIDFDMTAuMTAyOSAxIDguNTcxNDMgMi41NTE1OCA4LjU3MTQzIDQuNDczNjhWMTEuNDIxMUM4LjU3MTQzIDEzLjM0MzIgMTAuMTAyOSAxNC44OTQ3IDEyIDE0Ljg5NDdaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMTcuNzE0MyAxMS40MjExQzE3LjcxNDMgMTQuNjE2OCAxNS4xNTQzIDE3LjIxMDUgMTIgMTcuMjEwNUM4Ljg0NTcxIDE3LjIxMDUgNi4yODU3MSAxNC42MTY4IDYuMjg1NzEgMTEuNDIxMUg0QzQgMTUuNTA4NCA2Ljk4Mjg2IDE4Ljg2NjMgMTAuODU3MSAxOS40MzM3VjIzSDEzLjE0MjlWMTkuNDMzN0MxNy4wMTcxIDE4Ljg2NjMgMjAgMTUuNTA4NCAyMCAxMS40MjExSDE3LjcxNDNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
+  --str-video__icon--mic-off: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5Ljc3NzggMTEuNDIxMUgxNy44ODg5QzE3Ljg4ODkgMTIuMjc3OSAxNy43MTExIDEzLjA3NjggMTcuNDExMSAxMy43OTQ3TDE4Ljc3NzggMTUuMjE4OUMxOS40IDE0LjA4NDIgMTkuNzc3OCAxMi43OTg5IDE5Ljc3NzggMTEuNDIxMVpNMTUuMzExMSAxMS42MTc5QzE1LjMxMTEgMTEuNTQ4NCAxNS4zMzMzIDExLjQ5MDUgMTUuMzMzMyAxMS40MjExVjQuNDczNjhDMTUuMzMzMyAyLjU1MTU4IDEzLjg0NDQgMSAxMiAxQzEwLjE1NTYgMSA4LjY2NjY3IDIuNTUxNTggOC42NjY2NyA0LjQ3MzY4VjQuNjgyMTFMMTUuMzExMSAxMS42MTc5Wk0zLjQxMTExIDIuMTU3ODlMMiAzLjYyODQyTDguNjc3NzggMTAuNTg3NFYxMS40MjExQzguNjc3NzggMTMuMzQzMiAxMC4xNTU2IDE0Ljg5NDcgMTIgMTQuODk0N0MxMi4yNDQ0IDE0Ljg5NDcgMTIuNDg4OSAxNC44NiAxMi43MjIyIDE0LjgwMjFMMTQuNTY2NyAxNi43MjQyQzEzLjc3NzggMTcuMTA2MyAxMi45IDE3LjMyNjMgMTIgMTcuMzI2M0M4LjkzMzMzIDE3LjMyNjMgNi4xMTExMSAxNC44OTQ3IDYuMTExMTEgMTEuNDIxMUg0LjIyMjIyQzQuMjIyMjIgMTUuMzY5NSA3LjI0NDQ0IDE4LjYzNDcgMTAuODg4OSAxOS4yMDIxVjIzSDEzLjExMTFWMTkuMjAyMUMxNC4xMjIyIDE5LjA1MTYgMTUuMDc3OCAxOC42ODExIDE1LjkzMzMgMTguMTZMMjAuNTg4OSAyM0wyMiAyMS41Mjk1TDMuNDExMTEgMi4xNTc4OVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=");
+  --str-video__icon--network-quality: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeT0iMC41IiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHJ4PSI2IiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+CjxwYXRoIGQ9Ik0xMiAxNi41TDEyIDExLjUiIHN0cm9rZT0iIzAwNkNGRiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTcgMTYuNUw3IDE0LjUiIHN0cm9rZT0iIzAwNkNGRiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTE3IDE2LjVMMTcgOC41IiBzdHJva2U9IiMwMDZDRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPg==");
+  --str-video__icon--participants: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzEiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAzMSAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0yMS4zMzc1IDE2LjM5OTZDMjMuMDUgMTcuNTI1OCAyNC4yNSAxOS4wNTE2IDI0LjI1IDIxLjA4NTlWMjQuNzE4OEgyOS4yNVYyMS4wODU5QzI5LjI1IDE4LjQ0NjEgMjQuNzg3NSAxNi44ODQgMjEuMzM3NSAxNi4zOTk2WiIgZmlsbD0id2hpdGUiLz4KICAgIDxwYXRoIGQ9Ik0xOS4yNSAxNS4wMzEyQzIyLjAxMjUgMTUuMDMxMiAyNC4yNSAxMi44NjM3IDI0LjI1IDEwLjE4NzVDMjQuMjUgNy41MTEzMyAyMi4wMTI1IDUuMzQzNzUgMTkuMjUgNS4zNDM3NUMxOC42NjI1IDUuMzQzNzUgMTguMTEyNSA1LjQ2NDg0IDE3LjU4NzUgNS42MzQzN0MxOC42MjUgNi44ODE2NCAxOS4yNSA4LjQ2Nzk3IDE5LjI1IDEwLjE4NzVDMTkuMjUgMTEuOTA3IDE4LjYyNSAxMy40OTM0IDE3LjU4NzUgMTQuNzQwNkMxOC4xMTI1IDE0LjkxMDIgMTguNjYyNSAxNS4wMzEyIDE5LjI1IDE1LjAzMTJaIiBmaWxsPSJ3aGl0ZSIvPgogICAgPHBhdGggZD0iTTExLjc1IDE1LjAzMTJDMTQuNTEyNSAxNS4wMzEyIDE2Ljc1IDEyLjg2MzcgMTYuNzUgMTAuMTg3NUMxNi43NSA3LjUxMTMzIDE0LjUxMjUgNS4zNDM3NSAxMS43NSA1LjM0Mzc1QzguOTg3NSA1LjM0Mzc1IDYuNzUgNy41MTEzMyA2Ljc1IDEwLjE4NzVDNi43NSAxMi44NjM3IDguOTg3NSAxNS4wMzEyIDExLjc1IDE1LjAzMTJaTTExLjc1IDcuNzY1NjJDMTMuMTI1IDcuNzY1NjIgMTQuMjUgOC44NTU0NyAxNC4yNSAxMC4xODc1QzE0LjI1IDExLjUxOTUgMTMuMTI1IDEyLjYwOTQgMTEuNzUgMTIuNjA5NEMxMC4zNzUgMTIuNjA5NCA5LjI1IDExLjUxOTUgOS4yNSAxMC4xODc1QzkuMjUgOC44NTU0NyAxMC4zNzUgNy43NjU2MiAxMS43NSA3Ljc2NTYyWiIgZmlsbD0id2hpdGUiLz4KICAgIDxwYXRoIGQ9Ik0xMS43NSAxNi4yNDIyQzguNDEyNSAxNi4yNDIyIDEuNzUgMTcuODY0OCAxLjc1IDIxLjA4NTlWMjQuNzE4OEgyMS43NVYyMS4wODU5QzIxLjc1IDE3Ljg2NDggMTUuMDg3NSAxNi4yNDIyIDExLjc1IDE2LjI0MjJaTTE5LjI1IDIyLjI5NjlINC4yNVYyMS4wOThDNC41IDIwLjIyNjIgOC4zNzUgMTguNjY0MSAxMS43NSAxOC42NjQxQzE1LjEyNSAxOC42NjQxIDE5IDIwLjIyNjIgMTkuMjUgMjEuMDg1OVYyMi4yOTY5WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==");
+  --str-video__icon--reactions: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNiAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjM3NSAxMS4zMjAzQzE4LjQxMDUgMTEuMzIwMyAxOS4yNSAxMC41MDcxIDE5LjI1IDkuNTAzOTFDMTkuMjUgOC41MDA3MyAxOC40MTA1IDcuNjg3NSAxNy4zNzUgNy42ODc1QzE2LjMzOTUgNy42ODc1IDE1LjUgOC41MDA3MyAxNS41IDkuNTAzOTFDMTUuNSAxMC41MDcxIDE2LjMzOTUgMTEuMzIwMyAxNy4zNzUgMTEuMzIwM1oiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik04LjYyNSAxMS4zMjAzQzkuNjYwNTMgMTEuMzIwMyAxMC41IDEwLjUwNzEgMTAuNSA5LjUwMzkxQzEwLjUgOC41MDA3MyA5LjY2MDUzIDcuNjg3NSA4LjYyNSA3LjY4NzVDNy41ODk0NyA3LjY4NzUgNi43NSA4LjUwMDczIDYuNzUgOS41MDM5MUM2Ljc1IDEwLjUwNzEgNy41ODk0NyAxMS4zMjAzIDguNjI1IDExLjMyMDNaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMTMgMTkuNzk2OUMxNS44NSAxOS43OTY5IDE4LjI3NSAxNy43ODY3IDE5LjI1IDE0Ljk1MzFINi43NUM3LjcyNSAxNy43ODY3IDEwLjE1IDE5Ljc5NjkgMTMgMTkuNzk2OVoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0xMi45ODc1IDAuNDIxODc1QzYuMDg3NSAwLjQyMTg3NSAwLjUgNS44NDY4OCAwLjUgMTIuNTMxMkMwLjUgMTkuMjE1NiA2LjA4NzUgMjQuNjQwNiAxMi45ODc1IDI0LjY0MDZDMTkuOSAyNC42NDA2IDI1LjUgMTkuMjE1NiAyNS41IDEyLjUzMTJDMjUuNSA1Ljg0Njg4IDE5LjkgMC40MjE4NzUgMTIuOTg3NSAwLjQyMTg3NVpNMTMgMjIuMjE4OEM3LjQ3NSAyMi4yMTg4IDMgMTcuODgzNiAzIDEyLjUzMTJDMyA3LjE3ODkxIDcuNDc1IDIuODQzNzUgMTMgMi44NDM3NUMxOC41MjUgMi44NDM3NSAyMyA3LjE3ODkxIDIzIDEyLjUzMTJDMjMgMTcuODgzNiAxOC41MjUgMjIuMjE4OCAxMyAyMi4yMTg4WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==");
+  --str-video__icon--recording-off: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNiAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzIDAuNDIxODc1QzYuMSAwLjQyMTg3NSAwLjUgNS44NDY4OCAwLjUgMTIuNTMxMkMwLjUgMTkuMjE1NiA2LjEgMjQuNjQwNiAxMyAyNC42NDA2QzE5LjkgMjQuNjQwNiAyNS41IDE5LjIxNTYgMjUuNSAxMi41MzEyQzI1LjUgNS44NDY4OCAxOS45IDAuNDIxODc1IDEzIDAuNDIxODc1Wk0xMyAyMi4yMTg4QzcuNDc1IDIyLjIxODggMyAxNy44ODM2IDMgMTIuNTMxMkMzIDcuMTc4OTEgNy40NzUgMi44NDM3NSAxMyAyLjg0Mzc1QzE4LjUyNSAyLjg0Mzc1IDIzIDcuMTc4OTEgMjMgMTIuNTMxMkMyMyAxNy44ODM2IDE4LjUyNSAyMi4yMTg4IDEzIDIyLjIxODhaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMTMgMTguNTg1OUMxNi40NTE4IDE4LjU4NTkgMTkuMjUgMTUuODc1MiAxOS4yNSAxMi41MzEyQzE5LjI1IDkuMTg3MzQgMTYuNDUxOCA2LjQ3NjU2IDEzIDYuNDc2NTZDOS41NDgyMiA2LjQ3NjU2IDYuNzUgOS4xODczNCA2Ljc1IDEyLjUzMTJDNi43NSAxNS44NzUyIDkuNTQ4MjIgMTguNTg1OSAxMyAxOC41ODU5WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==");
+  --str-video__icon--recording-on: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNiAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzIDAuNDIxODc1QzYuMSAwLjQyMTg3NSAwLjUgNS44NDY4OCAwLjUgMTIuNTMxMkMwLjUgMTkuMjE1NiA2LjEgMjQuNjQwNiAxMyAyNC42NDA2QzE5LjkgMjQuNjQwNiAyNS41IDE5LjIxNTYgMjUuNSAxMi41MzEyQzI1LjUgNS44NDY4OCAxOS45IDAuNDIxODc1IDEzIDAuNDIxODc1Wk0xMyAyMi4yMTg4QzcuNDc1IDIyLjIxODggMyAxNy44ODM2IDMgMTIuNTMxMkMzIDcuMTc4OTEgNy40NzUgMi44NDM3NSAxMyAyLjg0Mzc1QzE4LjUyNSAyLjg0Mzc1IDIzIDcuMTc4OTEgMjMgMTIuNTMxMkMyMyAxNy44ODM2IDE4LjUyNSAyMi4yMTg4IDEzIDIyLjIxODhaIiBmaWxsPSIjZDkzMDI1Ii8+CjxwYXRoIGQ9Ik0xMyAxOC41ODU5QzE2LjQ1MTggMTguNTg1OSAxOS4yNSAxNS44NzUyIDE5LjI1IDEyLjUzMTJDMTkuMjUgOS4xODczNCAxNi40NTE4IDYuNDc2NTYgMTMgNi40NzY1NkM5LjU0ODIyIDYuNDc2NTYgNi43NSA5LjE4NzM0IDYuNzUgMTIuNTMxMkM2Ljc1IDE1Ljg3NTIgOS41NDgyMiAxOC41ODU5IDEzIDE4LjU4NTlaIiBmaWxsPSIjZDkzMDI1Ii8+Cjwvc3ZnPgo=");
+  --str-video__icon--refresh: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOTIwIDE5MjAiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTk2MCAwdjIxMy4zMzNjNDExLjYyNyAwIDc0Ni42NjcgMzM0LjkzNCA3NDYuNjY3IDc0Ni42NjdTMTM3MS42MjcgMTcwNi42NjcgOTYwIDE3MDYuNjY3IDIxMy4zMzMgMTM3MS43MzMgMjEzLjMzMyA5NjBjMC0xOTcuMDEzIDc4LjQtMzgyLjUwNyAyMTMuMzM0LTUyMC43NDd2MjU0LjA4SDY0MFYxMDYuNjY3SDUzLjMzM1YzMjBoMTkxLjA0Qzg4LjY0IDQ5NC4wOCAwIDcyMC45NiAwIDk2MGMwIDUyOS4yOCA0MzAuNjEzIDk2MCA5NjAgOTYwczk2MC00MzAuNzIgOTYwLTk2MFMxNDg5LjM4NyAwIDk2MCAwIi8+PC9zdmc+Cg==");
+  --str-video__icon--screen-share-off: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAzMCAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1IDE3Ljc5NjlDMjYuMzc1IDE3Ljc5NjkgMjcuNDg3NSAxNi43MDcgMjcuNDg3NSAxNS4zNzVMMjcuNSAzLjI2NTYyQzI3LjUgMS45MjE0OCAyNi4zNzUgMC44NDM3NSAyNSAwLjg0Mzc1SDVDMy42MTI1IDAuODQzNzUgMi41IDEuOTIxNDggMi41IDMuMjY1NjJWMTUuMzc1QzIuNSAxNi43MDcgMy42MTI1IDE3Ljc5NjkgNSAxNy43OTY5SDBWMjAuMjE4OEgzMFYxNy43OTY5SDI1Wk01IDE1LjM3NVYzLjI2NTYySDI1VjE1LjM4NzFMNSAxNS4zNzVaTTE2LjI1IDcuMDU1ODZDMTEuMzg3NSA3LjcwOTc3IDkuNDUgMTAuOTMwOSA4Ljc1IDE0LjE2NDFDMTAuNDg3NSAxMS44OTk2IDEyLjc3NSAxMC44NzAzIDE2LjI1IDEwLjg3MDNWMTMuNTIyM0wyMS4yNSA4Ljk5MzM2TDE2LjI1IDQuNDc2NTZWNy4wNTU4NloiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=");
+  --str-video__icon--screen-share-on: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAzMCAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1IDE3Ljc5NjlDMjYuMzc1IDE3Ljc5NjkgMjcuNDg3NSAxNi43MDcgMjcuNDg3NSAxNS4zNzVMMjcuNSAzLjI2NTYyQzI3LjUgMS45MjE0OCAyNi4zNzUgMC44NDM3NSAyNSAwLjg0Mzc1SDVDMy42MTI1IDAuODQzNzUgMi41IDEuOTIxNDggMi41IDMuMjY1NjJWMTUuMzc1QzIuNSAxNi43MDcgMy42MTI1IDE3Ljc5NjkgNSAxNy43OTY5SDBWMjAuMjE4OEgzMFYxNy43OTY5SDI1Wk01IDE1LjM3NVYzLjI2NTYySDI1VjE1LjM4NzFMNSAxNS4zNzVaTTE2LjI1IDcuMDU1ODZDMTEuMzg3NSA3LjcwOTc3IDkuNDUgMTAuOTMwOSA4Ljc1IDE0LjE2NDFDMTAuNDg3NSAxMS44OTk2IDEyLjc3NSAxMC44NzAzIDE2LjI1IDEwLjg3MDNWMTMuNTIyM0wyMS4yNSA4Ljk5MzM2TDE2LjI1IDQuNDc2NTZWNy4wNTU4NloiIGZpbGw9IiMwMDVGRkYiLz4KPC9zdmc+Cg==");
+  --str-video__icon--settings: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNOS4xMTAzNSAxOS4xOTA0SDEwLjg4NTdDMTEuNjE1MiAxOS4xOTA0IDEyLjE4NjUgMTguNzQyMiAxMi4zNTM1IDE4LjA0NzlMMTIuNzEzOSAxNi40OTIyTDEyLjk0MjQgMTYuNDA0M0wxNC4yOTU5IDE3LjIzOTNDMTQuOTExMSAxNy42MjYgMTUuNjMxOCAxNy41MjkzIDE2LjE0MTYgMTcuMDEwN0wxNy4zNzIxIDE1Ljc4MDNDMTcuODk5NCAxNS4yNjE3IDE3Ljk4NzMgMTQuNTQxIDE3LjYwMDYgMTMuOTM0NkwxNi43NjU2IDEyLjU4OThMMTYuODQ0NyAxMi4zNzAxTDE4LjQwMDQgMTIuMDA5OEMxOS4wODU5IDExLjgzNCAxOS41NDMgMTEuMjYyNyAxOS41NDMgMTAuNTQyVjguODEwNTVDMTkuNTQzIDguMDg5ODQgMTkuMDk0NyA3LjUxODU1IDE4LjQwMDQgNy4zNDI3N0wxNi44NjIzIDYuOTczNjNMMTYuNzc0NCA2Ljc0NTEyTDE3LjYwOTQgNS40MDAzOUMxNy45OTYxIDQuNzkzOTUgMTcuODk5NCA0LjA4MjAzIDE3LjM4MDkgMy41NDU5TDE2LjE1MDQgMi4zMTU0M0MxNS42NDA2IDEuODA1NjYgMTQuOTE5OSAxLjcwODk4IDE0LjMxMzUgMi4wODY5MUwxMi45NiAyLjkxMzA5TDEyLjcxMzkgMi44MTY0MUwxMi4zNTM1IDEuMjYwNzRDMTIuMTg2NSAwLjU2NjQwNiAxMS42MTUyIDAuMTE4MTY0IDEwLjg4NTcgMC4xMTgxNjRIOS4xMTAzNUM4LjM3MjA3IDAuMTE4MTY0IDcuODA5NTcgMC41NjY0MDYgNy42NDI1OCAxLjI2MDc0TDcuMjgyMjMgMi44MTY0MUw3LjAzNjEzIDIuOTEzMDlMNS42ODI2MiAyLjA4NjkxQzUuMDY3MzggMS43MDg5OCA0LjM0NjY4IDEuODA1NjYgMy44MzY5MSAyLjMxNTQzTDIuNjA2NDUgMy41NDU5QzIuMDg3ODkgNC4wODIwMyAxLjk5MTIxIDQuNzkzOTUgMi4zNzc5MyA1LjQwMDM5TDMuMjIxNjggNi43NDUxMkwzLjEyNSA2Ljk3MzYzTDEuNTk1NyA3LjM0Mjc3QzAuODkyNTc4IDcuNTE4NTUgMC40NTMxMjUgOC4wODk4NCAwLjQ1MzEyNSA4LjgxMDU1VjEwLjU0MkMwLjQ1MzEyNSAxMS4yNjI3IDAuOTAxMzY3IDExLjgzNCAxLjU5NTcgMTIuMDA5OEwzLjE0MjU4IDEyLjM3MDFMMy4yMzA0NyAxMi41ODk4TDIuMzg2NzIgMTMuOTM0NkMyIDE0LjU0MSAyLjA5NjY4IDE1LjI2MTcgMi42MTUyMyAxNS43ODAzTDMuODQ1NyAxNy4wMTA3QzQuMzY0MjYgMTcuNTI5MyA1LjA4NDk2IDE3LjYyNiA1LjY5MTQxIDE3LjIzOTNMNy4wNDQ5MiAxNi40MDQzTDcuMjgyMjMgMTYuNDkyMkw3LjY0MjU4IDE4LjA0NzlDNy44MDk1NyAxOC43NDIyIDguMzcyMDcgMTkuMTkwNCA5LjExMDM1IDE5LjE5MDRaTTkuMzIxMjkgMTcuNTk5NkM5LjE3MTg4IDE3LjU5OTYgOS4xMDE1NiAxNy41MjkzIDkuMDc1MiAxNy4zOTc1TDguNTU2NjQgMTUuMjM1NEM3Ljk5NDE0IDE1LjEwMzUgNy40NjY4IDE0Ljg4MzggNy4wMzYxMyAxNC42MTEzTDUuMTM3NyAxNS43ODAzQzUuMDMyMjMgMTUuODUwNiA0LjkyNjc2IDE1Ljg0MTggNC44MTI1IDE1LjczNjNMMy44ODA4NiAxNC44MDQ3QzMuNzg0MTggMTQuNzA4IDMuNzc1MzkgMTQuNjAyNSAzLjg1NDQ5IDE0LjQ4ODNMNS4wMjM0NCAxMi41ODk4QzQuNzc3MzQgMTIuMTc2OCA0LjU0MDA0IDExLjY0OTQgNC40MDgyIDExLjA5NTdMMi4yMzczIDEwLjU3NzFDMi4xMDU0NyAxMC41NTA4IDIuMDQzOTUgMTAuNDgwNSAyLjA0Mzk1IDEwLjMzMTFWOS4wMTI3QzIuMDQzOTUgOC44NTQ0OSAyLjEwNTQ3IDguNzkyOTcgMi4yMzczIDguNzU3ODFMNC40MDgyIDguMjQ4MDVDNC41NDAwNCA3LjY1OTE4IDQuNzk0OTIgNy4xMTQyNiA1LjAwNTg2IDYuNzM2MzNMMy44NDU3IDQuODQ2NjhDMy43NjY2IDQuNzIzNjMgMy43NjY2IDQuNjE4MTYgMy44NzIwNyA0LjUxMjdMNC44MDM3MSAzLjU4OTg0QzQuOTE3OTcgMy40OTMxNiA1LjAwNTg2IDMuNDc1NTkgNS4xMzc3IDMuNTQ1OUw3LjAyNzM0IDQuNjk3MjdDNy40MjI4NSA0LjQ1OTk2IDguMDAyOTMgNC4yMTM4NyA4LjU1NjY0IDQuMDczMjRMOS4wNzUyIDEuOTExMTNDOS4xMDE1NiAxLjc3OTMgOS4xNzE4OCAxLjcwODk4IDkuMzIxMjkgMS43MDg5OEgxMC42NzQ4QzEwLjgyNDIgMS43MDg5OCAxMC44OTQ1IDEuNzcwNTEgMTAuOTEyMSAxLjkxMTEzTDExLjQzOTUgNC4wOTA4MkMxMi4wMTA3IDQuMjIyNjYgMTIuNTI5MyA0LjQ1OTk2IDEyLjk2IDQuNzA2MDVMMTQuODQ5NiAzLjU1NDY5QzE0Ljk4MTQgMy40ODQzOCAxNS4wNjkzIDMuNDkzMTYgMTUuMTc0OCAzLjU5ODYzTDE2LjExNTIgNC41MjE0OEMxNi4yMjA3IDQuNjE4MTYgMTYuMjIwNyA0LjcyMzYzIDE2LjE0MTYgNC44NDY2OEwxNC45ODE0IDYuNzM2MzNDMTUuMTkyNCA3LjExNDI2IDE1LjQ1NjEgNy42NTkxOCAxNS41ODc5IDguMjQ4MDVMMTcuNzUgOC43NTc4MUMxNy44OTA2IDguNzkyOTcgMTcuOTUyMSA4Ljg1NDQ5IDE3Ljk1MjEgOS4wMTI3VjEwLjMzMTFDMTcuOTUyMSAxMC40ODA1IDE3Ljg4MTggMTAuNTUwOCAxNy43NSAxMC41NzcxTDE1LjU3OTEgMTEuMDk1N0MxNS40NDczIDExLjY0OTQgMTUuMjEgMTIuMTc2OCAxNC45NzI3IDEyLjU4OThMMTYuMTMyOCAxNC40ODgzQzE2LjIwMzEgMTQuNjAyNSAxNi4yMDMxIDE0LjcwOCAxNi4xMDY0IDE0Ljc5NTlMMTUuMTc0OCAxNS43MzYzQzE1LjA2MDUgMTUuODQxOCAxNC45NTUxIDE1Ljg1MDYgMTQuODQ5NiAxNS43ODAzTDEyLjk1MTIgMTQuNjExM0MxMi41MjA1IDE0Ljg4MzggMTIuMDE5NSAxNS4xMDM1IDExLjQzOTUgMTUuMjM1NEwxMC45MTIxIDE3LjM5NzVDMTAuODk0NSAxNy41MzgxIDEwLjgyNDIgMTcuNTk5NiAxMC42NzQ4IDE3LjU5OTZIOS4zMjEyOVpNOS45OTgwNSAxMi45OTQxQzExLjgyNjIgMTIuOTk0MSAxMy4zMjkxIDExLjQ5MTIgMTMuMzI5MSA5LjY1NDNDMTMuMzI5MSA3LjgzNDk2IDExLjgyNjIgNi4zMzIwMyA5Ljk5ODA1IDYuMzMyMDNDOC4xNjk5MiA2LjMzMjAzIDYuNjU4MiA3LjgzNDk2IDYuNjU4MiA5LjY1NDNDNi42NTgyIDExLjQ5MTIgOC4xNjExMyAxMi45OTQxIDkuOTk4MDUgMTIuOTk0MVpNOS45OTgwNSAxMS40OTEyQzguOTk2MDkgMTEuNDkxMiA4LjE2OTkyIDEwLjY2NSA4LjE2OTkyIDkuNjU0M0M4LjE2OTkyIDguNjYxMTMgOC45OTYwOSA3Ljg0Mzc1IDkuOTk4MDUgNy44NDM3NUMxMC45ODI0IDcuODQzNzUgMTEuNzk5OCA4LjY2MTEzIDExLjc5OTggOS42NTQzQzExLjc5OTggMTAuNjU2MiAxMC45ODI0IDExLjQ5MTIgOS45OTgwNSAxMS40OTEyWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==");
+  --str-video__icon--speaker: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMiIGhlaWdodD0iMjMiIHZpZXdCb3g9IjAgMCAyMyAyMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuMjUgNy44OTg0OVYxNS4xNjQxSDUuMjVMMTEuNSAyMS4yMTg4VjEuODQzOEw1LjI1IDcuODk4NDlIMC4yNVpNMTcuMTI1IDExLjUzMTNDMTcuMTI1IDkuMzg3OTQgMTUuODUgNy41NDczMSAxNCA2LjY1MTIyVjE2LjM5OTNDMTUuODUgMTUuNTE1MyAxNy4xMjUgMTMuNjc0NyAxNy4xMjUgMTEuNTMxM1pNMTQgMC45MTEzNzdWMy40MDU5MUMxNy42MTI1IDQuNDQ3MzEgMjAuMjUgNy42OTI2MyAyMC4yNSAxMS41MzEzQzIwLjI1IDE1LjM3IDE3LjYxMjUgMTguNjE1MyAxNCAxOS42NTY3VjIyLjE1MTJDMTkuMDEyNSAyMS4wNDkzIDIyLjc1IDE2LjcxNDEgMjIuNzUgMTEuNTMxM0MyMi43NSA2LjM0ODQ5IDE5LjAxMjUgMi4wMTMzMyAxNCAwLjkxMTM3N1oiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=");
+  --str-video__icon--stats: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNSAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIxLjA3NDIgNi4yMDgyOEwxMi4wNzQyIDEyLjczODNMNy42OTQyMiA4LjM1ODI4TDMuMDc0MjIgMTEuNzM4M1Y5LjI1ODI4TDcuOTA0MjIgNS43MzgyOEwxMi4yODQyIDEwLjExODNMMjEuMDc0MiAzLjczODI4VjYuMjA4MjhaTTIxLjA3NDIgMTUuNzM4M0gxNi4zNzQyTDEyLjIwNDIgMTkuMDc4M0w2LjA3NDIyIDEzLjE0ODNMMy4wNzQyMiAxNS4yNzgzVjE3LjczODNMNS44NzQyMiAxNS43MzgzTDEyLjA3NDIgMjEuNzM4M0wxNy4wNzQyIDE3LjczODNIMjEuMDc0MlYxNS43MzgzWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==");
+  --str-video__icon--user-plus: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxNSAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xMi40OTkgMy42MjQwMlYxLjc0OTAySDExLjI0OVYzLjYyNDAySDkuMzc0MDJWNC44NzQwMkgxMS4yNDlWNi43NDkwMkgxMi40OTlWNC44NzQwMkgxNC4zNzRWMy42MjQwMkgxMi40OTlaTTUuNjI0MDIgNS40OTkwMkM3LjAwNTI3IDUuNDk5MDIgOC4xMjQwMiA0LjM4MDI3IDguMTI0MDIgMi45OTkwMkM4LjEyNDAyIDEuNjE3NzcgNy4wMDUyNyAwLjQ5OTAyMyA1LjYyNDAyIDAuNDk5MDIzQzQuMjQyNzcgMC40OTkwMjMgMy4xMjQwMiAxLjYxNzc3IDMuMTI0MDIgMi45OTkwMkMzLjEyNDAyIDQuMzgwMjcgNC4yNDI3NyA1LjQ5OTAyIDUuNjI0MDIgNS40OTkwMlpNNS42MjQwMiAxLjc0OTAyQzYuMzExNTIgMS43NDkwMiA2Ljg3NDAyIDIuMzExNTIgNi44NzQwMiAyLjk5OTAyQzYuODc0MDIgMy42ODY1MiA2LjMxMTUyIDQuMjQ5MDIgNS42MjQwMiA0LjI0OTAyQzQuOTM2NTIgNC4yNDkwMiA0LjM3NDAyIDMuNjg2NTIgNC4zNzQwMiAyLjk5OTAyQzQuMzc0MDIgMi4zMTE1MiA0LjkzNjUyIDEuNzQ5MDIgNS42MjQwMiAxLjc0OTAyWk05LjYxNzc3IDcuMDk5MDJDOC41Njc3NyA2LjU2MTUyIDcuMjA1MjcgNi4xMjQwMiA1LjYyNDAyIDYuMTI0MDJDNC4wNDI3NyA2LjEyNDAyIDIuNjgwMjcgNi41NjE1MiAxLjYzMDI3IDcuMDk5MDJDMS4wMDUyNyA3LjQxNzc3IDAuNjI0MDIzIDguMDYxNTIgMC42MjQwMjMgOC43NjE1MlYxMC40OTlIMTAuNjI0VjguNzYxNTJDMTAuNjI0IDguMDYxNTIgMTAuMjQyOCA3LjQxNzc3IDkuNjE3NzcgNy4wOTkwMlpNOS4zNzQwMiA5LjI0OTAySDEuODc0MDJWOC43NjE1MkMxLjg3NDAyIDguNTI0MDIgMS45OTkwMiA4LjMxMTUyIDIuMTk5MDIgOC4yMTE1MkMyLjk0Mjc3IDcuODMwMjcgNC4xNDI3NyA3LjM3NDAyIDUuNjI0MDIgNy4zNzQwMkM3LjEwNTI3IDcuMzc0MDIgOC4zMDUyNyA3LjgzMDI3IDkuMDQ5MDIgOC4yMTE1MkM5LjI0OTAyIDguMzExNTIgOS4zNzQwMiA4LjUyNDAyIDkuMzc0MDIgOC43NjE1MlY5LjI0OTAyWiIgZmlsbD0iI0Y3RjdGOCIvPgo8L3N2Zz4K");
+  --str-video__icon--pin: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxMyAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguMDY4MTkgMi40NTIyMlY2LjQ2MzYzQzguMDY4MTkgNy4zNjIxOCA4LjM2NTA0IDguMTk2NTYgOC44NzA0NyA4Ljg3MDQ3SDQuMDU2NzhDNC41NzgyNyA4LjE4MDUxIDQuODU5MDYgNy4zNDYxNCA0Ljg1OTA2IDYuNDYzNjNWMi40NTIyMkg4LjA2ODE5Wk0xMC40NzUgMC44NDc2NTZIMi40NTIyMkMyLjAxMDk2IDAuODQ3NjU2IDEuNjQ5OTQgMS4yMDg2OCAxLjY0OTk0IDEuNjQ5OTRDMS42NDk5NCAyLjA5MTE5IDIuMDEwOTYgMi40NTIyMiAyLjQ1MjIyIDIuNDUyMjJIMy4yNTQ1VjYuNDYzNjNDMy4yNTQ1IDcuNzk1NDEgMi4xNzk0NCA4Ljg3MDQ3IDAuODQ3NjU2IDguODcwNDdWMTAuNDc1SDUuNjM3MjhWMTYuMDkxTDYuNDM5NTYgMTYuODkzM0w3LjI0MTg0IDE2LjA5MVYxMC40NzVIMTIuMDc5NlY4Ljg3MDQ3QzEwLjc0NzggOC44NzA0NyA5LjY3Mjc1IDcuNzk1NDEgOS42NzI3NSA2LjQ2MzYzVjIuNDUyMjJIMTAuNDc1QzEwLjkxNjMgMi40NTIyMiAxMS4yNzczIDIuMDkxMTkgMTEuMjc3MyAxLjY0OTk0QzExLjI3NzMgMS4yMDg2OCAxMC45MTYzIDAuODQ3NjU2IDEwLjQ3NSAwLjg0NzY1NloiIGZpbGw9IiM3Mjc2N0UiLz4KPC9zdmc+Cg==");
+  --str-video__icon--no-audio: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAyMCAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05LjMzNjI5IDAuNzcyNzA5TDkuNzQ5MjQgMC40NDI2MTNDOS45MzYxNCAwLjI5MjkyOSAxMC4yMTE5IDAuMzE5NTk2IDEwLjM2NTEgMC41MDIxNzZDMTAuNDI5MyAwLjU3ODY3NyAxMC40NjQ0IDAuNjc0NTYzIDEwLjQ2NDMgMC43NzM0ODdWMS4zMzU0NlYxLjMzNzE1VjEuODY0NDdWMS45MjUyM1YxMy4yMDcyVjEzLjI2ODFWMTMuNzk1NVYxMy43OTcxVjE0LjM1OUMxMC40NjQ0IDE0LjU5NTEgMTAuMjY4NiAxNC43ODY2IDEwLjAyNjkgMTQuNzg2OEM5LjkyNTY4IDE0Ljc4NjggOS44Mjc1MyAxNC43NTI2IDkuNzQ5MjIgMTQuNjg5OUw5LjMzNjI2IDE0LjM1OTdMOS4zMzUzOSAxNC4zNTlMOC45MDg2MSAxNC4wMTc4TDguODU5NzMgMTMuOTc4N0w1LjExNjcyIDEwLjk4NjFMNS4xMTU4NSAxMC45ODYxSDEuNzEyMTNDMS4yMjg3NiAxMC45ODYxIDAuODM2OTE0IDEwLjYwMzMgMC44MzY5MTQgMTAuMTMxMlY1LjAwMTMzQzAuODM2OTE0IDQuNTI5MTQgMS4yMjg3NiA0LjE0NjM1IDEuNzEyMTMgNC4xNDYzNUg1LjExNTg1TDguODU5NzMgMS4xNTM2NUw4LjkwOTY0IDEuMTEzNzVMOS4zMzUzMiAwLjc3MzQ4N0w5LjMzNjI5IDAuNzcyNzA5Wk02LjExNzcyIDUuMzk5N0w4Ljg1OTczIDMuMjA3ODVWMTEuOTI0M0w2LjExODcxIDkuNzMyODhMNS42Nzg2NSA5LjM4MTA1TDUuMTE1ODUgOS4zODE1N0g1LjExNTIzTDUuMTE0MzYgOS4zODE1N0wyLjQ0MTQ4IDkuMzgxNTdWNS43NTA5Mkg1LjExNTg1SDUuNjc4MzRMNi4xMTc3MiA1LjM5OTdaTTE5LjUyNDQgOS44NjQ0NkwxNy4yMjYyIDcuNTY2MjRMMTkuNTI0NCA1LjI2ODAxQzE5LjgzNzcgNC45NTQ3IDE5LjgzMiA0LjQ0MTA4IDE5LjUxODcgNC4xMjc3N0MxOS4yMDU0IDMuODE0NDYgMTguNjkxOCAzLjgwODgyIDE4LjM3ODUgNC4xMjIxM0wxNi4wODAzIDYuNDIwMzVMMTMuNzgyIDQuMTIyMTNDMTMuNDY4NyAzLjgwODgyIDEyLjk1NTEgMy44MTQ0NiAxMi42NDE4IDQuMTI3NzdDMTIuMzI4NSA0LjQ0MTA4IDEyLjMyMjggNC45NTQ3IDEyLjYzNjIgNS4yNjgwMUwxNC45MzQ0IDcuNTY2MjRMMTIuNjM2MiA5Ljg2NDQ2QzEyLjMyMjggMTAuMTc3OCAxMi4zMjg1IDEwLjY5MTQgMTIuNjQxOCAxMS4wMDQ3QzEyLjk1NTEgMTEuMzE4IDEzLjQ2ODcgMTEuMzIzNyAxMy43ODIgMTEuMDEwM0wxNi4wODAzIDguNzEyMTJMMTguMzc4NSAxMS4wMTAzQzE4LjY5MTggMTEuMzIzNyAxOS4yMDU0IDExLjMxOCAxOS41MTg3IDExLjAwNDdDMTkuODMyIDEwLjY5MTQgMTkuODM3NyAxMC4xNzc4IDE5LjUyNDQgOS44NjQ0NloiIGZpbGw9IiM3Mjc2N0UiLz4KPC9zdmc+Cg==");
+  --str-video__icon--camera-off-outline: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNyAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuODUxMzggNS41MDk5OUw1LjI0NjgyIDMuOTA1NDNMMS45MTczNSAwLjU4Mzk4NEwwLjc4NjEzMyAxLjcxNTJMMi45NzYzNiAzLjkwNTQzSDIuMzkwN0MxLjk0OTQ0IDMuOTA1NDMgMS41ODg0MSA0LjI2NjQ2IDEuNTg4NDEgNC43MDc3MVYxMi43MzA1QzEuNTg4NDEgMTMuMTcxOCAxLjk0OTQ0IDEzLjUzMjggMi4zOTA3IDEzLjUzMjhIMTIuMDE4MUMxMi4xODY2IDEzLjUzMjggMTIuMzMxIDEzLjQ2ODYgMTIuNDU5MyAxMy4zODg0TDE1LjAxMDYgMTUuOTM5N0wxNi4xNDE4IDE0LjgwODRMOS4wMzM1OSA3LjcwMDIyTDYuODUxMzggNS41MDk5OVpNMy4xOTI5OCAxMS45MjgyVjUuNTA5OTlINC41ODA5MkwxMC45OTkyIDExLjkyODJIMy4xOTI5OFpNMTEuMjE1OCA1LjUwOTk5VjcuNjAzOTVMMTYuMDI5NSAxMi40MTc2VjQuMzA2NTdMMTIuODIwNCA3LjUxNTdWNC43MDc3MUMxMi44MjA0IDQuMjY2NDYgMTIuNDU5MyAzLjkwNTQzIDEyLjAxODEgMy45MDU0M0g3LjUxNzI4TDkuMTIxODQgNS41MDk5OUgxMS4yMTU4WiIgZmlsbD0iIzcyNzY3RSIvPgo8L3N2Zz4K");
+  --str-video__icon--not-allowed: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxNyAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguNDY0MjIgMC45MzU1NDdDNC4wMzU2MyAwLjkzNTU0NyAwLjQ0MTQwNiA0LjUyOTc3IDAuNDQxNDA2IDguOTU4MzZDMC40NDE0MDYgMTMuMzg3IDQuMDM1NjMgMTYuOTgxMiA4LjQ2NDIyIDE2Ljk4MTJDMTIuODkyOCAxNi45ODEyIDE2LjQ4NyAxMy4zODcgMTYuNDg3IDguOTU4MzZDMTYuNDg3IDQuNTI5NzcgMTIuODkyOCAwLjkzNTU0NyA4LjQ2NDIyIDAuOTM1NTQ3Wk0yLjA0NTk3IDguOTU4MzZDMi4wNDU5NyA1LjQxMjI4IDQuOTE4MTQgMi41NDAxMSA4LjQ2NDIyIDIuNTQwMTFDOS45NDg0NCAyLjU0MDExIDExLjMxMjMgMy4wNDU1NSAxMi4zOTU0IDMuODk1OTdMMy40MDE4MyAxMi44ODk1QzIuNTUxNDEgMTEuODA2NSAyLjA0NTk3IDEwLjQ0MjYgMi4wNDU5NyA4Ljk1ODM2Wk04LjQ2NDIyIDE1LjM3NjZDNi45OCAxNS4zNzY2IDUuNjE2MTIgMTQuODcxMiA0LjUzMzA0IDE0LjAyMDhMMTMuNTI2NiA1LjAyNzE4QzE0LjM3NyA2LjExMDI2IDE0Ljg4MjUgNy40NzQxNCAxNC44ODI1IDguOTU4MzZDMTQuODgyNSAxMi41MDQ0IDEyLjAxMDMgMTUuMzc2NiA4LjQ2NDIyIDE1LjM3NjZaIiBmaWxsPSIjNzI3NjdFIi8+Cjwvc3ZnPgo=");
+}
+
+.str-video__avatar {
+  width: 2rem;
+  height: 2rem;
+  object-fit: cover;
+}
+
+.str-video__avatar--initials-fallback {
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.str-video {
+  /* The font color applied inside the component */
+  --str-video__avatar--color: var(--str-video__text-color1);
+  /* The background color of the component */
+  --str-video__avatar--background-color: var(--str-video__background-color1);
+  /* The border radius used for the borders of the component */
+  --str-video__avatar--border-radius: var(--str-video__border-radius-circle);
+}
+
+.str-video__avatar {
+  background: var(--str-video__avatar--background-color);
+  color: var(--str-video__avatar--color);
+  box-shadow: var(--str-video__avatar--box-shadow);
+  border-radius: var(--str-video__avatar--border-radius);
+  border-block-start: var(--str-video__avatar--border-block-start);
+  border-block-end: var(--str-video__avatar--border-block-end);
+  border-inline-start: var(--str-video__avatar--border-inline-start);
+  border-inline-end: var(--str-video__avatar--border-inline-end);
+}
+
+.str-video__avatar--initials-fallback {
+  background-color: var(--str-video__primary-color);
+  font-size: 1rem;
+  font-weight: 600;
+  border-radius: var(--str-video__border-radius-circle);
+  text-transform: uppercase;
+}
+
+.str-video__composite-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  height: 100%;
+}
+.str-video__composite-button .str-video__composite-button__button-group {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  height: 38px;
+}
+.str-video__composite-button .str-video__composite-button__button-group .str-video__call-controls__button {
+  padding: 0;
+}
+.str-video__composite-button .str-video__composite-button__button-group .str-video__call-controls__button.str-video__menu-toggle-button {
+  height: 100%;
+  padding-inline: 2px;
+}
+.str-video__composite-button .str-video__composite-button__button-group .str-video__loading-indicator__icon {
+  width: 1.375rem;
+  height: 1.375rem;
+  -webkit-mask-size: 1.25rem;
+  mask-size: 1.25rem;
+}
+
+.str-video__call-controls__button {
+  padding: 0.5rem;
+}
+.str-video__call-controls__button--variant-danger {
+  padding: 0.5rem 1rem;
+}
+.str-video__call-controls__button[disabled] {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+.str-video__call-controls__button .str-video__icon--caret-down {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+.str-video__call-controls__button .str-video__icon--caret-up {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+.str-video__call-controls__button .str-video__icon--call-end {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.str-video__text-button {
+  all: unset;
+  padding: 5px;
+  font-size: 12px;
+  border-radius: var(--str-video__participant-list-header__close-button--border-radius);
+  background: var(--str-video__participant-list-header__close-button--background-color);
+}
+
+.str-video {
+  /* The font color applied inside the component */
+  --str-video__composite-button__button-group--color: var(
+    --str-video__text-color1
+  );
+  /* The background color of the component */
+  --str-video__composite-button__button-group--background-color: var(
+    --str-video__background-color1
+  );
+  /* The border radius used for the borders of the component */
+  --str-video__composite-button__button-group--border-radius: var(
+    --str-video__border-radius-xs
+  );
+  /* The background color of the component */
+  --str-video__composite-button__button-group-active--background-color: var(
+    --str-video__text-color3
+  );
+}
+
+.str-video__composite-button__button-group {
+  background: var(--str-video__composite-button__button-group--background-color);
+  color: var(--str-video__composite-button__button-group--color);
+  box-shadow: var(--str-video__composite-button__button-group--box-shadow);
+  border-radius: var(--str-video__composite-button__button-group--border-radius);
+  border-block-start: var(--str-video__composite-button__button-group--border-block-start);
+  border-block-end: var(--str-video__composite-button__button-group--border-block-end);
+  border-inline-start: var(--str-video__composite-button__button-group--border-inline-start);
+  border-inline-end: var(--str-video__composite-button__button-group--border-inline-end);
+}
+.str-video__composite-button__button-group .str-video__call-controls__button {
+  background-color: transparent;
+}
+.str-video__composite-button__button-group .str-video__call-controls__button.str-video__menu-toggle-button {
+  background-color: var(--str-video__background-color1);
+}
+
+.str-video__composite-button__caption {
+  font-size: 12px;
+  line-height: 15px;
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.str-video__composite-button__button-group:hover,
+.str-video__composite-button__button-group--active {
+  background-color: var(--str-video__composite-button__button-group-active--background-color);
+}
+
+.str-video__call-controls__button {
+  border-radius: var(--str-video__border-radius-xs);
+  text-decoration: none;
+  box-shadow: none;
+  border: none;
+  background-color: var(--str-video__background-color1);
+}
+.str-video__call-controls__button:hover {
+  text-decoration: none;
+  background-color: var(--str-video__composite-button__button-group-active--background-color);
+}
+.str-video__call-controls__button--variant-danger {
+  background-color: var(--str-video__danger-color1);
+}
+.str-video__call-controls__button--variant-danger:hover {
+  background-color: var(--str-video__danger-color2);
+}
+.str-video__call-controls__button--enabled {
+  background: var(--str-video__text-color3);
+}
+
+.str-video__call-controls {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  padding: 1rem 0;
+}
+.str-video__call-controls .str-video__reactions-menu {
+  background-color: var(--str-video__background-color1);
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  border-radius: var(--str-video__border-radius1);
+}
+.str-video__call-controls .str-video__reactions-menu .str-video__reactions-menu__button {
+  font-size: 1.5rem;
+  background-color: var(--str-video__background-color1);
+}
+
+.str-video__call-participants-screen-view {
+  height: 100%;
+  display: flex;
+  gap: 0.625rem;
+}
+.str-video__call-participants-screen-view .str-video__call-participants-screen-view__screen {
+  flex: 4;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+  gap: 0.5rem;
+  padding: 0.3125rem;
+}
+.str-video__call-participants-screen-view .str-video__call-participants-screen-view__wrapper {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.str-video__call-participants-screen-view .str-video__call-participants-screen-view__overlay {
+  position: absolute;
+  background-color: var(--str-video__overlay-color);
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: flex-end;
+  gap: 1.5625rem;
+  padding: 2rem 0.75rem;
+}
+.str-video__call-participants-screen-view .str-video__call-participants-screen-view__screen__presenter {
+  padding: 0.625rem 0 0.625rem 0.625rem;
+  background-color: var(--str-video__background-color1);
+  border-radius: var(--str-video__border-radius1);
+}
+.str-video__call-participants-screen-view .str-video__call-participants-screen-view__participants-wrapper {
+  flex: 1 1;
+  overflow-y: auto;
+  scrollbar-width: none;
+  width: 100%;
+}
+.str-video__call-participants-screen-view .str-video__call-participants-screen-view__participants-wrapper::-webkit-scrollbar {
+  display: none;
+}
+.str-video__call-participants-screen-view .str-video__call-participants-screen-view__participants-wrapper .str-video__call-participants-screen-view__participants {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 1rem;
+}
+.str-video__call-participants-screen-view .str-video__call-participants-screen-view__buttons-wrapper {
+  position: relative;
+  display: flex;
+  flex: 1 1;
+  align-items: center;
+  flex-direction: column;
+}
+.str-video__call-participants-screen-view .str-video__call-participants-screen-view__buttons-wrapper .str-video__call-participants-screen-view__button-up {
+  position: absolute;
+  top: 0.5rem;
+  z-index: 1;
+}
+.str-video__call-participants-screen-view .str-video__call-participants-screen-view__buttons-wrapper .str-video__call-participants-screen-view__button-up .str-video__call-controls__button--icon {
+  width: 0.8rem;
+  height: 0.8rem;
+}
+.str-video__call-participants-screen-view .str-video__call-participants-screen-view__buttons-wrapper .str-video__call-participants-screen-view__button-down {
+  position: absolute;
+  bottom: 0.5rem;
+  z-index: 1;
+}
+.str-video__call-participants-screen-view .str-video__call-participants-screen-view__buttons-wrapper .str-video__call-participants-screen-view__button-down .str-video__call-controls__button--icon {
+  width: 0.8rem;
+  height: 0.8rem;
+}
+.str-video__call-participants-screen-view .str-video__screen-share {
+  min-height: 0;
+  object-fit: contain;
+}
+.str-video__call-participants-screen-view .str-video__video--wide {
+  width: 100%;
+  height: 100%;
+}
+.str-video__call-participants-screen-view .str-video__video--tall {
+  height: 100%;
+  width: 100%;
+  object-fit: contain;
+}
+
+.str-video__call-participants-view {
+  display: grid;
+  grid-auto-rows: auto min-content;
+  grid-column-gap: 0.625rem;
+  grid-row-gap: 0.625rem;
+  align-items: center;
+  justify-items: center;
+  height: 100%;
+}
+.str-video__call-participants-view.str-video__grid-1 {
+  grid-template-columns: repeat(1, 1fr);
+  grid-template-rows: repeat(1, 1fr);
+}
+.str-video__call-participants-view.str-video__grid-2 {
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(1, 1fr);
+}
+.str-video__call-participants-view.str-video__grid-3 {
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+}
+.str-video__call-participants-view.str-video__grid-4 {
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+}
+.str-video__call-participants-view.str-video__grid-5 {
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+}
+.str-video__call-participants-view.str-video__grid-6 {
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+}
+.str-video__call-participants-view.str-video__grid-7 {
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+}
+.str-video__call-participants-view.str-video__grid-8 {
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+}
+.str-video__call-participants-view.str-video__grid-9 {
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+}
+.str-video__call-participants-view.str-video__grid-10 {
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+}
+.str-video__call-participants-view.str-video__grid-11 {
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+}
+.str-video__call-participants-view.str-video__grid-12 {
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-13 {
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-14 {
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-15 {
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-16 {
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-17 {
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-18 {
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-19 {
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-20 {
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-21 {
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-22 {
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-23 {
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-24 {
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-25 {
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-26 {
+  grid-template-columns: repeat(6, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-27 {
+  grid-template-columns: repeat(6, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-28 {
+  grid-template-columns: repeat(6, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-29 {
+  grid-template-columns: repeat(6, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-30 {
+  grid-template-columns: repeat(6, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-31 {
+  grid-template-columns: repeat(6, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-32 {
+  grid-template-columns: repeat(6, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-33 {
+  grid-template-columns: repeat(6, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-34 {
+  grid-template-columns: repeat(6, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-35 {
+  grid-template-columns: repeat(6, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-36 {
+  grid-template-columns: repeat(6, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-37 {
+  grid-template-columns: repeat(6, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-38 {
+  grid-template-columns: repeat(6, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-39 {
+  grid-template-columns: repeat(6, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-40 {
+  grid-template-columns: repeat(6, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-41 {
+  grid-template-columns: repeat(6, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-42 {
+  grid-template-columns: repeat(6, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-43 {
+  grid-template-columns: repeat(6, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-44 {
+  grid-template-columns: repeat(6, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-45 {
+  grid-template-columns: repeat(6, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-46 {
+  grid-template-columns: repeat(6, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-47 {
+  grid-template-columns: repeat(6, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-48 {
+  grid-template-columns: repeat(6, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-49 {
+  grid-template-columns: repeat(6, 1fr);
+  grid-auto-rows: 1fr;
+}
+.str-video__call-participants-view.str-video__grid-50 {
+  grid-template-columns: repeat(6, 1fr);
+  grid-auto-rows: 1fr;
+}
+
+.str-video__participant-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  height: 100%;
+  width: 100%;
+  padding: 0.75rem;
+}
+.str-video__participant-list .str-video__participant-list-header {
+  display: flex;
+  align-items: center;
+}
+.str-video__participant-list .str-video__participant-list-header .str-video__participant-list-header__title {
+  flex: 1;
+}
+.str-video__participant-list .str-video__participant-list-header .str-video__participant-list-header__close-button {
+  width: 1.75rem;
+  height: 1.75rem;
+}
+.str-video__participant-list .str-video__participant-list-header .str-video__participant-list-header__close-button .str-video__participant-list-header__close-button--icon {
+  display: block;
+  height: 1rem;
+  width: 1rem;
+}
+.str-video__participant-list .str-video__participant-list__content-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.str-video__participant-list .str-video__participant-list__content-header .str-video__participant-list__content-header-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-grow: 1;
+}
+.str-video__participant-list .str-video__participant-list__content-header .str-video__call-controls__button {
+  width: 1.75rem;
+  height: 1.75rem;
+  display: flex;
+  padding: unset;
+  align-items: center;
+  justify-content: center;
+}
+.str-video__participant-list .str-video__participant-list__content-header .str-video__call-controls__button .str-video__icon--caret-down {
+  width: 1rem;
+  height: 0.8rem;
+}
+.str-video__participant-list .str-video__participant-list__content {
+  height: 0px;
+  flex-grow: 1;
+  overflow-y: auto;
+}
+.str-video__participant-list .str-video__participant-list__footer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: stretch;
+  gap: 0.5rem;
+}
+.str-video__participant-list .str-video__search-results--loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+.str-video__participant-list .str-video__search-results--loading .str-video__loading-indicator__icon {
+  height: 3rem;
+  width: 3rem;
+  mask-size: 3rem;
+  -webkit-mask-size: 3rem;
+}
+.str-video__participant-list .str-video__participant-list--empty {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding-block: 0.5rem;
+}
+
+.str-video__invite-link-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  width: 100%;
+  position: relative;
+  padding-block: 0.5rem;
+}
+.str-video__invite-link-button .str-video__invite-link-tooltip {
+  position: absolute;
+  bottom: 110%;
+}
+.str-video__invite-link-button .str-video__invite-participant-icon {
+  height: 20px;
+  width: 20px;
+}
+
+.str-video {
+  --str-video__participant-list--background-color: var(
+    --str-video__background-color1
+  );
+  --str-video__participant-list--border-radius: var(
+    --str-video__border-radius1
+  );
+  --str-video__participant-list-header--color: var(--str-video__text-color1);
+  --str-video__participant-list-header--title-count__color: var(
+    --str-video__text-color3
+  );
+  --str-video__participant-list-header__close-button--background-color: #121416;
+  --str-video__participant-list-header__close-button--border-radius: var(
+    --str-video__border-radius1
+  );
+  --str-video__participant-list-header__close-button-icon--background-color: #72767e;
+}
+
+.str-video__participant-list {
+  background: var(--str-video__participant-list--background-color);
+  color: var(--str-video__participant-list--color);
+  box-shadow: var(--str-video__participant-list--box-shadow);
+  border-radius: var(--str-video__participant-list--border-radius);
+  border-block-start: var(--str-video__participant-list--border-block-start);
+  border-block-end: var(--str-video__participant-list--border-block-end);
+  border-inline-start: var(--str-video__participant-list--border-inline-start);
+  border-inline-end: var(--str-video__participant-list--border-inline-end);
+}
+.str-video__participant-list .str-video__participant-list-header__title {
+  background: var(--str-video__participant-list-header--background-color);
+  color: var(--str-video__participant-list-header--color);
+  box-shadow: var(--str-video__participant-list-header--box-shadow);
+  border-radius: var(--str-video__participant-list-header--border-radius);
+  border-block-start: var(--str-video__participant-list-header--border-block-start);
+  border-block-end: var(--str-video__participant-list-header--border-block-end);
+  border-inline-start: var(--str-video__participant-list-header--border-inline-start);
+  border-inline-end: var(--str-video__participant-list-header--border-inline-end);
+  font-size: 1rem;
+  line-height: 1.25rem;
+}
+.str-video__participant-list .str-video__participant-list-header__title-count {
+  background: var(--str-video__participant-list-header--title-count--background-color);
+  color: var(--str-video__participant-list-header--title-count--color);
+  box-shadow: var(--str-video__participant-list-header--title-count--box-shadow);
+  border-radius: var(--str-video__participant-list-header--title-count--border-radius);
+  border-block-start: var(--str-video__participant-list-header--title-count--border-block-start);
+  border-block-end: var(--str-video__participant-list-header--title-count--border-block-end);
+  border-inline-start: var(--str-video__participant-list-header--title-count--border-inline-start);
+  border-inline-end: var(--str-video__participant-list-header--title-count--border-inline-end);
+}
+.str-video__participant-list .str-video__participant-list-header__close-button {
+  background: var(--str-video__participant-list-header__close-button--background-color);
+  color: var(--str-video__participant-list-header__close-button--color);
+  box-shadow: var(--str-video__participant-list-header__close-button--box-shadow);
+  border-radius: var(--str-video__participant-list-header__close-button--border-radius);
+  border-block-start: var(--str-video__participant-list-header__close-button--border-block-start);
+  border-block-end: var(--str-video__participant-list-header__close-button--border-block-end);
+  border-inline-start: var(--str-video__participant-list-header__close-button--border-inline-start);
+  border-inline-end: var(--str-video__participant-list-header__close-button--border-inline-end);
+}
+.str-video__participant-list .str-video__participant-list-header__close-button .str-video__participant-list-header__close-button--icon {
+  mask-image: var(--str-video__icon--close);
+  -webkit-mask-image: var(--str-video__icon--close);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+  mask-size: 0.75rem 0.75rem;
+  -webkit-mask-size: 0.75rem 0.75rem;
+  background-color: var(--str-video__participant-list-header__close-button-icon--background-color);
+}
+.str-video__participant-list .str-video__participant-list--empty {
+  font-size: 13px;
+}
+.str-video__participant-list .str-video__participant-list__footer {
+  display: flex;
+  justify-content: center;
+  padding: 0 0.75rem 0.75rem;
+}
+.str-video__participant-list .str-video__participant-list__footer .str-video__invite-link-button {
+  font-size: 13px;
+  color: var(--str-video__text-color4);
+  background-color: var(--str-video__background-color4);
+  border-radius: var(--str-video__border-radius-xl);
+}
+.str-video__participant-list .str-video__participant-list__footer .str-video__invite-link-button .str-video__invite-participant-icon {
+  mask-image: var(--str-video__icon--user-plus);
+  -webkit-mask-image: var(--str-video__icon--user-plus);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+  mask-size: 1rem;
+  -webkit-mask-size: 1rem;
+  background-color: var(--str-video__text-color4);
+}
+
+.str-video__participant-listing-item {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding-block: 0.5rem;
+  width: 100%;
+  align-items: center;
+}
+.str-video__participant-listing-item .str-video__call-controls__button {
+  padding: unset;
+}
+.str-video__participant-listing-item .str-video__participant-listing-item__display-name {
+  white-space: nowrap;
+  overflow-y: visible;
+  overflow-x: hidden;
+  overflow-x: clip;
+  text-overflow: ellipsis;
+}
+.str-video__participant-listing-item .str-video__participant-listing-item__media-indicator-group {
+  display: flex;
+  align-items: center;
+  padding-inline: 0.5rem;
+  gap: 0.75rem;
+}
+.str-video__participant-listing-item .str-video__participant-listing-item__media-indicator-group .str-video__participant-listing-item__icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+.str-video__participant-listing-item .str-video__participant-listing-item__display-name {
+  font-size: 13px;
+}
+.str-video__participant-listing-item .str-video__participant-listing-item__media-indicator-group .str-video__participant-listing-item__icon-mic {
+  mask-image: var(--str-video__icon--mic);
+  -webkit-mask-image: var(--str-video__icon--mic);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  background-color: var(--str-video__text-color1);
+}
+.str-video__participant-listing-item .str-video__participant-listing-item__media-indicator-group .str-video__participant-listing-item__icon-mic-off {
+  mask-image: var(--str-video__icon--mic-off);
+  -webkit-mask-image: var(--str-video__icon--mic-off);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  background-color: var(--str-video__danger-color1);
+}
+.str-video__participant-listing-item .str-video__participant-listing-item__media-indicator-group .str-video__participant-listing-item__icon-camera {
+  mask-image: var(--str-video__icon--camera);
+  -webkit-mask-image: var(--str-video__icon--camera);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  background-color: var(--str-video__text-color1);
+}
+.str-video__participant-listing-item .str-video__participant-listing-item__media-indicator-group .str-video__participant-listing-item__icon-camera-off {
+  mask-image: var(--str-video__icon--camera-off);
+  -webkit-mask-image: var(--str-video__icon--camera-off);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  background-color: var(--str-video__danger-color1);
+}
+.str-video__participant-listing-item .str-video__participant-listing-item__media-indicator-group .str-video__participant-listing-item__icon-pinned {
+  mask-image: var(--str-video__icon--pin);
+  -webkit-mask-image: var(--str-video__icon--pin);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  background-color: var(--str-video__text-color1);
+}
+
+.str-video__call-recording-list {
+  padding: 0.625rem;
+  min-width: 300px;
+}
+
+.str-video__call-recording-list__header {
+  display: flex;
+  justify-content: space-between;
+  padding: 0rem 0.5rem 0.5rem;
+  align-items: center;
+}
+.str-video__call-recording-list__header .str-video__call-recording-list__title {
+  display: flex;
+  gap: 0.5rem;
+}
+.str-video__call-recording-list__header .str-video__call-controls__button .str-video__icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.str-video__call-recording-list__listing {
+  padding-inline: 0.5rem;
+  max-height: 400px;
+  overflow-y: auto;
+}
+.str-video__call-recording-list__listing.str-video__call-recording-list__listing--empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding-block: 2rem;
+}
+.str-video__call-recording-list__listing.str-video__call-recording-list__listing--empty .str-video__call-recording-list__listing--icon-empty {
+  width: 3rem;
+  height: 3rem;
+}
+.str-video__call-recording-list__listing.str-video__call-recording-list__listing--empty .str-video__call-recording-list__listing--text-empty {
+  margin: 0;
+}
+
+.str-video__call-recording-list-item {
+  display: flex;
+  justify-content: space-between;
+  overflow: hidden;
+  width: 100%;
+  padding-block: 0.125rem;
+}
+.str-video__call-recording-list-item .str-video__call-recording-list-item__info {
+  display: flex;
+  gap: 0.5rem;
+}
+.str-video__call-recording-list-item .str-video__call-recording-list-item__actions {
+  display: flex;
+}
+.str-video__call-recording-list-item .str-video__call-recording-list-item__actions .str-video__call-recording-list-item__action-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.str-video__call-recording-list-item .str-video__call-recording-list-item__actions .str-video__call-recording-list-item__action-button .str-video__call-recording-list-item__action-button-icon {
+  display: block;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.str-video__call-recording-list-item .str-video__call-recording-list-item__actions .str-video__call-recording-list-item__action-button .str-video__call-recording-list-item__action-button-icon.str-video__copy-button--icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.str-video__call-recording-list__listing .str-video__loading-indicator {
+  padding-block: 0.5rem;
+  flex-direction: row;
+  justify-content: flex-start;
+  gap: 0.5rem;
+}
+.str-video__call-recording-list__listing .str-video__loading-indicator .str-video__loading-indicator__icon.spinner {
+  height: 1rem;
+  width: 1rem;
+  mask-size: 1rem;
+}
+.str-video__call-recording-list__listing .str-video__loading-indicator .str-video__loading-indicator-text {
+  white-space: nowrap;
+  overflow-y: visible;
+  overflow-x: hidden;
+  overflow-x: clip;
+  text-overflow: ellipsis;
+}
+
+.str-video__call-recording-list__title {
+  font: var(--str-video__subtitle-medium-text);
+}
+
+.str-video__call-controls__button--icon-call-recordings {
+  mask-image: var(--str-video__icon--film-roll);
+  -webkit-mask-image: var(--str-video__icon--film-roll);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+  mask-size: 2px;
+  -webkit-mask-size: 2px;
+  background-color: var(--str-video__text-color1);
+}
+
+.str-video__call-recordings__toggle-button--active {
+  background-color: var(--str-video__text-color3);
+}
+
+.str-video__refresh-button {
+  background-color: transparent;
+  cursor: pointer;
+  border-radius: 4px;
+}
+.str-video__refresh-button:hover {
+  background-color: var(--str-video__text-color3);
+}
+.str-video__refresh-button:active {
+  background-color: var(--str-video__background-color5);
+  transition: background-color 0.2s ease-out;
+}
+.str-video__refresh-button .str-video__refresh-button--icon {
+  mask-image: var(--str-video__icon--refresh);
+  -webkit-mask-image: var(--str-video__icon--refresh);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  background-color: var(--str-video__text-color1);
+}
+
+.str-video__call-recording-list__listing--icon-empty {
+  mask-image: var(--str-video__icon--film-roll);
+  -webkit-mask-image: var(--str-video__icon--film-roll);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  background-color: var(--str-video__text-color1);
+}
+
+.str-video__call-recording-list-item__actions .str-video__call-recording-list-item__action-button {
+  border-radius: 4px;
+  background-color: transparent;
+}
+.str-video__call-recording-list-item__actions .str-video__call-recording-list-item__action-button:hover {
+  background-color: var(--str-video__text-color3);
+}
+.str-video__call-recording-list-item__actions .str-video__call-recording-list-item__action-button:active {
+  background-color: var(--str-video__background-color5);
+  transition: background-color 0.2s ease-out;
+}
+.str-video__call-recording-list-item__actions .str-video__call-recording-list-item__action-button .str-video__download-button--icon {
+  mask-image: var(--str-video__icon--download);
+  -webkit-mask-image: var(--str-video__icon--download);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  background-color: var(--str-video__text-color1);
+}
+.str-video__call-recording-list-item__actions .str-video__call-recording-list-item__action-button .str-video__copy-button--icon {
+  mask-image: var(--str-video__icon--copy);
+  -webkit-mask-image: var(--str-video__icon--copy);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  background-color: var(--str-video__text-color1);
+}
+
+.str-video__call-recording-list__listing .str-video__loading-indicator .str-video__loading-indicator-text {
+  font: var(--str-video__caption-text);
+}
+
+.str-video__call-stats {
+  background-color: var(--str-video__background-color1);
+  border-radius: var(--str-video__border-radius1);
+  padding: 0.75rem;
+  max-width: 400px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.str-video__call-stats h3 {
+  margin: unset;
+}
+.str-video__call-stats.str-video__call-stats-angular {
+  width: 400px;
+}
+.str-video__call-stats.str-video__call-stats-angular canvas {
+  width: 400px;
+  height: 200px;
+}
+.str-video__call-stats .str-video__call-stats__card-container {
+  --gap: 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  gap: var(--gap);
+}
+.str-video__call-stats .str-video__call-stats__card {
+  background-color: var(--str-video__background-color2);
+  border-radius: var(--str-video__border-radius1);
+  width: calc(50% - var(--gap) / 2);
+  padding: 0.5rem 0.5rem;
+}
+.str-video__call-stats .str-video__call-stats__card .str-video__call-stats__card_label {
+  color: var(--str-video__text-color2);
+  font-size: 0.5625rem;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+.str-video__call-stats .str-video__call-stats__card .str-video__call-stats__card_value {
+  font-size: 1.0625rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+}
+.str-video__call-stats .str-video__call-stats-line-chart-container {
+  height: 15vh;
+}
+
+.str-video__device-settings__button .str-video__call-controls__button--icon-device-settings {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.str-video__device-settings {
+  padding: 0.625rem;
+  z-index: 1;
+}
+
+.str-video__device-settings__device-kind {
+  padding: 0.75rem 1rem;
+}
+.str-video__device-settings__device-kind .str-video__device-settings__device-selector-title {
+  padding-bottom: 0.5rem;
+}
+.str-video__device-settings__device-kind .str-video__device-settings__option {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.5rem;
+}
+.str-video__device-settings__device-kind .str-video__device-settings__option input[type=radio] {
+  margin: 0;
+  height: 1rem;
+  width: 1rem;
+  display: grid;
+  place-content: center;
+}
+.str-video__device-settings__device-kind .str-video__device-settings__option input[type=radio]::before {
+  content: "";
+  width: 0.5rem;
+  height: 0.5rem;
+  transform: scale(0);
+}
+.str-video__device-settings__device-kind .str-video__device-settings__option input[type=radio]:checked::before {
+  transform: scale(1);
+}
+
+.str-video {
+  /* The font color applied inside the component */
+  --str-video__menu-container--color: var(--str-video__text-color1);
+  /* The background color of the component */
+  --str-video__menu-container--background-color: var(--str-video__background-color1);
+  /* The border radius used for the borders of the component */
+  --str-video__menu-container--border-radius: var(--str-video__border-radius-xs);
+  /* The background color of the component */
+  --str-video__device-settings--background-color: var(--str-video__background-color1);
+  /* The border radius used for the borders of the component */
+  --str-video__device-settings--border-radius: var(--str-video__border-radius-xs);
+  /* The box shadow applied to the component */
+  --str-video__device-settings--box-shadow: 0 0 4px 1px var(--str-video__background-color2);
+}
+
+.str-video__device-settings {
+  background: var(--str-video__device-settings--background-color);
+  color: var(--str-video__device-settings--color);
+  box-shadow: var(--str-video__device-settings--box-shadow);
+  border-radius: var(--str-video__device-settings--border-radius);
+  border-block-start: var(--str-video__device-settings--border-block-start);
+  border-block-end: var(--str-video__device-settings--border-block-end);
+  border-inline-start: var(--str-video__device-settings--border-inline-start);
+  border-inline-end: var(--str-video__device-settings--border-inline-end);
+}
+
+.str-video__menu-container {
+  background: var(--str-video__menu-container--background-color);
+  color: var(--str-video__menu-container--color);
+  box-shadow: var(--str-video__menu-container--box-shadow);
+  border-radius: var(--str-video__menu-container--border-radius);
+  border-block-start: var(--str-video__menu-container--border-block-start);
+  border-block-end: var(--str-video__menu-container--border-block-end);
+  border-inline-start: var(--str-video__menu-container--border-inline-start);
+  border-inline-end: var(--str-video__menu-container--border-inline-end);
+}
+
+.str-video__device-settings__device-kind {
+  font-size: 1rem;
+}
+.str-video__device-settings__device-kind .str-video__device-settings__device-selector-title {
+  font: var(--str-video__subtitle-medium-text);
+}
+.str-video__device-settings__device-kind .str-video__device-settings__option {
+  color: var(--str-video__text-color3);
+  font: var(--str-video__subtitle-text);
+  border-radius: var(--str-video__border-radius-xxs);
+  cursor: pointer;
+  transition: all 0.3s ease-out;
+}
+.str-video__device-settings__device-kind .str-video__device-settings__option:hover, .str-video__device-settings__device-kind .str-video__device-settings__option.str-video__device-settings__option--selected {
+  color: var(--str-video__text-color1);
+  background-color: var(--str-video__background-color2);
+}
+.str-video__device-settings__device-kind .str-video__device-settings__option input[type=radio] {
+  -webkit-appearance: none;
+  appearance: none;
+  /* For iOS < 15 to remove gradient background */
+  background-color: currentColor;
+  font: inherit;
+  color: var(--str-video__text-color3);
+  border: 0.5rem solid var(--str-video__text-color3);
+  border-radius: var(--str-video__border-radius-circle);
+}
+.str-video__device-settings__device-kind .str-video__device-settings__option input[type=radio]:checked {
+  border-color: var(--str-video__primary-color);
+}
+.str-video__device-settings__device-kind .str-video__device-settings__option input[type=radio]::before {
+  border-radius: var(--str-video__border-radius-circle);
+  transition: 120ms transform ease-in-out;
+}
+.str-video__device-settings__device-kind .str-video__device-settings__option input[type=radio]:checked::before {
+  box-shadow: inset 0.5rem 0.5rem var(--str-video__text-color1);
+}
+
+.str-video__device-settings__button {
+  cursor: pointer;
+  border: none;
+  background-color: var(--str-video__background-color1);
+}
+.str-video__device-settings__button .str-video__call-controls__button--icon-device-settings {
+  mask-image: var(--str-video__icon--settings);
+  -webkit-mask-image: var(--str-video__icon--settings);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  background-color: var(--str-video__text-color1);
+}
+.str-video__device-settings__button:hover, .str-video__device-settings__button:active {
+  background-color: var(--str-video__text-color3);
+  border-radius: var(--str-video__border-radius1);
+}
+
+.str-video__device-settings__button--active {
+  background-color: var(--str-video__text-color3);
+}
+
+.str-video__loading-indicator {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.str-video__loading-indicator__icon.spinner {
+  mask-image: var(--str-video__icon--loading);
+  -webkit-mask-image: var(--str-video__icon--loading);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+  mask-size: 1rem;
+  -webkit-mask-size: 1rem;
+  background-color: var(--str-video__text-color2);
+  animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.str-video__menu-container {
+  z-index: 2;
+}
+
+.str-video__menu-container {
+  box-shadow: 0px 0px 5px var(--str-video__background-color1);
+}
+
+.str-video__generic-menu {
+  list-style: none;
+  margin: unset;
+  padding: 5px;
+  border-radius: var(--str-video__border-radius-xs);
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.str-video__generic-menu .str-video__generic-menu--item {
+  display: flex;
+}
+.str-video__generic-menu .str-video__generic-menu--item button {
+  all: unset;
+  width: 100%;
+  font-size: 13px;
+  padding: 5px 10px;
+  border-radius: var(--str-video__border-radius-xs);
+  gap: 10px;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.str-video__generic-menu .str-video__generic-menu--item button .str-video__icon {
+  width: 1.1rem;
+  height: 1rem;
+}
+.str-video__generic-menu .str-video__generic-menu--item button[aria-selected] {
+  padding: 5px 10px 5px 26px;
+}
+.str-video__generic-menu .str-video__generic-menu--item button[aria-selected=true]::after {
+  content: "●";
+  font-size: 10px;
+  left: 10px;
+  position: absolute;
+}
+
+.str-video__generic-menu {
+  background: var(--str-video__background-color2);
+}
+.str-video__generic-menu .str-video__generic-menu--item button:hover {
+  background: var(--str-video__background-color1);
+}
+.str-video__generic-menu .str-video__generic-menu--item button[disabled] {
+  background-color: var(--str-video__background-color5);
+  color: var(--str-video__text-color2);
+  cursor: not-allowed;
+}
+
+.str-video__notification {
+  padding: 0.625rem;
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+.str-video__notification .str-video__notification__icon {
+  display: inline-block;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.str-video__notification .str-video__notification__message {
+  flex: 1;
+}
+
+.str-video__notification {
+  background-color: var(--str-video__background-color1);
+  border-radius: var(--str-video__border-radius1);
+  z-index: 100;
+}
+.str-video__notification .str-video__notification__icon {
+  mask-image: var(--str-video__icon--info-icon);
+  -webkit-mask-image: var(--str-video__icon--info-icon);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+  mask-size: 1.5rem;
+  -webkit-mask-size: 1.5rem;
+  background-color: var(--str-video__text-color1);
+}
+.str-video__notification .str-video__notification__message {
+  font-size: 0.75rem;
+}
+
+.str-video__permission-requests {
+  background-color: var(--str-video__background-color1);
+  border-radius: 8px;
+  padding: 10px;
+  position: relative;
+}
+.str-video__permission-requests .str-video__permission-requests__notification,
+.str-video__permission-requests .str-video__permission-request {
+  display: flex;
+  gap: 10px;
+  padding: 10px 0;
+  align-items: center;
+}
+.str-video__permission-requests .str-video__permission-requests__notification__message,
+.str-video__permission-requests .str-video__permission-request__message {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.str-video__permission-requests .str-video__permission-request__button {
+  background-color: transparent;
+  border: 1px solid var(--str-video__text-color1);
+  border-radius: 4px;
+  color: var(--str-video__color1);
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 8px;
+  min-width: 120px;
+}
+.str-video__permission-requests .str-video__permission-request__button--allow {
+  background-color: var(--str-video__primary-color);
+  border: 1px solid var(--str-video__primary-color);
+}
+.str-video__permission-requests .str-video__permission-requests-list {
+  background-color: var(--str-video__background-color1);
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+  padding: 10px;
+  width: 100%;
+  z-index: 1;
+  opacity: 0.9;
+  overflow-x: scroll;
+  overflow-y: hidden;
+}
+.str-video__permission-requests .str-video__permission-requests-list::-webkit-scrollbar {
+  display: none;
+}
+
+.str-video__reaction {
+  position: absolute;
+  right: 0.875rem;
+  bottom: 0.875rem;
+  opacity: 0;
+  transition: opacity 0.2s ease-out;
+}
+.str-video__reaction.str-video__reaction--visible {
+  opacity: 1;
+}
+.str-video__reaction .str-video__reaction__emoji {
+  font-size: 2.5rem;
+}
+
+.str-video__search-input__container {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  margin-inline: -0.25rem;
+}
+.str-video__search-input__container input {
+  flex: 1;
+  min-width: 0;
+}
+.str-video__search-input__container .str-video__search-input__clear-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+.str-video__search-input__container .str-video__search-input__icon {
+  padding: 0.25rem;
+}
+.str-video__search-input__container .str-video__search-input__icon--active,
+.str-video__search-input__container .str-video__search-input__icon {
+  display: inline-block;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.str-video {
+  --str-video__search-input__container--color: var(--str-video__text-color1);
+  --str-video__search-input__container--background-color: var(
+    --str-video__background-color0
+  );
+  --str-video__search-input__container--border-radius: var(
+    --str-video__border-radius-circle
+  );
+  --str-video__search-input__container--border-block-start: 1px solid
+    transparent;
+  --str-video__search-input__container--border-block-end: 1px solid transparent;
+  --str-video__search-input__container--border-inline-start: 1px solid
+    transparent;
+  --str-video__search-input__container--border-inline-end: 1px solid transparent;
+  --str-video__search-input__placeholder-color: var(--str-video__text-color2);
+  --str-video__search-input__icon--color: var(--str-video__text-color1);
+}
+
+.str-video__search-input__container.str-video__search-input__container--active {
+  border-color: var(--str-video__primary-color);
+}
+
+.str-video__search-input__container {
+  background: var(--str-video__search-input__container--background-color);
+  color: var(--str-video__search-input__container--color);
+  box-shadow: var(--str-video__search-input__container--box-shadow);
+  border-radius: var(--str-video__search-input__container--border-radius);
+  border-block-start: var(--str-video__search-input__container--border-block-start);
+  border-block-end: var(--str-video__search-input__container--border-block-end);
+  border-inline-start: var(--str-video__search-input__container--border-inline-start);
+  border-inline-end: var(--str-video__search-input__container--border-inline-end);
+}
+.str-video__search-input__container input {
+  background-color: transparent;
+  border: none;
+  outline: none;
+  color: inherit;
+  font-size: 13px;
+}
+.str-video__search-input__container input::placeholder {
+  color: var(--str-video__search-input__placeholder-color);
+}
+.str-video__search-input__container .str-video__search-input__icon {
+  mask-image: var(--str-video__icon--magnifier-glass);
+  -webkit-mask-image: var(--str-video__icon--magnifier-glass);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+  mask-size: 0.75rem 0.75rem;
+  -webkit-mask-size: 0.75rem 0.75rem;
+  background-color: var(--str-video__search-input__icon--color);
+}
+.str-video__search-input__container .str-video__search-input__clear-btn {
+  background-color: transparent;
+}
+.str-video__search-input__container .str-video__search-input__clear-btn .str-video__search-input__icon--active {
+  mask-image: var(--str-video__icon--close);
+  -webkit-mask-image: var(--str-video__icon--close);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+  mask-size: 0.75rem 0.75rem;
+  -webkit-mask-size: 0.75rem 0.75rem;
+  background-color: var(--str-video__search-input__icon--color);
+}
+
+.str-video__call-angular-host {
+  height: 100%;
+  max-height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.str-video__call {
+  background-color: var(--str-video__background-color2);
+  color: var(--str-video__text-color1);
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.str-video__call .str-video__stage {
+  flex: 1;
+  min-height: 0;
+  padding-inline: 0.375rem;
+}
+.str-video__call .str-video__stage-angular-host {
+  min-height: 0;
+  max-height: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.str-video__tooltip {
+  display: flex;
+  justify-content: center;
+  padding: 0.5rem 1rem;
+  z-index: 1;
+  max-width: 250px;
+  width: max-content;
+  white-space: initial;
+  overflow-wrap: break-word;
+}
+
+.str-video {
+  /* The border radius used for the borders of the component */
+  --str-video__tooltip--border-radius: var(--str-video__border-radius-xxxs);
+  /* The text/icon color of the component */
+  --str-video__tooltip--color: var(--str-video__text-color3);
+  /* The background color of the component */
+  --str-video__tooltip--background-color: var(--str-video__background-color4);
+  /* Top border of the component */
+  --str-video__tooltip--border-block-start: none;
+  /* Bottom border of the component */
+  --str-video__tooltip--border-block-end: none;
+  /* Left (right in RTL layout) border of the component */
+  --str-video__tooltip--border-inline-start: none;
+  /* Right (left in RTL layout) border of the component */
+  --str-video__tooltip--border-inline-end: none;
+  /* Box shadow applied to the component */
+  --str-video__tooltip--box-shadow: 0 0 20px var(--str-video__background-color2);
+}
+
+.str-video__tooltip {
+  background: var(--str-video__tooltip--background-color);
+  color: var(--str-video__tooltip--color);
+  box-shadow: var(--str-video__tooltip--box-shadow);
+  border-radius: var(--str-video__tooltip--border-radius);
+  border-block-start: var(--str-video__tooltip--border-block-start);
+  border-block-end: var(--str-video__tooltip--border-block-end);
+  border-inline-start: var(--str-video__tooltip--border-inline-start);
+  border-inline-end: var(--str-video__tooltip--border-inline-end);
+  font: var(--str-video__caption-text);
+}
+.str-video__tooltip::after {
+  background-color: var(--str-video__tooltip-background-color);
+}
+
+.str-video__copy-to-clipboard-button__popup {
+  color: var(--str-video__text-color1);
+  background-color: var(--str-video__secondary-color);
+  font-size: 12px;
+  box-shadow: none;
+}
+
+.str-video__video--wide {
+  width: 100%;
+  height: auto;
+}
+
+.str-video__video--tall {
+  height: 100%;
+  width: auto;
+  object-fit: contain !important;
+}
+
+.str-video__video-preview-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 500px;
+  height: 375px;
+}
+.str-video__video-preview-container .str-video__loading-indicator__icon {
+  height: 3rem;
+  width: 3rem;
+  mask-size: 3rem;
+}
+
+.str-video__base-video {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+.str-video__base-video.str-video__remote-video--mirror, .str-video__base-video.str-video__video-preview--mirror {
+  transform: scaleX(-1);
+}
+.str-video__base-video.str-video__video-preview--loading {
+  display: none;
+}
+
+.str-video {
+  /* The font color applied inside the component */
+  --str-video__video-preview-container--color: var(--str-video__text-color1);
+  /* The background color of the component */
+  --str-video__video-preview-container--background-color: var(--str-video__background-color5);
+  /* The border radius used for the borders of the component */
+  --str-video__video-preview-container--border-radius: var(--str-video__border-radius-xs);
+  /* The border used for the borders of the component */
+  --str-video__video-preview-container--border-block-start: 4px solid var(--str-video__primary-color);
+  /* The border used for the borders of the component */
+  --str-video__video-preview-container--border-block-end: 4px solid var(--str-video__primary-color);
+  /* The border used for the borders of the component */
+  --str-video__video-preview-container--border-inline-start: 4px solid var(--str-video__primary-color);
+  /* The border used for the borders of the component */
+  --str-video__video-preview-container--border-inline-end: 4px solid var(--str-video__primary-color);
+}
+
+.str-video__video-preview-container {
+  background: var(--str-video__video-preview-container--background-color);
+  color: var(--str-video__video-preview-container--color);
+  box-shadow: var(--str-video__video-preview-container--box-shadow);
+  border-radius: var(--str-video__video-preview-container--border-radius);
+  border-block-start: var(--str-video__video-preview-container--border-block-start);
+  border-block-end: var(--str-video__video-preview-container--border-block-end);
+  border-inline-start: var(--str-video__video-preview-container--border-inline-start);
+  border-inline-end: var(--str-video__video-preview-container--border-inline-end);
+  overflow: hidden;
+}
+
+.str-video__participant-placeholder {
+  aspect-ratio: 4/3;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.str-video__participant-placeholder .str-video__participant-placeholder--avatar {
+  width: 100px;
+  height: 100px;
+  object-fit: cover;
+}
+.str-video__participant-placeholder .str-video__participant-placeholder--initials-fallback {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100px;
+  height: 100px;
+}
+
+.str-video__participant-placeholder {
+  background: var(--str-video__background-color5);
+  border-radius: var(--str-video__border-radius-sm);
+}
+.str-video__participant-placeholder .str-video__participant-placeholder--avatar {
+  border-radius: var(--str-video__border-radius-circle);
+}
+.str-video__participant-placeholder .str-video__participant-placeholder--initials-fallback {
+  background-color: var(--str-video__primary-color);
+  border-radius: var(--str-video__border-radius-circle);
+  font-size: 32px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.str-video__participant,
+.str-video__participant-angular-host {
+  position: relative;
+  width: 100%;
+  max-width: 1280px;
+  min-height: 0;
+  max-height: 100%;
+  aspect-ratio: 4/3;
+}
+.str-video__participant .str-video__participant_details,
+.str-video__participant .str-video__call-controls__button,
+.str-video__participant-angular-host .str-video__participant_details,
+.str-video__participant-angular-host .str-video__call-controls__button {
+  transition: opacity 200ms ease-out;
+  opacity: 0.3;
+}
+.str-video__participant:hover .str-video__participant_details,
+.str-video__participant:hover .str-video__call-controls__button,
+.str-video__participant-angular-host:hover .str-video__participant_details,
+.str-video__participant-angular-host:hover .str-video__call-controls__button {
+  opacity: 1;
+}
+.str-video__participant > .str-video__call-controls__button,
+.str-video__participant-angular-host > .str-video__call-controls__button {
+  position: absolute;
+  top: 0.875rem;
+  right: 0.875rem;
+  z-index: 1;
+  padding: 0.3rem;
+}
+.str-video__participant--speaking video,
+.str-video__participant--speaking .str-video__participant-placeholder,
+.str-video__participant-angular-host--speaking video,
+.str-video__participant-angular-host--speaking .str-video__participant-placeholder {
+  outline: 2px solid var(--str-video__primary-color);
+}
+.str-video__participant .str-video__video-container,
+.str-video__participant-angular-host .str-video__video-container {
+  position: relative;
+  height: 100%;
+  min-height: 0;
+  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.str-video__participant .str-video__video-container .str-video__remote-video,
+.str-video__participant-angular-host .str-video__video-container .str-video__remote-video {
+  border-radius: var(--str-video__border-radius2);
+  width: 100%;
+  object-fit: cover;
+  background: var(--str-video__text-color3);
+}
+.str-video__participant .str-video__participant_details,
+.str-video__participant-angular-host .str-video__participant_details {
+  position: absolute;
+  left: 0.875rem;
+  bottom: 0.875rem;
+  display: flex;
+  align-items: center;
+  gap: 0.3125rem;
+}
+.str-video__participant .str-video__participant_details .str-video__participant_name,
+.str-video__participant-angular-host .str-video__participant_details .str-video__participant_name {
+  border-radius: var(--str-video__border-radius1);
+  background-color: var(--str-video__background-color4);
+  display: flex;
+  align-items: center;
+  gap: 0.3125rem;
+  padding: 4px 6px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.str-video__participant .str-video__participant_details .str-video__participant_name .str-video__participant_name--audio-muted,
+.str-video__participant-angular-host .str-video__participant_details .str-video__participant_name .str-video__participant_name--audio-muted {
+  width: 1rem;
+  height: 1rem;
+  mask-size: 1rem;
+  -webkit-mask-size: 1rem;
+  background-color: var(--str-video__text-color1);
+  mask-image: var(--str-video__icon--mic-off);
+  -webkit-mask-image: var(--str-video__icon--mic-off);
+}
+.str-video__participant .str-video__participant_details .str-video__participant_name .str-video__participant_name--dominant_speaker,
+.str-video__participant-angular-host .str-video__participant_details .str-video__participant_name .str-video__participant_name--dominant_speaker {
+  width: 1rem;
+  height: 1rem;
+  mask-size: 1rem;
+  -webkit-mask-size: 1rem;
+  background-color: var(--str-video__text-color1);
+  mask-image: var(--str-video__icon--dominant-speaker);
+  -webkit-mask-image: var(--str-video__icon--dominant-speaker);
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+}
+.str-video__participant .str-video__participant_details .str-video__participant_name .str-video__participant_name--video-muted,
+.str-video__participant-angular-host .str-video__participant_details .str-video__participant_name .str-video__participant_name--video-muted {
+  width: 1rem;
+  height: 1rem;
+  mask-size: 1rem;
+  -webkit-mask-size: 1rem;
+  background-color: var(--str-video__text-color1);
+  mask-image: var(--str-video__icon--camera-off);
+  -webkit-mask-image: var(--str-video__icon--camera-off);
+}
+.str-video__participant .str-video__participant_details .str-video__participant_name .str-video__participant_name--pinned,
+.str-video__participant-angular-host .str-video__participant_details .str-video__participant_name .str-video__participant_name--pinned {
+  width: 1rem;
+  height: 1rem;
+  mask-size: 1rem;
+  -webkit-mask-size: 1rem;
+  background-color: var(--str-video__text-color1);
+  width: 0.8rem;
+  -webkit-mask-size: 0.8rem;
+  height: 1rem;
+  mask-size: 0.8rem;
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+  mask-image: var(--str-video__icon--pin);
+  -webkit-mask-image: var(--str-video__icon--pin);
+}
+.str-video__participant .str-video__participant_details .str-video__participant_name .str-video__participant_name--network-stats,
+.str-video__participant-angular-host .str-video__participant_details .str-video__participant_name .str-video__participant_name--network-stats {
+  width: 1rem;
+  height: 1rem;
+  mask-size: 1rem;
+  -webkit-mask-size: 1rem;
+  background-color: var(--str-video__text-color1);
+  background-image: var(--str-video__icon--network-quality);
+  cursor: pointer;
+  margin-right: 0.625rem;
+}
+.str-video__participant .str-video__participant_details .str-video__participant__connection-quality,
+.str-video__participant-angular-host .str-video__participant_details .str-video__participant__connection-quality {
+  width: 1.5rem;
+  height: 1.5rem;
+  display: block;
+  background-size: cover;
+}
+.str-video__participant .str-video__participant_details .str-video__participant__connection-quality--poor,
+.str-video__participant-angular-host .str-video__participant_details .str-video__participant__connection-quality--poor {
+  background-image: var(--str-video__icon--connection-quality-poor);
+}
+.str-video__participant .str-video__participant_details .str-video__participant__connection-quality--good,
+.str-video__participant-angular-host .str-video__participant_details .str-video__participant__connection-quality--good {
+  background-image: var(--str-video__icon--connection-quality-good);
+}
+.str-video__participant .str-video__participant_details .str-video__participant__connection-quality--excellent,
+.str-video__participant-angular-host .str-video__participant_details .str-video__participant__connection-quality--excellent {
+  background-image: var(--str-video__icon--connection-quality-excellent);
+}
+
+.str-video__paginated-grid-layout--wrapper {
+  flex-grow: 1;
+}
+
+.str-video__paginated-grid-layout {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: space-between;
+}
+.str-video__paginated-grid-layout .str-video__paginated-grid-layout--group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
+  max-width: 110vh;
+  padding-inline: 1.25rem;
+  margin: auto;
+  width: 100%;
+}
+.str-video__paginated-grid-layout .str-video__paginated-grid-layout--group .str-video__participant {
+  flex: 0 1 calc(25% - 6px);
+}
+.str-video__paginated-grid-layout .str-video__paginated-grid-layout--group.str-video__paginated-grid-layout--one .str-video__participant {
+  flex: 0 1 calc(100% - 6px);
+}
+.str-video__paginated-grid-layout .str-video__paginated-grid-layout--group.str-video__paginated-grid-layout--two-four .str-video__participant {
+  flex: 0 1 calc(50% - 6px);
+}
+.str-video__paginated-grid-layout .str-video__paginated-grid-layout--group.str-video__paginated-grid-layout--five-nine .str-video__participant {
+  flex: 0 1 calc(33% - 6px);
+}
+
+.str-video__speaker-layout--wrapper {
+  flex-grow: 1;
+  overflow-y: hidden;
+}
+
+.str-video__speaker-layout {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  gap: 1rem;
+  padding-inline: 2px;
+}
+.str-video__speaker-layout .str-video__participant {
+  aspect-ratio: 16/9;
+}
+.str-video__speaker-layout .str-video__speaker-layout--spotlight {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 0;
+}
+.str-video__speaker-layout .str-video__speaker-layout--spotlight .str-video__participant {
+  width: 100%;
+  max-width: 110vh;
+}
+.str-video__speaker-layout .str-video__speaker-layout--spotlight .str-video__screen-share {
+  outline: none;
+  border-radius: unset;
+  object-fit: contain;
+}
+.str-video__speaker-layout .str-video__speaker-layout--spotlight .str-video__participant_details,
+.str-video__speaker-layout .str-video__speaker-layout--spotlight .str-video__call-controls__button {
+  opacity: 1;
+}
+.str-video__speaker-layout .str-video__speaker-layout--participants-bar-buttons-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.str-video__speaker-layout .str-video__speaker-layout--participants-bar-buttons-wrapper .str-video__speaker-layout--participants-bar-button-left {
+  position: absolute;
+  left: 0.5rem;
+  z-index: 1;
+}
+.str-video__speaker-layout .str-video__speaker-layout--participants-bar-buttons-wrapper .str-video__speaker-layout--participants-bar-button-left .str-video__call-controls__button--icon {
+  width: 0.8rem;
+  height: 0.8rem;
+}
+.str-video__speaker-layout .str-video__speaker-layout--participants-bar-buttons-wrapper .str-video__speaker-layout--participants-bar-button-right {
+  position: absolute;
+  right: 0.5rem;
+  z-index: 1;
+}
+.str-video__speaker-layout .str-video__speaker-layout--participants-bar-buttons-wrapper .str-video__speaker-layout--participants-bar-button-right .str-video__call-controls__button--icon {
+  width: 0.8rem;
+  height: 0.8rem;
+}
+.str-video__speaker-layout .str-video__speaker-layout--participants-bar-wrapper {
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.str-video__speaker-layout .str-video__speaker-layout--participants-bar-wrapper::-webkit-scrollbar {
+  display: none;
+}
+.str-video__speaker-layout .str-video__speaker-layout--participants-bar-wrapper .str-video__speaker-layout--participants-bar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.str-video__speaker-layout .str-video__speaker-layout--participants-bar-wrapper .str-video__speaker-layout--participants-bar .str-video__speaker-layout--participant-tile {
+  width: 280px;
+  min-width: 280px;
+  max-width: 25vh;
+  padding-inline: 5px;
+  padding-block: 2px;
+}
+
+.str-video__icon {
+  background-color: var(--str-video__text-color1);
+}
+.str-video__icon--chat {
+  mask-image: var(--str-video__icon--chat);
+  -webkit-mask-image: var(--str-video__icon--chat);
+}
+.str-video__icon--reactions {
+  -webkit-mask-image: var(--str-video__icon--reactions);
+  mask-image: var(--str-video__icon--reactions);
+}
+.str-video__icon--recording-on {
+  mask-image: var(--str-video__icon--recording-on);
+  -webkit-mask-image: var(--str-video__icon--recording-on);
+  background-color: var(--str-video__danger-color1);
+}
+.str-video__icon--recording-off {
+  mask-image: var(--str-video__icon--recording-off);
+  -webkit-mask-image: var(--str-video__icon--recording-off);
+}
+.str-video__icon--screen-share-on {
+  mask-image: var(--str-video__icon--screen-share-on);
+  -webkit-mask-image: var(--str-video__icon--screen-share-on);
+}
+.str-video__icon--screen-share-off {
+  mask-image: var(--str-video__icon--screen-share-off);
+  -webkit-mask-image: var(--str-video__icon--screen-share-off);
+}
+.str-video__icon--caret-down {
+  transform: rotate(180deg);
+  mask-image: var(--str-video__icon--caret);
+  -webkit-mask-image: var(--str-video__icon--caret);
+}
+.str-video__icon--caret-up {
+  mask-image: var(--str-video__icon--caret);
+  -webkit-mask-image: var(--str-video__icon--caret);
+}
+.str-video__icon--caret-right {
+  transform: rotate(90deg);
+  mask-image: var(--str-video__icon--caret);
+  -webkit-mask-image: var(--str-video__icon--caret);
+}
+.str-video__icon--caret-left {
+  transform: rotate(-90deg);
+  mask-image: var(--str-video__icon--caret);
+  -webkit-mask-image: var(--str-video__icon--caret);
+}
+.str-video__icon--mic {
+  mask-image: var(--str-video__icon--mic);
+  -webkit-mask-image: var(--str-video__icon--mic);
+}
+.str-video__icon--mic-off {
+  mask-image: var(--str-video__icon--mic-off);
+  -webkit-mask-image: var(--str-video__icon--mic-off);
+}
+.str-video__icon--camera {
+  mask-image: var(--str-video__icon--camera);
+  -webkit-mask-image: var(--str-video__icon--camera);
+}
+.str-video__icon--camera-off {
+  mask-image: var(--str-video__icon--camera-off);
+  -webkit-mask-image: var(--str-video__icon--camera-off);
+}
+.str-video__icon--camera-off-outline {
+  mask-image: var(--str-video__icon--camera-off-outline);
+  -webkit-mask-image: var(--str-video__icon--camera-off-outline);
+}
+.str-video__icon--call-end {
+  mask-image: var(--str-video__icon--call-end);
+  -webkit-mask-image: var(--str-video__icon--call-end);
+}
+.str-video__icon--info {
+  -webkit-mask-image: var(--str-video__icon--info-icon);
+  mask-image: var(--str-video__icon--info-icon);
+}
+.str-video__icon--info-document {
+  -webkit-mask-image: var(--str-video__icon--info-document);
+  mask-image: var(--str-video__icon--info-document);
+}
+.str-video__icon--stats {
+  -webkit-mask-image: var(--str-video__icon--stats);
+  mask-image: var(--str-video__icon--stats);
+}
+.str-video__icon--participants {
+  mask-image: var(--str-video__icon--participants);
+  -webkit-mask-image: var(--str-video__icon--participants);
+}
+.str-video__icon--user-plus {
+  mask-image: var(--str-video__icon--user-plus);
+  -webkit-mask-image: var(--str-video__icon--user-plus);
+}
+.str-video__icon--speaker {
+  mask-image: var(--str-video__icon--speaker);
+  -webkit-mask-image: var(--str-video__icon--speaker);
+}
+.str-video__icon--ellipsis {
+  mask-image: var(--str-video__icon--ellipsis);
+  -webkit-mask-image: var(--str-video__icon--ellipsis);
+}
+.str-video__icon--grid {
+  mask-image: var(--str-video__icon--grid);
+  -webkit-mask-image: var(--str-video__icon--grid);
+}
+.str-video__icon--pin {
+  mask-image: var(--str-video__icon--pin);
+  -webkit-mask-image: var(--str-video__icon--pin);
+}
+.str-video__icon--no-audio {
+  mask-image: var(--str-video__icon--no-audio);
+  -webkit-mask-image: var(--str-video__icon--no-audio);
+}
+.str-video__icon--not-allowed {
+  mask-image: var(--str-video__icon--not-allowed);
+  -webkit-mask-image: var(--str-video__icon--not-allowed);
+}
+.str-video__icon--call-recordings {
+  mask-image: var(--str-video__icon--film-roll);
+  -webkit-mask-image: var(--str-video__icon--film-roll);
+}
+.str-video__icon--device-settings {
+  mask-image: var(--str-video__icon--settings);
+  -webkit-mask-image: var(--str-video__icon--settings);
+}
+.str-video__icon--refresh {
+  mask-image: var(--str-video__icon--refresh);
+  -webkit-mask-image: var(--str-video__icon--refresh);
+}
+
+.str-video__icon {
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  display: block;
+  width: 1.375rem;
+  height: 1.375rem;
+}
+
+.str-video__debug__track-stats {
+  font-size: 0.6rem;
+  overflow: scroll;
+  height: 600px;
+  width: 500px;
+  background-color: var(--str-video__background-color1);
+  color: var(--str-video__text-color1);
+  z-index: 10;
+}
+
+.str-video__debug__track-stats-icon {
+  display: inline-block;
+  width: 1.5rem;
+  height: 1.5rem;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: var(--str-video__icon--network-quality);
+  cursor: pointer;
+}
+
+/*# sourceMappingURL=styles.css.map */