@stream-io/video-react-sdk 1.32.4 → 1.33.0

package/dist/css/embedded.css

@@ -0,0 +1,3630 @@
+@charset "UTF-8";
+.str-video *,
+.str-video *::before,
+.str-video *::after {
+  box-sizing: border-box;
+}
+
+.str-video {
+  --str-video__brand-color1: #005fff;
+  --str-video__brand-color2: #69e5f6;
+  --str-video__brand-color3: #00e2a1;
+  --str-video__brand-color4: #ffd646;
+  --str-video__brand-color5: #dc433b;
+  --str_video__brand-color6: #b38af8;
+  --str-video__base-color1: #e3e4e5;
+  --str-video__base-color2: #979ca0;
+  --str-video__base-color3: #4c535b;
+  --str-video__base-color4: #000000;
+  --str-video__base-color5: #0c0d0e;
+  --str-video__base-color6: #19232d;
+  --str-video__base-color7: #101213;
+  --str-video__backdrop1: rgba(0, 0, 0, 0.5);
+  --str-video__button-default-base: #19232d;
+  --str-video__button-default-hover: #323b44;
+  --str-video__button-default-pressed: #0c0d0e;
+  --str-video__button-default-active: #19232d;
+  --str-video__button-default-disabled: #1e262e;
+  --str-video__button-primary-base: #19232d;
+  --str-video__button-primary-hover: #4c8fff;
+  --str-video__button-primary-pressed: #0c48ab;
+  --str-video__button-primary-active: #005fff;
+  --str-video__button-secondary-base: #19232d;
+  --str-video__button-secondary-hover: #e96962;
+  --str-video__button-secondary-pressed: #6a3233;
+  --str-video__button-secondary-active: #dc433b;
+  --str-video__button-tertiary-base: #dc433b;
+  --str-video__button-tertiary-hover: #e96962;
+  --str-video__button-tertiary-pressed: #6a3233;
+  --str-video__button-tertiary-active: #31292f;
+  --str-video__icon-default: #eff0f1;
+  --str-video__icon-hover: #eff0f1;
+  --str-video__icon-pressed: #656b72;
+  --str-video__icon-active: #e3e4e5;
+  --str-video__icon-alert: #e3e4e5;
+  --str-video__icon-disabled: #7e8389;
+  --str-video__alert-success: #00e2a1;
+  --str-video__alert-caution: #ffd646;
+  --str-video__alert-warning: #dc433b;
+  --str-video__alert-success-background: rgba(0, 226, 161, 0.5);
+  --str-video__alert-caution-background: rgba(255, 214, 70, 0.5);
+  --str-video__alert-warning-background: rgba(220, 67, 59, 0.5);
+  --str-video__font-size-xxs: 0.625rem;
+  --str-video__font-size-xs: 0.75rem;
+  --str-video__font-size-sm: 0.875rem;
+  --str-video__font-size-md: 1rem;
+  --str-video__font-size-lg: 1.125rem;
+  --str-video__font-size-xl: 1.25rem;
+  --str-video__font-size-xxl: 1.5rem;
+  --str-video__border-radius-xxs: 4px;
+  --str-video__border-radius-xs: 8px;
+  --str-video__border-radius-sm: 12px;
+  --str-video__border-radius-md: 18px;
+  --str-video__border-radius-lg: 24px;
+  --str-video__border-radius-xl: 30px;
+  --str-video__border-radius-xxl: 48px;
+  --str-video__border-radius-circle: 999px;
+  --str-video__spacing-xxs: 4px;
+  --str-video__spacing-xs: 6px;
+  --str-video__spacing-sm: 8px;
+  --str-video__spacing-md: 12px;
+  --str-video__spacing-lg: 16px;
+  --str-video__spacing-xl: 20px;
+  --str-video__primary-color: #005fff;
+  --str-video__secondary-color: #669fff;
+  --str-video__text-color1: #ffffff;
+  --str-video__text-color2: #b4b7bb;
+  --str-video__text-color3: #72767e;
+  --str-video__text-color4: #f7f7f8;
+  --str-video__info-color: #4ce68c;
+  --str-video__info-color--accent: #20e070;
+  --str-video__danger-color: #ff3742;
+  --str-video__danger-color--accent: #ff000e;
+  --str-video__background-color0: #000000;
+  --str-video__background-color1: #1c1e22;
+  --str-video__background-color2: #272a30;
+  --str-video__background-color3: #f4f4f5;
+  --str-video__background-color4: #121416;
+  --str-video__background-color5: #1d2938;
+  --str-video__background-color6: #b4b7bb;
+  --str-video__background-color7: #72767e;
+  --str-video__overlay-color: rgba(39, 42, 48, 0.75);
+  --str-video__livestream-overlay-color: rgba(39, 42, 48, 0.25);
+  --str-video__livestream-overlay-color-hovered: rgba(39, 42, 48, 0.5);
+  --str-video__icon--call-accept: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOSAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xNy41MSAxMi4zODJDMTYuMjggMTIuMzgyIDE1LjA5IDEyLjE4MiAxMy45OCAxMS44MjJDMTMuNjMgMTEuNzAyIDEzLjI0IDExLjc5MiAxMi45NyAxMi4wNjJMMTEuNCAxNC4wMzJDOC41NyAxMi42ODIgNS45MiAxMC4xMzIgNC41MSA3LjIwMTk1TDYuNDYgNS41NDE5NUM2LjczIDUuMjYxOTUgNi44MSA0Ljg3MTk1IDYuNyA0LjUyMTk1QzYuMzMgMy40MTE5NSA2LjE0IDIuMjIxOTUgNi4xNCAwLjk5MTk1M0M2LjE0IDAuNDUxOTUzIDUuNjkgMC4wMDE5NTMxMyA1LjE1IDAuMDAxOTUzMTNIMS42OUMxLjE1IDAuMDAxOTUzMTIgMC41IDAuMjQxOTUzIDAuNSAwLjk5MTk1M0MwLjUgMTAuMjgyIDguMjMgMTguMDAyIDE3LjUxIDE4LjAwMkMxOC4yMiAxOC4wMDIgMTguNSAxNy4zNzIgMTguNSAxNi44MjJWMTMuMzcyQzE4LjUgMTIuODMyIDE4LjA1IDEyLjM4MiAxNy41MSAxMi4zODJaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
+  --str-video__icon--call-end: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTQuNTgwMSAxNi4wMzA0TDYuNTgwMSAxNC40NDA0QzcuMDYwMSAxNC4wNjA0IDcuMzQwMSAxMy40ODA0IDcuMzQwMSAxMi44NzA0VjEwLjI3MDRDMTAuMzYwMSA5LjI5MDQgMTMuNjMwMSA5LjI4MDQgMTYuNjYwMSAxMC4yNzA0VjEyLjg4MDRDMTYuNjYwMSAxMy40OTA0IDE2Ljk0MDEgMTQuMDcwNCAxNy40MjAxIDE0LjQ1MDRMMTkuNDEwMSAxNi4wMzA0QzIwLjIxMDEgMTYuNjYwNCAyMS4zNTAxIDE2LjYwMDQgMjIuMDcwMSAxNS44ODA0TDIzLjI5MDEgMTQuNjYwNEMyNC4wOTAxIDEzLjg2MDQgMjQuMDkwMSAxMi41MzA0IDIzLjI0MDEgMTEuNzgwNEMxNi44MzAxIDYuMTIwNCA3LjE3MDEgNi4xMjA0IDAuNzYwMTAzIDExLjc4MDRDLTAuMDg5ODk3IDEyLjUzMDQgLTAuMDg5ODk3IDEzLjg2MDQgMC43MTAxMDMgMTQuNjYwNEwxLjkzMDEgMTUuODgwNEMyLjY0MDEgMTYuNjAwNCAzLjc4MDEgMTYuNjYwNCA0LjU4MDEgMTYuMDMwNFoiIGZpbGw9IiNCMEI0QjciLz4KPC9nPgo8L3N2Zz4K");
+  --str-video__icon--camera: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3IDEwLjVWN0MxNyA2LjQ1IDE2LjU1IDYgMTYgNkg0QzMuNDUgNiAzIDYuNDUgMyA3VjE3QzMgMTcuNTUgMy40NSAxOCA0IDE4SDE2QzE2LjU1IDE4IDE3IDE3LjU1IDE3IDE3VjEzLjVMMTkuMjkgMTUuNzlDMTkuOTIgMTYuNDIgMjEgMTUuOTcgMjEgMTUuMDhWOC45MUMyMSA4LjAyIDE5LjkyIDcuNTcgMTkuMjkgOC4yTDE3IDEwLjVaIiBmaWxsPSIjQjBCNEI3Ii8+Cjwvc3ZnPgo=");
+  --str-video__icon--camera-off: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIxLjI5MTUgMTQuNzY5OVY5LjQ3OTlDMjEuMjkxNSA4LjU4OTkgMjAuMjExNSA4LjEzOTkgMTkuNTgxNSA4Ljc2OTlMMTcuMjkxNSAxMS4wNjk5VjcuNTY5OUMxNy4yOTE1IDcuMDE5OSAxNi44NDE1IDYuNTY5OSAxNi4yOTE1IDYuNTY5OUgxMC42ODE1TDE5LjU5MTUgMTUuNDc5OUMyMC4yMTE1IDE2LjEwOTkgMjEuMjkxNSAxNS42NTk5IDIxLjI5MTUgMTQuNzY5OVpNMy4wMDE0OCAzLjEyOTlDMi42MTE0OCAzLjUxOTkgMi42MTE0OCA0LjE0OTkgMy4wMDE0OCA0LjUzOTlMNS4wMjE0OCA2LjU2OTlINC4yOTE0OEMzLjc0MTQ4IDYuNTY5OSAzLjI5MTQ4IDcuMDE5OSAzLjI5MTQ4IDcuNTY5OVYxNy41Njk5QzMuMjkxNDggMTguMTE5OSAzLjc0MTQ4IDE4LjU2OTkgNC4yOTE0OCAxOC41Njk5SDE2LjI5MTVDMTYuNTAxNSAxOC41Njk5IDE2LjY4MTUgMTguNDg5OSAxNi44NDE1IDE4LjM4OTlMMTkuMzIxNSAyMC44Njk5QzE5LjcxMTUgMjEuMjU5OSAyMC4zNDE1IDIxLjI1OTkgMjAuNzMxNSAyMC44Njk5QzIxLjEyMTUgMjAuNDc5OSAyMS4xMjE1IDE5Ljg0OTkgMjAuNzMxNSAxOS40NTk5TDQuNDExNDggMy4xMjk5QzQuMDIxNDggMi43Mzk5IDMuMzkxNDggMi43Mzk5IDMuMDAxNDggMy4xMjk5WiIgZmlsbD0iI0IwQjRCNyIvPgo8L3N2Zz4K");
+  --str-video__icon--caret: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuMjU0ODggMTAuNDg4NUw5LjQxMzIxIDguMzMwMThDOS43MzgyMSA4LjAwNTE4IDEwLjI2MzIgOC4wMDUxOCAxMC41ODgyIDguMzMwMThMMTIuNzQ2NSAxMC40ODg1QzEzLjI3MTUgMTEuMDEzNSAxMi44OTY1IDExLjkxMzUgMTIuMTU0OSAxMS45MTM1SDcuODM4MjFDNy4wOTY1NCAxMS45MTM1IDYuNzI5ODggMTEuMDEzNSA3LjI1NDg4IDEwLjQ4ODVaIiBmaWxsPSIjRTNFNEU1Ii8+Cjwvc3ZnPgo=");
+  --str-video__icon--caret-down: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuMjU0ODggMTAuNDg4NUw5LjQxMzIxIDguMzMwMThDOS43MzgyMSA4LjAwNTE4IDEwLjI2MzIgOC4wMDUxOCAxMC41ODgyIDguMzMwMThMMTIuNzQ2NSAxMC40ODg1QzEzLjI3MTUgMTEuMDEzNSAxMi44OTY1IDExLjkxMzUgMTIuMTU0OSAxMS45MTM1SDcuODM4MjFDNy4wOTY1NCAxMS45MTM1IDYuNzI5ODggMTEuMDEzNSA3LjI1NDg4IDEwLjQ4ODVaIiBmaWxsPSIjRTNFNEU1Ii8+Cjwvc3ZnPgo=");
+  --str-video__icon--caret-up: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuMjU0ODggMTAuNDg4NUw5LjQxMzIxIDguMzMwMThDOS43MzgyMSA4LjAwNTE4IDEwLjI2MzIgOC4wMDUxOCAxMC41ODgyIDguMzMwMThMMTIuNzQ2NSAxMC40ODg1QzEzLjI3MTUgMTEuMDEzNSAxMi44OTY1IDExLjkxMzUgMTIuMTU0OSAxMS45MTM1SDcuODM4MjFDNy4wOTY1NCAxMS45MTM1IDYuNzI5ODggMTEuMDEzNSA3LjI1NDg4IDEwLjQ4ODVaIiBmaWxsPSIjRTNFNEU1Ii8+Cjwvc3ZnPgo=");
+  --str-video__icon--chevron-down: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuNDEgOC4yOTUwNEwxMiAxMi44NzVMMTYuNTkgOC4yOTUwNEwxOCA5LjcwNTA0TDEyIDE1LjcwNUw2IDkuNzA1MDRMNy40MSA4LjI5NTA0WiIgZmlsbD0iI0IwQjRCNyIvPgo8L3N2Zz4K");
+  --str-video__icon--chevron-up: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuNDEgMTUuNzA1TDEyIDExLjEyNUwxNi41OSAxNS43MDVMMTggMTQuMjk1TDEyIDguMjk1MDRMNiAxNC4yOTVMNy40MSAxNS43MDVaIiBmaWxsPSIjRTNFNEU1Ii8+Cjwvc3ZnPgo=");
+  --str-video__icon--chevron-right: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTYuOTk3NjcgMjEuMDE0OUM3LjQ4NzY3IDIxLjUwNDkgOC4yNzc2NyAyMS41MDQ5IDguNzY3NjcgMjEuMDE0OUwxNy4wNzc3IDEyLjcwNDlDMTcuNDY3NyAxMi4zMTQ5IDE3LjQ2NzcgMTEuNjg0OSAxNy4wNzc3IDExLjI5NDlMOC43Njc2NyAyLjk4NDkzQzguMjc3NjcgMi40OTQ5MyA3LjQ4NzY3IDIuNDk0OTMgNi45OTc2NyAyLjk4NDkzQzYuNTA3NjcgMy40NzQ5MyA2LjUwNzY3IDQuMjY0OTMgNi45OTc2NyA0Ljc1NDkzTDE0LjIzNzcgMTIuMDA0OUw2Ljk4NzY3IDE5LjI1NDlDNi41MDc2NyAxOS43MzQ5IDYuNTA3NjcgMjAuNTM0OSA2Ljk5NzY3IDIxLjAxNDlaIiBmaWxsPSIjQjBCNEI3Ii8+CjwvZz4KPC9zdmc+Cg==");
+  --str-video__icon--call-latency: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyLjAwMjkgMTcuOTk4OEMxMi41NTUyIDE3Ljk5ODggMTMuMDAyOSAxNy41NTExIDEzLjAwMjkgMTYuOTk4OEMxMy4wMDI5IDE2LjQ0NjUgMTIuNTU1MiAxNS45OTg4IDEyLjAwMjkgMTUuOTk4OEMxMS40NTA2IDE1Ljk5ODggMTEuMDAyOSAxNi40NDY1IDExLjAwMjkgMTYuOTk4OEMxMS4wMDI5IDE3LjU1MTEgMTEuNDUwNiAxNy45OTg4IDEyLjAwMjkgMTcuOTk4OFoiIGZpbGw9IiNFM0U0RTUiLz4KPHBhdGggZD0iTTcuMDAyOTMgMTIuOTk4OEM3LjU1NTIxIDEyLjk5ODggOC4wMDI5MyAxMi41NTExIDguMDAyOTMgMTEuOTk4OEM4LjAwMjkzIDExLjQ0NjUgNy41NTUyMSAxMC45OTg4IDcuMDAyOTMgMTAuOTk4OEM2LjQ1MDY0IDEwLjk5ODggNi4wMDI5MyAxMS40NDY1IDYuMDAyOTMgMTEuOTk4OEM2LjAwMjkzIDEyLjU1MTEgNi40NTA2NCAxMi45OTg4IDcuMDAyOTMgMTIuOTk4OFoiIGZpbGw9IiNFM0U0RTUiLz4KPHBhdGggZD0iTTE3LjAwMjkgMTIuOTk4OEMxNy41NTUyIDEyLjk5ODggMTguMDAyOSAxMi41NTExIDE4LjAwMjkgMTEuOTk4OEMxOC4wMDI5IDExLjQ0NjUgMTcuNTU1MiAxMC45OTg4IDE3LjAwMjkgMTAuOTk4OEMxNi40NTA2IDEwLjk5ODggMTYuMDAyOSAxMS40NDY1IDE2LjAwMjkgMTEuOTk4OEMxNi4wMDI5IDEyLjU1MTEgMTYuNDUwNiAxMi45OTg4IDE3LjAwMjkgMTIuOTk4OFoiIGZpbGw9IiNFM0U0RTUiLz4KPHBhdGggZD0iTTEyLjAwMjkgMi45OTg3OEMxMS40NTI5IDIuOTk4NzggMTEuMDAyOSAzLjQ0ODc4IDExLjAwMjkgMy45OTg3OFY1Ljk5ODc4QzExLjAwMjkgNi41NDg3OCAxMS40NTI5IDYuOTk4NzggMTIuMDAyOSA2Ljk5ODc4QzEyLjU1MjkgNi45OTg3OCAxMy4wMDI5IDYuNTQ4NzggMTMuMDAyOSA1Ljk5ODc4VjUuMDc4NzhDMTYuMzEyOSA1LjU1ODc4IDE4Ljg3MjkgOC4zMjg3OCAxOS4wMDI5IDExLjczODhDMTkuMTQyOSAxNS41ODg4IDE1Ljk3MjkgMTguOTM4OCAxMi4xMjI5IDE4Ljk5ODhDOC4xOTI5MyAxOS4wNTg4IDUuMDAyOTMgMTUuOTA4OCA1LjAwMjkzIDExLjk5ODhDNS4wMDI5MyAxMC4zMTg4IDUuNTkyOTMgOC43Nzg3OCA2LjU4MjkzIDcuNTc4NzhMMTEuMjkyOSAxMi4yOTg4QzExLjY4MjkgMTIuNjg4OCAxMi4zMTI5IDEyLjY4ODggMTIuNzAyOSAxMi4yOTg4QzEzLjA5MjkgMTEuOTA4OCAxMy4wOTI5IDExLjI3ODggMTIuNzAyOSAxMC44ODg4TDcuMjYyOTMgNS40NTg3OEM2Ljg4MjkzIDUuMDc4NzggNi4yNjI5MyA1LjA2ODc4IDUuODYyOTMgNS40Mzg3OEM0LjEwMjkzIDcuMDY4NzggMy4wMDI5MyA5LjM5ODc4IDMuMDAyOTMgMTEuOTk4OEMzLjAwMjkzIDE3LjAzODggNy4xNDI5MyAyMS4xMTg4IDEyLjIxMjkgMjAuOTk4OEMxNi45MTI5IDIwLjg4ODggMjAuODQyOSAxNi45ODg4IDIwLjk5MjkgMTIuMjg4OEMyMS4xNjI5IDcuMTg4NzggMTcuMDcyOSAyLjk5ODc4IDEyLjAwMjkgMi45OTg3OFoiIGZpbGw9IiNFM0U0RTUiLz4KPC9zdmc+Cg==");
+  --str-video__icon--close: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTE4LjI5OTcgNS43MDk5N0MxNy45MDk3IDUuMzE5OTcgMTcuMjc5NyA1LjMxOTk3IDE2Ljg4OTcgNS43MDk5N0wxMS45OTk3IDEwLjU5TDcuMTA5NzMgNS42OTk5N0M2LjcxOTczIDUuMzA5OTcgNi4wODk3MyA1LjMwOTk3IDUuNjk5NzMgNS42OTk5N0M1LjMwOTczIDYuMDg5OTcgNS4zMDk3MyA2LjcxOTk3IDUuNjk5NzMgNy4xMDk5N0wxMC41ODk3IDEyTDUuNjk5NzMgMTYuODlDNS4zMDk3MyAxNy4yOCA1LjMwOTczIDE3LjkxIDUuNjk5NzMgMTguM0M2LjA4OTczIDE4LjY5IDYuNzE5NzMgMTguNjkgNy4xMDk3MyAxOC4zTDExLjk5OTcgMTMuNDFMMTYuODg5NyAxOC4zQzE3LjI3OTcgMTguNjkgMTcuOTA5NyAxOC42OSAxOC4yOTk3IDE4LjNDMTguNjg5NyAxNy45MSAxOC42ODk3IDE3LjI4IDE4LjI5OTcgMTYuODlMMTMuNDA5NyAxMkwxOC4yOTk3IDcuMTA5OTdDMTguNjc5NyA2LjcyOTk3IDE4LjY3OTcgNi4wODk5NyAxOC4yOTk3IDUuNzA5OTdaIiBmaWxsPSIjQjBCNEI3Ii8+CjwvZz4KPC9zdmc+Cg==");
+  --str-video__icon--connection-quality-poor: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzMiIGhlaWdodD0iMzMiIHZpZXdCb3g9IjAgMCAzMyAzMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuMjU0ODgzIDYuMjVDMC4yNTQ4ODMgMi45MzYyOSAyLjk0MTE3IDAuMjUgNi4yNTQ4OCAwLjI1SDMyLjI1NDlWMjYuMjVDMzIuMjU0OSAyOS41NjM3IDI5LjU2ODYgMzIuMjUgMjYuMjU0OSAzMi4yNUgwLjI1NDg4M1Y2LjI1WiIgZmlsbD0iIzBDMEQwRSIgZmlsbC1vcGFjaXR5PSIwLjY1Ii8+CjxwYXRoIGQ9Ik0xNi4yNTQ5IDIwLjI1TDE2LjI1NDkgMTUuMjUiIHN0cm9rZT0iI0UzRTRFNSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTExLjI1NDkgMjAuMjVMMTEuMjU0OSAxOC4yNSIgc3Ryb2tlPSIjREM0MzNCIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMjEuMjU0OSAyMC4yNUwyMS4yNTQ5IDEyLjI1IiBzdHJva2U9IiNFM0U0RTUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");
+  --str-video__icon--connection-quality-good: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzMiIGhlaWdodD0iMzMiIHZpZXdCb3g9IjAgMCAzMyAzMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuOTI0ODA1IDYuMjVDMC45MjQ4MDUgMi45MzYyOSAzLjYxMTEgMC4yNSA2LjkyNDggMC4yNUgzMi45MjQ4VjI2LjI1QzMyLjkyNDggMjkuNTYzNyAzMC4yMzg1IDMyLjI1IDI2LjkyNDggMzIuMjVIMC45MjQ4MDVWNi4yNVoiIGZpbGw9IiMwQzBEMEUiIGZpbGwtb3BhY2l0eT0iMC42NSIvPgo8cGF0aCBkPSJNMTYuOTI0OCAyMC4yNUwxNi45MjQ4IDE1LjI1IiBzdHJva2U9IiMwMEUyQTEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0xMS45MjQ4IDIwLjI1TDExLjkyNDggMTguMjUiIHN0cm9rZT0iIzAwRTJBMSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTIxLjkyNDggMjAuMjVMMjEuOTI0OCAxMi4yNSIgc3Ryb2tlPSIjRTNFNEU1IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K");
+  --str-video__icon--connection-quality-excellent: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzMiIGhlaWdodD0iMzMiIHZpZXdCb3g9IjAgMCAzMyAzMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuMjU0ODgzIDYuMjVDMC4yNTQ4ODMgMi45MzYyOSAyLjk0MTE3IDAuMjUgNi4yNTQ4OCAwLjI1SDMyLjI1NDlWMjYuMjVDMzIuMjU0OSAyOS41NjM3IDI5LjU2ODYgMzIuMjUgMjYuMjU0OSAzMi4yNUgwLjI1NDg4M1Y2LjI1WiIgZmlsbD0iIzBDMEQwRSIgZmlsbC1vcGFjaXR5PSIwLjY1Ii8+CjxwYXRoIGQ9Ik0xNi4yNTQ5IDIwLjI1TDE2LjI1NDkgMTUuMjUiIHN0cm9rZT0iIzAwRTJBMSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTExLjI1NDkgMjAuMjVMMTEuMjU0OSAxOC4yNSIgc3Ryb2tlPSIjMDBFMkExIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMjEuMjU0OSAyMC4yNUwyMS4yNTQ5IDEyLjI1IiBzdHJva2U9IiMwMEUyQTEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");
+  --str-video__icon--download: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyOCAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjA2MDcgNi4zMzM1SDE2LjAwMDdWMy4wMDAxNkMxNi4wMDA3IDIuNjMzNSAxNS43MDA3IDIuMzMzNSAxNS4zMzQgMi4zMzM1SDEyLjY2NzNDMTIuMzAwNyAyLjMzMzUgMTIuMDAwNyAyLjYzMzUgMTIuMDAwNyAzLjAwMDE2VjYuMzMzNUgxMC45NDA3QzEwLjM0NzMgNi4zMzM1IDEwLjA0NzMgNy4wNTM1IDEwLjQ2NzMgNy40NzM1TDEzLjUyNzMgMTAuNTMzNUMxMy43ODczIDEwLjc5MzUgMTQuMjA3MyAxMC43OTM1IDE0LjQ2NzMgMTAuNTMzNUwxNy41MjczIDcuNDczNUMxNy45NDczIDcuMDUzNSAxNy42NTQgNi4zMzM1IDE3LjA2MDcgNi4zMzM1Wk05LjMzMzk4IDEzLjAwMDJDOS4zMzM5OCAxMy4zNjY4IDkuNjMzOTggMTMuNjY2OCAxMC4wMDA3IDEzLjY2NjhIMTguMDAwN0MxOC4zNjczIDEzLjY2NjggMTguNjY3MyAxMy4zNjY4IDE4LjY2NzMgMTMuMDAwMkMxOC42NjczIDEyLjYzMzUgMTguMzY3MyAxMi4zMzM1IDE4LjAwMDcgMTIuMzMzNUgxMC4wMDA3QzkuNjMzOTggMTIuMzMzNSA5LjMzMzk4IDEyLjYzMzUgOS4zMzM5OCAxMy4wMDAyWiIgZmlsbD0iI0UzRTRFNSIvPgo8L3N2Zz4K");
+  --str-video__icon--ellipsis: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgMTBDNC45IDEwIDQgMTAuOSA0IDEyQzQgMTMuMSA0LjkgMTQgNiAxNEM3LjEgMTQgOCAxMy4xIDggMTJDOCAxMC45IDcuMSAxMCA2IDEwWk0xOCAxMEMxNi45IDEwIDE2IDEwLjkgMTYgMTJDMTYgMTMuMSAxNi45IDE0IDE4IDE0QzE5LjEgMTQgMjAgMTMuMSAyMCAxMkMyMCAxMC45IDE5LjEgMTAgMTggMTBaTTEyIDEwQzEwLjkgMTAgMTAgMTAuOSAxMCAxMkMxMCAxMy4xIDEwLjkgMTQgMTIgMTRDMTMuMSAxNCAxNCAxMy4xIDE0IDEyQzE0IDEwLjkgMTMuMSAxMCAxMiAxMFoiIGZpbGw9IiNFM0U0RTUiLz4KPC9zdmc+Cg==");
+  --str-video__icon--film-roll: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTMgNkMyLjQ1IDYgMiA2LjQ1IDIgN1YyMEMyIDIxLjEgMi45IDIyIDQgMjJIMTdDMTcuNTUgMjIgMTggMjEuNTUgMTggMjFDMTggMjAuNDUgMTcuNTUgMjAgMTcgMjBINUM0LjQ1IDIwIDQgMTkuNTUgNCAxOVY3QzQgNi40NSAzLjU1IDYgMyA2Wk0yMCAySDhDNi45IDIgNiAyLjkgNiA0VjE2QzYgMTcuMSA2LjkgMTggOCAxOEgyMEMyMS4xIDE4IDIyIDE3LjEgMjIgMTZWNEMyMiAyLjkgMjEuMSAyIDIwIDJaTTEyIDE0LjVWNS41TDE3LjQ3IDkuNkMxNy43NCA5LjggMTcuNzQgMTAuMiAxNy40NyAxMC40TDEyIDE0LjVaIiBmaWxsPSIjQjBCNEI3Ii8+CjwvZz4KPC9zdmc+Cg==");
+  --str-video__icon--filter: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSI+CiAgICA8cGF0aCBkPSJNMSAzLjc1QS43NS43NSAwIDAgMSAxLjc1IDNoMTIuNWEuNzUuNzUgMCAwIDEgMCAxLjVIMS43NUEuNzUuNzUgMCAwIDEgMSAzLjc1em0yLjUgNEEuNzUuNzUgMCAwIDEgNC4yNSA3aDcuNWEuNzUuNzUgMCAwIDEgMCAxLjVoLTcuNWEuNzUuNzUgMCAwIDEtLjc1LS43NXpNNi43NSAxMWEuNzUuNzUgMCAwIDAgMCAxLjVoMi41YS43NS43NSAwIDAgMCAwLTEuNWgtMi41eiIgZmlsbD0iY3VycmVudENvbG9yIi8+XAo8L3N2Zz4K");
+  --str-video__icon--fullscreen: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzNiAzNiIgd2lkdGg9IjM2IiBoZWlnaHQ9IjM2IiBmaWxsPSJ3aGl0ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0ibSAxMCwxNiAyLDAgMCwtNCA0LDAgMCwtMiBMIDEwLDEwIGwgMCw2IDAsMCB6Ii8+CjxwYXRoIGQ9Im0gMjAsMTAgMCwyIDQsMCAwLDQgMiwwIEwgMjYsMTAgbCAtNiwwIDAsMCB6Ii8+CjxwYXRoIGQ9Im0gMjQsMjQgLTQsMCAwLDIgTCAyNiwyNiBsIDAsLTYgLTIsMCAwLDQgMCwwIHoiLz4KPHBhdGggZD0iTSAxMiwyMCAxMCwyMCAxMCwyNiBsIDYsMCAwLC0yIC00LDAgMCwtNCAwLDAgeiIvPgo8L3N2Zz4=");
+  --str-video__icon--info-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjRweCIgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTExIDdoMnYyaC0yem0wIDRoMnY2aC0yem0xLTlDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTAgMThjLTQuNDEgMC04LTMuNTktOC04czMuNTktOCA4LTggOCAzLjU5IDggOC0zLjU5IDgtOCA4eiIvPjwvc3ZnPg==");
+  --str-video__icon--kick-user: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCI+PGc+PHJlY3QgZmlsbD0ibm9uZSIgaGVpZ2h0PSIyNCIgd2lkdGg9IjI0Ii8+PC9nPjxnPjxwYXRoIGQ9Ik0xNCw4YzAtMi4yMS0xLjc5LTQtNC00UzYsNS43OSw2LDhzMS43OSw0LDQsNFMxNCwxMC4yMSwxNCw4eiBNMTcsMTB2Mmg2di0ySDE3eiBNMiwxOHYyaDE2di0yYzAtMi42Ni01LjMzLTQtOC00IFMyLDE1LjM0LDIsMTh6Ii8+PC9nPjwvc3ZnPg==");
+  --str-video__icon--livestream-viewers: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzg2OTdfMjU1NykiPgo8cGF0aCBkPSJNOC4zNzc0NCA0LjU2MjVDMTAuNzQ2MiA0LjU2MjUgMTIuODU4NyA1Ljg5Mzc1IDEzLjg4OTkgOEMxMi44NTg3IDEwLjEwNjIgMTAuNzQ2MiAxMS40Mzc1IDguMzc3NDQgMTEuNDM3NUM2LjAwODY5IDExLjQzNzUgMy44OTYxOSAxMC4xMDYyIDIuODY0OTQgOEMzLjg5NjE5IDUuODkzNzUgNi4wMDg2OSA0LjU2MjUgOC4zNzc0NCA0LjU2MjVaTTguMzc3NDQgMy4zMTI1QzUuMjUyNDQgMy4zMTI1IDIuNTgzNjkgNS4yNTYyNSAxLjUwMjQ0IDhDMi41ODM2OSAxMC43NDM4IDUuMjUyNDQgMTIuNjg3NSA4LjM3NzQ0IDEyLjY4NzVDMTEuNTAyNCAxMi42ODc1IDE0LjE3MTIgMTAuNzQzOCAxNS4yNTI0IDhDMTQuMTcxMiA1LjI1NjI1IDExLjUwMjQgMy4zMTI1IDguMzc3NDQgMy4zMTI1Wk04LjM3NzQ0IDYuNDM3NUM5LjIzOTk0IDYuNDM3NSA5LjkzOTk0IDcuMTM3NSA5LjkzOTk0IDhDOS45Mzk5NCA4Ljg2MjUgOS4yMzk5NCA5LjU2MjUgOC4zNzc0NCA5LjU2MjVDNy41MTQ5NCA5LjU2MjUgNi44MTQ5NCA4Ljg2MjUgNi44MTQ5NCA4QzYuODE0OTQgNy4xMzc1IDcuNTE0OTQgNi40Mzc1IDguMzc3NDQgNi40Mzc1Wk04LjM3NzQ0IDUuMTg3NUM2LjgyNzQ0IDUuMTg3NSA1LjU2NDk0IDYuNDUgNS41NjQ5NCA4QzUuNTY0OTQgOS41NSA2LjgyNzQ0IDEwLjgxMjUgOC4zNzc0NCAxMC44MTI1QzkuOTI3NDQgMTAuODEyNSAxMS4xODk5IDkuNTUgMTEuMTg5OSA4QzExLjE4OTkgNi40NSA5LjkyNzQ0IDUuMTg3NSA4LjM3NzQ0IDUuMTg3NVoiIGZpbGw9IiNGQ0ZDRkMiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF84Njk3XzI1NTciPgo8cmVjdCB4PSIwLjg3NzQ0MSIgeT0iMC41IiB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHJ4PSI0IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=");
+  --str-video__icon--loading: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzEiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAzMSAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzAuOTIxMyAxNUMzMC45MjEzIDIzLjI4NDMgMjQuMjA1NiAzMCAxNS45MjEzIDMwQzEwLjcxNTQgMzAgNi4xMjg5OSAyNy4zNDggMy40MzkyMSAyMy4zMjE0TDUuMTAzNDkgMjIuMjExOUM3LjQzNDYzIDI1LjcwMTYgMTEuNDA5NiAyOCAxNS45MjEzIDI4QzIzLjEwMSAyOCAyOC45MjEzIDIyLjE3OTcgMjguOTIxMyAxNUMyOC45MjEzIDcuODIwMyAyMy4xMDEgMiAxNS45MjEzIDJMMTUuOTIxMyAwQzI0LjIwNTYgMCAzMC45MjEzIDYuNzE1NzMgMzAuOTIxMyAxNVoiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcl8xODYwXzExMDYyMykiLz4KICAgIDxkZWZzPgogICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl8xODYwXzExMDYyMyIgeDE9IjMuNDM5MjEiIHkxPSIwIiB4Mj0iMy40MzkyMSIgeTI9IjMwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgICAgICAgIDxzdG9wIGlkPSJzdG9wLXNlbWl0cmFuc3BhcmVudCIgc3RvcC1vcGFjaXR5PSIwLjAxIi8+CiAgICAgICAgICAgIDxzdG9wIGlkPSJzdG9wLW9wYXF1ZSIgb2Zmc2V0PSIxIiAvPgogICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8L2RlZnM+Cjwvc3ZnPg==");
+  --str-video__icon--logout: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNSAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuMDA2NTEgMi45MTY2N0g2LjUwNjUxQzYuODI3MzQgMi45MTY2NyA3LjA4OTg0IDIuNjU0MTcgNy4wODk4NCAyLjMzMzMzQzcuMDg5ODQgMi4wMTI1IDYuODI3MzQgMS43NSA2LjUwNjUxIDEuNzVIMy4wMDY1MUMyLjM2NDg0IDEuNzUgMS44Mzk4NCAyLjI3NSAxLjgzOTg0IDIuOTE2NjdWMTEuMDgzM0MxLjgzOTg0IDExLjcyNSAyLjM2NDg0IDEyLjI1IDMuMDA2NTEgMTIuMjVINi41MDY1MUM2LjgyNzM0IDEyLjI1IDcuMDg5ODQgMTEuOTg3NSA3LjA4OTg0IDExLjY2NjdDNy4wODk4NCAxMS4zNDU4IDYuODI3MzQgMTEuMDgzMyA2LjUwNjUxIDExLjA4MzNIMy4wMDY1MVYyLjkxNjY3WiIgZmlsbD0iI0UzRTRFNSIvPgo8cGF0aCBkPSJNMTIuMTM1NyA2Ljc5NTgzTDEwLjUwODIgNS4xNjgzM0MxMC4zMjE1IDQuOTgxNjcgMTAuMDA2NSA1LjExIDEwLjAwNjUgNS4zNzI1VjYuNDE2NjdINS45MjMxOEM1LjYwMjM0IDYuNDE2NjcgNS4zMzk4NCA2LjY3OTE3IDUuMzM5ODQgN0M1LjMzOTg0IDcuMzIwODMgNS42MDIzNCA3LjU4MzMzIDUuOTIzMTggNy41ODMzM0gxMC4wMDY1VjguNjI3NUMxMC4wMDY1IDguODkgMTAuMzIxNSA5LjAxODMzIDEwLjUwMjMgOC44MzE2N0wxMi4xMjk4IDcuMjA0MTdDMTIuMjQ2NSA3LjA5MzMzIDEyLjI0NjUgNi45MDY2NyAxMi4xMzU3IDYuNzk1ODNaIiBmaWxsPSIjRTNFNEU1Ii8+Cjwvc3ZnPgo=");
+  --str-video__icon--low-bandwidth: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0Ij48cGF0aCBkPSJNMjQgMEgwdjI0aDI0eiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik04LjEgNWMuMTcgMCAuMzIuMDkuNDEuMjNsLjA3LjE1IDUuMTggMTEuNjVjLjE2LjI5LjI2LjYxLjI2Ljk2IDAgMS4xMS0uOSAyLjAxLTIuMDEgMi4wMS0uOTYgMC0xLjc3LS42OC0xLjk2LTEuNTlsLS4wMS0uMDNMNy42IDUuNWMwLS4yOC4yMi0uNS41LS41TTIzIDlsLTIgMmExMi42NiAxMi42NiAwIDAgMC0xMC41My0zLjYyTDkuMjggNC43YzQuODMtLjg2IDkuOTguNTcgMTMuNzIgNC4zTTMgMTEgMSA5YTE1LjQgMTUuNCAwIDAgMSA1LjU5LTMuNTdsLjUzIDIuODJDNS42MiA4Ljg3IDQuMjIgOS43OCAzIDExbTQgNC0yLTJjLjgtLjggMS43LTEuNDIgMi42Ni0xLjg5bC41NSAyLjkyYy0uNDIuMjctLjgzLjU5LTEuMjEuOTdtMTItMi0yIDJhNy4xIDcuMSAwIDAgMC00LjAzLTJsLTEuMjgtMi44OGMyLjYzLS4wOCA1LjMuODcgNy4zMSAyLjg4Ii8+PC9zdmc+");
+  --str-video__icon--magnifier-glass: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik04LjQ4NDkxIDcuODYwM0g3Ljk1NTk3TDcuNzY4NSA3LjY3OTUyQzguNTcxOTUgNi43NDIxNiA4Ljk4NzA2IDUuNDYzMzQgOC43NTk0MiA0LjEwNDE4QzguNDQ0NzMgMi4yNDI4NSA2Ljg5MTQgMC43NTY0NzQgNS4wMTY2OSAwLjUyODgzQzIuMTg0NTMgMC4xODA2NjkgLTAuMTk5MDMxIDIuNTY0MjMgMC4xNDkxMyA1LjM5NjM5QzAuMzc2Nzc0IDcuMjcxMSAxLjg2MzE1IDguODI0NDMgMy43MjQ0OCA5LjEzOTEyQzUuMDgzNjQgOS4zNjY3NiA2LjM2MjQ2IDguOTUxNjUgNy4yOTk4MiA4LjE0ODJMNy40ODA2IDguMzM1NjdWOC44NjQ2MUwxMC4zMjYxIDExLjcxMDJDMTAuNjAwNyAxMS45ODQ3IDExLjA0OTIgMTEuOTg0NyAxMS4zMjM4IDExLjcxMDJDMTEuNTk4MyAxMS40MzU2IDExLjU5ODMgMTAuOTg3IDExLjMyMzggMTAuNzEyNUw4LjQ4NDkxIDcuODYwM1pNNC40Njc2NiA3Ljg2MDNDMi44MDA1MSA3Ljg2MDMgMS40NTQ3MyA2LjUxNDUyIDEuNDU0NzMgNC44NDczNkMxLjQ1NDczIDMuMTgwMjEgMi44MDA1MSAxLjgzNDQzIDQuNDY3NjYgMS44MzQ0M0M2LjEzNDgyIDEuODM0NDMgNy40ODA2IDMuMTgwMjEgNy40ODA2IDQuODQ3MzZDNy40ODA2IDYuNTE0NTIgNi4xMzQ4MiA3Ljg2MDMgNC40Njc2NiA3Ljg2MDNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
+  --str-video__icon--mic: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTExLjk5OSAxNC41QzEzLjY1OSAxNC41IDE0Ljk5OSAxMy4xNiAxNC45OTkgMTEuNVY1LjVDMTQuOTk5IDMuODQgMTMuNjU5IDIuNSAxMS45OTkgMi41QzEwLjMzOSAyLjUgOC45OTkwMSAzLjg0IDguOTk5MDEgNS41VjExLjVDOC45OTkwMSAxMy4xNiAxMC4zMzkgMTQuNSAxMS45OTkgMTQuNVpNMTcuOTA5IDExLjVDMTcuNDE5IDExLjUgMTcuMDA5IDExLjg2IDE2LjkyOSAxMi4zNUMxNi41MTkgMTQuNyAxNC40NjkgMTYuNSAxMS45OTkgMTYuNUM5LjUyOTAxIDE2LjUgNy40NzkwMSAxNC43IDcuMDY5MDEgMTIuMzVDNi45ODkwMSAxMS44NiA2LjU3OTAxIDExLjUgNi4wODkwMSAxMS41QzUuNDc5MDEgMTEuNSA0Ljk5OTAxIDEyLjA0IDUuMDg5MDEgMTIuNjRDNS41NzkwMSAxNS42NCA3Ljk3OTAxIDE3Ljk5IDEwLjk5OSAxOC40MlYyMC41QzEwLjk5OSAyMS4wNSAxMS40NDkgMjEuNSAxMS45OTkgMjEuNUMxMi41NDkgMjEuNSAxMi45OTkgMjEuMDUgMTIuOTk5IDIwLjVWMTguNDJDMTYuMDE5IDE3Ljk5IDE4LjQxOSAxNS42NCAxOC45MDkgMTIuNjRDMTkuMDA5IDEyLjA0IDE4LjUxOSAxMS41IDE3LjkwOSAxMS41WiIgZmlsbD0iI0IwQjRCNyIvPgo8L3N2Zz4K");
+  --str-video__icon--mic-off: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTE0LjkyMDQgMTEuMVY1LjVDMTQuOTIwNCAzLjg0IDEzLjU4MDQgMi41IDExLjkyMDQgMi41QzEwLjM4MDQgMi41IDkuMTMwMzkgMy42NiA4Ljk2MDM5IDUuMTVMMTQuOTIwNCAxMS4xWk0xOC4wMDA0IDExLjVDMTcuNTkwNCAxMS41IDE3LjIzMDQgMTEuOCAxNy4xNzA0IDEyLjIxQzE3LjEyMDQgMTIuNTMgMTcuMDUwNCAxMi44NSAxNi45NTA0IDEzLjE0TDE4LjIyMDQgMTQuNDFDMTguNTIwNCAxMy44MSAxOC43NDA0IDEzLjE2IDE4Ljg1MDQgMTIuNDdDMTguOTIwNCAxMS45NiAxOC41MjA0IDExLjUgMTguMDAwNCAxMS41Wk0zLjYzMDM5IDQuMDZDMy4yNDAzOSA0LjQ1IDMuMjQwMzkgNS4wOCAzLjYzMDM5IDUuNDdMOC45MjAzOSAxMC43N1YxMS4yQzguOTIwMzkgMTIuMzkgOS41MjAzOSAxMy41MiAxMC41NTA0IDE0LjExQzExLjMwMDQgMTQuNTQgMTEuOTYwNCAxNC41NSAxMi41NzA0IDE0LjQyTDE0LjIzMDQgMTYuMDhDMTMuNTIwNCAxNi40MSAxMi43MzA0IDE2LjYgMTEuOTIwNCAxNi42QzkuMzgwMzkgMTYuNiA3LjA0MDM5IDE0LjgzIDYuNjcwMzkgMTIuMjFDNi42MTAzOSAxMS44IDYuMjUwMzkgMTEuNSA1Ljg0MDM5IDExLjVDNS4zMjAzOSAxMS41IDQuOTIwMzkgMTEuOTYgNC45OTAzOSAxMi40N0M1LjQ1MDM5IDE1LjQzIDcuOTUwMzkgMTcuNzcgMTAuOTIwNCAxOC4yMlYyMC41QzEwLjkyMDQgMjEuMDUgMTEuMzcwNCAyMS41IDExLjkyMDQgMjEuNUMxMi40NzA0IDIxLjUgMTIuOTIwNCAyMS4wNSAxMi45MjA0IDIwLjVWMTguMjJDMTMuODMwNCAxOC4wOSAxNC42OTA0IDE3Ljc3IDE1LjQ3MDQgMTcuMzJMMTguOTYwNCAyMC44MUMxOS4zNTA0IDIxLjIgMTkuOTgwNCAyMS4yIDIwLjM3MDQgMjAuODFDMjAuNzYwNCAyMC40MiAyMC43NjA0IDE5Ljc5IDIwLjM3MDQgMTkuNEw1LjA0MDM5IDQuMDZDNC42NTAzOSAzLjY3IDQuMDIwMzkgMy42NyAzLjYzMDM5IDQuMDZaIiBmaWxsPSIjQjBCNEI3Ii8+CjwvZz4KPC9zdmc+Cg==");
+  --str-video__icon--network-quality: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuNCA5LjJINi42QzcuMzcgOS4yIDggOS44MyA4IDEwLjZWMTcuNkM4IDE4LjM3IDcuMzcgMTkgNi42IDE5SDYuNEM1LjYzIDE5IDUgMTguMzcgNSAxNy42VjEwLjZDNSA5LjgzIDUuNjMgOS4yIDYuNCA5LjJaTTEyIDVDMTIuNzcgNSAxMy40IDUuNjMgMTMuNCA2LjRWMTcuNkMxMy40IDE4LjM3IDEyLjc3IDE5IDEyIDE5QzExLjIzIDE5IDEwLjYgMTguMzcgMTAuNiAxNy42VjYuNEMxMC42IDUuNjMgMTEuMjMgNSAxMiA1Wk0xNy42IDEzQzE4LjM3IDEzIDE5IDEzLjYzIDE5IDE0LjRWMTcuNkMxOSAxOC4zNyAxOC4zNyAxOSAxNy42IDE5QzE2LjgzIDE5IDE2LjIgMTguMzcgMTYuMiAxNy42VjE0LjRDMTYuMiAxMy42MyAxNi44MyAxMyAxNy42IDEzWiIgZmlsbD0iI0UzRTRFNSIvPgo8L3N2Zz4K");
+  --str-video__icon--reactions: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTIzIDQuNUMyMyA1LjA1IDIyLjU1IDUuNSAyMiA1LjVIMjFWNi41QzIxIDcuMDUgMjAuNTUgNy41IDIwIDcuNUMxOS40NSA3LjUgMTkgNy4wNSAxOSA2LjVWNS41SDE4QzE3LjQ1IDUuNSAxNyA1LjA1IDE3IDQuNUMxNyAzLjk1IDE3LjQ1IDMuNSAxOCAzLjVIMTlWMi41QzE5IDEuOTUgMTkuNDUgMS41IDIwIDEuNUMyMC41NSAxLjUgMjEgMS45NSAyMSAyLjVWMy41SDIyQzIyLjU1IDMuNSAyMyAzLjk1IDIzIDQuNVpNMjAuNTIgOS40NUMyMC44MyAxMC40MSAyMSAxMS40NCAyMSAxMi41QzIxIDE4LjAyIDE2LjUyIDIyLjUgMTEgMjIuNUM1LjQ4IDIyLjUgMSAxOC4wMiAxIDEyLjVDMSA2Ljk4IDUuNDggMi41IDExIDIuNUMxMi41IDIuNSAxMy45MiAyLjg0IDE1LjIgMy40NEMxNS4wOCAzLjc3IDE1IDQuMTIgMTUgNC41QzE1IDUuODUgMTUuOSA3IDE3LjEzIDcuMzdDMTcuNSA4LjYgMTguNjUgOS41IDIwIDkuNUMyMC4xOCA5LjUgMjAuMzUgOS40OCAyMC41MiA5LjQ1Wk02IDEwQzYgMTAuODMgNi42NyAxMS41IDcuNSAxMS41QzguMzMgMTEuNSA5IDEwLjgzIDkgMTBDOSA5LjE3IDguMzMgOC41IDcuNSA4LjVDNi42NyA4LjUgNiA5LjE3IDYgMTBaTTE1LjMxIDE0LjVINi42OUM2LjMxIDE0LjUgNi4wNiAxNC45MiA2LjI1IDE1LjI1QzcuMiAxNi44OSA4Ljk3IDE4IDExIDE4QzEzLjAzIDE4IDE0LjggMTYuODkgMTUuNzUgMTUuMjVDMTUuOTQgMTQuOTIgMTUuNyAxNC41IDE1LjMxIDE0LjVaTTE2IDEwQzE2IDkuMTcgMTUuMzMgOC41IDE0LjUgOC41QzEzLjY3IDguNSAxMyA5LjE3IDEzIDEwQzEzIDEwLjgzIDEzLjY3IDExLjUgMTQuNSAxMS41QzE1LjMzIDExLjUgMTYgMTAuODMgMTYgMTBaIiBmaWxsPSIjQjBCNEI3Ii8+CjwvZz4KPC9zdmc+Cg==");
+  --str-video__icon--recording-off: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPGcgaWQ9IlZlY3RvciI+CjxwYXRoIGQ9Ik0xMiAyQzYuNDggMiAyIDYuNDggMiAxMkMyIDE3LjUyIDYuNDggMjIgMTIgMjJDMTcuNTIgMjIgMjIgMTcuNTIgMjIgMTJDMjIgNi40OCAxNy41MiAyIDEyIDJaTTEyIDIwQzcuNTggMjAgNCAxNi40MiA0IDEyQzQgNy41OCA3LjU4IDQgMTIgNEMxNi40MiA0IDIwIDcuNTggMjAgMTJDMjAgMTYuNDIgMTYuNDIgMjAgMTIgMjBaIiBmaWxsPSIjQjBCNEI3Ii8+CjxwYXRoIGQ9Ik0xMiAxN0MxNC43NjE0IDE3IDE3IDE0Ljc2MTQgMTcgMTJDMTcgOS4yMzg1OCAxNC43NjE0IDcgMTIgN0M5LjIzODU4IDcgNyA5LjIzODU4IDcgMTJDNyAxNC43NjE0IDkuMjM4NTggMTcgMTIgMTdaIiBmaWxsPSIjQjBCNEI3Ii8+CjwvZz4KPC9nPgo8L3N2Zz4K");
+  --str-video__icon--recording-on: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwIDBDNC40OCAwIDAgNC40OCAwIDEwQzAgMTUuNTIgNC40OCAyMCAxMCAyMEMxNS41MiAyMCAyMCAxNS41MiAyMCAxMEMyMCA0LjQ4IDE1LjUyIDAgMTAgMFpNMTMgMTRIN0M2LjQ1IDE0IDYgMTMuNTUgNiAxM1Y3QzYgNi40NSA2LjQ1IDYgNyA2SDEzQzEzLjU1IDYgMTQgNi40NSAxNCA3VjEzQzE0IDEzLjU1IDEzLjU1IDE0IDEzIDE0WiIgZmlsbD0iI0UzRTRFNSIvPgo8L3N2Zz4K");
+  --str-video__icon--refresh: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOTIwIDE5MjAiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTk2MCAwdjIxMy4zMzNjNDExLjYyNyAwIDc0Ni42NjcgMzM0LjkzNCA3NDYuNjY3IDc0Ni42NjdTMTM3MS42MjcgMTcwNi42NjcgOTYwIDE3MDYuNjY3IDIxMy4zMzMgMTM3MS43MzMgMjEzLjMzMyA5NjBjMC0xOTcuMDEzIDc4LjQtMzgyLjUwNyAyMTMuMzM0LTUyMC43NDd2MjU0LjA4SDY0MFYxMDYuNjY3SDUzLjMzM1YzMjBoMTkxLjA0Qzg4LjY0IDQ5NC4wOCAwIDcyMC45NiAwIDk2MGMwIDUyOS4yOCA0MzAuNjEzIDk2MCA5NjAgOTYwczk2MC00MzAuNzIgOTYwLTk2MFMxNDg5LjM4NyAwIDk2MCAwIi8+PC9zdmc+Cg==");
+  --str-video__icon--screen-share-off: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTIwIDE4QzIxLjEgMTggMjIgMTcuMSAyMiAxNlY2QzIyIDQuOSAyMS4xIDQgMjAgNEg0QzIuOSA0IDIgNC45IDIgNlYxNkMyIDE3LjEgMi44OSAxOCA0IDE4SDFDMC40NSAxOCAwIDE4LjQ1IDAgMTlDMCAxOS41NSAwLjQ1IDIwIDEgMjBIMjNDMjMuNTUgMjAgMjQgMTkuNTUgMjQgMTlDMjQgMTguNDUgMjMuNTUgMTggMjMgMThIMjBaTTEzIDE0LjQ3VjEyLjI4QzEwLjIyIDEyLjI4IDguMzkgMTMuMTMgNyAxNUM3LjU2IDEyLjMzIDkuMTEgOS42NyAxMyA5LjEzVjdMMTYuNjEgMTAuMzZDMTYuODIgMTAuNTYgMTYuODIgMTAuODkgMTYuNjEgMTEuMDlMMTMgMTQuNDdaIiBmaWxsPSIjQjBCNEI3Ii8+CjwvZz4KPC9zdmc+Cg==");
+  --str-video__icon--screen-share-on: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPU91dGxpbmVkIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTIwIDE4QzIxLjEgMTggMjEuOTkgMTcuMSAyMS45OSAxNkwyMiA2QzIyIDQuODkgMjEuMSA0IDIwIDRINEMyLjg5IDQgMiA0Ljg5IDIgNlYxNkMyIDE3LjEgMi44OSAxOCA0IDE4SDBWMjBIMjRWMThIMjBaTTQgMTZWNkgyMFYxNi4wMUw0IDE2Wk0xMyA5LjEzQzkuMTEgOS42NyA3LjU2IDEyLjMzIDcgMTVDOC4zOSAxMy4xMyAxMC4yMiAxMi4yOCAxMyAxMi4yOFYxNC40N0wxNyAxMC43M0wxMyA3VjkuMTNaIiBmaWxsPSIjQjBCNEI3Ii8+CjwvZz4KPC9zdmc+Cg==");
+  --str-video__icon--settings: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTE5LjQ5OTcgMTJDMTkuNDk5NyAxMS43NyAxOS40ODk3IDExLjU1IDE5LjQ2OTcgMTEuMzJMMjEuMzI5NyA5LjkxQzIxLjcyOTcgOS42MSAyMS44Mzk3IDkuMDUgMjEuNTg5NyA4LjYxTDE5LjcxOTcgNS4zOEMxOS40Njk3IDQuOTQgMTguOTI5NyA0Ljc2IDE4LjQ2OTcgNC45NkwxNi4zMTk3IDUuODdDMTUuOTQ5NyA1LjYxIDE1LjU1OTcgNS4zOCAxNS4xNDk3IDUuMTlMMTQuODU5NyAyLjg4QzE0Ljc5OTcgMi4zOCAxNC4zNjk3IDIgMTMuODY5NyAySDEwLjEzOTdDOS42Mjk2NyAyIDkuMTk5NjcgMi4zOCA5LjEzOTY3IDIuODhMOC44NDk2NyA1LjE5QzguNDM5NjcgNS4zOCA4LjA0OTY2IDUuNjEgNy42Nzk2NyA1Ljg3TDUuNTI5NjcgNC45NkM1LjA2OTY3IDQuNzYgNC41Mjk2NyA0Ljk0IDQuMjc5NjcgNS4zOEwyLjQwOTY3IDguNjJDMi4xNTk2NyA5LjA2IDIuMjY5NjcgOS42MSAyLjY2OTY3IDkuOTJMNC41Mjk2NyAxMS4zM0M0LjUwOTY3IDExLjU1IDQuNDk5NjcgMTEuNzcgNC40OTk2NyAxMkM0LjQ5OTY3IDEyLjIzIDQuNTA5NjcgMTIuNDUgNC41Mjk2NyAxMi42OEwyLjY2OTY3IDE0LjA5QzIuMjY5NjcgMTQuMzkgMi4xNTk2NyAxNC45NSAyLjQwOTY3IDE1LjM5TDQuMjc5NjcgMTguNjJDNC41Mjk2NyAxOS4wNiA1LjA2OTY3IDE5LjI0IDUuNTI5NjcgMTkuMDRMNy42Nzk2NyAxOC4xM0M4LjA0OTY2IDE4LjM5IDguNDM5NjcgMTguNjIgOC44NDk2NyAxOC44MUw5LjEzOTY3IDIxLjEyQzkuMTk5NjcgMjEuNjIgOS42Mjk2NyAyMiAxMC4xMjk3IDIySDEzLjg1OTdDMTQuMzU5NyAyMiAxNC43ODk3IDIxLjYyIDE0Ljg0OTcgMjEuMTJMMTUuMTM5NyAxOC44MUMxNS41NDk3IDE4LjYyIDE1LjkzOTcgMTguMzkgMTYuMzA5NyAxOC4xM0wxOC40NTk3IDE5LjA0QzE4LjkxOTcgMTkuMjQgMTkuNDU5NyAxOS4wNiAxOS43MDk3IDE4LjYyTDIxLjU3OTcgMTUuMzlDMjEuODI5NyAxNC45NSAyMS43MTk3IDE0LjQgMjEuMzE5NyAxNC4wOUwxOS40NTk3IDEyLjY4QzE5LjQ4OTcgMTIuNDUgMTkuNDk5NyAxMi4yMyAxOS40OTk3IDEyWk0xMi4wMzk3IDE1LjVDMTAuMTA5NyAxNS41IDguNTM5NjcgMTMuOTMgOC41Mzk2NyAxMkM4LjUzOTY3IDEwLjA3IDEwLjEwOTcgOC41IDEyLjAzOTcgOC41QzEzLjk2OTcgOC41IDE1LjUzOTcgMTAuMDcgMTUuNTM5NyAxMkMxNS41Mzk3IDEzLjkzIDEzLjk2OTcgMTUuNSAxMi4wMzk3IDE1LjVaIiBmaWxsPSIjQjBCNEI3Ii8+CjwvZz4KPC9zdmc+Cg==");
+  --str-video__icon--speaker: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTMgMTAuMDAxOFYxNC4wMDE4QzMgMTQuNTUxOCAzLjQ1IDE1LjAwMTggNCAxNS4wMDE4SDdMMTAuMjkgMTguMjkxOEMxMC45MiAxOC45MjE4IDEyIDE4LjQ3MTggMTIgMTcuNTgxOFY2LjQxMTc5QzEyIDUuNTIxNzkgMTAuOTIgNS4wNzE3OSAxMC4yOSA1LjcwMTc5TDcgOS4wMDE3OUg0QzMuNDUgOS4wMDE3OSAzIDkuNDUxNzkgMyAxMC4wMDE4Wk0xNi41IDEyLjAwMThDMTYuNSAxMC4yMzE4IDE1LjQ4IDguNzExNzkgMTQgNy45NzE3OVYxNi4wMjE4QzE1LjQ4IDE1LjI5MTggMTYuNSAxMy43NzE4IDE2LjUgMTIuMDAxOFpNMTQgNC40NTE3OVY0LjY1MTc5QzE0IDUuMDMxNzkgMTQuMjUgNS4zNjE3OSAxNC42IDUuNTAxNzlDMTcuMTggNi41MzE3OSAxOSA5LjA2MTc5IDE5IDEyLjAwMThDMTkgMTQuOTQxOCAxNy4xOCAxNy40NzE4IDE0LjYgMTguNTAxOEMxNC4yNCAxOC42NDE4IDE0IDE4Ljk3MTggMTQgMTkuMzUxOFYxOS41NTE4QzE0IDIwLjE4MTggMTQuNjMgMjAuNjIxOCAxNS4yMSAyMC40MDE4QzE4LjYgMTkuMTExOCAyMSAxNS44NDE4IDIxIDEyLjAwMThDMjEgOC4xNjE3OSAxOC42IDQuODkxNzkgMTUuMjEgMy42MDE3OUMxNC42MyAzLjM3MTc5IDE0IDMuODIxNzkgMTQgNC40NTE3OVoiIGZpbGw9IiNCMEI0QjciLz4KPC9nPgo8L3N2Zz4K");
+  --str-video__icon--speaker-off: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Zz48cGF0aCBkPSJNMyAxMC4wMDE4VjE0LjAwMThDMyAxNC41NTE4IDMuNDUgMTUuMDAxOCA0IDE1LjAwMThIN0wxMC4yOSAxOC4yOTE4QzEwLjkyIDE4LjkyMTggMTIgMTguNDcxOCAxMiAxNy41ODE4VjYuNDExNzlDMTIgNS41MjE3OSAxMC45MiA1LjA3MTc5IDEwLjI5IDUuNzAxNzlMNyA5LjAwMTc5SDRDMy40NSA5LjAwMTc5IDMgOS40NTE3OSAzIDEwLjAwMThaTTE2LjUgMTIuMDAxOEMxNi41IDEwLjIzMTggMTUuNDggOC43MTE3OSAxNCA3Ljk3MTc5VjE2LjAyMThDMTUuNDggMTUuMjkxOCAxNi41IDEzLjc3MTggMTYuNSAxMi4wMDE4Wk0xNCA0LjQ1MTc5VjQuNjUxNzlDMTQgNS4wMzE3OSAxNC4yNSA1LjM2MTc5IDE0LjYgNS41MDE3OUMxNy4xOCA2LjUzMTc5IDE5IDkuMDYxNzkgMTkgMTIuMDAxOEMxOSAxNC45NDE4IDE3LjE4IDE3LjQ3MTggMTQuNiAxOC41MDE4QzE0LjI0IDE4LjY0MTggMTQgMTguOTcxOCAxNCAxOS4zNTE4VjE5LjU1MThDMTQgMjAuMTgxOCAxNC42MyAyMC42MjE4IDE1LjIxIDIwLjQwMThDMTguNiAxOS4xMTE4IDIxIDE1Ljg0MTggMjEgMTIuMDAxOEMyMSA4LjE2MTc5IDE4LjYgNC44OTE3OSAxNS4yMSAzLjYwMTc5QzE0LjYzIDMuMzcxNzkgMTQgMy44MjE3OSAxNCA0LjQ1MTc5WiIgZmlsbD0iI0IwQjRCNyIvPjxwYXRoIGQ9Ik00LjUgNC41TDE5LjUgMTkuNSIgc3Ryb2tlPSIjQjBCNEI3IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvZz48L3N2Zz4=");
+  --str-video__icon--stats: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTEzLjg5MTEgMTAuNTQ3NUwxMi44MzExIDEwLjA1NzVDMTIuNDQxMSA5Ljg3NzQ2IDEyLjQ0MTEgOS4zMjc0NiAxMi44MzExIDkuMTQ3NDZMMTMuODkxMSA4LjY1NzQ2TDE0LjM4MTEgNy42MDc0NkMxNC41NjExIDcuMjE3NDYgMTUuMTExMSA3LjIxNzQ2IDE1LjI5MTEgNy42MDc0NkwxNS43ODExIDguNjY3NDZMMTYuODMxMSA5LjE1NzQ2QzE3LjIyMTEgOS4zMzc0NiAxNy4yMjExIDkuODg3NDYgMTYuODMxMSAxMC4wNjc1TDE1Ljc3MTEgMTAuNTU3NUwxNS4yODExIDExLjYwNzVDMTUuMTAxMSAxMS45OTc1IDE0LjU1MTEgMTEuOTk3NSAxNC4zNzExIDExLjYwNzVMMTMuODkxMSAxMC41NDc1Wk00LjI4MTA3IDEzLjYwNzVMNC43NzEwNyAxMi41NDc1TDUuODMxMDcgMTIuMDU3NUM2LjIyMTA3IDExLjg3NzUgNi4yMjEwNyAxMS4zMjc1IDUuODMxMDcgMTEuMTQ3NUw0Ljc3MTA3IDEwLjY1NzVMNC4yODEwNyA5LjYwNzQ2QzQuMTExMDcgOS4yMTc0NiAzLjU1MTA3IDkuMjE3NDYgMy4zODEwNyA5LjYwNzQ2TDIuODkxMDcgMTAuNjY3NUwxLjgzMTA3IDExLjE1NzVDMS40NDEwNyAxMS4zMzc1IDEuNDQxMDcgMTEuODg3NSAxLjgzMTA3IDEyLjA2NzVMMi44OTEwNyAxMi41NTc1TDMuMzgxMDcgMTMuNjA3NUMzLjU1MTA3IDEzLjk5NzUgNC4xMTEwNyAxMy45OTc1IDQuMjgxMDcgMTMuNjA3NVpNOC43OTEwNyA4LjU5NzQ2TDkuNDIxMDcgNy4xOTc0NkwxMC44MjExIDYuNTY3NDZDMTEuMjExMSA2LjM4NzQ2IDExLjIxMTEgNS44Mzc0NiAxMC44MjExIDUuNjU3NDZMOS40MjEwNyA1LjAyNzQ2TDguNzkxMDcgMy42Mjc0NkM4LjYxMTA3IDMuMjM3NDYgOC4wNjEwNyAzLjIzNzQ2IDcuODgxMDcgMy42Mjc0Nkw3LjI1MTA3IDUuMDI3NDZMNS44NTEwNyA1LjY1NzQ2QzUuNDYxMDcgNS44Mzc0NiA1LjQ2MTA3IDYuMzg3NDYgNS44NTEwNyA2LjU2NzQ2TDcuMjUxMDcgNy4xOTc0Nkw3Ljg4MTA3IDguNTk3NDZDOC4wNTEwNyA4Ljk4NzQ2IDguNjExMDcgOC45ODc0NiA4Ljc5MTA3IDguNTk3NDZaTTIyLjE3MTEgOC44Nzc0NkMyMS43NzExIDguNDc3NDYgMjEuMTAxMSA4LjQ4NzQ2IDIwLjcyMTEgOC45MTc0NkwxNC4zMzExIDE2LjA5NzVMMTEuMDQxMSAxMi44MDc1QzEwLjY1MTEgMTIuNDE3NSAxMC4wMjExIDEyLjQxNzUgOS42MzEwNyAxMi44MDc1TDMuNTkxMDcgMTguODU3NUMzLjE4MTA3IDE5LjI2NzUgMy4xODEwNyAxOS45NDc1IDMuNTkxMDcgMjAuMzU3NUM0LjAwMTA3IDIwLjc2NzUgNC42ODEwNyAyMC43Njc1IDUuMDkxMDcgMjAuMzU3NUwxMC4zNDExIDE1LjA5NzVMMTMuNTkxMSAxOC4zNDc1QzE0LjAwMTEgMTguNzU3NSAxNC42NjExIDE4LjczNzUgMTUuMDQxMSAxOC4zMDc1TDIyLjIxMTEgMTAuMjM3NUMyMi41NjExIDkuODQ3NDYgMjIuNTQxMSA5LjI0NzQ2IDIyLjE3MTEgOC44Nzc0NloiIGZpbGw9IiNCMEI0QjciLz4KPC9nPgo8L3N2Zz4K");
+  --str-video__icon--pin: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xOSAxMi44N0MxOSAxMi40IDE4LjY2IDEyLjAyIDE4LjIgMTEuODlDMTYuOTMgMTEuNTQgMTYgMTAuMzggMTYgOVY0SDE3QzE3LjU1IDQgMTggMy41NSAxOCAzQzE4IDIuNDUgMTcuNTUgMiAxNyAySDdDNi40NSAyIDYgMi40NSA2IDNDNiAzLjU1IDYuNDUgNCA3IDRIOFY5QzggMTAuMzggNy4wNyAxMS41NCA1LjggMTEuODlDNS4zNCAxMi4wMiA1IDEyLjQgNSAxMi44N1YxM0M1IDEzLjU1IDUuNDUgMTQgNiAxNEgxMC45OEwxMSAyMUMxMSAyMS41NSAxMS40NSAyMiAxMiAyMkMxMi41NSAyMiAxMyAyMS41NSAxMyAyMUwxMi45OCAxNEgxOEMxOC41NSAxNCAxOSAxMy41NSAxOSAxM1YxMi44N1oiIGZpbGw9IiNFM0U0RTUiLz4KPC9zdmc+Cg==");
+  --str-video__icon--no-audio: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAyMCAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05LjMzNjI5IDAuNzcyNzA5TDkuNzQ5MjQgMC40NDI2MTNDOS45MzYxNCAwLjI5MjkyOSAxMC4yMTE5IDAuMzE5NTk2IDEwLjM2NTEgMC41MDIxNzZDMTAuNDI5MyAwLjU3ODY3NyAxMC40NjQ0IDAuNjc0NTYzIDEwLjQ2NDMgMC43NzM0ODdWMS4zMzU0NlYxLjMzNzE1VjEuODY0NDdWMS45MjUyM1YxMy4yMDcyVjEzLjI2ODFWMTMuNzk1NVYxMy43OTcxVjE0LjM1OUMxMC40NjQ0IDE0LjU5NTEgMTAuMjY4NiAxNC43ODY2IDEwLjAyNjkgMTQuNzg2OEM5LjkyNTY4IDE0Ljc4NjggOS44Mjc1MyAxNC43NTI2IDkuNzQ5MjIgMTQuNjg5OUw5LjMzNjI2IDE0LjM1OTdMOS4zMzUzOSAxNC4zNTlMOC45MDg2MSAxNC4wMTc4TDguODU5NzMgMTMuOTc4N0w1LjExNjcyIDEwLjk4NjFMNS4xMTU4NSAxMC45ODYxSDEuNzEyMTNDMS4yMjg3NiAxMC45ODYxIDAuODM2OTE0IDEwLjYwMzMgMC44MzY5MTQgMTAuMTMxMlY1LjAwMTMzQzAuODM2OTE0IDQuNTI5MTQgMS4yMjg3NiA0LjE0NjM1IDEuNzEyMTMgNC4xNDYzNUg1LjExNTg1TDguODU5NzMgMS4xNTM2NUw4LjkwOTY0IDEuMTEzNzVMOS4zMzUzMiAwLjc3MzQ4N0w5LjMzNjI5IDAuNzcyNzA5Wk02LjExNzcyIDUuMzk5N0w4Ljg1OTczIDMuMjA3ODVWMTEuOTI0M0w2LjExODcxIDkuNzMyODhMNS42Nzg2NSA5LjM4MTA1TDUuMTE1ODUgOS4zODE1N0g1LjExNTIzTDUuMTE0MzYgOS4zODE1N0wyLjQ0MTQ4IDkuMzgxNTdWNS43NTA5Mkg1LjExNTg1SDUuNjc4MzRMNi4xMTc3MiA1LjM5OTdaTTE5LjUyNDQgOS44NjQ0NkwxNy4yMjYyIDcuNTY2MjRMMTkuNTI0NCA1LjI2ODAxQzE5LjgzNzcgNC45NTQ3IDE5LjgzMiA0LjQ0MTA4IDE5LjUxODcgNC4xMjc3N0MxOS4yMDU0IDMuODE0NDYgMTguNjkxOCAzLjgwODgyIDE4LjM3ODUgNC4xMjIxM0wxNi4wODAzIDYuNDIwMzVMMTMuNzgyIDQuMTIyMTNDMTMuNDY4NyAzLjgwODgyIDEyLjk1NTEgMy44MTQ0NiAxMi42NDE4IDQuMTI3NzdDMTIuMzI4NSA0LjQ0MTA4IDEyLjMyMjggNC45NTQ3IDEyLjYzNjIgNS4yNjgwMUwxNC45MzQ0IDcuNTY2MjRMMTIuNjM2MiA5Ljg2NDQ2QzEyLjMyMjggMTAuMTc3OCAxMi4zMjg1IDEwLjY5MTQgMTIuNjQxOCAxMS4wMDQ3QzEyLjk1NTEgMTEuMzE4IDEzLjQ2ODcgMTEuMzIzNyAxMy43ODIgMTEuMDEwM0wxNi4wODAzIDguNzEyMTJMMTguMzc4NSAxMS4wMTAzQzE4LjY5MTggMTEuMzIzNyAxOS4yMDU0IDExLjMxOCAxOS41MTg3IDExLjAwNDdDMTkuODMyIDEwLjY5MTQgMTkuODM3NyAxMC4xNzc4IDE5LjUyNDQgOS44NjQ0NloiIGZpbGw9IiM3Mjc2N0UiLz4KPC9zdmc+Cg==");
+  --str-video__icon--camera-off-outline: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNyAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuODUxMzggNS41MDk5OUw1LjI0NjgyIDMuOTA1NDNMMS45MTczNSAwLjU4Mzk4NEwwLjc4NjEzMyAxLjcxNTJMMi45NzYzNiAzLjkwNTQzSDIuMzkwN0MxLjk0OTQ0IDMuOTA1NDMgMS41ODg0MSA0LjI2NjQ2IDEuNTg4NDEgNC43MDc3MVYxMi43MzA1QzEuNTg4NDEgMTMuMTcxOCAxLjk0OTQ0IDEzLjUzMjggMi4zOTA3IDEzLjUzMjhIMTIuMDE4MUMxMi4xODY2IDEzLjUzMjggMTIuMzMxIDEzLjQ2ODYgMTIuNDU5MyAxMy4zODg0TDE1LjAxMDYgMTUuOTM5N0wxNi4xNDE4IDE0LjgwODRMOS4wMzM1OSA3LjcwMDIyTDYuODUxMzggNS41MDk5OVpNMy4xOTI5OCAxMS45MjgyVjUuNTA5OTlINC41ODA5MkwxMC45OTkyIDExLjkyODJIMy4xOTI5OFpNMTEuMjE1OCA1LjUwOTk5VjcuNjAzOTVMMTYuMDI5NSAxMi40MTc2VjQuMzA2NTdMMTIuODIwNCA3LjUxNTdWNC43MDc3MUMxMi44MjA0IDQuMjY2NDYgMTIuNDU5MyAzLjkwNTQzIDEyLjAxODEgMy45MDU0M0g3LjUxNzI4TDkuMTIxODQgNS41MDk5OUgxMS4yMTU4WiIgZmlsbD0iIzcyNzY3RSIvPgo8L3N2Zz4K");
+  --str-video__icon--not-allowed: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxNyAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguNDY0MjIgMC45MzU1NDdDNC4wMzU2MyAwLjkzNTU0NyAwLjQ0MTQwNiA0LjUyOTc3IDAuNDQxNDA2IDguOTU4MzZDMC40NDE0MDYgMTMuMzg3IDQuMDM1NjMgMTYuOTgxMiA4LjQ2NDIyIDE2Ljk4MTJDMTIuODkyOCAxNi45ODEyIDE2LjQ4NyAxMy4zODcgMTYuNDg3IDguOTU4MzZDMTYuNDg3IDQuNTI5NzcgMTIuODkyOCAwLjkzNTU0NyA4LjQ2NDIyIDAuOTM1NTQ3Wk0yLjA0NTk3IDguOTU4MzZDMi4wNDU5NyA1LjQxMjI4IDQuOTE4MTQgMi41NDAxMSA4LjQ2NDIyIDIuNTQwMTFDOS45NDg0NCAyLjU0MDExIDExLjMxMjMgMy4wNDU1NSAxMi4zOTU0IDMuODk1OTdMMy40MDE4MyAxMi44ODk1QzIuNTUxNDEgMTEuODA2NSAyLjA0NTk3IDEwLjQ0MjYgMi4wNDU5NyA4Ljk1ODM2Wk04LjQ2NDIyIDE1LjM3NjZDNi45OCAxNS4zNzY2IDUuNjE2MTIgMTQuODcxMiA0LjUzMzA0IDE0LjAyMDhMMTMuNTI2NiA1LjAyNzE4QzE0LjM3NyA2LjExMDI2IDE0Ljg4MjUgNy40NzQxNCAxNC44ODI1IDguOTU4MzZDMTQuODgyNSAxMi41MDQ0IDEyLjAxMDMgMTUuMzc2NiA4LjQ2NDIyIDE1LjM3NjZaIiBmaWxsPSIjNzI3NjdFIi8+Cjwvc3ZnPgo=");
+}
+
+.str-video__avatar {
+  width: 2rem;
+  height: 2rem;
+  object-fit: cover;
+}
+
+.str-video__avatar--initials-fallback {
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.str-video {
+  /* The font color applied inside the component */
+  --str-video__avatar--color: var(--str-video__text-color1);
+  /* The background color of the component */
+  --str-video__avatar--background-color: var(--str-video__background-color1);
+  /* The border radius used for the borders of the component */
+  --str-video__avatar--border-radius: var(--str-video__border-radius-circle);
+}
+
+.str-video__avatar {
+  background: var(--str-video__avatar--background-color);
+  color: var(--str-video__avatar--color);
+  box-shadow: var(--str-video__avatar--box-shadow);
+  border-radius: var(--str-video__avatar--border-radius);
+  border-block-start: var(--str-video__avatar--border-block-start);
+  border-block-end: var(--str-video__avatar--border-block-end);
+  border-inline-start: var(--str-video__avatar--border-inline-start);
+  border-inline-end: var(--str-video__avatar--border-inline-end);
+}
+
+.str-video__avatar--initials-fallback {
+  background-color: var(--str-video__primary-color);
+  font-size: 1rem;
+  font-weight: 600;
+  border-radius: var(--str-video__border-radius-circle);
+  text-transform: uppercase;
+}
+
+.str-video__button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--str-video__border-radius-md);
+  padding: var(--str-video__spacing-sm) var(--str-video__spacing-lg);
+  text-align: center;
+  min-width: 120px;
+  width: 100%;
+  font-size: var(--str-video__font-size-md);
+  font-weight: 500;
+  border: 1px solid transparent;
+  color: var(--str-video__text-color1);
+  background-color: var(--str-video__button-primary-base);
+}
+.str-video__button:not([disabled]):hover {
+  background-color: var(--str-video__button-primary-hover);
+  cursor: pointer;
+}
+.str-video__button__icon {
+  margin-inline-end: var(--str-video__spacing-xs);
+  background-color: var(--str-video__text-color1);
+}
+.str-video__button:disabled {
+  background-color: var(--str-video__button-default-disabled);
+  cursor: not-allowed;
+}
+
+.str-video__composite-button--caption {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.str-video__composite-button .str-video__composite-button__button-group {
+  display: flex;
+  align-items: center;
+}
+.str-video__composite-button .str-video__composite-button__button-group .str-video__composite-button__button {
+  all: unset;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  padding: 0.5rem;
+}
+.str-video__composite-button .str-video__composite-button__button-group .str-video__composite-button__button:not([disabled]):hover {
+  cursor: pointer;
+}
+.str-video__composite-button .str-video__composite-button__button-group .str-video__menu-toggle-button {
+  padding: 0;
+  margin-inline-start: -30px;
+  margin-inline-end: 8px;
+}
+.str-video__composite-button .str-video__composite-button__button-group .str-video__loading-indicator__icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  -webkit-mask-size: 1.25rem;
+  mask-size: 1.25rem;
+}
+.str-video__composite-button.str-video__composite-button--menu .str-video__composite-button__button {
+  padding-inline-end: 2.5rem;
+}
+
+.str-video__call-controls__button {
+  padding: 0.5rem;
+}
+.str-video__call-controls__button[disabled] {
+  cursor: not-allowed;
+}
+.str-video__call-controls__button:hover, .str-video__call-controls__button:hover > *:hover {
+  cursor: pointer;
+}
+
+.str-video__text-button {
+  all: unset;
+  padding: 5px;
+  font-size: 12px;
+  border-radius: var(--str-video__participant-list-header__close-button--border-radius);
+  background: var(--str-video__participant-list-header__close-button--background-color);
+}
+
+.str-video__call-recording-list-item__action-button {
+  border: none;
+}
+
+.str-video {
+  /* The font color applied inside the component */
+  --str-video__composite-button__button-group--color: var(
+    --str-video__text-color1
+  );
+  /* The background color of the component */
+  --str-video__composite-button__button-group--background-color: var(
+    --str-video__button-primary-base
+  );
+  /* The active background color of the component */
+  --str-video__composite-button__button-group-active--background-color: var(
+    --str-video__button-primary-active
+  );
+  --str-video__composite-button__button-group-active-primary--background-color: var(
+    --str-video__button-primary-active
+  );
+  --str-video__composite-button__button-group-active-secondary--background-color: var(
+    --str-video__button-secondary-active
+  );
+  --str-video__composite-button__button-group-active-secondary-hover--background-color: var(
+    --str-video__button-secondary-hover
+  );
+  /* The hover background color of the component */
+  --str-video__composite-button__button-group-hover--background-color: var(
+    --str-video__button-default-hover
+  );
+  /* The border radius used for the borders of the component */
+  --str-video__composite-button__button-group--border-radius: var(
+    --str-video__border-radius-xs
+  );
+}
+
+.str-video__composite-button__button-group {
+  background: var(--str-video__composite-button__button-group--background-color);
+  color: var(--str-video__composite-button__button-group--color);
+  box-shadow: var(--str-video__composite-button__button-group--box-shadow);
+  border-radius: var(--str-video__composite-button__button-group--border-radius);
+  border-block-start: var(--str-video__composite-button__button-group--border-block-start);
+  border-block-end: var(--str-video__composite-button__button-group--border-block-end);
+  border-inline-start: var(--str-video__composite-button__button-group--border-inline-start);
+  border-inline-end: var(--str-video__composite-button__button-group--border-inline-end);
+  background-color: var(--str-video__composite-button__button-group--background-color);
+  border-radius: var(--str-video__border-radius-circle);
+}
+.str-video__composite-button__button-group .str-video__call-controls__button.str-video__menu-toggle-button {
+  background-color: var(--str-video__button-primary-base);
+}
+.str-video__composite-button__button-group .str-video__call-controls__button.str-video__menu-toggle-button:hover {
+  background-color: var(--str-video__button-default-hover);
+}
+.str-video__composite-button__button-group .str-video__call-controls__button.str-video__menu-toggle-button--active {
+  background-color: var(--str-video__composite-button__button-group-hover--background-color);
+  color: white;
+}
+.str-video__composite-button__button-group .str-video__call-controls__button.str-video__menu-toggle-button--active:hover {
+  background-color: var(--str-video__composite-button__button-group-hover--background-color);
+}
+.str-video__composite-button__button-group .str-video__call-controls__button.str-video__menu-toggle-button--active:disabled {
+  background-color: var(--str-video__composite-button__button-group-hover--background-color);
+}
+.str-video__composite-button__button-group.str-video__composite-button__button-group--active {
+  background-color: var(--str-video__composite-button__button-group-active--background-color);
+}
+.str-video__composite-button__button-group.str-video__composite-button__button-group--active:hover {
+  background-color: var(--str-video__button-primary-hover);
+}
+.str-video__composite-button__button-group.str-video__composite-button__button-group--active .str-video__icon {
+  background-color: var(--str-video__icon-active);
+}
+.str-video__composite-button__button-group.str-video__composite-button__button-group--active-primary {
+  background-color: var(--str-video__composite-button__button-group-active-primary--background-color);
+}
+.str-video__composite-button__button-group.str-video__composite-button__button-group--active-secondary {
+  background-color: var(--str-video__composite-button__button-group-active-secondary--background-color);
+}
+
+.str-video__composite-button__caption {
+  font-size: 12px;
+  line-height: 15px;
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.str-video__composite-button__button-group:not(.str-video__composite-button__button-group--disabled):hover {
+  background-color: var(--str-video__composite-button__button-group-hover--background-color);
+}
+.str-video__composite-button__button-group:not(.str-video__composite-button__button-group--disabled):hover.str-video__composite-button__button-group--active-secondary:hover {
+  background-color: var(--str-video__composite-button__button-group-active-secondary-hover--background-color);
+}
+.str-video__composite-button__button-group:not(.str-video__composite-button__button-group--disabled):hover .str-video__icon {
+  background-color: var(--str-video__icon-hover);
+}
+
+.str-video__call-controls__button {
+  border-radius: var(--str-video__border-radius-circle);
+  text-decoration: none;
+  box-shadow: none;
+  border: none;
+  background-color: var(--str-video__button-primary-base);
+}
+.str-video__call-controls__button:hover {
+  text-decoration: none;
+  background-color: var(--str-video__composite-button__button-group-hover--background-color);
+}
+.str-video__call-controls__button:hover .str-video__icon {
+  background-color: var(--str-video__icon-hover);
+}
+.str-video__call-controls__button--variant-danger {
+  background-color: var(--str-video__button-tertiary-base);
+}
+.str-video__call-controls__button--variant-danger .str-video__icon {
+  background-color: white;
+}
+.str-video__call-controls__button--variant-danger:hover {
+  background-color: var(--str-video__button-tertiary-hover);
+}
+.str-video__call-controls__button--variant-success {
+  background-color: var(--str-video__info-color);
+}
+.str-video__call-controls__button--variant-success:hover {
+  background-color: var(--str-video__info-color--accent);
+}
+.str-video__call-controls__button--variant-active {
+  background-color: var(--str-video__button-primary-active);
+}
+.str-video__call-controls__button--variant-active:hover {
+  background-color: var(--str-video__button-primary-hover);
+}
+.str-video__call-controls__button--enabled {
+  background: var(--str-video__background-color7);
+}
+
+.str-video__background-filters {
+  position: absolute;
+  bottom: 0;
+  right: calc(100% - 1px);
+  overflow: hidden;
+  opacity: 0;
+}
+.str-video__background-filters .str-video__background-filters__video {
+  top: 0;
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+}
+.str-video__background-filters .str-video__background-filters__video--tall {
+  object-fit: contain;
+}
+.str-video__background-filters .str-video__background-filters__background-image {
+  top: 5px;
+  width: 100%;
+  height: auto;
+}
+.str-video__background-filters .str-video__background-filters__target-canvas {
+  top: 10px;
+  width: 100%;
+  height: auto;
+}
+
+.str-video__call-controls {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  padding: 1rem 0;
+}
+.str-video__call-controls .str-video__reactions-menu {
+  background-color: var(--str-video__base-color6);
+  display: flex;
+  padding: var(--str-video__spacing-sm);
+  gap: 0.5rem;
+  border-radius: var(--str-video__border-radius-lg);
+}
+.str-video__call-controls .str-video__reactions-menu--horizontal {
+  flex-direction: row;
+}
+.str-video__call-controls .str-video__reactions-menu--vertical {
+  flex-direction: column;
+}
+.str-video__call-controls .str-video__reactions-menu .str-video__reactions-menu__button {
+  font-family: "Twemoji Mozilla", Apple Color Emoji, "Segoe UI Emoji", "Noto Color Emoji", "EmojiOne Color";
+  font-size: 1.2rem;
+  height: 38px;
+  width: 38px;
+  background-color: var(--str-video__button-primary-base);
+  border-radius: var(--str-video__border-radius-circle);
+  border: 1px solid transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.str-video__call-controls .str-video__reactions-menu .str-video__reactions-menu__button:hover {
+  background-color: var(--str-video__button-primary-hover);
+  cursor: pointer;
+}
+
+.str-video__no-media-permission,
+.str-video__pending-permission {
+  position: absolute;
+  height: 12px;
+  width: 12px;
+  outline: 1px solid var(--str-video__base-color6);
+  border-radius: var(--str-video__border-radius-circle);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: var(--str-video__font-size-xxs);
+  cursor: pointer;
+  font-weight: 600;
+  top: 0;
+  right: -3px;
+}
+
+.str-video__no-media-permission {
+  background-color: var(--str-video__alert-caution);
+  color: var(--str-video__base-color4);
+}
+
+.str-video__pending-permission {
+  background-color: var(--str-video__button-secondary-active);
+  color: var(--str-video__text-color1);
+}
+
+.str-video__composite-button.str-video__device-unavailable .str-video__composite-button__button-group {
+  background-color: var(--str-video__button-default-disabled);
+}
+.str-video__composite-button.str-video__device-unavailable .str-video__composite-button__button-group:hover {
+  background-color: var(--str-video__button-default-hover);
+}
+
+.str-video__end-call__confirmation {
+  padding: var(--str-video__spacing-lg);
+  gap: var(--str-video__spacing-md);
+  display: flex;
+  flex-direction: column;
+}
+.str-video__end-call__leave, .str-video__end-call__end {
+  min-width: 196px;
+  color: var(--str-video__text-color1);
+  border: 1px solid transparent;
+  padding: calc(var(--str-video__spacing-sm) - 1px) var(--str-video__spacing-lg);
+}
+.str-video__end-call__leave-icon, .str-video__end-call__end-icon {
+  background-color: var(--str-video__text-color1);
+}
+.str-video__end-call__leave {
+  background-color: var(--str-video__button-tertiary-base);
+}
+.str-video__end-call__leave:hover {
+  background-color: var(--str-video__button-tertiary-hover);
+}
+.str-video__end-call__end {
+  background-color: var(--str-video__button-primary-base);
+  border-color: var(--str-video__button-default-hover);
+}
+.str-video__end-call__end:hover {
+  background-color: var(--str-video__button-tertiary-hover);
+  border-color: transparent;
+}
+
+.str-video__end-call.str-video__end-call__leave-icon,
+.str-video__icon.str-video__end-call__end-icon {
+  background-color: var(--str-video__text-color1);
+}
+
+.str-video__end-recording__confirmation {
+  background-color: var(--str-video__base-color7);
+  border-radius: var(--str-video__border-radius-lg);
+  padding: var(--str-video__spacing-xl);
+  gap: var(--str-video__spacing-lg);
+  display: flex;
+  flex-direction: column;
+}
+
+.str-video__end-recording__header {
+  display: flex;
+  flex-direction: row;
+  gap: var(--str-video__spacing-md);
+}
+
+.str-video__end-recording__heading {
+  font-size: var(--str-video__font-size-lg);
+  font-weight: 600;
+  margin: 0;
+}
+
+.str-video__end-recording__description {
+  margin: 0;
+  color: var(--str-video__text-color2);
+  font-size: var(--str-video__font-size-sm);
+}
+
+.str-video__end-recording__actions {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: var(--str-video__spacing-md);
+}
+.str-video__end-recording__actions .str-video__composite-button {
+  width: 100%;
+  gap: var(--str-video__spacing-md);
+}
+.str-video__end-recording__actions .str-video__composite-button:first-of-type {
+  background-color: transparent;
+}
+.str-video__end-recording__actions .str-video__composite-button:first-of-type .str-video__composite-button__button-group {
+  background-color: transparent;
+  border: 1px solid var(--str-video__base-color2);
+  width: 100%;
+  justify-content: center;
+}
+.str-video__end-recording__actions .str-video__composite-button:first-of-type .str-video__composite-button__button-group:hover {
+  background-color: var(--str-video__button-default-hover);
+}
+.str-video__end-recording__actions .str-video__composite-button .str-video__composite-button__button-group {
+  background-color: var(--str-video__button-tertiary-base);
+  width: 100%;
+  justify-content: center;
+}
+.str-video__end-recording__actions .str-video__composite-button .str-video__composite-button__button-group .str-video__text-button {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.str-video__end-recording__actions .str-video__composite-button .str-video__composite-button__button-group:hover {
+  background-color: var(--str-video__button-tertiary-hover);
+}
+
+.str-video__livestream-layout__wrapper {
+  flex-grow: 1;
+  overflow-y: hidden;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__screen-share {
+  max-width: 100%;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__screen-share .str-video__video {
+  object-fit: contain;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__floating-participant {
+  position: absolute;
+  width: 240px;
+  height: 135px;
+  box-shadow: var(--str-video__background-color1) 0 0 3px 0;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__floating-participant--top-right {
+  top: 8px;
+  right: 8px;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__floating-participant--top-left {
+  top: 8px;
+  left: 8px;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__floating-participant--bottom-right {
+  bottom: 8px;
+  right: 8px;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__floating-participant--bottom-left {
+  bottom: 8px;
+  left: 8px;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column-reverse;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay:hover .str-video__livestream-layout__overlay__bar {
+  background-color: var(--str-video__livestream-overlay-color-hovered);
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__overlay__bar {
+  height: 10%;
+  min-height: 40px;
+  max-height: 70px;
+  position: relative;
+  bottom: 0;
+  border-bottom-left-radius: var(--str-video__border-radius-sm);
+  border-bottom-right-radius: var(--str-video__border-radius-sm);
+  background-color: var(--str-video__livestream-overlay-color);
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__overlay__bar-left,
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__overlay__bar-center,
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__overlay__bar-right {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__overlay__bar-center {
+  justify-content: center;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__overlay__bar-right {
+  justify-content: flex-end;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__live-badge {
+  padding: 4px 8px;
+  border-radius: var(--str-video__border-radius-xxs);
+  background-color: var(--str-video__primary-color);
+  color: var(--str-video__text-color1);
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__viewers-count::before {
+  content: var(--str-video__icon--livestream-viewers);
+  margin-right: 3px;
+  vertical-align: middle;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__viewers-count {
+  padding: 4px 8px;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__speaker-name {
+  font-size: 13px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__duration {
+  text-align: center;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__mute-button {
+  background: var(--str-video__icon--speaker) center no-repeat;
+  border-radius: var(--str-video__border-radius-xxs);
+  cursor: pointer;
+  width: 32px;
+  height: 32px;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__mute-button.str-video__livestream-layout__mute-button--muted {
+  background: var(--str-video__icon--speaker-off) center no-repeat;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__mute-button:hover {
+  background-color: var(--str-video__overlay-color);
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__go-fullscreen {
+  background: var(--str-video__icon--fullscreen) center no-repeat;
+  border-radius: var(--str-video__border-radius-xxs);
+  cursor: pointer;
+  width: 32px;
+  height: 32px;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__go-fullscreen:hover {
+  background-color: var(--str-video__overlay-color);
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__backstage {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__backstage .str-video__livestream-layout__starts-at {
+  padding: 4px 8px;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__backstage .str-video__livestream-layout__early-viewers-count::before {
+  content: var(--str-video__icon--livestream-viewers);
+  margin-right: 3px;
+  vertical-align: middle;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__backstage .str-video__livestream-layout__early-viewers-count {
+  padding: 4px 8px;
+}
+
+.str-video__paginated-grid-layout__wrapper {
+  flex-grow: 1;
+}
+
+.str-video__paginated-grid-layout {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: space-between;
+}
+.str-video__paginated-grid-layout .str-video__paginated-grid-layout__group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
+  max-width: 110vh;
+  padding-inline: 1.25rem;
+  margin: auto;
+  width: 100%;
+}
+.str-video__paginated-grid-layout .str-video__paginated-grid-layout__group .str-video__participant-view {
+  flex: 0 1 calc(25% - 6px);
+}
+.str-video__paginated-grid-layout .str-video__paginated-grid-layout__group.str-video__paginated-grid-layout--one .str-video__participant-view {
+  flex: 0 1 calc(100% - 6px);
+}
+.str-video__paginated-grid-layout .str-video__paginated-grid-layout__group.str-video__paginated-grid-layout--two-four .str-video__participant-view {
+  flex: 0 1 calc(50% - 6px);
+}
+.str-video__paginated-grid-layout .str-video__paginated-grid-layout__group.str-video__paginated-grid-layout--five-nine .str-video__participant-view {
+  flex: 0 1 calc(33% - 6px);
+}
+
+.str-video__speaker-layout__wrapper {
+  flex-grow: 1;
+  overflow-y: hidden;
+}
+
+.str-video__speaker-layout {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  gap: 1rem;
+  padding-inline: 2px;
+  padding: 2px;
+}
+.str-video__speaker-layout .str-video__participant-view {
+  aspect-ratio: 16/9;
+}
+.str-video__speaker-layout .str-video__speaker-layout__spotlight {
+  display: flex;
+  justify-content: center;
+  min-height: 0;
+  height: 100%;
+}
+.str-video__speaker-layout .str-video__speaker-layout__spotlight .str-video__participant-view--speaking:has(.str-video__video--screen-share) {
+  outline: none;
+}
+.str-video__speaker-layout .str-video__speaker-layout__spotlight .str-video__video {
+  height: 100%;
+  width: 100%;
+}
+.str-video__speaker-layout .str-video__speaker-layout__spotlight .str-video__participant-details,
+.str-video__speaker-layout .str-video__speaker-layout__spotlight .str-video__call-controls__button {
+  opacity: 1;
+}
+.str-video__speaker-layout .str-video__speaker-layout__participants-bar-buttons-wrapper {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.str-video__speaker-layout .str-video__speaker-layout__participants-bar-buttons-wrapper > .str-video__call-controls__button .str-video__icon {
+  width: 1rem;
+  height: 1rem;
+}
+.str-video__speaker-layout .str-video__speaker-layout__participants-bar-buttons-wrapper .str-video__speaker-layout__participants-bar--button-left {
+  position: absolute;
+  left: 0.5rem;
+}
+.str-video__speaker-layout .str-video__speaker-layout__participants-bar-buttons-wrapper .str-video__speaker-layout__participants-bar--button-right {
+  position: absolute;
+  right: 0.5rem;
+}
+.str-video__speaker-layout .str-video__speaker-layout__participants-bar-buttons-wrapper .str-video__speaker-layout__participants-bar--button-top {
+  position: absolute;
+  top: 0.5rem;
+}
+.str-video__speaker-layout .str-video__speaker-layout__participants-bar-buttons-wrapper .str-video__speaker-layout__participants-bar--button-bottom {
+  position: absolute;
+  bottom: 0.5rem;
+}
+.str-video__speaker-layout .str-video__speaker-layout__participants-bar-wrapper {
+  scrollbar-width: none;
+}
+.str-video__speaker-layout .str-video__speaker-layout__participants-bar-wrapper::-webkit-scrollbar {
+  display: none;
+}
+.str-video__speaker-layout .str-video__speaker-layout__participants-bar-wrapper .str-video__speaker-layout__participants-bar {
+  display: flex;
+  align-items: center;
+}
+.str-video__speaker-layout .str-video__speaker-layout__participants-bar-wrapper .str-video__speaker-layout__participants-bar .str-video__speaker-layout__participant-tile {
+  width: 280px;
+  min-width: 280px;
+  max-width: 25vh;
+  padding: 5px;
+}
+.str-video__speaker-layout--variant-top {
+  flex-direction: column-reverse;
+}
+.str-video__speaker-layout--variant-left {
+  flex-direction: row-reverse;
+}
+.str-video__speaker-layout--variant-right {
+  flex-direction: row;
+}
+.str-video__speaker-layout--variant-left .str-video__speaker-layout__participants-bar-wrapper, .str-video__speaker-layout--variant-right .str-video__speaker-layout__participants-bar-wrapper {
+  overflow-y: auto;
+  max-height: 100%;
+}
+.str-video__speaker-layout--variant-left .str-video__speaker-layout__participants-bar, .str-video__speaker-layout--variant-right .str-video__speaker-layout__participants-bar {
+  flex-direction: column;
+}
+.str-video__speaker-layout--variant-left .str-video__speaker-layout__spotlight, .str-video__speaker-layout--variant-right .str-video__speaker-layout__spotlight {
+  width: 100%;
+}
+.str-video__speaker-layout--variant-left .str-video__participant-view, .str-video__speaker-layout--variant-right .str-video__participant-view {
+  max-width: unset;
+}
+.str-video__speaker-layout--variant-top .str-video__speaker-layout__participants-bar-wrapper, .str-video__speaker-layout--variant-bottom .str-video__speaker-layout__participants-bar-wrapper {
+  overflow-x: auto;
+}
+.str-video__speaker-layout--variant-top .str-video__speaker-layout__participants-bar, .str-video__speaker-layout--variant-bottom .str-video__speaker-layout__participants-bar {
+  flex-direction: row;
+}
+.str-video__speaker-layout--variant-top .str-video__participant-view, .str-video__speaker-layout--variant-bottom .str-video__participant-view {
+  max-width: 110vh;
+}
+
+@media (min-width: 600px) {
+  .str-video__speaker-layout .str-video__speaker-layout__spotlight {
+    align-items: center;
+    height: auto;
+  }
+  .str-video__speaker-layout .str-video__speaker-layout__spotlight .str-video__video {
+    object-fit: contain;
+  }
+}
+.str-video__pip-layout {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  overflow: hidden;
+  justify-content: center;
+  gap: 1rem;
+  padding-inline: 1rem;
+  height: 100%;
+}
+
+.str-video__pip-screen-share-local {
+  display: flex;
+  gap: var(--str-video__spacing-sm);
+  border-radius: var(--str-video__border-radius-sm);
+  padding: var(--str-video__spacing-md);
+  font-size: var(--str-video__font-size-sm);
+}
+.str-video__pip-screen-share-local .str-video__icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.str-video__pip-layout--grid {
+  flex-wrap: nowrap;
+}
+
+.str-video__pip-layout__grid-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: 100%;
+  overflow: hidden;
+}
+
+.str-video__pip-layout__pagination-button {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+  padding: var(--str-video__spacing-xxs);
+  min-width: auto;
+  opacity: 0.8;
+  transition: opacity 0.2s ease;
+}
+.str-video__pip-layout__pagination-button:hover:not(:disabled) {
+  opacity: 1;
+}
+.str-video__pip-layout__pagination-button .str-video__icon {
+  width: 1rem;
+  height: 1rem;
+}
+.str-video__pip-layout__pagination-button--left {
+  left: 0;
+}
+.str-video__pip-layout__pagination-button--right {
+  right: 0;
+}
+
+.str-video__pip-layout__grid {
+  display: grid;
+  grid-template-columns: repeat(var(--pip-cols), 1fr);
+  gap: var(--str-video__spacing-xxs);
+  width: 100%;
+  max-height: 100%;
+  flex: 1 1 auto;
+}
+.str-video__pip-layout__grid .str-video__participant-view {
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+.str-video__pip-layout__grid .str-video__participant-view--speaking {
+  outline: none;
+}
+.str-video__pip-layout__grid .str-video__participant-view--speaking::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: 2px solid var(--str-video__primary-color);
+  border-radius: var(--str-video__border-radius-sm);
+  pointer-events: none;
+  z-index: 1;
+}
+.str-video__pip-layout__grid .str-video__participant-view .str-video__notification {
+  display: none;
+}
+.str-video__pip-layout__grid .str-video__video-placeholder__avatar,
+.str-video__pip-layout__grid .str-video__video-placeholder__initials-fallback {
+  width: 32px;
+  height: 32px;
+  font-size: var(--str-video__font-size-sm);
+}
+.str-video__pip-layout__grid.str-video__pip-layout__grid--single {
+  --pip-cols: 1;
+}
+.str-video__pip-layout__grid.str-video__pip-layout__grid--single .str-video__video-placeholder__avatar,
+.str-video__pip-layout__grid.str-video__pip-layout__grid--single .str-video__video-placeholder__initials-fallback {
+  width: 80px;
+  height: 80px;
+  font-size: var(--str-video__font-size-xxl);
+}
+.str-video__pip-layout__grid.str-video__pip-layout__grid--small {
+  --pip-cols: 2;
+}
+.str-video__pip-layout__grid.str-video__pip-layout__grid--small .str-video__video-placeholder__avatar,
+.str-video__pip-layout__grid.str-video__pip-layout__grid--small .str-video__video-placeholder__initials-fallback {
+  width: 60px;
+  height: 60px;
+  font-size: var(--str-video__font-size-xl);
+}
+.str-video__pip-layout__grid.str-video__pip-layout__grid--medium {
+  --pip-cols: 3;
+}
+.str-video__pip-layout__grid.str-video__pip-layout__grid--medium .str-video__video-placeholder__avatar,
+.str-video__pip-layout__grid.str-video__pip-layout__grid--medium .str-video__video-placeholder__initials-fallback {
+  width: 45px;
+  height: 45px;
+  font-size: var(--str-video__font-size-md);
+}
+.str-video__pip-layout__grid.str-video__pip-layout__grid--large {
+  --pip-cols: 4;
+}
+.str-video__pip-layout__grid.str-video__pip-layout__grid--large .str-video__video-placeholder__avatar,
+.str-video__pip-layout__grid.str-video__pip-layout__grid--large .str-video__video-placeholder__initials-fallback {
+  width: 35px;
+  height: 35px;
+  font-size: var(--str-video__font-size-sm);
+}
+.str-video__pip-layout__grid.str-video__pip-layout__grid--overflow {
+  --pip-cols: 5;
+  overflow-y: auto;
+}
+.str-video__pip-layout__grid.str-video__pip-layout__grid--overflow .str-video__video-placeholder__avatar,
+.str-video__pip-layout__grid.str-video__pip-layout__grid--overflow .str-video__video-placeholder__initials-fallback {
+  width: 25px;
+  height: 25px;
+  font-size: var(--str-video__font-size-xs);
+}
+
+.str-video__pip-screen-share-local {
+  background: var(--str-video__background-color5);
+}
+
+.str-video__participant-list {
+  display: flex;
+  flex-direction: column;
+}
+.str-video__participant-list .str-video__participant-list-header {
+  display: flex;
+  align-items: center;
+}
+.str-video__participant-list .str-video__participant-list-header .str-video__participant-list-header__title {
+  flex: 1;
+  font-size: var(--str-video__font-size-sm);
+}
+.str-video__participant-list .str-video__participant-list-header .str-video__participant-list-header__close-button > span {
+  height: 15px;
+  width: 15px;
+}
+.str-video__participant-list .str-video__search-input__container {
+  margin-top: var(--str-video__spacing-md);
+}
+.str-video__participant-list .str-video__participant-list__content-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: var(--str-video__spacing-md);
+  justify-content: flex-end;
+}
+.str-video__participant-list .str-video__participant-list__content-header .str-video__participant-list__content-header-title {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.str-video__participant-list .str-video__participant-list__content-header .str-video__call-controls__button {
+  width: 1.75rem;
+  height: 1.75rem;
+  display: flex;
+  padding: unset;
+  align-items: center;
+  justify-content: center;
+}
+.str-video__participant-list .str-video__participant-list__content-header .str-video__call-controls__button .str-video__icon--filter {
+  width: 1rem;
+  height: 1rem;
+}
+.str-video__participant-list .str-video__participant-list__content {
+  height: auto;
+  flex-grow: 1;
+  overflow-y: auto;
+  margin-top: var(--str-video__spacing-xl);
+}
+.str-video__participant-list .str-video__participant-list__footer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: stretch;
+  gap: 0.5rem;
+}
+.str-video__participant-list .str-video__search-results--loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+.str-video__participant-list .str-video__search-results--loading .str-video__loading-indicator__icon {
+  height: 3rem;
+  width: 3rem;
+  -webkit-mask-size: 3rem;
+  mask-size: 3rem;
+}
+.str-video__participant-list .str-video__participant-list--empty {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--str-video__spacing-md);
+  font-size: var(--str-video__font-size-sm);
+}
+
+.str-video__invite-link-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  width: 100%;
+  position: relative;
+  padding-block: 0.5rem;
+}
+.str-video__invite-link-button .str-video__invite-link-tooltip {
+  position: absolute;
+  bottom: 110%;
+}
+.str-video__invite-link-button .str-video__invite-participant-icon {
+  height: 20px;
+  width: 20px;
+}
+
+.str-video__participant-listing-item {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--str-video__spacing-sm);
+  padding-block: 0.5rem;
+  width: 100%;
+  align-items: center;
+}
+.str-video__participant-listing-item .str-video__call-controls__button {
+  padding: unset;
+}
+.str-video__participant-listing-item .str-video__participant-listing-item__display-name {
+  flex: 1;
+  white-space: nowrap;
+  overflow-y: visible;
+  overflow-x: hidden;
+  overflow-x: clip;
+  text-overflow: ellipsis;
+}
+.str-video__participant-listing-item .str-video__participant-avatar {
+  display: flex;
+  align-items: center;
+  gap: var(--str-video__spacing-sm);
+}
+.str-video__participant-listing-item .str-video__participant-listing-item__media-indicator-group {
+  display: flex;
+  align-items: center;
+  gap: var(--str-video__spacing-sm);
+}
+.str-video__participant-listing-item .str-video__participant-listing-item__media-indicator-group .str-video__participant-listing-item__icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+.str-video__participant-listing-item .str-video__participant-listing-item__display-name {
+  font-size: 13px;
+}
+.str-video__participant-listing-item .str-video__participant-listing-item__media-indicator-group .str-video__participant-listing-item__icon-mic {
+  -webkit-mask-image: var(--str-video__icon--mic);
+  mask-image: var(--str-video__icon--mic);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  background-color: var(--str-video__text-color1);
+}
+.str-video__participant-listing-item .str-video__participant-listing-item__media-indicator-group .str-video__participant-listing-item__icon-mic-off {
+  -webkit-mask-image: var(--str-video__icon--mic-off);
+  mask-image: var(--str-video__icon--mic-off);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  background-color: var(--str-video__danger-color);
+}
+.str-video__participant-listing-item .str-video__participant-listing-item__media-indicator-group .str-video__participant-listing-item__icon-camera {
+  -webkit-mask-image: var(--str-video__icon--camera);
+  mask-image: var(--str-video__icon--camera);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  background-color: var(--str-video__text-color1);
+}
+.str-video__participant-listing-item .str-video__participant-listing-item__media-indicator-group .str-video__participant-listing-item__icon-camera-off {
+  -webkit-mask-image: var(--str-video__icon--camera-off);
+  mask-image: var(--str-video__icon--camera-off);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  background-color: var(--str-video__danger-color);
+}
+.str-video__participant-listing-item .str-video__participant-listing-item__media-indicator-group .str-video__participant-listing-item__icon-pinned {
+  -webkit-mask-image: var(--str-video__icon--pin);
+  mask-image: var(--str-video__icon--pin);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  background-color: var(--str-video__text-color1);
+}
+
+.str-video__call-preview {
+  width: 100%;
+  height: auto;
+  display: inline-block;
+  object-fit: contain;
+}
+
+.str-video__call-recording-list__list {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.str-video__call-recording-list__list:first-of-type .str-video__call-recording-list__item {
+  font-weight: 600;
+}
+
+.str-video__call-recording-list__item {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  font-size: var(--str-video__font-size-xs);
+  border-bottom: 1px solid var(--str-video__base-color2);
+  padding: var(--str-video__spacing-sm) 0;
+  gap: var(--str-video__spacing-sm);
+}
+.str-video__call-recording-list__item:last-of-type {
+  border-bottom: none;
+}
+
+.str-video__call-recording-list__filename {
+  width: 200px;
+}
+
+.str-video__call-recording-list__time {
+  width: 100px;
+}
+
+.str-video__call-recording-list__download {
+  display: flex;
+  justify-content: flex-end;
+  width: 100px;
+}
+
+.str-video__call-recording-list__filename,
+.str-video__call-recording-list__time {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.str-video__call-recording-list-item__action-button--download .str-video__icon--download {
+  height: 32px;
+  width: 32px;
+}
+.str-video__call-recording-list-item__action-button--download:hover .str-video__icon--download {
+  cursor: pointer;
+  background-color: var(--str-video__brand-color1);
+}
+
+.str-video__call-recording-list__title {
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.25rem;
+}
+
+.str-video__call-controls__button--icon-call-recordings {
+  -webkit-mask-image: var(--str-video__icon--film-roll);
+  mask-image: var(--str-video__icon--film-roll);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: 2px;
+  mask-size: 2px;
+  background-color: var(--str-video__text-color1);
+}
+
+.str-video__call-recordings__toggle-button--active {
+  background-color: var(--str-video__background-color7);
+}
+
+.str-video__refresh-button {
+  background-color: transparent;
+  cursor: pointer;
+  border-radius: 4px;
+}
+.str-video__refresh-button:hover {
+  background-color: var(--str-video__background-color7);
+}
+.str-video__refresh-button:active {
+  background-color: var(--str-video__background-color5);
+  transition: background-color 0.2s ease-out;
+}
+.str-video__refresh-button .str-video__refresh-button--icon {
+  -webkit-mask-image: var(--str-video__icon--refresh);
+  mask-image: var(--str-video__icon--refresh);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  background-color: var(--str-video__text-color1);
+}
+
+.str-video__call-recording-list__listing--icon-empty {
+  -webkit-mask-image: var(--str-video__icon--film-roll);
+  mask-image: var(--str-video__icon--film-roll);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  background-color: var(--str-video__text-color1);
+}
+
+.str-video__call-stats {
+  border-radius: var(--str-video__border-radius-lg);
+  background-color: var(--str-video__base-color7);
+  padding: var(--str-video__spacing-md);
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.str-video__call-stats h3 {
+  margin: unset;
+}
+.str-video__call-stats .str-video__call-stats__header {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: var(--str-video__spacing-md);
+}
+.str-video__call-stats .str-video__call-stats__heading {
+  display: flex;
+  align-items: center;
+}
+.str-video__call-stats .str-video__call-stats__icon {
+  margin-right: var(--str-video__spacing-sm);
+  height: 18px;
+  width: 18px;
+}
+.str-video__call-stats .str-video__call-stats__description {
+  font-size: var(--str-video__font-size-sm);
+  margin-bottom: var(--str-video__spacing-sm);
+  font-weight: 600;
+}
+.str-video__call-stats .str-video__call-stats__card-container {
+  --gap: 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  gap: var(--gap);
+}
+.str-video__call-stats .str-video__call-stats__card {
+  display: flex;
+  justify-content: space-between;
+  background-color: var(--str-video__background-color4);
+  border-radius: var(--str-video__border-radius-xs);
+  width: calc(50% - var(--gap) / 2);
+  padding: 0.5rem 0.5rem;
+}
+.str-video__call-stats .str-video__call-stats__card .str-video__call-stats__card-content {
+  display: flex;
+  flex-direction: column;
+}
+.str-video__call-stats .str-video__call-stats__card .str-video__call-stats__card-label {
+  display: flex;
+  color: var(--str-video__text-color2);
+  font-size: 0.5625rem;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+.str-video__call-stats .str-video__call-stats__card .str-video__call-stats__card-value {
+  font-size: 1.0625rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+}
+.str-video__call-stats .str-video__call-explanation__icon {
+  height: 12px;
+  width: 12px;
+  margin-left: var(--str-video__spacing-xs);
+}
+.str-video__call-stats .str-video__call-explanation__icon:hover {
+  cursor: pointer;
+}
+.str-video__call-stats .str-video__call-explanation__description {
+  background-color: var(--str-video__base-color3);
+  padding: var(--str-video__spacing-xs);
+  font-size: var(--str-video__font-size-xs);
+  border-radius: var(--str-video__border-radius-xs);
+}
+.str-video__call-stats .str-video__call-stats-line-chart-container {
+  position: relative;
+  margin: auto;
+  height: 170px;
+  width: 100%;
+}
+.str-video__call-stats .str-video__call-stats__tag {
+  border-radius: var(--str-video__border-radius-sm);
+  padding: var(--str-video__spacing-xs);
+  font-size: var(--str-video__font-size-sm);
+  font-weight: 600;
+  height: 30px;
+}
+.str-video__call-stats .str-video__call-stats__tag--good {
+  color: var(--str-video__alert-success);
+  background-color: var(--str-video__alert-success-background);
+}
+.str-video__call-stats .str-video__call-stats__tag--ok {
+  color: var(--str-video__alert-caution);
+  background-color: var(--str-video__alert-caution-background);
+}
+.str-video__call-stats .str-video__call-stats__tag--bad {
+  color: var(--str-video__alert-warning);
+  background-color: var(--str-video__alert-warming-background);
+}
+
+.str-video__device-settings__button .str-video__call-controls__button--icon-device-settings {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.str-video__device-settings {
+  padding: 0.625rem;
+  z-index: 1;
+  font-family: "Inter";
+}
+
+.str-video__device-settings__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 16px 0px 16px;
+  margin-bottom: 33px;
+}
+
+.str-video__icon.str-video__device-settings__settings-icon {
+  height: 24px;
+  width: 24px;
+  color: var(--str-video__base-color1);
+}
+
+.str-video__device-settings__close-button {
+  color: var(--str-video__base-color1);
+  background-color: transparent;
+}
+
+.str-video__device-settings__device-kind {
+  padding: var(--str-video__spacing-lg);
+}
+.str-video__device-settings__device-kind .str-video__device-settings__device-selector-title {
+  font-size: var(--str-video__font-size-sm);
+  font-weight: bold;
+  line-height: 1.25rem;
+  padding-bottom: 0.5rem;
+  margin-bottom: var(--str-video__spacing-sm);
+}
+.str-video__device-settings__device-kind .str-video__option,
+.str-video__device-settings__device-kind .str-video__device-settings__option {
+  display: flex;
+  align-items: center;
+  border-radius: var(--str-video__border-radius-lg);
+  background-color: var(--str-video__button-primary-base);
+  padding: var(--str-video__spacing-sm) var(--str-video__spacing-lg);
+  gap: var(--str-video__spacing-sm);
+  font-weight: 600;
+  font-size: var(--str-video__font-size-sm);
+  line-height: var(--str-video__spacing-lg);
+}
+.str-video__device-settings__device-kind .str-video__option:not(:first-of-type),
+.str-video__device-settings__device-kind .str-video__device-settings__option:not(:first-of-type) {
+  margin-top: var(--str-video__spacing-sm);
+}
+.str-video__device-settings__device-kind .str-video__option__icon--selected,
+.str-video__device-settings__device-kind .str-video__device-settings__option__icon--selected {
+  background-color: var(--str-video__brand-color1);
+}
+.str-video__device-settings__device-kind .str-video__option:hover,
+.str-video__device-settings__device-kind .str-video__device-settings__option:hover {
+  background-color: var(--str-video__button-default-hover);
+  cursor: pointer;
+}
+.str-video__device-settings__device-kind .str-video__option--selected, .str-video__device-settings__device-kind .str-video__option--active,
+.str-video__device-settings__device-kind .str-video__device-settings__option--selected,
+.str-video__device-settings__device-kind .str-video__device-settings__option--active {
+  background-color: var(--str-video__button-default-hover);
+}
+.str-video__device-settings__device-kind .str-video__option input[type=radio],
+.str-video__device-settings__device-kind .str-video__device-settings__option input[type=radio] {
+  margin: 0;
+  height: 1rem;
+  width: 1rem;
+  display: grid;
+  place-content: center;
+}
+.str-video__device-settings__device-kind .str-video__option input[type=radio]::before,
+.str-video__device-settings__device-kind .str-video__device-settings__option input[type=radio]::before {
+  content: "";
+  width: 0.5rem;
+  height: 0.5rem;
+  transform: scale(0);
+}
+.str-video__device-settings__device-kind .str-video__option input[type=radio]:checked::before,
+.str-video__device-settings__device-kind .str-video__device-settings__option input[type=radio]:checked::before {
+  transform: scale(1);
+}
+.str-video__device-settings__device-kind .str-video__option input[type=radio]:checked,
+.str-video__device-settings__device-kind .str-video__device-settings__option input[type=radio]:checked {
+  border-color: var(--str-video__primary-color);
+}
+
+.str-video__device-settings__separator {
+  border-color: var(--str-video__base-color3);
+}
+
+.str-video__audio-volume-indicator {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--str-video__spacing-xs);
+  padding: var(--str-video__spacing-sm) var(--str-video__spacing-md);
+}
+.str-video__audio-volume-indicator .str-video__icon {
+  width: var(--str-video__font-size-xxl);
+  height: var(--str-video__font-size-xxl);
+}
+.str-video__audio-volume-indicator .str-video__audio-volume-indicator__bar {
+  flex: 1;
+  background-color: var(--str-video__base-color1);
+  height: var(--str-video__spacing-xs);
+  border-radius: var(--str-video__border-radius-xs);
+}
+.str-video__audio-volume-indicator .str-video__audio-volume-indicator__bar-value {
+  width: 100%;
+  height: 100%;
+  background: var(--str-video__primary-color);
+  border-radius: var(--str-video__border-radius-xs);
+  transform-origin: left center;
+}
+
+.str-video__speaker-test {
+  padding: var(--str-video__spacing-sm) 0;
+}
+.str-video__speaker-test .str-video__speaker-test__button-content {
+  display: flex;
+  align-items: center;
+  gap: var(--str-video__spacing-sm);
+  padding: 0 var(--str-video__spacing-sm);
+  font-size: var(--str-video__font-size-sm);
+  font-weight: 600;
+}
+.str-video__speaker-test .str-video__composite-button__button {
+  width: 100% !important;
+}
+
+.str-video__dropdown {
+  position: relative;
+}
+.str-video__dropdown-selected {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--str-video__base-color4);
+  border-radius: var(--str-video__border-radius-lg);
+  border: 1px solid var(--str-video__base-color6);
+}
+.str-video__dropdown-selected__label {
+  display: flex;
+  align-items: center;
+  font-weight: 600;
+  padding: var(--str-video__spacing-sm);
+  font-size: var(--str-video__font-size-xs);
+}
+.str-video__dropdown-selected__icon {
+  margin-right: var(--str-video__spacing-sm);
+}
+.str-video__dropdown-selected__chevron {
+  margin-right: var(--str-video__spacing-md);
+}
+.str-video__dropdown-selected > *:hover, .str-video__dropdown-selected:hover {
+  cursor: pointer;
+}
+.str-video__dropdown-selected:hover {
+  border: 1px solid var(--str-video__brand-color1);
+}
+.str-video__dropdown-list {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  z-index: 2;
+  width: 100%;
+  margin-top: var(--str-video__spacing-sm);
+  background-color: var(--str-video__base-color6);
+  border-radius: var(--str-video__border-radius-lg);
+  padding: var(--str-video__spacing-md);
+  gap: var(--str-video__spacing-sm);
+  box-shadow: 0 0 24px -4px rgba(0, 0, 0, 0.64);
+}
+.str-video__dropdown-option {
+  display: flex;
+  align-items: center;
+  border-radius: var(--str-video__border-radius-lg);
+  padding: 8px 16px;
+  gap: 8px;
+  font-weight: 600;
+  font-size: var(--str-video__font-size-sm);
+}
+.str-video__dropdown-option:hover {
+  background-color: var(--str-video__button-default-hover);
+  cursor: pointer;
+}
+.str-video__dropdown-option--selected {
+  background-color: var(--str-video__button-primary-active);
+  color: var(--str-video__text-color1);
+}
+.str-video__dropdown-option--selected:hover {
+  background-color: var(--str-video__button-primary-hover);
+}
+.str-video__dropdown-icon {
+  background-color: var(--str-video__icon-default);
+}
+.str-video__dropdown__option:hover .str-video__dropdown-icon {
+  background-color: var(--str-video__icon-hover);
+}
+.str-video__dropdown-option--selected .str-video__dropdown-icon {
+  background-color: var(--str-video__text-color1);
+}
+.str-video__dropdown-label {
+  font-size: var(--str-video__font-size-xs);
+}
+.str-video__dropdown__option:hover .str-video__dropdown-label {
+  color: var(--str-video__base-color1);
+}
+
+@media (min-width: 600px) {
+  .str-video__dropdown-selected__label {
+    font-size: var(--str-video__font-size-sm);
+  }
+}
+.str-video__icon {
+  background-color: var(--str-video__icon-default);
+}
+.str-video__icon--reactions {
+  -webkit-mask-image: var(--str-video__icon--reactions);
+  mask-image: var(--str-video__icon--reactions);
+}
+.str-video__icon--call-latency {
+  -webkit-mask-image: var(--str-video__icon--call-latency);
+  mask-image: var(--str-video__icon--call-latency);
+}
+.str-video__icon--network-quality {
+  -webkit-mask-image: var(--str-video__icon--network-quality);
+  mask-image: var(--str-video__icon--network-quality);
+}
+.str-video__icon--recording-on {
+  -webkit-mask-image: var(--str-video__icon--recording-on);
+  mask-image: var(--str-video__icon--recording-on);
+}
+.str-video__icon--caret-up {
+  -webkit-mask-image: var(--str-video__icon--caret-up);
+  mask-image: var(--str-video__icon--caret-up);
+}
+.str-video__icon--download {
+  -webkit-mask-image: var(--str-video__icon--download);
+  mask-image: var(--str-video__icon--download);
+}
+.str-video__icon--caret-down {
+  -webkit-mask-image: var(--str-video__icon--caret-down);
+  mask-image: var(--str-video__icon--caret-down);
+  transform: rotate(180deg);
+}
+.str-video__icon--chevron-right {
+  -webkit-mask-image: var(--str-video__icon--chevron-right);
+  mask-image: var(--str-video__icon--chevron-right);
+}
+.str-video__icon--recording-off {
+  -webkit-mask-image: var(--str-video__icon--recording-off);
+  mask-image: var(--str-video__icon--recording-off);
+}
+.str-video__icon--loading {
+  -webkit-mask-image: var(--str-video__icon--loading);
+  mask-image: var(--str-video__icon--loading);
+  transform: rotate(360deg);
+  transition-duration: 1s;
+  transition-delay: now;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+.str-video__icon--logout {
+  -webkit-mask-image: var(--str-video__icon--logout);
+  mask-image: var(--str-video__icon--logout);
+}
+.str-video__icon--chevron-up {
+  -webkit-mask-image: var(--str-video__icon--chevron-up);
+  mask-image: var(--str-video__icon--chevron-up);
+}
+.str-video__icon--chevron-down {
+  -webkit-mask-image: var(--str-video__icon--chevron-down);
+  mask-image: var(--str-video__icon--chevron-down);
+}
+.str-video__icon--screen-share-on {
+  -webkit-mask-image: var(--str-video__icon--screen-share-on);
+  mask-image: var(--str-video__icon--screen-share-on);
+}
+.str-video__icon--screen-share-off {
+  -webkit-mask-image: var(--str-video__icon--screen-share-off);
+  mask-image: var(--str-video__icon--screen-share-off);
+}
+.str-video__icon--caret-down {
+  transform: rotate(180deg);
+  -webkit-mask-image: var(--str-video__icon--caret);
+  mask-image: var(--str-video__icon--caret);
+}
+.str-video__icon--caret-up {
+  -webkit-mask-image: var(--str-video__icon--caret);
+  mask-image: var(--str-video__icon--caret);
+}
+.str-video__icon--caret-right {
+  transform: rotate(90deg);
+  -webkit-mask-image: var(--str-video__icon--caret);
+  mask-image: var(--str-video__icon--caret);
+}
+.str-video__icon--caret-left {
+  transform: rotate(-90deg);
+  -webkit-mask-image: var(--str-video__icon--caret);
+  mask-image: var(--str-video__icon--caret);
+}
+.str-video__icon--close {
+  -webkit-mask-image: var(--str-video__icon--close);
+  mask-image: var(--str-video__icon--close);
+}
+.str-video__icon--mic {
+  -webkit-mask-image: var(--str-video__icon--mic);
+  mask-image: var(--str-video__icon--mic);
+}
+.str-video__icon--mic-off {
+  -webkit-mask-image: var(--str-video__icon--mic-off);
+  mask-image: var(--str-video__icon--mic-off);
+}
+.str-video__icon--camera {
+  -webkit-mask-image: var(--str-video__icon--camera);
+  mask-image: var(--str-video__icon--camera);
+}
+.str-video__icon--camera-off {
+  -webkit-mask-image: var(--str-video__icon--camera-off);
+  mask-image: var(--str-video__icon--camera-off);
+}
+.str-video__icon--camera-off-outline {
+  -webkit-mask-image: var(--str-video__icon--camera-off-outline);
+  mask-image: var(--str-video__icon--camera-off-outline);
+}
+.str-video__icon--call-end {
+  -webkit-mask-image: var(--str-video__icon--call-end);
+  mask-image: var(--str-video__icon--call-end);
+}
+.str-video__icon--call-accept {
+  -webkit-mask-image: var(--str-video__icon--call-accept);
+  mask-image: var(--str-video__icon--call-accept);
+}
+.str-video__icon--info {
+  -webkit-mask-image: var(--str-video__icon--info-icon);
+  mask-image: var(--str-video__icon--info-icon);
+}
+.str-video__icon--stats {
+  -webkit-mask-image: var(--str-video__icon--stats);
+  mask-image: var(--str-video__icon--stats);
+}
+.str-video__icon--speaker {
+  -webkit-mask-image: var(--str-video__icon--speaker);
+  mask-image: var(--str-video__icon--speaker);
+}
+.str-video__icon--ellipsis {
+  -webkit-mask-image: var(--str-video__icon--ellipsis);
+  mask-image: var(--str-video__icon--ellipsis);
+}
+.str-video__icon--pin {
+  -webkit-mask-image: var(--str-video__icon--pin);
+  mask-image: var(--str-video__icon--pin);
+}
+.str-video__icon--no-audio {
+  -webkit-mask-image: var(--str-video__icon--no-audio);
+  mask-image: var(--str-video__icon--no-audio);
+}
+.str-video__icon--not-allowed {
+  -webkit-mask-image: var(--str-video__icon--not-allowed);
+  mask-image: var(--str-video__icon--not-allowed);
+}
+.str-video__icon--film-roll {
+  -webkit-mask-image: var(--str-video__icon--film-roll);
+  mask-image: var(--str-video__icon--film-roll);
+}
+.str-video__icon--device-settings {
+  -webkit-mask-image: var(--str-video__icon--settings);
+  mask-image: var(--str-video__icon--settings);
+}
+.str-video__icon--filter {
+  -webkit-mask-image: var(--str-video__icon--filter);
+  mask-image: var(--str-video__icon--filter);
+}
+.str-video__icon--refresh {
+  -webkit-mask-image: var(--str-video__icon--refresh);
+  mask-image: var(--str-video__icon--refresh);
+}
+.str-video__icon--kick-user {
+  -webkit-mask-image: var(--str-video__icon--kick-user);
+  mask-image: var(--str-video__icon--kick-user);
+}
+
+.str-video__icon {
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  display: block;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.str-video__loading-indicator {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.str-video__loading-indicator__icon.spinner {
+  -webkit-mask-image: var(--str-video__icon--loading);
+  mask-image: var(--str-video__icon--loading);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: 1rem;
+  mask-size: 1rem;
+  background-color: var(--str-video__text-color2);
+  animation: rotation 1s linear infinite;
+  width: 1rem;
+  height: 1rem;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.str-video__menu-container {
+  z-index: 2;
+  width: max-content;
+}
+.str-video__menu-container::-webkit-scrollbar {
+  display: none;
+}
+.str-video__menu-container {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.str-video__portal {
+  position: fixed;
+  z-index: 1;
+  width: 100vw;
+  height: 100vh;
+  background-color: var(--str-video__backdrop1);
+  left: 0;
+  top: 0;
+}
+.str-video__portal:hover {
+  cursor: pointer;
+}
+
+.str-video__portal-content {
+  z-index: 2;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.str-video__menu-container {
+  background-color: var(--str-video__base-color6);
+  border-radius: var(--str-video__border-radius-lg);
+  box-shadow: 0 0 24px -4px rgba(0, 0, 0, 0.64);
+}
+
+.str-video__generic-menu {
+  list-style: none;
+  margin: unset;
+  padding: var(--str-video__spacing-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--str-video__spacing-xs);
+}
+.str-video__generic-menu .str-video__generic-menu--item {
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+  font-size: var(--str-video__font-size-md);
+  display: flex;
+}
+.str-video__generic-menu .str-video__generic-menu--item button {
+  all: unset;
+  width: 100%;
+  font-size: 13px;
+  border-radius: var(--str-video__border-radius-lg);
+  background-color: var(--str-video__button-primary-base);
+  padding: var(--str-video__spacing-xs) var(--str-video__spacing-lg);
+  gap: 10px;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.str-video__generic-menu .str-video__generic-menu--item button:hover {
+  background-color: var(--str-video__button-default-hover);
+  cursor: pointer;
+}
+.str-video__generic-menu .str-video__generic-menu--item button--selected, .str-video__generic-menu .str-video__generic-menu--item button--active {
+  background-color: var(--str-video__button-primary-hover);
+}
+.str-video__generic-menu .str-video__generic-menu--item button[aria-selected] {
+  padding: 5px 10px 5px 26px;
+}
+.str-video__generic-menu .str-video__generic-menu--item button[aria-selected=true]::after {
+  content: "●";
+  font-size: 10px;
+  left: 10px;
+  position: absolute;
+}
+
+.str-video__notification {
+  padding: 0.625rem;
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+.str-video__notification .str-video__notification__icon {
+  display: inline-block;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.str-video__notification .str-video__notification__message {
+  flex: 1;
+}
+.str-video__notification .str-video__notification__close {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+}
+.str-video__notification .str-video__notification__close:hover {
+  cursor: pointer;
+}
+
+.str-video__notification {
+  background-color: var(--str-video__background-color1);
+  border-radius: var(--str-video__border-radius-xs);
+  z-index: 100;
+}
+.str-video__notification .str-video__notification__icon {
+  -webkit-mask-image: var(--str-video__icon--info-icon);
+  mask-image: var(--str-video__icon--info-icon);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: 1.5rem;
+  mask-size: 1.5rem;
+  background-color: var(--str-video__text-color1);
+}
+.str-video__notification .str-video__notification__message {
+  font-size: 0.75rem;
+}
+
+.str-video__participant-view {
+  position: relative;
+  width: 100%;
+  max-width: 1280px;
+  max-height: 100%;
+  min-height: 0;
+  aspect-ratio: 4/3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--str-video__border-radius-sm);
+}
+.str-video__participant-view--speaking {
+  outline: 2px solid var(--str-video__primary-color);
+}
+.str-video__participant-view .str-video__call-controls__button {
+  transition: opacity 200ms ease-out;
+  opacity: 0.3;
+  color: var(--str-video__text-color1);
+}
+.str-video__participant-view:hover .str-video__call-controls__button {
+  opacity: 1;
+}
+.str-video__participant-view > .str-video__call-controls__button {
+  position: absolute;
+  top: 0.875rem;
+  left: 0.875rem;
+  padding: 0.3rem;
+}
+.str-video__participant-view .str-video__participant-details {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--str-video__spacing-sm);
+  border-radius: 0 var(--str-video__border-radius-xs) 0 var(--str-video__border-radius-sm);
+  background-color: var(--str-video__background-color4);
+}
+.str-video__participant-view .str-video__participant-details .str-video__participant-details__name {
+  display: flex;
+  align-items: center;
+  gap: var(--str-video__spacing-sm);
+  padding: 4px 6px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--str-video__font-size-sm);
+}
+.str-video__participant-view .str-video__participant-details .str-video__participant-details__name .str-video__participant-details__name--audio-muted {
+  width: 1rem;
+  height: 1rem;
+  -webkit-mask-size: 1rem;
+  mask-size: 1rem;
+  background-color: var(--str-video__text-color1);
+  -webkit-mask-image: var(--str-video__icon--mic-off);
+  mask-image: var(--str-video__icon--mic-off);
+}
+.str-video__participant-view .str-video__participant-details .str-video__participant-details__name .str-video__participant-details__name--video-muted {
+  width: 1rem;
+  height: 1rem;
+  -webkit-mask-size: 1rem;
+  mask-size: 1rem;
+  background-color: var(--str-video__text-color1);
+  -webkit-mask-image: var(--str-video__icon--camera-off);
+  mask-image: var(--str-video__icon--camera-off);
+}
+.str-video__participant-view .str-video__participant-details .str-video__participant-details__name .str-video__participant-details__name--track-paused {
+  width: 1rem;
+  height: 1rem;
+  -webkit-mask-size: 1rem;
+  mask-size: 1rem;
+  background-color: var(--str-video__text-color1);
+  mask-image: var(--str-video__icon--low-bandwidth);
+  -webkit-mask-image: var(--str-video__icon--low-bandwidth);
+}
+.str-video__participant-view .str-video__participant-details .str-video__participant-details__name .str-video__participant-details__name--pinned {
+  cursor: pointer;
+  width: 1rem;
+  height: 1rem;
+  -webkit-mask-size: 1rem;
+  mask-size: 1rem;
+  background-color: var(--str-video__text-color1);
+  width: 0.8rem;
+  height: 1rem;
+  -webkit-mask-size: 0.8rem;
+  mask-size: 0.8rem;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-image: var(--str-video__icon--pin);
+  mask-image: var(--str-video__icon--pin);
+}
+.str-video__participant-view .str-video__participant-details .str-video__participant-details__name .str-video__participant-details__name--network-stats {
+  width: 1rem;
+  height: 1rem;
+  -webkit-mask-size: 1rem;
+  mask-size: 1rem;
+  background-color: var(--str-video__text-color1);
+  background-image: var(--str-video__icon--network-quality);
+  cursor: pointer;
+  margin-right: 0.625rem;
+}
+.str-video__participant-view .str-video__participant-details__connection-quality {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  border-radius: var(--str-video__border-radius-sm) 0 var(--str-video__border-radius-sm) 0;
+  width: 24px;
+  height: 24px;
+  display: block;
+  background-size: cover;
+  background-color: var(--str-video__background-color4);
+}
+.str-video__participant-view .str-video__participant-details__connection-quality--poor {
+  background-image: var(--str-video__icon--connection-quality-poor);
+}
+.str-video__participant-view .str-video__participant-details__connection-quality--good {
+  background-image: var(--str-video__icon--connection-quality-good);
+}
+.str-video__participant-view .str-video__participant-details__connection-quality--excellent {
+  background-image: var(--str-video__icon--connection-quality-excellent);
+}
+
+.str-video__speech-indicator {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1px;
+  height: 16px;
+}
+.str-video__speech-indicator .str-video__speech-indicator__bar {
+  width: 3px;
+  height: 20%;
+  background-color: var(--str-video__primary-color);
+  border-radius: 2px;
+  animation-duration: 0.4s;
+  animation-iteration-count: 1;
+  animation-name: speech-indicator-silence;
+  animation-timing-function: ease-in-out;
+}
+.str-video__speech-indicator.str-video__speech-indicator--dominant .str-video__speech-indicator__bar {
+  background-color: var(--str-video__primary-color);
+}
+.str-video__speech-indicator.str-video__speech-indicator--speaking .str-video__speech-indicator__bar {
+  height: 100%;
+  animation-iteration-count: infinite;
+}
+.str-video__speech-indicator.str-video__speech-indicator--speaking .str-video__speech-indicator__bar:nth-child(1) {
+  height: 70%;
+  animation-duration: 0.8s;
+  animation-name: speech-indicator-quiet;
+}
+.str-video__speech-indicator.str-video__speech-indicator--speaking .str-video__speech-indicator__bar:nth-child(2) {
+  height: 80%;
+  animation-duration: 1s;
+  animation-name: speech-indicator-loud;
+}
+.str-video__speech-indicator.str-video__speech-indicator--speaking .str-video__speech-indicator__bar:nth-child(3) {
+  height: 60%;
+  animation-duration: 0.9s;
+  animation-name: speech-indicator-quiet;
+}
+@keyframes speech-indicator-silence {
+  25% {
+    transform: scaleY(2);
+  }
+  50% {
+    transform: scaleY(2.5);
+  }
+  75% {
+    transform: scaleY(1);
+  }
+}
+@keyframes speech-indicator-quiet {
+  25% {
+    transform: scaleY(0.5);
+  }
+  50% {
+    transform: scaleY(0.3);
+  }
+  75% {
+    transform: scaleY(0.5);
+  }
+}
+@keyframes speech-indicator-loud {
+  25% {
+    transform: scaleY(1);
+  }
+  50% {
+    transform: scaleY(0.45);
+  }
+  75% {
+    transform: scaleY(1.1);
+  }
+}
+
+.str-video__permission-requests {
+  background-color: var(--str-video__background-color1);
+  border-radius: 8px;
+  padding: 10px;
+  position: relative;
+}
+.str-video__permission-requests .str-video__permission-requests__notification,
+.str-video__permission-requests .str-video__permission-request {
+  display: flex;
+  gap: 10px;
+  padding: 10px 0;
+  align-items: center;
+}
+.str-video__permission-requests .str-video__permission-requests__notification__message,
+.str-video__permission-requests .str-video__permission-request__message {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.str-video__permission-requests .str-video__permission-request__button {
+  background-color: transparent;
+  border: 1px solid var(--str-video__text-color1);
+  border-radius: 4px;
+  color: var(--str-video__color1);
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 8px;
+  min-width: 120px;
+}
+.str-video__permission-requests .str-video__permission-request__button--allow {
+  background-color: var(--str-video__primary-color);
+  border: 1px solid var(--str-video__primary-color);
+}
+.str-video__permission-requests .str-video__permission-requests-list {
+  background-color: var(--str-video__background-color1);
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+  padding: 10px;
+  width: 100%;
+  z-index: 1;
+  opacity: 0.9;
+  overflow-x: scroll;
+  overflow-y: hidden;
+}
+.str-video__permission-requests .str-video__permission-requests-list::-webkit-scrollbar {
+  display: none;
+}
+
+.str-video__reaction {
+  position: absolute;
+  right: 0.875rem;
+  top: 0.875rem;
+}
+.str-video__reaction .str-video__reaction__emoji {
+  display: flex;
+  line-height: 1;
+  font-size: 2.5rem;
+}
+
+.str-video__call-panel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  width: 400px;
+  height: 300px;
+  padding: 1rem 1rem 0.5rem;
+  gap: 1rem;
+}
+
+.str-video__call-panel--ringing .str-video__call-panel__members-list {
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+.str-video__call-panel--ringing .str-video__call-panel__members-list .str-video__call-panel__member-box {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+.str-video__call-panel--ringing .str-video__call-panel__members-list .str-video__call-panel__member-box .str-video__avatar {
+  width: 80px;
+  height: 80px;
+}
+.str-video__call-panel--ringing .str-video__call-panel__members-list .str-video__call-panel__member-box .str-video__member_details {
+  position: absolute;
+  bottom: 10%;
+  padding: 0.125rem 0.375rem;
+}
+.str-video__call-panel--ringing .str-video__pending-call-controls {
+  display: flex;
+  gap: 0.675rem;
+}
+
+.str-video__call-panel {
+  background: var(--str-video__background-color3);
+  border: 2px solid rgba(200, 200, 200, 0.6);
+  border-radius: 10px;
+}
+
+.str-video__call-panel--ringing .str-video__call-panel__members-list .str-video__call-panel__member-box {
+  border-radius: var(--str-video__border-radius-circle);
+  background: var(--str-video__background-color6);
+}
+.str-video__call-panel--ringing .str-video__call-panel__members-list .str-video__call-panel__member-box:before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: var(--str-video__border-radius-circle);
+  padding: 4px;
+  background: linear-gradient(180deg, var(--str-video__primary-color), var(--str-video__info-color));
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
+.str-video__call-panel--ringing .str-video__call-panel__members-list .str-video__call-panel__member-box .str-video__member_details {
+  background-color: var(--str-video__background-color4);
+  color: var(--str-video__text-color1);
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.str-video__screen-share-overlay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  gap: 1.8rem;
+}
+.str-video__screen-share-overlay > .str-video__icon {
+  width: 4rem;
+  height: 4rem;
+}
+.str-video__screen-share-overlay .str-video__screen-share-overlay__button {
+  display: flex;
+  gap: 0.4rem;
+  align-items: center;
+  padding-inline: 1.6rem;
+  padding-block: 0.8rem;
+}
+.str-video__screen-share-overlay .str-video__screen-share-overlay__button .str-video__icon {
+  width: 0.7rem;
+  height: 0.7rem;
+}
+
+.str-video__screen-share-overlay {
+  background: var(--str-video__overlay-color);
+  backdrop-filter: blur(3px);
+  border-radius: inherit;
+}
+.str-video__screen-share-overlay .str-video__screen-share-overlay__title {
+  font-size: 1.3rem;
+}
+.str-video__screen-share-overlay .str-video__screen-share-overlay__button {
+  color: white;
+  background: var(--str-video__danger-color);
+  border-radius: var(--str-video__border-radius-xs);
+}
+.str-video__screen-share-overlay .str-video__screen-share-overlay__button:hover {
+  background-color: var(--str-video__danger-color--accent);
+}
+
+.str-video__search-input__container {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  margin-inline: -0.25rem;
+}
+.str-video__search-input__container input {
+  flex: 1;
+  min-width: 0;
+}
+.str-video__search-input__container .str-video__search-input__clear-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+.str-video__search-input__container .str-video__search-input__icon {
+  padding: 0.25rem;
+}
+.str-video__search-input__container .str-video__search-input__icon--active,
+.str-video__search-input__container .str-video__search-input__icon {
+  display: inline-block;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.str-video {
+  --str-video__search-input__container--color: var(--str-video__text-color1);
+  --str-video__search-input__container--background-color: var(
+    --str-video__background-color0
+  );
+  --str-video__search-input__container--border-radius: var(
+    --str-video__border-radius-circle
+  );
+  --str-video__search-input__container--border-block-start: 1px solid
+    transparent;
+  --str-video__search-input__container--border-block-end: 1px solid transparent;
+  --str-video__search-input__container--border-inline-start: 1px solid
+    transparent;
+  --str-video__search-input__container--border-inline-end: 1px solid transparent;
+  --str-video__search-input__placeholder-color: var(--str-video__text-color2);
+  --str-video__search-input__icon--color: var(--str-video__text-color1);
+}
+
+.str-video__search-input__container.str-video__search-input__container--active {
+  border-color: var(--str-video__primary-color);
+}
+
+.str-video__search-input__container {
+  background: var(--str-video__search-input__container--background-color);
+  color: var(--str-video__search-input__container--color);
+  box-shadow: var(--str-video__search-input__container--box-shadow);
+  border-radius: var(--str-video__search-input__container--border-radius);
+  border-block-start: var(--str-video__search-input__container--border-block-start);
+  border-block-end: var(--str-video__search-input__container--border-block-end);
+  border-inline-start: var(--str-video__search-input__container--border-inline-start);
+  border-inline-end: var(--str-video__search-input__container--border-inline-end);
+}
+.str-video__search-input__container input {
+  background-color: transparent;
+  border: none;
+  outline: none;
+  color: inherit;
+  font-size: 13px;
+}
+.str-video__search-input__container input::placeholder {
+  color: var(--str-video__search-input__placeholder-color);
+}
+.str-video__search-input__container .str-video__search-input__icon {
+  -webkit-mask-image: var(--str-video__icon--magnifier-glass);
+  mask-image: var(--str-video__icon--magnifier-glass);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: 0.75rem 0.75rem;
+  mask-size: 0.75rem 0.75rem;
+  background-color: var(--str-video__search-input__icon--color);
+}
+.str-video__search-input__container .str-video__search-input__clear-btn {
+  background-color: transparent;
+  border-radius: var(--str-video__border-radius-circle);
+  border: none;
+}
+.str-video__search-input__container .str-video__search-input__clear-btn:hover {
+  cursor: pointer;
+}
+.str-video__search-input__container .str-video__search-input__clear-btn .str-video__search-input__icon--active {
+  -webkit-mask-image: var(--str-video__icon--close);
+  mask-image: var(--str-video__icon--close);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: 0.75rem 0.75rem;
+  mask-size: 0.75rem 0.75rem;
+  background-color: var(--str-video__search-input__icon--color);
+}
+
+.str-video__call {
+  background-color: var(--str-video__background-color2);
+  color: var(--str-video__text-color1);
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.str-video__call .str-video {
+  background-color: var(--str-video__background-color2);
+  color: var(--str-video__text-color1);
+}
+
+.str-video__tooltip {
+  display: flex;
+  justify-content: center;
+  padding: var(--str-video__spacing-sm);
+  z-index: 4;
+  max-width: 250px;
+  width: max-content;
+  white-space: initial;
+  overflow-wrap: break-word;
+}
+
+.str-video {
+  /* The border radius used for the borders of the component */
+  --str-video__tooltip--border-radius: var(--str-video__border-radius-xs);
+  /* The text/icon color of the component */
+  --str-video__tooltip--color: var(--str-video__text-color1);
+  /* The background color of the component */
+  --str-video__tooltip--background-color: var(
+    --str-video__button-default-hover
+  );
+  /* Top border of the component */
+  --str-video__tooltip--border-block-start: none;
+  /* Bottom border of the component */
+  --str-video__tooltip--border-block-end: none;
+  /* Left (right in RTL layout) border of the component */
+  --str-video__tooltip--border-inline-start: none;
+  /* Right (left in RTL layout) border of the component */
+  --str-video__tooltip--border-inline-end: none;
+  /* Box shadow applied to the component */
+  --str-video__tooltip--box-shadow: none;
+}
+
+.str-video__tooltip {
+  background: var(--str-video__tooltip--background-color);
+  color: var(--str-video__tooltip--color);
+  box-shadow: var(--str-video__tooltip--box-shadow);
+  border-radius: var(--str-video__tooltip--border-radius);
+  border-block-start: var(--str-video__tooltip--border-block-start);
+  border-block-end: var(--str-video__tooltip--border-block-end);
+  border-inline-start: var(--str-video__tooltip--border-inline-start);
+  border-inline-end: var(--str-video__tooltip--border-inline-end);
+  font-size: 14px;
+  line-height: 1rem;
+}
+.str-video__tooltip::after {
+  background-color: var(--str-video__tooltip-background-color);
+}
+
+.str-video__video {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  pointer-events: none;
+}
+.str-video__video--tall {
+  object-fit: contain;
+}
+.str-video__video--mirror:not(:picture-in-picture) {
+  transform: scaleX(-1);
+}
+
+.str-video__video {
+  background-color: var(--str-video__background-color5);
+}
+
+.str-video__video-placeholder {
+  aspect-ratio: 4/3;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.str-video__video-placeholder .str-video__video-placeholder__avatar {
+  width: 100px;
+  height: 100px;
+  object-fit: cover;
+}
+.str-video__video-placeholder .str-video__video-placeholder__initials-fallback {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100px;
+  height: 100px;
+}
+
+.str-video__video-placeholder {
+  background: var(--str-video__base-color6);
+  border-radius: inherit;
+}
+.str-video__video-placeholder .str-video__video-placeholder__avatar {
+  border-radius: var(--str-video__border-radius-circle);
+}
+.str-video__video-placeholder .str-video__video-placeholder__initials-fallback {
+  background-color: var(--str-video__primary-color);
+  border-radius: var(--str-video__border-radius-circle);
+  font-size: 32px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.str-video__video-preview-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 500px;
+  height: 375px;
+}
+.str-video__video-preview-container .str-video__video-preview {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+.str-video__video-preview-container .str-video__loading-indicator__icon {
+  height: 3rem;
+  width: 3rem;
+  mask-size: 3rem;
+}
+.str-video__video-preview-container .str-video__video-preview--mirror {
+  transform: scaleX(-1);
+}
+.str-video__video-preview-container .str-video__video-preview--loading {
+  display: none;
+}
+
+.str-video {
+  /* The font color applied inside the component */
+  --str-video__video-preview-container--color: var(--str-video__text-color1);
+  /* The background color of the component */
+  --str-video__video-preview-container--background-color: var(
+    --str-video__background-color5
+  );
+  /* The border radius used for the borders of the component */
+  --str-video__video-preview-container--border-radius: var(
+    --str-video__border-radius-xs
+  );
+  /* The border used for the borders of the component */
+  --str-video__video-preview-container--border-block-start: 4px solid
+    var(--str-video__primary-color);
+  /* The border used for the borders of the component */
+  --str-video__video-preview-container--border-block-end: 4px solid
+    var(--str-video__primary-color);
+  /* The border used for the borders of the component */
+  --str-video__video-preview-container--border-inline-start: 4px solid
+    var(--str-video__primary-color);
+  /* The border used for the borders of the component */
+  --str-video__video-preview-container--border-inline-end: 4px solid
+    var(--str-video__primary-color);
+}
+
+.str-video__video-preview-container {
+  background: var(--str-video__video-preview-container--background-color);
+  color: var(--str-video__video-preview-container--color);
+  box-shadow: var(--str-video__video-preview-container--box-shadow);
+  border-radius: var(--str-video__video-preview-container--border-radius);
+  border-block-start: var(--str-video__video-preview-container--border-block-start);
+  border-block-end: var(--str-video__video-preview-container--border-block-end);
+  border-inline-start: var(--str-video__video-preview-container--border-inline-start);
+  border-inline-end: var(--str-video__video-preview-container--border-inline-end);
+  overflow: hidden;
+}
+
+.str-video.str-video__embedded {
+  background-color: var(--str-video__base-color4);
+  color: var(--str-video__text-color1);
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  container-type: size;
+}
+
+:root {
+  --str-video__icon--eye: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDQuNUMxNyA0LjUgMjEuMjcgNy42MSAyMyAxMkMyMS4yNyAxNi4zOSAxNyAxOS41IDEyIDE5LjVDNyAxOS41IDIuNzMgMTYuMzkgMSAxMkMyLjczIDcuNjEgNyA0LjUgMTIgNC41Wk0xMiA2LjVDOS4yNCA2LjUgNyA4Ljc0IDcgMTEuNUM3IDE0LjI2IDkuMjQgMTYuNSAxMiAxNi41QzE0Ljc2IDE2LjUgMTcgMTQuMjYgMTcgMTEuNUMxNyA4Ljc0IDE0Ljc2IDYuNSAxMiA2LjVaTTEyIDguNUMxMy42NiA4LjUgMTUgOS44NCAxNSAxMS41QzE1IDEzLjE2IDEzLjY2IDE0LjUgMTIgMTQuNUMxMC4zNCAxNC41IDkgMTMuMTYgOSAxMS41QzkgOS44NCAxMC4zNCA4LjUgMTIgOC41WiIgZmlsbD0iI0IwQjRCNyIvPgo8L3N2Zz4K");
+  --str-video__icon--blur-icon: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9Ijc2OCIgaGVpZ2h0PSI3NjgiIHZpZXdCb3g9IjAgMCA3NjggNzY4Ij4KPHBhdGggZmlsbD0iIzAwMCIgZD0iTTQ0OC41IDI3MS41cTE5LjUgMCAzMy43NSAxNC4yNXQxNC4yNSAzMy43NS0xNC4yNSAzMy43NS0zMy43NSAxNC4yNS0zMy43NS0xNC4yNS0xNC4yNS0zMy43NSAxNC4yNS0zMy43NSAzMy43NS0xNC4yNXpNNDQ4LjUgNDAwLjVxMTkuNSAwIDMzLjc1IDE0LjI1dDE0LjI1IDMzLjc1LTE0LjI1IDMzLjc1LTMzLjc1IDE0LjI1LTMzLjc1LTE0LjI1LTE0LjI1LTMzLjc1IDE0LjI1LTMzLjc1IDMzLjc1LTE0LjI1ek0zMTkuNSA1NDQuNXExMy41IDAgMjMuMjUgOXQ5Ljc1IDIyLjUtOS43NSAyMi41LTIzLjI1IDktMjIuNS05LTktMjIuNSA5LTIyLjUgMjIuNS05ek0zMTkuNSAyNzEuNXExOS41IDAgMzMuNzUgMTQuMjV0MTQuMjUgMzMuNzUtMTQuMjUgMzMuNzUtMzMuNzUgMTQuMjUtMzMuNzUtMTQuMjUtMTQuMjUtMzMuNzUgMTQuMjUtMzMuNzUgMzMuNzUtMTQuMjV6TTQ0OC41IDY1NS41cTE1IDAgMTUgMTYuNXQtMTUgMTYuNXEtMTYuNSAwLTE2LjUtMTYuNXQxNi41LTE2LjV6TTQ0OC41IDU0NC41cTEzLjUgMCAyMi41IDl0OSAyMi41LTkgMjIuNS0yMi41IDktMjMuMjUtOS05Ljc1LTIyLjUgOS43NS0yMi41IDIzLjI1LTl6TTY3MiA0MzJxMTYuNSAwIDE2LjUgMTYuNSAwIDE1LTE2LjUgMTV0LTE2LjUtMTVxMC0xNi41IDE2LjUtMTYuNXpNNTc2IDE2MC41cTEzLjUgMCAyMi41IDl0OSAyMi41LTkgMjIuNS0yMi41IDktMjIuNS05LTktMjIuNSA5LTIyLjUgMjIuNS05ek01NzYgMjg4cTEzLjUgMCAyMi41IDl0OSAyMi41LTkgMjMuMjUtMjIuNSA5Ljc1LTIyLjUtOS43NS05LTIzLjI1IDktMjIuNSAyMi41LTl6TTU3NiA1NDQuNXExMy41IDAgMjIuNSA5dDkgMjIuNS05IDIyLjUtMjIuNSA5LTIyLjUtOS05LTIyLjUgOS0yMi41IDIyLjUtOXpNNTc2IDQxNS41cTEzLjUgMCAyMi41IDkuNzV0OSAyMy4yNS05IDIyLjUtMjIuNSA5LTIyLjUtOS05LTIyLjUgOS0yMy4yNSAyMi41LTkuNzV6TTMxOS41IDQwMC41cTE5LjUgMCAzMy43NSAxNC4yNXQxNC4yNSAzMy43NS0xNC4yNSAzMy43NS0zMy43NSAxNC4yNS0zMy43NS0xNC4yNS0xNC4yNS0zMy43NSAxNC4yNS0zMy43NSAzMy43NS0xNC4yNXpNMzE5LjUgMjIzLjVxLTEzLjUgMC0yMi41LTl0LTktMjIuNSA5LTIyLjUgMjIuNS05IDIzLjI1IDkgOS43NSAyMi41LTkuNzUgMjIuNS0yMy4yNSA5ek0zMTkuNSAxMTIuNXEtMTUgMC0xNS0xNi41dDE1LTE2LjVxMTYuNSAwIDE2LjUgMTYuNXQtMTYuNSAxNi41ek0zMTkuNSA2NTUuNXExNi41IDAgMTYuNSAxNi41dC0xNi41IDE2LjVxLTE1IDAtMTUtMTYuNXQxNS0xNi41ek05NiA0MzJxMTYuNSAwIDE2LjUgMTYuNSAwIDE1LTE2LjUgMTV0LTE2LjUtMTVxMC0xNi41IDE2LjUtMTYuNXpNNDQ4LjUgMTEyLjVxLTE2LjUgMC0xNi41LTE2LjV0MTYuNS0xNi41cTE1IDAgMTUgMTYuNXQtMTUgMTYuNXpNNDQ4LjUgMjIzLjVxLTEzLjUgMC0yMy4yNS05dC05Ljc1LTIyLjUgOS43NS0yMi41IDIzLjI1LTkgMjIuNSA5IDkgMjIuNS05IDIyLjUtMjIuNSA5ek02NzIgMzM2cS0xNi41IDAtMTYuNS0xNi41IDAtMTUgMTYuNS0xNXQxNi41IDE1cTAgMTYuNS0xNi41IDE2LjV6TTE5MiAxNjAuNXExMy41IDAgMjIuNSA5dDkgMjIuNS05IDIyLjUtMjIuNSA5LTIyLjUtOS05LTIyLjUgOS0yMi41IDIyLjUtOXpNOTYgMzA0LjVxMTYuNSAwIDE2LjUgMTUgMCAxNi41LTE2LjUgMTYuNXQtMTYuNS0xNi41cTAtMTUgMTYuNS0xNXpNMTkyIDI4OHExMy41IDAgMjIuNSA5dDkgMjIuNS05IDIzLjI1LTIyLjUgOS43NS0yMi41LTkuNzUtOS0yMy4yNSA5LTIyLjUgMjIuNS05ek0xOTIgNTQ0LjVxMTMuNSAwIDIyLjUgOXQ5IDIyLjUtOSAyMi41LTIyLjUgOS0yMi41LTktOS0yMi41IDktMjIuNSAyMi41LTl6TTE5MiA0MTUuNXExMy41IDAgMjIuNSA5Ljc1dDkgMjMuMjUtOSAyMi41LTIyLjUgOS0yMi41LTktOS0yMi41IDktMjMuMjUgMjIuNS05Ljc1eiI+PC9wYXRoPgo8L3N2Zz4K");
+  --str-video__icon--login: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjMgNy44MDA1OUM5LjkxIDguMTkwNTkgOS45MSA4LjgxMDU5IDEwLjMgOS4yMDA1OUwxMi4yIDExLjEwMDZIM0MyLjQ1IDExLjEwMDYgMiAxMS41NTA2IDIgMTIuMTAwNkMyIDEyLjY1MDYgMi40NSAxMy4xMDA2IDMgMTMuMTAwNkgxMi4yTDEwLjMgMTUuMDAwNkM5LjkxIDE1LjM5MDYgOS45MSAxNi4wMTA2IDEwLjMgMTYuNDAwNkMxMC42OSAxNi43OTA2IDExLjMxIDE2Ljc5MDYgMTEuNyAxNi40MDA2TDE1LjI5IDEyLjgxMDZDMTUuNjggMTIuNDIwNiAxNS42OCAxMS43OTA2IDE1LjI5IDExLjQwMDZMMTEuNyA3LjgwMDU5QzExLjMxIDcuNDEwNTkgMTAuNjkgNy40MTA1OSAxMC4zIDcuODAwNTlaTTIwIDE5LjEwMDZIMTNDMTIuNDUgMTkuMTAwNiAxMiAxOS41NTA2IDEyIDIwLjEwMDZDMTIgMjAuNjUwNiAxMi40NSAyMS4xMDA2IDEzIDIxLjEwMDZIMjBDMjEuMSAyMS4xMDA2IDIyIDIwLjIwMDYgMjIgMTkuMTAwNlY1LjEwMDU5QzIyIDQuMDAwNTkgMjEuMSAzLjEwMDU5IDIwIDMuMTAwNTlIMTNDMTIuNDUgMy4xMDA1OSAxMiAzLjU1MDU5IDEyIDQuMTAwNTlDMTIgNC42NTA1OSAxMi40NSA1LjEwMDU5IDEzIDUuMTAwNTlIMjBWMTkuMTAwNloiIGZpbGw9IiNFM0U0RTUiLz4KPC9zdmc+Cg==");
+  --str-video__icon--participants: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTE2IDExQzE3LjY2IDExIDE4Ljk5IDkuNjYgMTguOTkgOEMxOC45OSA2LjM0IDE3LjY2IDUgMTYgNUMxNC4zNCA1IDEzIDYuMzQgMTMgOEMxMyA5LjY2IDE0LjM0IDExIDE2IDExWk04IDExQzkuNjYgMTEgMTAuOTkgOS42NiAxMC45OSA4QzEwLjk5IDYuMzQgOS42NiA1IDggNUM2LjM0IDUgNSA2LjM0IDUgOEM1IDkuNjYgNi4zNCAxMSA4IDExWk04IDEzQzUuNjcgMTMgMSAxNC4xNyAxIDE2LjVWMThDMSAxOC41NSAxLjQ1IDE5IDIgMTlIMTRDMTQuNTUgMTkgMTUgMTguNTUgMTUgMThWMTYuNUMxNSAxNC4xNyAxMC4zMyAxMyA4IDEzWk0xNiAxM0MxNS43MSAxMyAxNS4zOCAxMy4wMiAxNS4wMyAxMy4wNUMxNS4wNSAxMy4wNiAxNS4wNiAxMy4wOCAxNS4wNyAxMy4wOUMxNi4yMSAxMy45MiAxNyAxNS4wMyAxNyAxNi41VjE4QzE3IDE4LjM1IDE2LjkzIDE4LjY5IDE2LjgyIDE5SDIyQzIyLjU1IDE5IDIzIDE4LjU1IDIzIDE4VjE2LjVDMjMgMTQuMTcgMTguMzMgMTMgMTYgMTNaIiBmaWxsPSIjQjBCNEI3Ii8+CjwvZz4KPC9zdmc+Cg==");
+  --str-video__icon--verified: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuMzI1IDEuMDU1MjVMMy40OTE2NyAzLjY0NjkyQzIuODkxNjcgMy45MTM1OCAyLjUgNC41MTM1OCAyLjUgNS4xNzE5MlY5LjA4ODU4QzIuNSAxMy43MTM2IDUuNyAxOC4wMzg2IDEwIDE5LjA4ODZDMTQuMyAxOC4wMzg2IDE3LjUgMTMuNzEzNiAxNy41IDkuMDg4NThWNS4xNzE5MkMxNy41IDQuNTEzNTggMTcuMTA4MyAzLjkxMzU4IDE2LjUwODMgMy42NDY5MkwxMC42NzUgMS4wNTUyNUMxMC4yNSAwLjg2MzU4MiA5Ljc1IDAuODYzNTgyIDkuMzI1IDEuMDU1MjVaTTcuNzQxNjcgMTMuNDk2OUw1LjU4MzMzIDExLjMzODZDNS4yNTgzMyAxMS4wMTM2IDUuMjU4MzMgMTAuNDg4NiA1LjU4MzMzIDEwLjE2MzZDNS45MDgzMyA5LjgzODU4IDYuNDMzMzMgOS44Mzg1OCA2Ljc1ODMzIDEwLjE2MzZMOC4zMzMzMyAxMS43MzAyTDEzLjIzMzMgNi44MzAyNUMxMy41NTgzIDYuNTA1MjUgMTQuMDgzMyA2LjUwNTI1IDE0LjQwODMgNi44MzAyNUMxNC43MzMzIDcuMTU1MjUgMTQuNzMzMyA3LjY4MDI1IDE0LjQwODMgOC4wMDUyNUw4LjkxNjY3IDEzLjQ5NjlDOC42IDEzLjgyMTkgOC4wNjY2NyAxMy44MjE5IDcuNzQxNjcgMTMuNDk2OVoiIGZpbGw9IiMwMEUyQTEiLz4KPC9zdmc+Cg==");
+  --str-video__icon--streaming: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNSAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNy4yIDE0LjNDNS44NCAxMi45NSA1IDExLjA3IDUgOXMuODQtMy45NSAyLjItNS4zbDEuNzggMS43N0E0Ljk3IDQuOTcgMCAwMDcuNSA5YzAgMS4zOC41NiAyLjYyIDEuNDYgMy41NEw3LjIgMTQuM3pNMTcuOCAxNC4zYzEuMzYtMS4zNSAyLjItMy4yMyAyLjItNS4zcy0uODQtMy45NS0yLjItNS4zbC0xLjc4IDEuNzdBNC45NyA0Ljk3IDAgMDExNy41IDljMCAxLjM4LS41NiAyLjYyLTEuNDYgMy41NGwxLjc2IDEuNzZ6TTEyLjUgNi41YTIuNSAyLjUgMCAxMDAgNSAyLjUgMi41IDAgMDAwLTV6TTIyLjUgOWMwIDIuNzYtMS4xMyA1LjI2LTIuOTQgNy4wNmwxLjc4IDEuNzhBMTIuNDQgMTIuNDQgMCAwMDI1IDljMC0zLjQ1LTEuNC02LjU4LTMuNjYtOC44NGwtMS43OCAxLjc4QTkuOTcgOS45NyAwIDAxMjIuNSA5ek01LjQ0IDEuOTRMMy42Ni4xNkExMi40NCAxMi40NCAwIDAwMCA5YzAgMy40NSAxLjQgNi41OCAzLjY2IDguODRsMS43OC0xLjc4QTkuOTcgOS45NyAwIDAxMi41IDljMC0yLjc2IDEuMTMtNS4yNiAyLjk0LTcuMDZ6IiBmaWxsPSIjQjBCNEI3Ii8+PC9zdmc+");
+  --str-video__icon--checkmark: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cG9seWxpbmUgcG9pbnRzPSIyMCA2IDkgMTcgNCAxMiIgc3Ryb2tlPSIjQjBCNEI3IiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+");
+  --str-video__icon--star: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjBCNEI3IiBzdHJva2Utd2lkdGg9IjEuNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIgMmwzLjA5IDYuMjZMMjIgOS4yN2wtNSA0Ljg3IDEuMTggNi44OEwxMiAxNy43N2wtNi4xOCAzLjI1TDcgMTQuMTQgMiA5LjI3bDYuOTEtMS4wMUwxMiAyeiIvPjwvc3ZnPg==");
+  --str-video__icon--star-filled: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI0IwQjRCNyIgc3Ryb2tlPSIjQjBCNEI3IiBzdHJva2Utd2lkdGg9IjEuNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIgMmwzLjA5IDYuMjZMMjIgOS4yN2wtNSA0Ljg3IDEuMTggNi44OEwxMiAxNy43N2wtNi4xOCAzLjI1TDcgMTQuMTQgMiA5LjI3bDYuOTEtMS4wMUwxMiAyeiIvPjwvc3ZnPg==");
+  --str-video__icon--feedback: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI0IwQjRCNyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAgMkg0Yy0xLjEgMC0yIC45LTIgMnYxOGw0LTRoMTRjMS4xIDAgMi0uOSAyLTJWNGMwLTEuMS0uOS0yLTItMnptMCAxNEg1LjE3TDQgMTcuMTdWNGgxNnYxMnpNNyA5aDJ2Mkg3em00IDBoMnYyaC0yem00IDBoMnYyaC0yeiIvPjwvc3ZnPg==");
+}
+
+.str-video__icon--eye {
+  -webkit-mask-image: var(--str-video__icon--eye);
+  mask-image: var(--str-video__icon--eye);
+}
+
+.str-video__icon--login {
+  -webkit-mask-image: var(--str-video__icon--login);
+  mask-image: var(--str-video__icon--login);
+}
+
+.str-video__icon--participants {
+  -webkit-mask-image: var(--str-video__icon--participants);
+  mask-image: var(--str-video__icon--participants);
+}
+
+.str-video__icon--verified {
+  -webkit-mask-image: var(--str-video__icon--verified);
+  mask-image: var(--str-video__icon--verified);
+}
+
+.str-video__icon--blur-icon {
+  -webkit-mask-image: var(--str-video__icon--blur-icon);
+  mask-image: var(--str-video__icon--blur-icon);
+}
+
+.str-video__icon--streaming {
+  -webkit-mask-image: var(--str-video__icon--streaming);
+  mask-image: var(--str-video__icon--streaming);
+}
+
+.str-video__icon--checkmark {
+  -webkit-mask-image: var(--str-video__icon--checkmark);
+  mask-image: var(--str-video__icon--checkmark);
+}
+
+.str-video__icon--star {
+  -webkit-mask-image: var(--str-video__icon--star);
+  mask-image: var(--str-video__icon--star);
+}
+
+.str-video__icon--star-filled {
+  -webkit-mask-image: var(--str-video__icon--star-filled);
+  mask-image: var(--str-video__icon--star-filled);
+}
+
+.str-video__icon--feedback {
+  -webkit-mask-image: var(--str-video__icon--feedback);
+  mask-image: var(--str-video__icon--feedback);
+}
+
+.str-video__embedded-lobby {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: var(--str-video__spacing-lg);
+}
+
+.str-video__embedded-lobby__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  margin: auto 0;
+}
+
+.str-video__embedded-lobby__heading {
+  font-size: var(--str-video__font-size-xl);
+  font-weight: 500;
+  text-align: center;
+  margin: 0 0 var(--str-video__spacing-md);
+}
+
+.str-video__embedded-lobby__camera {
+  width: 100%;
+}
+.str-video__embedded-lobby__camera--off .str-video__video-preview-container {
+  opacity: 0.75;
+}
+
+.str-video__embedded-lobby__video-preview {
+  position: relative;
+  aspect-ratio: 16/9;
+  width: 100%;
+  max-height: calc(100cqh - 200px);
+  border-radius: var(--str-video__border-radius-md);
+  overflow: hidden;
+}
+
+.str-video__embedded-lobby__camera .str-video__video-preview-container {
+  height: 100%;
+  width: 100%;
+  border-color: transparent;
+}
+
+.str-video__embedded-lobby__camera .str-video__video-preview video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.str-video__embedded-lobby__media-toggle {
+  display: flex;
+  position: absolute;
+  bottom: 0;
+  gap: var(--str-video__spacing-sm);
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.str-video__embedded-lobby__media-toggle .str-video__menu-toggle-button {
+  display: none;
+}
+
+.str-video__embedded-lobby__no-permission {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: var(--str-video__font-size-sm);
+  text-align: center;
+  padding: var(--str-video__spacing-md);
+}
+
+.str-video__embedded-lobby__no-permission .str-video__avatar,
+.str-video__embedded-lobby__no-permission .str-video__avatar--initials-fallback {
+  width: 100px;
+  height: 100px;
+  font-size: 2.5rem;
+}
+
+.str-video__embedded-lobby__media {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  margin-top: var(--str-video__spacing-md);
+  margin-bottom: var(--str-video__spacing-sm);
+}
+
+.str-video__embedded-lobby__device-button {
+  display: flex;
+  align-items: center;
+  gap: var(--str-video__spacing-sm);
+  padding: var(--str-video__spacing-xs) var(--str-video__spacing-sm);
+  background: transparent;
+  border: none;
+  font-size: var(--str-video__font-size-xs);
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+.str-video__embedded-lobby__device-button:hover {
+  opacity: 0.8;
+}
+.str-video__embedded-lobby__device-button-icon {
+  width: 20px;
+  height: 20px;
+}
+.str-video__embedded-lobby__device-button-label {
+  width: 120px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: left;
+  margin: 0;
+}
+.str-video__embedded-lobby__device-button--disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+.str-video__embedded-lobby__device-button--disabled:hover {
+  opacity: 0.6;
+}
+
+.str-video__embedded-lobby__display-name {
+  border-radius: var(--str-video__border-radius-xl);
+  padding: var(--str-video__spacing-lg);
+  width: 100%;
+  text-align: center;
+  backdrop-filter: blur(10px);
+}
+.str-video__embedded-lobby__display-name-label {
+  font-weight: 600;
+  font-size: var(--str-video__font-size-xs);
+  letter-spacing: 0.25ex;
+  text-transform: uppercase;
+  margin-bottom: var(--str-video__spacing-md);
+  display: block;
+}
+.str-video__embedded-lobby__display-name .str-video__button {
+  height: 28px;
+  min-width: unset;
+  gap: var(--str-video__spacing-xs);
+  padding: var(--str-video__spacing-xs) var(--str-video__spacing-lg);
+  font-size: var(--str-video__font-size-sm);
+}
+.str-video__embedded-lobby__display-name .str-video__button:disabled {
+  opacity: 0.5;
+}
+
+@container (min-width: 600px) {
+  .str-video__embedded-lobby__content {
+    max-width: 350px;
+  }
+  .str-video__embedded-lobby__camera {
+    width: 600px;
+  }
+  .str-video__embedded-lobby__device-button-label {
+    width: 150px;
+  }
+}
+.str-video__embedded-lobby__no-permission {
+  color: var(--str-video__text-color2);
+}
+
+.str-video__embedded-lobby__device-button {
+  color: var(--str-video__text-color1);
+}
+
+.str-video__embedded-lobby__display-name {
+  background-color: var(--str-video__backdrop1);
+  border: 1px solid var(--str-video__base-color6);
+}
+.str-video__embedded-lobby__display-name-value {
+  color: var(--str-video__text-color2);
+  margin-bottom: var(--str-video__spacing-md);
+  display: block;
+}
+.str-video__embedded-lobby__display-name .str-video__button {
+  background-color: var(--str-video__button-primary-active);
+}
+.str-video__embedded-lobby__display-name .str-video__button:not([disabled]):hover {
+  background-color: var(--str-video__button-primary-hover);
+}
+
+.str-video__embedded-call-feedback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100%;
+  width: 100%;
+  padding: var(--str-video__spacing-xl);
+}
+
+.str-video__embedded-call-feedback__container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--str-video__spacing-xl);
+  width: 100%;
+  max-width: 400px;
+  padding: var(--str-video__spacing-xl);
+  font-size: 0.9375rem;
+  text-align: center;
+}
+.str-video__embedded-call-feedback__container h2,
+.str-video__embedded-call-feedback__container p {
+  margin: 0;
+}
+.str-video__embedded-call-feedback__container h2 {
+  font-size: 1.75rem;
+  font-weight: 600;
+}
+
+.str-video__embedded-call-feedback__rating-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--str-video__spacing-xl);
+  padding: var(--str-video__spacing-lg) 0;
+}
+
+.str-video__embedded-call-feedback__rating-label {
+  font-size: 1.125rem;
+}
+
+.str-video__embedded-call-feedback__stars {
+  display: flex;
+  gap: var(--str-video__spacing-xxs);
+}
+
+.str-video__embedded-call-feedback__star {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+.str-video__embedded-call-feedback__star .str-video__icon {
+  width: 24px;
+  height: 24px;
+}
+
+.str-video__embedded-call-feedback__textarea {
+  width: 100%;
+  min-height: 72px;
+  padding: var(--str-video__spacing-md);
+  border: 1px solid transparent;
+  border-radius: var(--str-video__border-radius-md);
+  background: transparent;
+  color: inherit;
+  font-family: inherit;
+  font-size: 0.875rem;
+  resize: vertical;
+}
+.str-video__embedded-call-feedback__textarea:focus {
+  outline: none;
+}
+.str-video__embedded-call-feedback__textarea:focus-visible {
+  border-color: var(--str-video__base-color2);
+}
+
+.str-video__embedded-call-feedback__actions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--str-video__spacing-lg);
+  width: 100%;
+  padding-top: var(--str-video__spacing-lg);
+}
+.str-video__embedded-call-feedback__actions .str-video__button:disabled {
+  opacity: 0.5;
+}
+
+.str-video__embedded-call-feedback__ended-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--str-video__spacing-xl);
+  justify-content: center;
+}
+
+.str-video__embedded-call-feedback__ended-column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--str-video__spacing-md);
+}
+
+.str-video__embedded-call-feedback__ended-divider {
+  width: 1px;
+  align-self: stretch;
+}
+
+.str-video__embedded-call-feedback__ended-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--str-video__spacing-sm);
+  height: 44px;
+  padding: 0 var(--str-video__spacing-xl);
+  border: 1px solid transparent;
+  border-radius: var(--str-video__border-radius-circle);
+  background: transparent;
+  font-size: 0.9375rem;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.str-video__embedded-call-feedback__ended-button .str-video__icon {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+}
+
+.str-video__embedded-call-feedback__checkmark {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+}
+.str-video__embedded-call-feedback__checkmark .str-video__icon {
+  width: 24px;
+  height: 24px;
+}
+
+.str-video__embedded-call-feedback {
+  background: var(--str-video__base-color4);
+  color: var(--str-video__text-color1);
+}
+
+.str-video__embedded-call-feedback__container p {
+  color: var(--str-video__text-color2);
+}
+
+.str-video__embedded-call-feedback__textarea {
+  border-color: var(--str-video__base-color3);
+}
+.str-video__embedded-call-feedback__textarea::placeholder {
+  color: var(--str-video__text-color3);
+}
+.str-video__embedded-call-feedback__textarea:focus {
+  border-color: var(--str-video__base-color2);
+}
+
+.str-video__embedded-call-feedback__star .str-video__icon {
+  background-color: var(--str-video__text-color3);
+}
+
+.str-video__embedded-call-feedback__star:hover .str-video__icon,
+.str-video__embedded-call-feedback__star--active .str-video__icon {
+  background-color: var(--str-video__button-primary-active);
+}
+
+.str-video__embedded-call-feedback__ended-divider {
+  background: var(--str-video__base-color3);
+}
+
+.str-video__embedded-call-feedback__ended-button {
+  color: var(--str-video__text-color1);
+  border-color: var(--str-video__base-color3);
+}
+.str-video__embedded-call-feedback__ended-button .str-video__icon {
+  background-color: var(--str-video__text-color1);
+}
+.str-video__embedded-call-feedback__ended-button:hover {
+  background: var(--str-video__base-color5);
+  border-color: var(--str-video__base-color2);
+}
+
+.str-video__embedded-call-feedback__actions .str-video__button {
+  background-color: var(--str-video__button-primary-active);
+}
+.str-video__embedded-call-feedback__actions .str-video__button:not([disabled]):hover {
+  background-color: var(--str-video__button-primary-hover);
+}
+
+.str-video__embedded-call-feedback__checkmark {
+  background: color-mix(in srgb, var(--str-video__alert-success) 15%, transparent);
+}
+.str-video__embedded-call-feedback__checkmark .str-video__icon {
+  background-color: var(--str-video__alert-success);
+}
+
+.str-video__embedded-blur-toggle-container {
+  padding: var(--str-video__spacing-xl) var(--str-video__spacing-xl);
+}
+
+.str-video__embedded-blur-toggle {
+  display: flex;
+  align-items: center;
+  gap: var(--str-video__spacing-sm);
+  width: 100%;
+  padding: var(--str-video__spacing-sm);
+  border: none;
+  border-radius: var(--str-video__border-radius-circle);
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+.str-video__embedded-blur-toggle:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+.str-video__embedded-blur-toggle .str-video__icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.str-video__embedded-blur-toggle-container {
+  border-top: 1px solid var(--str-video__base-color3);
+}
+
+.str-video__embedded-blur-toggle {
+  background: transparent;
+  color: var(--str-video__text-color1);
+}
+.str-video__embedded-blur-toggle:hover:not(:disabled) {
+  background: var(--str-video__button-default-hover);
+}
+.str-video__embedded-blur-toggle--active {
+  background: var(--str-video__secondary-color);
+  color: var(--str-video__primary-color);
+}
+.str-video__embedded-blur-toggle--active:hover:not(:disabled) {
+  background: var(--str-video__secondary-color);
+}
+
+.str-video__embedded-call-duration {
+  display: flex;
+  align-items: center;
+  gap: var(--str-video__spacing-xxs);
+  white-space: nowrap;
+}
+.str-video__embedded-call-duration__icon {
+  width: 16px;
+  height: 16px;
+}
+.str-video__embedded-call-duration__time {
+  font-size: 0.875rem;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+
+.str-video__embedded-mobile {
+  display: contents;
+}
+
+.str-video__embedded-desktop {
+  display: none;
+}
+
+.str-video__embedded-call-controls.str-video__call-controls {
+  justify-content: center;
+  padding: var(--str-video__spacing-md);
+  gap: var(--str-video__spacing-xxs);
+}
+.str-video__embedded-call-controls.str-video__call-controls .str-video__call-controls--group {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--str-video__spacing-xxs);
+}
+.str-video__embedded-call-controls.str-video__call-controls .str-video__call-controls--options {
+  justify-content: flex-start;
+}
+.str-video__embedded-call-controls.str-video__call-controls .str-video__call-controls--media {
+  justify-content: center;
+}
+.str-video__embedded-call-controls.str-video__call-controls .str-video__call-controls--sidebar {
+  justify-content: flex-end;
+}
+
+@container (min-width: 700px) {
+  .str-video__embedded-mobile {
+    display: none;
+  }
+  .str-video__embedded-desktop {
+    display: contents;
+  }
+  .str-video__embedded-call-controls.str-video__call-controls {
+    justify-content: space-between;
+    padding: var(--str-video__spacing-lg);
+    gap: var(--str-video__spacing-sm);
+  }
+  .str-video__embedded-call-controls.str-video__call-controls .str-video__call-controls--group {
+    flex: 1;
+    gap: var(--str-video__spacing-sm);
+  }
+  .str-video__embedded-call-controls.str-video__call-controls .str-video__call-controls--media {
+    justify-content: center;
+  }
+  .str-video__embedded-call-controls.str-video__call-controls .str-video__call-controls--sidebar {
+    justify-content: flex-end;
+  }
+}
+.str-video__embedded-call-duration {
+  color: var(--str-video__text-color2);
+}
+.str-video__embedded-call-duration__icon {
+  background-color: var(--str-video__alert-success);
+}
+
+@container (min-width: 700px) {
+  .str-video__embedded-call-controls.str-video__call-controls {
+    background-color: var(--str-video__base-color7);
+    border-radius: var(--str-video__border-radius-xxl);
+  }
+}
+.str-video__embedded-connection-notification {
+  position: absolute;
+  top: var(--str-video__spacing-md);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+  display: flex;
+  justify-content: center;
+}
+.str-video__embedded-connection-notification .str-video__notification {
+  position: relative !important;
+  top: auto !important;
+  left: auto !important;
+}
+
+.str-video__embedded-participant-view-ui {
+  position: absolute;
+  inset: 0;
+  padding-top: var(--str-video__spacing-md);
+  padding-left: var(--str-video__spacing-md);
+}
+.str-video__embedded-participant-view-ui--screen-share {
+  padding-top: 0;
+  padding-left: 0;
+}
+
+.str-video__embedded-loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+}
+.str-video__embedded-loading .str-video__loading-indicator__icon.spinner {
+  width: 4rem;
+  height: 4rem;
+  -webkit-mask-size: 4rem;
+  mask-size: 4rem;
+}
+
+.str-video__embedded-error {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  padding: 1rem;
+  text-align: center;
+}
+.str-video__embedded-error__message {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--str-video__text-color2);
+  opacity: 0.7;
+}
+
+.str-video__embedded-join-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--str-video__spacing-xl);
+  min-height: 100%;
+  width: 100%;
+  max-width: 400px;
+  margin: 0 auto;
+  padding: var(--str-video__spacing-xl);
+  text-align: center;
+}
+
+.str-video__embedded-join-error__message {
+  font-size: var(--str-video__font-size-sm);
+}
+
+.str-video__embedded-join-error {
+  background: var(--str-video__base-color4);
+  color: var(--str-video__text-color1);
+}
+
+.str-video__embedded-join-error__message {
+  color: var(--str-video__text-color2);
+}
+
+.str-video__embedded-call {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  height: 100%;
+  padding: var(--str-video__spacing-sm);
+  overflow: auto hidden;
+}
+.str-video__embedded-call .str-video__permission-requests {
+  width: 100%;
+  max-width: 960px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.str-video__embedded-call-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--str-video__spacing-sm) var(--str-video__spacing-md);
+  background-color: var(--str-video__base-color7);
+  border-radius: var(--str-video__border-radius-xxl);
+}
+
+.str-video__embedded-layout {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  gap: var(--str-video__spacing-md);
+  padding: var(--str-video__spacing-md);
+  position: relative;
+}
+
+.str-video__embedded-layout__stage {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+
+.str-video__embedded-notifications {
+  position: absolute;
+  bottom: 60px;
+  left: var(--str-video__spacing-lg);
+  right: 0;
+  z-index: 3;
+}
+
+.str-video__embedded-sidebar {
+  position: absolute;
+  border-radius: var(--str-video__border-radius-md);
+  height: calc(100% - 60px);
+}
+.str-video__embedded-sidebar.str-video__embedded-sidebar--open {
+  z-index: 2;
+  left: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.str-video__embedded-sidebar .str-video__participant-list {
+  flex: 1;
+  min-height: 0;
+}
+
+.str-video__embedded-participants {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  border-radius: var(--str-video__border-radius-md);
+  padding: var(--str-video__spacing-lg);
+  margin: var(--str-video__spacing-lg) 0;
+}
+
+@container (min-width: 700px) {
+  .str-video__embedded-call-header {
+    display: none;
+  }
+  .str-video__embedded-sidebar {
+    position: relative;
+    width: 0;
+    height: auto;
+    overflow: hidden;
+    transition: width 0.3s;
+    z-index: 1;
+  }
+  .str-video__embedded-sidebar.str-video__embedded-sidebar--open {
+    width: 350px;
+  }
+  .str-video__embedded-participants {
+    max-width: 350px;
+    min-width: 350px;
+    height: 100%;
+    margin: 0;
+    overflow-y: scroll;
+  }
+  .str-video__embedded-participants::-webkit-scrollbar {
+    display: none;
+  }
+  .str-video__embedded-participants {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}
+.str-video__embedded-call {
+  background-color: var(--str-video__base-color4);
+}
+
+.str-video__embedded-participants {
+  background-color: var(--str-video__base-color7);
+}
+
+.str-video__embedded-livestream {
+  height: 100%;
+}
+
+.str-video__embedded-livestream-duration {
+  display: flex;
+  align-items: center;
+  gap: var(--str-video__spacing-md);
+}
+.str-video__embedded-livestream-duration__live-badge, .str-video__embedded-livestream-duration__backstage-badge {
+  padding: var(--str-video__spacing-xs) var(--str-video__spacing-md);
+  border-radius: var(--str-video__spacing-xs);
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+.str-video__embedded-livestream-duration__viewers {
+  display: flex;
+  align-items: center;
+  gap: var(--str-video__spacing-xs);
+}
+.str-video__embedded-livestream-duration__eye-icon {
+  display: inline-block;
+  width: 1.125rem;
+  height: 1.125rem;
+  -webkit-mask-image: var(--str-video__icon--eye);
+  mask-image: var(--str-video__icon--eye);
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+}
+.str-video__embedded-livestream-duration__count {
+  font-size: 0.875rem;
+}
+.str-video__embedded-livestream-duration__elapsed {
+  font-size: 0.875rem;
+}
+
+.str-video__embedded-go-live-button,
+.str-video__embedded-end-stream-button {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  gap: var(--str-video__spacing-sm);
+  height: 34px;
+  min-width: 140px;
+  padding: 0 var(--str-video__spacing-lg);
+  border: none;
+  border-radius: var(--str-video__border-radius-xxl);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.str-video__embedded-go-live-button svg {
+  width: 18px;
+  height: 14px;
+}
+
+.str-video__embedded-end-stream-button .str-video__icon {
+  width: 20px;
+  height: 20px;
+}
+
+.str-video__embedded-viewer-lobby {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: var(--str-video__spacing-xl);
+}
+.str-video__embedded-viewer-lobby__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  max-width: 400px;
+}
+.str-video__embedded-viewer-lobby__icon .str-video__icon {
+  width: 56px;
+  height: 56px;
+}
+.str-video__embedded-viewer-lobby__title {
+  margin: var(--str-video__spacing-xl) 0 var(--str-video__spacing-sm);
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+.str-video__embedded-viewer-lobby__starts-at {
+  margin: var(--str-video__spacing-sm);
+  font-size: 0.875rem;
+}
+.str-video__embedded-viewer-lobby__participant-count {
+  margin: var(--str-video__spacing-md);
+  font-size: 0.8125rem;
+}
+.str-video__embedded-viewer-lobby__actions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--str-video__spacing-lg);
+  margin-top: var(--str-video__spacing-xl);
+}
+.str-video__embedded-viewer-lobby__actions .str-video__button {
+  min-width: 180px;
+}
+.str-video__embedded-viewer-lobby__auto-join {
+  display: flex;
+  align-items: center;
+  gap: var(--str-video__spacing-sm);
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+.str-video__embedded-viewer-lobby__auto-join input[type=checkbox] {
+  cursor: pointer;
+}
+.str-video__embedded-viewer-lobby__join-error {
+  margin-top: var(--str-video__spacing-md);
+  font-size: var(--str-video__font-size-xs);
+  line-height: 1.3;
+  text-align: center;
+  font-weight: 500;
+  min-height: 1.3em;
+}
+.str-video__embedded-viewer-lobby__join-error[data-visible=false] {
+  visibility: hidden;
+}
+
+.str-video__embedded-livestream-duration__live-badge, .str-video__embedded-livestream-duration__backstage-badge {
+  color: var(--str-video__text-color1);
+}
+.str-video__embedded-livestream-duration__live-badge {
+  background-color: var(--str-video__primary-color);
+}
+.str-video__embedded-livestream-duration__backstage-badge {
+  background-color: var(--str-video__base-color6);
+}
+.str-video__embedded-livestream-duration__eye-icon {
+  background-color: var(--str-video__text-color1);
+  opacity: 0.8;
+}
+.str-video__embedded-livestream-duration__count {
+  color: var(--str-video__text-color1);
+  opacity: 0.8;
+}
+.str-video__embedded-livestream-duration__elapsed {
+  color: var(--str-video__text-color1);
+  opacity: 0.8;
+}
+
+.str-video__embedded-go-live-button {
+  background: var(--str-video__button-primary-active);
+  color: var(--str-video__text-color1);
+}
+.str-video__embedded-go-live-button:hover {
+  background: var(--str-video__button-primary-hover);
+}
+
+.str-video__embedded-end-stream-button {
+  background: var(--str-video__button-default-base);
+  color: var(--str-video__text-color1);
+}
+.str-video__embedded-end-stream-button:hover {
+  background: var(--str-video__button-default-hover);
+}
+.str-video__embedded-end-stream-button .str-video__icon {
+  color: var(--str-video__alert-warning);
+}
+
+.str-video__embedded-host-lobby {
+  background: var(--str-video__base-color4);
+}
+
+.str-video__embedded-viewer-lobby {
+  background: var(--str-video__base-color4);
+  color: var(--str-video__text-color2);
+}
+.str-video__embedded-viewer-lobby__icon {
+  opacity: 0.6;
+}
+.str-video__embedded-viewer-lobby__title {
+  color: var(--str-video__text-color1);
+}
+.str-video__embedded-viewer-lobby__starts-at {
+  opacity: 0.7;
+}
+.str-video__embedded-viewer-lobby__participant-count {
+  opacity: 0.6;
+}
+.str-video__embedded-viewer-lobby__auto-join input[type=checkbox] {
+  accent-color: var(--str-video__button-primary-active);
+}
+.str-video__embedded-viewer-lobby__join-error {
+  color: var(--str-video__alert-warning);
+}
+
+/*# sourceMappingURL=embedded.css.map */