{"version":3,"file":"3596.6aee9f96af8d87d12e37.css","mappings":"AAoBA,qBACI,6DAEA,oCACI,aACA,kBACA,gBAEA,sCALJ,oCAMQ,aACA,sBAEA,8CACI,aACA,aAKJ,qDACI,cACA,SACA,WACA,YAIR,qCAxBJ,oCAyBQ,cAIA,mEACI,mBAEA,sCAHJ,mEAIQ,mBAOJ,4DADJ,8DAEQ,yBAIR,sEACI,oBASA,6DADJ,2PAEQ,wBAGJ,4DALJ,2PAMQ,yBAIR,2RACI,oBAGJ,mRACI,oBAKJ,iEACI,oBAOA,4DADJ,sIAEQ,yBAOR,kIACI,oBAIR,2DACI,aAEA,sCAHJ,2DAIQ,uBAGJ,mFACI,SACA,kBAEA,sCAJJ,mFAKQ,OACA,aACA,gBAGJ,8FACI,UAEA,2GACI,kBAEA,kHACI,aAGJ,oHACI,kBAGJ,mIACI,sBACA,4BACA,iBAEA,yIACI,eAOpB,6EACI,SACA,iBAEA,sCAJJ,6EAKQ,OACA,eAGJ,sGACI,aACA,mBACA,yBAGJ,0FACI,aACA,mBACA,kBAGI,6HACI,kCAKJ,6HACI,yCAKJ,6HACI,uCAKJ,6HACI,sCAKJ,6HACI,8CAIR,gGACI,6DACA,kBACA,qBAGJ,gGACI,qBAGJ,gHACI,aACA,gBACA,SAEA,uHArNpB,WACA,YACA,kDACA,eAsNoB,8HAtOpB,gBACA,gBACA,kCACA,wBACA,eACA,kBACA,gBACA,iBACA,uBACA,mBAkOgB,iHACI,aACA,SACA,mBAEA,gIACI,oBACA,UACA,yBACA,kDACA,wBACA,eACA,kBACA,gBACA,iBACA,iBAGJ,qIACI,WACA,iBACA,kBAOpB,4DACI,aACA,mBACA,uBACA,cAEA,6EACI,aACA,QACA,sBACA,mBACA,gBAGI,4GACI,kCAKJ,4GACI,yCAKJ,4GACI,sCAKJ,4GACI,8CAKJ,4GACI,uCAIR,6FACI,kBACA,wBACA,eACA,kBACA,gBACA,iBAGJ,6FACI,UACA,kBACA,kBAMR,wFACI,eAEA,uGACI,gBAGJ,uGACI,gBAGJ,gHACI,aACA,mBACA,mBAKJ,oFACI,iBAGI,4GACI,gBAIR,0FACI,uDACA,kBACA,eAMhB,yDACI,mBAEA,sFACI,aACA,mBACA,eACA,mBAEA,qGACI,kBAGJ,qGACI,aACA,OACA,sBACA,iBAKJ,iFACI,aACA,mBACA,kBAEA,uFACI,uDACA,kBACA,eACA,qBAGJ,uFACI,qBAGJ,iGACI,aACA,WACA,YACA,mBACA,uBACA,WACA,eAGJ,+FACI,aACA,gBACA,sBACA,iBAEA,6GACI,gBACA,kBACA,kCACA,WACA,wBACA,eACA,kBACA,gBACA,iBACA,uBACA,mBAGJ,8GACI,kDACA,wBACA,eACA,kBACA,gBACA,iBAIR,uGACI,iBACA,YAOZ,8GACI,aACA,WACA,mBACA,eACA,gBAEA,6HACI,gBAGJ,6HACI,mBAKJ,gGACI,aACA,mBACA,kBAEA,sGACI,uDACA,kBACA,eACA,qBAGJ,sGACI,qBAGJ,8GACI,aACA,gBACA,QACA,sBAEA,oIACI,aACA,gBAEA,2IA9dxB,WACA,YACA,kDACA,eA+dwB,kJA/exB,gBACA,gBACA,kCACA,wBACA,eACA,kBACA,gBACA,iBACA,uBACA,mBA2eoB,6HACI,kDACA,wBACA,eACA,kBACA,gBACA,iBAIR,yGACI,iBAKZ,kFACI,cAKJ,8FACI,eAEA,6GACI,gBAGJ,6GACI,gBACA,mBAGJ,6GACI,mBAGI,gIACI,gBAOZ,4FACI,aACA,mBACA,kBAEA,kGACI,uDACA,kBACA,eACA,qBAGJ,kGACI,qBAIA,2HACI,WAKJ,2HACI,WAIR,0GACI,aACA,gBACA,UACA,sBAEA,mHACI,UAGJ,wHACI,gBACA,kBACA,kCACA,WACA,wBACA,eACA,kBACA,gBACA,iBACA,uBACA,mBAGJ,yHACI,kDACA,wBACA,eACA,kBACA,gBACA,iBAIR,4GACI,WACA,eACA,kBACA,kCACA,kBAKZ,0EACI,cAIR,uDACI,aACA,mBAEA,sCAJJ,uDAKQ,mBACA,gBAGJ,8EACI,aACA,QACA,sBACA,iBACA,gBAEA,0FACI,YACA,gBACA,kBAIR,qEACI,aACA,aACA,sBACA,aACA,gBACA,wBAEA,oFACI,cAGJ,oFACI,eAGJ,2EACI,uDACA,kBACA,eACA,qBAGJ,sCAvBJ,qEAwBQ,WACA,mBACA,mBACA,SAEA,oFACI,cAIR,4DAlCJ,qEAmCQ,gBACA,UAEA,oFACI,cAIR,2DA3CJ,qEA4CQ,gBACA,UAEA,oFACI,cAIR,gFACI,WACA,eACA,YAGJ,8EACI,aACA,sBACA,gBAEA,sCALJ,8EAMQ,gBACA,UACA,aACA,iBACA,uBACA,oBAGJ,uFACI,gBACA,kCACA,eACA,gBACA,iBACA,uBACA,mBAGJ,uFACI,gBACA,gBACA,eACA,kDACA,eACA,gBACA,iBACA,uBACA,mBAGJ,qGACI,aACA,mBACA,eAEA,oHACI,kDACA,eACA,gBACA,iBAGJ,qHACI,eACA,gBACA,yCACA,kBAGJ,gHACI,gBACA,uBACA,wBACA,eACA,kBACA,gBACA,iBAEA,sHACI,qBAOpB,yEACI,aAEA,sCAHJ,yEAIQ,WACA,WACA,mBACA,mBACA,SAEA,wFACI,cAIR,6DAfJ,yEAgBQ,UAEA,wFACI,cAIR,4DAvBJ,yEAwBQ,gBACA,UAEA,wFACI,cAIR,2DAhCJ,yEAiCQ,gBACA,UAEA,wFACI,cAIR,0FACI,aACA,sBACA,sBACA,aAEA,sCANJ,0FAOQ,oBAGJ,2GACI,kCACA,yBACA,eACA,kBACA,gBACA,iBAEA,sCARJ,2GASQ,eACA,kBAIR,wGACI,aACA,sBAEA,sCAJJ,wGAKQ,aACA,kBAGJ,yHACI,eACA,kDACA,wBACA,eACA,kBACA,gBACA,iBAGJ,8HACI,aACA,mBACA,sBACA,UACA,YACA,eACA,gBACA,uBACA,wBACA,eACA,kBACA,gBACA,iBAEA,oIACI,WACA,YACA,eAQxB,iDACI,aACA,OACA,sBACA,mBACA,cAEA,uEACI,aACA,aACA,kBACA,uDACA,mBAEA,8EACI,WACA,kDACA,eAIR,mEACI,gBACA,kDACA,wBACA,eACA,kBACA,gBACA,iBACA,kB;ACj5BR,+GACI,YACA,gBACA,wDACA,oCAGJ,+HACI,kBAGJ,qHACI,mBACA,kDAGJ,2GACI,kC;ACnBR,0BACI,aACA,mBACA,8BACA,kBACA,oEACA,0CACA,iBAEA,0CACI,aACA,mBACA,wBACA,YACA,SACA,+BACA,kBACA,+CACA,oCACA,eACA,gBACA,iBAIA,uDACI,WACA,YAEA,+DACI,SAIR,sDACI,6DACA,eAKJ,mEACI,kDAKJ,2CACI,WACA,YACA,kDAEA,mDACI,SAIR,iFACI,kBACA,iBAKJ,+DACI,YACA,gBAGJ,uEACI,kBAGJ,kEACI,mBACA,kD;AC5EhB,MACI,6DACA,0CACA,kBACA,qCACA,sCAEA,YACI,gBAGJ,eACI,sCAGJ,2BACI,yDACA,qCACA,yBAGJ,cACI,WACA,iEACA,mBACA,8CACA,kBACA,qCACA,sCAEA,4BACI,aACA,mBACA,4BACA,wEAEA,sCACI,eACA,gBACA,iBAGJ,yCACI,kBACA,eACA,iBAGJ,4CACI,YACA,kBACA,YACA,iBACA,kBACA,eACA,gBACA,kBACA,mBAEA,oDACI,gCACA,8BAIR,sCACI,aAIR,0BACI,iBAEA,oCACI,gBAGJ,mCACI,iBAOZ,0BACI,yDACA,cAIR,YACI,gBACA,SACA,cAEA,sBACI,wBACA,kCACA,uCAGJ,qBACI,YAGJ,qCACI,YAIR,qCACI,YACI,iB;ACjHR,oBACI,6DACA,WACA,kBACA,gBAEA,kCACI,kBACA,aACA,mBACA,aAEA,wCACI,eAGJ,sDACI,aACA,sBAEA,gEACI,cAEA,mEACI,SACA,eACA,gBACA,iBAIR,mEACI,cACA,kDACA,eACA,gBACA,iBAIR,8CACI,kBACA,SACA,WACA,YACA,YACA,gBACA,kBACA,kDAEA,oDACI,6DACA,kDAGJ,mEACI,WACA,YACA,eAIR,4CACI,aAIR,gCACI,oBAEA,0CACI,gBAGJ,yCACI,iBACA,SAIR,0BACI,yDACA,sCAGJ,0BACI,WACA,WAEA,wCACI,oBAGJ,sCARJ,0BASQ,aACA,mBAGJ,sCAbJ,0BAcQ,yBAIR,2BACI,uBACA,WAGJ,0BACI,kCACA,iBACA,WAGJ,yBAlHJ,oBAmHQ,aAEA,mCACI,eAGJ,+EAGI,WACA,iB;AC3HZ,UACI,WACA,4BACA,mBACA,sCAEA,2BACI,aACA,YACA,mBACA,eACA,uCACA,eCRA,CDSA,iBAEA,+CACI,kBACA,aACA,YACA,YACA,sBACA,gEACA,gBACA,kBAEA,qDACI,WACA,SACA,kBACA,iBACA,gBAGJ,2DACI,aAGJ,oEACI,kBACA,QACA,UACA,oBC/BJ,CDgCI,oBAGJ,qEACI,aACA,mBACA,iBAKZ,2BACI,aACA,mBACA,eACA,uCACA,sBACA,gBACA,iBAGJ,yBACI,aACA,sBACA,kDAEA,2CACI,iBACA,oBACA,YACA,qBACA,iBAGJ,yCACI,WACA,iBACA,oBACA,qBACA,iBACA,kBAGJ,uCACI,oCAEA,sDACI,wBCtFL,CDyFC,6CACI,8BACA,yBAGJ,sDACI,gBACA,YACA,uBACA,mBAEA,kFACI,yBAEA,oGACI,WACA,YACA,gBACA,eACA,iBAEA,4GACI,SAQxB,mDAEI,aACA,YACA,mBACA,kBAEA,iFACI,SAIR,2BACI,aACA,YACA,mBACA,cACA,oCACA,uCACA,eCzIA,CD0IA,qBACA,gBACA,iBAEA,0CACI,WACA,iBAIR,sBACI,UACA,gBAEA,uCACI,cACA,wEACA,sCACA,eACA,gBACA,iBAEA,kDACI,wEAGJ,sDACI,eAIR,oCACI,aACA,gBACA,mBACA,UACA,iBAEA,mDACI,gBAGJ,oDACI,gDAGJ,0CACI,iBACA,sDACA,sCACA,eAGJ,gDACI,WAEA,6DACI,WACA,iBAIR,oDACI,aAGJ,kDACI,aACA,WACA,YACA,sBACA,mBACA,YACA,iBACA,yBACA,kBACA,sDACA,qBAGJ,0DACI,aAGJ,wDACI,2DAGJ,mDACI,kBACA,SACA,mBAEA,8DACI,iBACA,iBAKZ,uCACI,mB;AErPZ,QACI,kBACA,qBACA,iBAEA,uBACI,WACA,YACA,eACA,SACA,wCACA,kBACA,2BACA,eAEA,mEAEI,gDAGJ,6BACI,gDAIR,cACI,iBACA,eAGJ,wBACI,kBACA,UACA,aACA,gBACA,sBACA,aACA,iEACA,eACA,mBACA,wCACA,kBACA,sCAEA,qCACI,cAGJ,2BACI,UACA,2BACA,sDAIR,uBACI,aACA,mBACA,8BAEA,qCACI,YACA,sCACA,eACA,iBACA,iBAGJ,qCACI,YACA,eACA,iBAIR,sBACI,mBAGJ,sBACI,qBACA,kBACA,YACA,eAEA,+BACI,0DACA,sCAIR,oBACI,qBACA,YACA,YACA,eACA,mBAEA,qCACI,cACA,YAGJ,qCACI,oBACA,qDACA,eACA,gBAGJ,yCACI,qDAEA,+CACI,kBACA,SACA,mBACA,YACA,sBAEA,uDACI,UAIR,+CACI,mB;AC9HhB,WACI,aACA,YACA,YACA,mBACA,mBACA,cACA,6DACA,aACA,kBACA,kCAEA,iBACI,gBACA,YACA,cACA,iBACA,uBACA,mBAGJ,iBACI,cACA,iBACA,kDACA,eAGJ,kBACI,eACA,eACA,gBACA,gBACA,iBACA,kBAGJ,uBACI,iBACA,iDAEA,oCACI,iDAGJ,qCACI,cAGJ,6EAEI,cAGJ,sSAQI,c;AC9DZ,uBACI,gBACA,YACA,uBACA,mB;ACFA,qEACI,aACA,mBACA,kBACA,QAEA,iGACI,gBACA,kCACA,mCACA,eACA,kBACA,gBACA,iBACA,uBACA,mBAGJ,+FACI,OACA,iBACA,eAEA,6GACI,WACA,YACA,kDACA,eAGJ,yGACI,kDACA,mCACA,eACA,kBACA,gBACA,iBAKZ,uDACI,oBACA,gBACA,YACA,gBACA,SACA,4BACA,kDACA,mCACA,eACA,kBACA,gBACA,qBACA,iBAEA,uGACI,kBAGJ,6FACI,eACA,kBACA,oBAGJ,6EACI,WACA,YACA,SAEA,uHACI,eACA,eACA,gBACA,gB;AC7EhB,gBACI,iBAEA,sCACI,aACA,WACA,YACA,sBACA,mBACA,gBACA,YACA,iBACA,yBACA,kBACA,kDACA,qBAEA,4CACI,uDACA,kBACA,kDACA,iDAGJ,6CACI,kDACA,uBAGJ,6CACI,eACA,iB;AC5BA,yEACI,iB;ACHZ,6BACI,8BAGJ,mCACI,gBAIA,6CACI,uBACA,uBAEA,4DACI,aACA,OACA,sBAEA,sEACI,eACA,gBACA,kDACA,wBACA,eACA,kBACA,gBACA,iBAIR,2DACI,kBAGJ,oDACI,SAIR,2CACI,sBAEA,0DACI,UACA,oCAMQ,2RACI,eAQA,0OAEI,iBASJ,kIACI,iBAMhB,2EACI,eACA,oEACA,6DACA,0BACA,kCACA,wBACA,eACA,kBACA,gBACA,iBAEA,sFACI,oEAGJ,0FACI,eAIR,yEACI,yBAEA,2FACI,gBAGJ,uFACI,aACA,mBACA,UACA,oEACA,iBACA,0CACA,kCAEA,6FACI,iBACA,6DACA,kCAIA,0HACI,WAKJ,0HACI,WAKJ,0HACI,WAKJ,0HACI,WAKJ,0HACI,WAKJ,0HACI,WAKJ,0HACI,WAKJ,0HACI,WAKJ,2HACI,WAIR,sGACI,aACA,mBACA,eACA,SACA,mBAEA,oHACI,oBAGJ,+GACI,UAGJ,gHACI,wBAGJ,wOAEI,qBACA,eACA,wBACA,eACA,kBACA,gBACA,iBAGJ,4HACI,aACA,gBACA,kCAEA,kIACI,qBAGJ,kIACI,kDAGJ,2IACI,gBACA,gBACA,gBACA,uBACA,mBAIR,4HACI,aACA,WACA,mBAEA,2IACI,UACA,iBAGJ,gJACI,WACA,iBACA,4BACA,kBAEA,wJACI,mCACA,UAKZ,mHACI,WACA,eAEA,4HACI,YAIR,kHACI,aACA,mBAEA,kIACI,aACA,WACA,YACA,mBACA,uBACA,eAGJ,mIACI,gBACA,gBACA,iBACA,wBACA,eACA,kBACA,gBACA,iBACA,uBACA,mBAIR,4VAGI,iBAGJ,oHACI,yBACA,iBAEA,+HACI,gBACA,kDACA,uBAEA,oIACI,mBAKZ,4GACI,gBACA,uBACA,mBAGJ,8GACI,iBAGJ,iHACI,aACA,gBACA,mBAEA,uHACI,qBAGJ,+HACI,gBACA,iBACA,kCACA,wBACA,eACA,kBACA,gBACA,iBACA,uBACA,mBAIR,2GACI,gBACA,uBACA,mBAOpB,0DACI,iBACA,iBAEA,iEACI,YACA,kBACA,eACA,gBAEA,qFACI,kBACA,iBACA,4CACA,gCACA,iBAGJ,6EACI,eAKZ,+DACI,aACA,mBACA,oBAEA,2EACI,iBACA,kCACA,wBACA,eACA,kBACA,gBACA,iBAGJ,kFACI,YACA,YACA,gBACA,kBACA,kDAEA,wFACI,6DACA,kDAIA,iGACI,+BACA,kDAIR,iGACI,iBAGJ,oFACI,WACA,YACA,eAQxB,yBACI,gBACI,a","sources":["webpack://mattermost-webapp/./components/activity_and_insights/activity_and_insights.scss","webpack://mattermost-webapp/./components/activity_and_insights/insights/time_frame_dropdown/time_frame_dropdown.scss","webpack://mattermost-webapp/./components/activity_and_insights/insights/insights_header/insights_header.scss","webpack://mattermost-webapp/./components/card/card.scss","webpack://mattermost-webapp/./components/activity_and_insights/insights/card/card.scss","webpack://mattermost-webapp/./components/admin_console/data_grid/data_grid.scss","webpack://mattermost-webapp/./sass/utils/_variables.scss","webpack://mattermost-webapp/./components/admin_console/filter/filter.scss","webpack://mattermost-webapp/./components/threading/global_threads/thread_item/attachments/file_card/file_card.scss","webpack://mattermost-webapp/./components/threading/global_threads/thread_item/attachments/attachment_card/attachment_card.scss","webpack://mattermost-webapp/./components/activity_and_insights/insights/top_threads/top_threads.scss","webpack://mattermost-webapp/./components/activity_and_insights/insights/least_active_channels/channel_actions_menu/channel_actions_menu.scss","webpack://mattermost-webapp/./components/activity_and_insights/insights/least_active_channels/least_active_channels_table/least_active_channels_table.scss","webpack://mattermost-webapp/./components/activity_and_insights/insights/insights_modal/insights_modal.scss"],"sourcesContent":["@mixin channel-display-name {\n    overflow: hidden;\n    margin-left: 7px;\n    color: var(--center-channel-color);\n    font-family: 'Open Sans';\n    font-size: 12px;\n    font-style: normal;\n    font-weight: 600;\n    line-height: 16px;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n@mixin channel-icon {\n    width: 14px;\n    height: 14px;\n    color: rgba(var(--center-channel-color-rgb), 0.56);\n    font-size: 14px;\n}\n\n.ActivityAndInsights {\n    background-color: rgba(var(--center-channel-color-rgb), 0.04);\n\n    .insights-body {\n        padding: 24px;\n        overflow-x: hidden;\n        overflow-y: auto;\n\n        @media screen and (min-width: 1680px) {\n            display: flex;\n            flex-direction: column;\n\n            .card-row {\n                width: 1280px;\n                margin: auto;\n            }\n        }\n\n        .card-row {\n            &::after {\n                display: block;\n                height: 0;\n                clear: both;\n                content: \" \";\n            }\n        }\n\n        @media screen and (max-width: 768px) {\n            padding: 16px;\n        }\n\n        .top-channels-card {\n            .Card__body {\n                padding-right: 12px;\n\n                @media screen and (max-width: 1019px) {\n                    padding-left: 12px;\n                }\n            }\n        }\n\n        .top-reactions-card {\n            &.small {\n                @media screen and (max-width: 1279px) and (min-width: 769px) {\n                    width: calc(100% - 16px);\n                }\n            }\n\n            .Card__header {\n                padding-bottom: 16px;\n            }\n        }\n\n        .top-playbooks-card,\n        .top-boards-card,\n        .least-active-channels-card,\n        .top-threads-card {\n            &.small {\n                @media screen and (max-width: 1279px) and (min-width: 1020px) {\n                    width: calc((100%/2) - 16px);\n                }\n\n                @media screen and (max-width: 1019px) and (min-width: 769px) {\n                    width: calc(100% - 16px);\n                }\n            }\n\n            .Card__header {\n                padding-bottom: 16px;\n            }\n\n            .Card__body {\n                padding: 0 12px 12px;\n            }\n        }\n\n        .top-boards-card {\n            .Card__body {\n                padding: 0 12px 18px;\n            }\n        }\n\n        .top-playbooks-card,\n        .least-active-channels-card {\n            &.medium {\n                @media screen and (max-width: 1279px) and (min-width: 769px) {\n                    width: calc(100% - 16px);\n                }\n            }\n        }\n\n        .top-playbooks-card,\n        .top-dms-card {\n            .Card__body {\n                padding: 0 12px 12px;\n            }\n        }\n\n        .top-channel-container {\n            display: flex;\n\n            @media screen and (max-width: 1019px) {\n                flex-direction: column;\n            }\n\n            .top-channel-line-chart {\n                flex: 0.67;\n                margin-right: 16px;\n\n                @media screen and (max-width: 1019px) {\n                    flex: 1;\n                    padding: 12px;\n                    margin-right: 0;\n                }\n\n                .col-sm-12 {\n                    padding: 0;\n\n                    .total-count {\n                        position: relative;\n\n                        .title {\n                            display: none;\n                        }\n\n                        .content {\n                            position: relative;\n                        }\n\n                        .chartjs-render-monitor {\n                            width: 100% !important;\n                            min-height: 200px !important;\n                            max-height: 200px;\n\n                            &:hover {\n                                cursor: pointer;\n                            }\n                        }\n                    }\n                }\n            }\n\n            .top-channel-list {\n                flex: 0.33;\n                margin-left: 16px;\n\n                @media screen and (max-width: 1019px) {\n                    flex: 1;\n                    margin-left: 0;\n                }\n\n                .top-channel-loading-row {\n                    display: flex;\n                    align-items: center;\n                    padding: 12px 12px 12px 0;\n                }\n\n                .channel-row {\n                    display: flex;\n                    align-items: center;\n                    padding: 10px 12px;\n\n                    &:nth-of-type(1) {\n                        span.horizontal-bar {\n                            background-color: var(--button-bg);\n                        }\n                    }\n\n                    &:nth-of-type(2) {\n                        span.horizontal-bar {\n                            background-color: var(--online-indicator);\n                        }\n                    }\n\n                    &:nth-of-type(3) {\n                        span.horizontal-bar {\n                            background-color: var(--away-indicator);\n                        }\n                    }\n\n                    &:nth-of-type(4) {\n                        span.horizontal-bar {\n                            background-color: var(--dnd-indicator);\n                        }\n                    }\n\n                    &:nth-of-type(5) {\n                        span.horizontal-bar {\n                            background-color: var(--new-message-separator);\n                        }\n                    }\n\n                    &:hover {\n                        background-color: rgba(var(--center-channel-color-rgb), 0.08);\n                        border-radius: 4px;\n                        text-decoration: none;\n                    }\n\n                    &:focus {\n                        text-decoration: none;\n                    }\n\n                    .channel-display-name {\n                        display: flex;\n                        overflow: hidden;\n                        flex: 1 0;\n\n                        i.icon {\n                            @include channel-icon;\n                        }\n\n                        .display-name {\n                            @include channel-display-name;\n                        }\n                    }\n\n                    .channel-message-count {\n                        display: flex;\n                        flex: 1 0;\n                        align-items: center;\n\n                        .message-count {\n                            display: inline-flex;\n                            flex: 0.2 0;\n                            justify-content: flex-end;\n                            color: rgba(var(--center-channel-color-rgb), 0.72);\n                            font-family: 'Open Sans';\n                            font-size: 11px;\n                            font-style: normal;\n                            font-weight: 400;\n                            line-height: 16px;\n                            text-align: right;\n                        }\n\n                        span.horizontal-bar {\n                            height: 8px;\n                            margin-left: 16px;\n                            border-radius: 6px;\n                        }\n                    }\n                }\n            }\n        }\n\n        .top-reaction-container {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin: 0 18px;\n\n            .bar-chart-entry {\n                display: flex;\n                flex: 0.2;\n                flex-direction: column;\n                align-items: center;\n                margin-top: auto;\n\n                &:nth-of-type(1) {\n                    .bar-chart-data {\n                        background-color: var(--button-bg);\n                    }\n                }\n\n                &:nth-of-type(2) {\n                    .bar-chart-data {\n                        background-color: var(--online-indicator);\n                    }\n                }\n\n                &:nth-of-type(3) {\n                    .bar-chart-data {\n                        background-color: var(--dnd-indicator);\n                    }\n                }\n\n                &:nth-of-type(4) {\n                    .bar-chart-data {\n                        background-color: var(--new-message-separator);\n                    }\n                }\n\n                &:nth-of-type(5) {\n                    .bar-chart-data {\n                        background-color: var(--away-indicator);\n                    }\n                }\n\n                .reaction-count {\n                    margin-bottom: 6px;\n                    font-family: 'Open Sans';\n                    font-size: 11px;\n                    font-style: normal;\n                    font-weight: 600;\n                    line-height: 16px;\n                }\n\n                .bar-chart-data {\n                    width: 8px;\n                    margin-bottom: 6px;\n                    border-radius: 6px;\n                }\n            }\n        }\n\n        .top-thread-container {\n            .top-thread-loading-container {\n                padding: 0 12px;\n\n                &:nth-of-type(2) {\n                    margin-top: 20px;\n                }\n\n                &:nth-of-type(3) {\n                    margin-top: 20px;\n                }\n\n                .top-thread-loading-row {\n                    display: flex;\n                    align-items: center;\n                    padding-bottom: 8px;\n                }\n            }\n\n            .thread-list {\n                .thread-item {\n                    padding: 8px 12px;\n\n                    &:nth-of-type(3) {\n                        .preview {\n                            margin-bottom: 0;\n                        }\n                    }\n\n                    &:hover {\n                        background: rgba(var(--center-channel-color-rgb), 0.08);\n                        border-radius: 4px;\n                        cursor: pointer;\n                    }\n                }\n            }\n        }\n\n        .top-board-container {\n            margin-bottom: -3px;\n\n            .top-board-loading-container {\n                display: flex;\n                align-items: center;\n                padding: 0 12px;\n                margin-bottom: 20px;\n\n                &:nth-of-type(4) {\n                    margin-bottom: 4px;\n                }\n\n                .loading-lines {\n                    display: flex;\n                    flex: 1;\n                    flex-direction: column;\n                    margin-left: 10px;\n                }\n            }\n\n            .board-list {\n                .board-item {\n                    display: flex;\n                    align-items: center;\n                    padding: 10px 12px;\n\n                    &:hover {\n                        background: rgba(var(--center-channel-color-rgb), 0.08);\n                        border-radius: 4px;\n                        cursor: pointer;\n                        text-decoration: none;\n                    }\n\n                    &:focus {\n                        text-decoration: none;\n                    }\n\n                    span.board-icon {\n                        display: flex;\n                        width: 32px;\n                        height: 32px;\n                        align-items: center;\n                        justify-content: center;\n                        float: left;\n                        font-size: 32px;\n                    }\n\n                    .display-info {\n                        display: flex;\n                        overflow: hidden;\n                        flex-direction: column;\n                        margin-left: 12px;\n\n                        .display-name {\n                            overflow: hidden;\n                            margin-right: 10px;\n                            color: var(--center-channel-color);\n                            float: left;\n                            font-family: 'Open Sans';\n                            font-size: 12px;\n                            font-style: normal;\n                            font-weight: 600;\n                            line-height: 16px;\n                            text-overflow: ellipsis;\n                            white-space: nowrap;\n                        }\n\n                        .update-counts {\n                            color: rgba(var(--center-channel-color-rgb), 0.56);\n                            font-family: 'Open Sans';\n                            font-size: 12px;\n                            font-style: normal;\n                            font-weight: 400;\n                            line-height: 16px;\n                        }\n                    }\n\n                    .Avatars.Avatars___xs {\n                        margin-left: auto;\n                        float: right;\n                    }\n                }\n            }\n        }\n\n        .least-active-channels-container {\n            .least-active-channels-loading-container {\n                display: flex;\n                width: 100%;\n                align-items: center;\n                padding: 0 12px;\n                margin-top: 24px;\n\n                &:nth-of-type(1) {\n                    margin-top: 10px;\n                }\n\n                &:nth-of-type(4) {\n                    margin-bottom: 10px;\n                }\n            }\n\n            .channel-list {\n                .channel-row {\n                    display: flex;\n                    align-items: center;\n                    padding: 10px 12px;\n\n                    &:hover {\n                        background: rgba(var(--center-channel-color-rgb), 0.08);\n                        border-radius: 4px;\n                        cursor: pointer;\n                        text-decoration: none;\n                    }\n\n                    &:focus {\n                        text-decoration: none;\n                    }\n\n                    .channel-info {\n                        display: flex;\n                        overflow: hidden;\n                        flex: 0.4;\n                        flex-direction: column;\n\n                        .channel-display-name {\n                            display: flex;\n                            overflow: hidden;\n\n                            i.icon {\n                                @include channel-icon;\n                            }\n\n                            .display-name {\n                                @include channel-display-name;\n                            }\n                        }\n\n                        .last-activity {\n                            color: rgba(var(--center-channel-color-rgb), 0.56);\n                            font-family: 'Open Sans';\n                            font-size: 11px;\n                            font-style: normal;\n                            font-weight: 400;\n                            line-height: 16px;\n                        }\n                    }\n\n                    .Avatars {\n                        margin-left: auto;\n                    }\n                }\n            }\n\n            .empty-state {\n                margin: 38px 0;\n            }\n        }\n\n        .top-playbooks-container {\n            .top-playbooks-loading-container {\n                padding: 0 12px;\n\n                &:nth-of-type(1) {\n                    margin-top: 12px;\n                }\n\n                &:nth-of-type(2) {\n                    margin-top: 24px;\n                    margin-bottom: 24px;\n                }\n\n                &:nth-of-type(3) {\n                    margin-bottom: 12px;\n\n                    > div {\n                        &:nth-of-type(2) {\n                            margin-bottom: 0;\n                        }\n                    }\n                }\n            }\n\n            .playbooks-list {\n                .playbook-item {\n                    display: flex;\n                    align-items: center;\n                    padding: 10px 12px;\n\n                    &:hover {\n                        background: rgba(var(--center-channel-color-rgb), 0.08);\n                        border-radius: 4px;\n                        cursor: pointer;\n                        text-decoration: none;\n                    }\n\n                    &:focus {\n                        text-decoration: none;\n                    }\n\n                    &:nth-of-type(2) {\n                        .horizontal-bar {\n                            opacity: 0.7;\n                        }\n                    }\n\n                    &:nth-of-type(3) {\n                        .horizontal-bar {\n                            opacity: 0.5;\n                        }\n                    }\n\n                    .display-info {\n                        display: flex;\n                        overflow: hidden;\n                        flex: 0.6 0;\n                        flex-direction: column;\n\n                        &.run-info {\n                            flex: 0.4 0;\n                        }\n\n                        .display-name {\n                            overflow: hidden;\n                            margin-right: 10px;\n                            color: var(--center-channel-color);\n                            float: left;\n                            font-family: 'Open Sans';\n                            font-size: 12px;\n                            font-style: normal;\n                            font-weight: 600;\n                            line-height: 16px;\n                            text-overflow: ellipsis;\n                            white-space: nowrap;\n                        }\n\n                        .last-run-time {\n                            color: rgba(var(--center-channel-color-rgb), 0.56);\n                            font-family: 'Open Sans';\n                            font-size: 12px;\n                            font-style: normal;\n                            font-weight: 400;\n                            line-height: 16px;\n                        }\n                    }\n\n                    .horizontal-bar {\n                        height: 8px;\n                        margin-top: 4px;\n                        margin-bottom: 4px;\n                        background-color: var(--button-bg);\n                        border-radius: 6px;\n                    }\n                }\n            }\n\n            .empty-state {\n                margin: 38px 0;\n            }\n        }\n\n        .top-dms-container {\n            display: flex;\n            align-items: center;\n\n            @media screen and (max-width: 1279px) {\n                flex-direction: row;\n                flex-wrap: wrap;\n            }\n\n            .dms-loading-container {\n                display: flex;\n                flex: 0.2;\n                flex-direction: column;\n                align-items: left;\n                margin-top: auto;\n\n                .title-line {\n                    width: 124px;\n                    margin-top: 16px;\n                    margin-bottom: 8px;\n                }\n            }\n\n            .top-dms-item {\n                display: flex;\n                width: 16.66%;\n                flex-direction: column;\n                padding: 12px;\n                margin-top: auto;\n                font-family: 'Open Sans';\n\n                &:nth-of-type(1) {\n                    margin-left: 0;\n                }\n\n                &:nth-of-type(6) {\n                    margin-right: 0;\n                }\n\n                &:hover {\n                    background: rgba(var(--center-channel-color-rgb), 0.08);\n                    border-radius: 4px;\n                    cursor: pointer;\n                    text-decoration: none;\n                }\n\n                @media screen and (max-width: 1279px) {\n                    width: 100%;\n                    flex-direction: row;\n                    align-items: center;\n                    margin: 0;\n\n                    &:nth-of-type(1) {\n                        margin-top: 0;\n                    }\n                }\n\n                @media screen and (max-width: 1279px) and (min-width: 880px) {\n                    overflow: hidden;\n                    width: 50%;\n\n                    &:nth-of-type(2) {\n                        margin-top: 0;\n                    }\n                }\n\n                @media screen and (max-width: 768px) and (min-width: 576px) {\n                    overflow: hidden;\n                    width: 50%;\n\n                    &:nth-of-type(2) {\n                        margin-top: 0;\n                    }\n                }\n\n                .Avatar-xl {\n                    width: 72px;\n                    min-width: 72px;\n                    height: 72px;\n                }\n\n                .dm-info {\n                    display: flex;\n                    flex-direction: column;\n                    margin-top: 12px;\n\n                    @media screen and (max-width: 1279px) {\n                        overflow: hidden;\n                        width: 90%;\n                        margin-top: 0;\n                        margin-left: 12px;\n                        text-overflow: ellipsis;\n                        white-space: nowrap;\n                    }\n\n                    .dm-name {\n                        overflow: hidden;\n                        color: var(--center-channel-color);\n                        font-size: 14px;\n                        font-weight: 600;\n                        line-height: 20px;\n                        text-overflow: ellipsis;\n                        white-space: nowrap;\n                    }\n\n                    .dm-role {\n                        overflow: hidden;\n                        min-height: 16px;\n                        margin-top: 4px;\n                        color: rgba(var(--center-channel-color-rgb), 0.72);\n                        font-size: 12px;\n                        font-weight: 400;\n                        line-height: 16px;\n                        text-overflow: ellipsis;\n                        white-space: nowrap;\n                    }\n\n                    .channel-message-count {\n                        display: flex;\n                        align-items: center;\n                        margin-top: 4px;\n\n                        .message-count {\n                            color: rgba(var(--center-channel-color-rgb), 0.72);\n                            font-size: 11px;\n                            font-weight: 400;\n                            line-height: 16px;\n                        }\n\n                        .horizontal-bar {\n                            min-height: 8px;\n                            margin-left: 8px;\n                            background-color: var(--online-indicator);\n                            border-radius: 6px;\n                        }\n\n                        .say-hello {\n                            margin-left: 6px;\n                            color: var(--button-bg);\n                            font-family: 'Open Sans';\n                            font-size: 11px;\n                            font-style: normal;\n                            font-weight: 600;\n                            line-height: 10px;\n\n                            &:hover {\n                                text-decoration: none;\n                            }\n                        }\n                    }\n                }\n            }\n\n            .new-members-item {\n                width: 16.66%;\n\n                @media screen and (max-width: 1279px) {\n                    width: auto;\n                    width: 100%;\n                    flex-direction: row;\n                    align-items: center;\n                    margin: 0;\n\n                    &:nth-of-type(1) {\n                        margin-top: 0;\n                    }\n                }\n\n                @media screen and (max-width: 1279px) and (min-width: 1020px) {\n                    width: 50%;\n\n                    &:nth-of-type(2) {\n                        margin-top: 0;\n                    }\n                }\n\n                @media screen and (max-width: 1279px) and (min-width: 880px) {\n                    overflow: hidden;\n                    width: 50%;\n\n                    &:nth-of-type(2) {\n                        margin-top: 0;\n                    }\n                }\n\n                @media screen and (max-width: 768px) and (min-width: 576px) {\n                    overflow: hidden;\n                    width: 50%;\n\n                    &:nth-of-type(2) {\n                        margin-top: 0;\n                    }\n                }\n\n                &.new-members-info {\n                    display: flex;\n                    flex-direction: column;\n                    align-self: flex-start;\n                    padding: 12px;\n\n                    @media screen and (max-width: 1279px) {\n                        flex-direction: row;\n                    }\n\n                    span.total-count {\n                        color: var(--center-channel-color);\n                        font-family: 'Metropolis';\n                        font-size: 52px;\n                        font-style: normal;\n                        font-weight: 400;\n                        line-height: 48px;\n\n                        @media screen and (max-width: 1279px) {\n                            margin-top: 8px;\n                            margin-left: 12px;\n                        }\n                    }\n\n                    .members-info {\n                        display: flex;\n                        flex-direction: column;\n\n                        @media screen and (max-width: 1279px) {\n                            margin-top: 0;\n                            margin-left: 24px;\n                        }\n\n                        .time-range-info {\n                            margin-top: 2px;\n                            color: rgba(var(--center-channel-color-rgb), 0.64);\n                            font-family: 'Open Sans';\n                            font-size: 12px;\n                            font-style: normal;\n                            font-weight: 400;\n                            line-height: 16px;\n                        }\n\n                        button.see-all-button {\n                            display: flex;\n                            align-items: center;\n                            align-self: flex-start;\n                            padding: 0;\n                            border: none;\n                            margin-top: 5px;\n                            background: none;\n                            color: var(--button-bg);\n                            font-family: 'Open Sans';\n                            font-size: 12px;\n                            font-style: normal;\n                            font-weight: 600;\n                            line-height: 10px;\n\n                            .icon {\n                                width: 14px;\n                                height: 14px;\n                                font-size: 14px;\n                            }\n                        }\n                    }\n                }\n            }\n        }\n\n        .empty-state {\n            display: flex;\n            flex: 1;\n            flex-direction: column;\n            align-items: center;\n            margin: 65px 0;\n\n            .empty-state-emoticon {\n                display: flex;\n                padding: 10px;\n                margin-bottom: 8px;\n                background: rgba(var(--center-channel-color-rgb), 0.08);\n                border-radius: 50px;\n\n                i.icon {\n                    width: 20px;\n                    color: rgba(var(--center-channel-color-rgb), 0.56);\n                    font-size: 20px;\n                }\n            }\n\n            .empty-state-text {\n                max-width: 120px;\n                color: rgba(var(--center-channel-color-rgb), 0.72);\n                font-family: 'Open Sans';\n                font-size: 12px;\n                font-style: normal;\n                font-weight: 400;\n                line-height: 16px;\n                text-align: center;\n            }\n        }\n    }\n}\n",".ActivityAndInsights,\n.insights-modal {\n    .react-select {\n        .react-select__control {\n            height: 32px;\n            min-height: 32px;\n            border-color: rgba(var(--center-channel-color-rgb), 0.2);\n            background: var(--center-channel-bg);\n        }\n\n        .react-select__value-container {\n            padding-left: 12px;\n        }\n\n        .react-select__indicators {\n            padding-right: 10px;\n            color: rgba(var(--center-channel-color-rgb), 0.64);\n        }\n\n        .react-select__input {\n            color: var(--center-channel-color);\n        }\n    }\n}\n",".Insights___header {\n    &.Header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: 15px 12px;\n        border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.16);\n        background-color: var(--center-channel-bg);\n        grid-area: header;\n\n        .insights-title {\n            display: flex;\n            align-items: center;\n            padding: 2px 6px 2px 8px;\n            border: none;\n            margin: 0;\n            background-color: transparent;\n            border-radius: 4px;\n            color: rgba(var(--center-channel-color-rgb), 1);\n            font-family: 'Metropolis', sans-serif;\n            font-size: 16px;\n            font-weight: 600;\n            line-height: 24px;\n        }\n\n        button.insights-title {\n            i.icon {\n                width: 16px;\n                height: 16px;\n\n                &::before {\n                    margin: 0;\n                }\n            }\n\n            &:hover {\n                background-color: rgba(var(--center-channel-color-rgb), 0.08);\n                cursor: pointer;\n            }\n        }\n\n        .MenuWrapper--open {\n            button.insights-title {\n                background-color: rgba(var(--button-bg-rgb), 0.08);\n            }\n        }\n\n        .MenuItem {\n            i.icon {\n                width: 16px;\n                height: 16px;\n                color: rgba(var(--center-channel-color-rgb), 0.56);\n\n                &::before {\n                    margin: 0;\n                }\n            }\n\n            .RestrictedIndicator__icon-tooltip-container {\n                align-self: center;\n                padding: 7px 10px;\n            }\n        }\n\n        .react-select {\n            .react-select__control {\n                height: 32px;\n                min-height: 32px;\n            }\n\n            .react-select__value-container {\n                padding-left: 12px;\n            }\n\n            .react-select__indicators {\n                padding-right: 10px;\n                color: rgba(var(--center-channel-color-rgb), 0.64);\n            }\n        }\n    }\n}\n",".Card {\n    border: 1px solid rgba(var(--center-channel-color-rgb), 0.08);\n    background-color: var(--center-channel-bg);\n    border-radius: 4px;\n    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);\n    transition: box-shadow 0.3s ease-in-out;\n\n    & + .Card {\n        margin-top: 16px;\n    }\n\n    &.expanded {\n        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);\n    }\n\n    &:not(.expanded):hover {\n        border-color: rgba(var(--center-channel-color-rgb), 0.16);\n        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12);\n        transition-duration: 0.15s;\n    }\n\n    &.console {\n        width: 100%;\n        border: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.08);\n        margin-bottom: 20px;\n        background-color: var(--sys-center-channel-bg);\n        border-radius: 2px;\n        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);\n        color: var(--sys-center-channel-color);\n\n        .Card__header {\n            display: flex;\n            align-items: center;\n            padding: 28px 32px 24px 32px;\n            border-bottom: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.08);\n\n            .text-top {\n                font-size: 16px;\n                font-weight: 600;\n                line-height: 24px;\n            }\n\n            .text-bottom {\n                margin-right: 24px;\n                font-size: 14px;\n                line-height: 20px;\n            }\n\n            .content-button {\n                height: 32px;\n                padding: 10px 16px;\n                border: none;\n                margin-left: auto;\n                border-radius: 4px;\n                font-size: 12px;\n                font-weight: 600;\n                line-height: 9.5px;\n                white-space: nowrap;\n\n                &.primary {\n                    background: var(--sys-button-bg);\n                    color: var(--sys-button-color);\n                }\n            }\n\n            .Card__hr {\n                display: none;\n            }\n        }\n\n        .Card__body {\n            overflow: visible;\n\n            &.expanding {\n                transition: none;\n            }\n\n            &.expanded {\n                margin: 28px 32px;\n            }\n        }\n    }\n}\n\n.Card__header {\n    hr.Card__hr {\n        border-color: rgba(var(--center-channel-color-rgb), 0.08);\n        margin: 0 12px;\n    }\n}\n\n.Card__body {\n    overflow: hidden;\n    height: 0;\n    margin: 0 12px;\n\n    &.expanding {\n        transition-duration: 0.3s;\n        transition-property: height, margin;\n        transition-timing-function: ease-in-out;\n    }\n\n    &.expanded {\n        margin: 12px;\n    }\n\n    &.expanded:not(.expanding) {\n        height: auto;\n    }\n}\n\n@media screen and (max-width: 768px) {\n    .Card + .Card {\n        margin-top: 12px;\n    }\n}\n",".Card.insights-card {\n    border: 1px solid rgba(var(--center-channel-color-rgb), 0.08);\n    margin: 8px;\n    border-radius: 8px;\n    box-shadow: none;\n\n    .Card__header {\n        position: relative;\n        display: flex;\n        align-items: center;\n        padding: 24px;\n\n        &:hover {\n            cursor: pointer;\n        }\n\n        .title-and-subtitle {\n            display: flex;\n            flex-direction: column;\n\n            .text-top {\n                display: block;\n\n                h2 {\n                    margin: 0;\n                    font-size: 16px;\n                    font-weight: 600;\n                    line-height: 24px;\n                }\n            }\n\n            .text-bottom {\n                display: block;\n                color: rgba(var(--center-channel-color-rgb), 0.72);\n                font-size: 12px;\n                font-weight: 400;\n                line-height: 16px;\n            }\n        }\n\n        button.icon {\n            position: absolute;\n            top: 20px;\n            right: 20px;\n            padding: 8px;\n            border: none;\n            background: none;\n            border-radius: 4px;\n            color: rgba(var(--center-channel-color-rgb), 0.56);\n\n            &:hover {\n                background-color: rgba(var(--center-channel-color-rgb), 0.08);\n                color: rgba(var(--center-channel-color-rgb), 0.56);\n            }\n\n            i.icon-chevron-right {\n                width: 16px;\n                height: 16px;\n                font-size: 16px;\n            }\n        }\n\n        .Card__hr {\n            display: none;\n        }\n    }\n\n    .Card__body {\n        padding: 0 24px 24px;\n\n        &.expanding {\n            transition: none;\n        }\n\n        &.expanded {\n            overflow: visible;\n            margin: 0;\n        }\n    }\n\n    &:hover {\n        border-color: rgba(var(--center-channel-color-rgb), 0.16);\n        box-shadow: 0 6px 14px rgb(0 0 0 / 12%);\n    }\n\n    &.large {\n        width: auto;\n        clear: both;\n\n        .Card__header {\n            padding-bottom: 16px;\n        }\n\n        @media screen and (min-width: 1680px) {\n            width: 1264px;\n            align-self: center;\n        }\n\n        @media screen and (max-width: 1019px) {\n            width: calc(100% - 16px);\n        }\n    }\n\n    &.medium {\n        width: calc((100%/2) - 16px);\n        float: left;\n    }\n\n    &.small {\n        width: calc((100%/3) - 16px);\n        min-height: 310px;\n        float: left;\n    }\n\n    @media (max-width: 768px) {\n        margin: 8px 0;\n\n        &:nth-of-type(4) {\n            margin: 8px 0 0;\n        }\n\n        &.large,\n        &.medium,\n        &.small {\n            width: 100%;\n            min-height: auto;\n        }\n    }\n}\n","@import 'utils/variables';\n\n.DataGrid {\n    width: 100%;\n    padding: 2rem 2rem 2rem 2rem;\n    background: $bg--gray;\n    color: var(--sys-center-channel-color);\n\n    .DataGrid_search {\n        display: flex;\n        height: 48px;\n        flex-direction: row;\n        padding: 0.5em 0;\n        border-bottom: solid 1px rgba(0, 0, 0, 0.1);\n        background: $white;\n        font-weight: bold;\n\n        .DataGrid_searchBar {\n            position: relative;\n            display: flex;\n            width: 300px;\n            height: 32px;\n            box-sizing: border-box;\n            border: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.2);\n            margin-left: 8px;\n            border-radius: 4px;\n\n            input {\n                width: 100%;\n                border: 0;\n                margin-right: 16px;\n                margin-left: 32px;\n                font-size: 0.95em;\n            }\n\n            input:focus {\n                outline: none;\n            }\n\n            .DataGrid_searchIcon {\n                position: absolute;\n                top: 5px;\n                left: 10px;\n                color: $dark-gray;\n                pointer-events: none;\n            }\n\n            .DataGrid_clearButton {\n                display: flex;\n                align-items: center;\n                margin-right: 5px;\n            }\n        }\n    }\n\n    .DataGrid_header {\n        display: flex;\n        flex-direction: row;\n        padding: 0.5em 0;\n        border-bottom: solid 1px rgba(0, 0, 0, 0.1);\n        color: rgba(0, 0, 0, 0.87);\n        font-size: 1.1em;\n        font-weight: bold;\n    }\n\n    .DataGrid_rows {\n        display: flex;\n        flex-direction: column;\n        background: rgba(var(--sys-button-color-rgb), 0.5);\n\n        .DataGrid_loading {\n            padding-top: 20px;\n            padding-bottom: 20px;\n            margin: auto;\n            color: rgba(0, 0, 0, 0.3);\n            font-size: 1.6rem;\n        }\n\n        .DataGrid_empty {\n            width: 100%;\n            padding-top: 20px;\n            padding-bottom: 20px;\n            color: rgba(0, 0, 0, 0.3);\n            font-size: 1.6rem;\n            text-align: center;\n        }\n\n        .DataGrid_row {\n            border-left: 2px solid transparent;\n\n            &:nth-child(odd) {\n                background-color: $bg--gray;\n            }\n\n            &:hover {\n                border-left: 2px solid $primary-color;\n                background-color: lighten($primary-color, 45%);\n            }\n\n            .DataGrid_cell {\n                overflow: hidden;\n                margin: auto;\n                text-overflow: ellipsis;\n                white-space: nowrap;\n\n                .more-modal__shared-actions {\n                    color: rgba(61, 60, 64, 0.72);\n\n                    .shared-user-icon {\n                        width: 16px;\n                        height: 16px;\n                        margin-left: 8px;\n                        font-size: 16px;\n                        line-height: 16px;\n\n                        &::before {\n                            margin: 0;\n                        }\n                    }\n                }\n            }\n        }\n    }\n\n    .DataGrid_row,\n    .DataGrid_header {\n        display: flex;\n        height: auto;\n        flex-direction: row;\n        padding-left: 18px;\n\n        .DataGrid_cell {\n            flex: 1 0;\n        }\n    }\n\n    .DataGrid_footer {\n        display: flex;\n        height: auto;\n        flex-direction: row;\n        padding: 5px 0;\n        border-top: solid 1px rgba(0, 0, 0, 0.1);\n        border-bottom: solid 1px rgba(0, 0, 0, 0.1);\n        background: $white;\n        color: rgba(0, 0, 0, 0.5);\n        font-size: 1.1em;\n        text-align: right;\n\n        .DataGrid_cell {\n            width: 100%;\n            text-align: right;\n        }\n    }\n\n    &.customTable {\n        padding: 0;\n        background: #fff;\n\n        .DataGrid_header {\n            padding: 8px 0;\n            border-bottom: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.16);\n            color: var(--sys-center-channel-color);\n            font-size: 14px;\n            font-weight: 600;\n            line-height: 16px;\n\n            &:last-child {\n                border-bottom: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.08);\n            }\n\n            .DataGrid_cell {\n                padding: 0 16px;\n            }\n        }\n\n        .DataGrid_row {\n            display: flex;\n            min-height: 40px;\n            flex-direction: row;\n            padding: 0;\n            border-left: none;\n\n            &:nth-child(odd) {\n                background: #fff;\n            }\n\n            &:nth-child(even) {\n                background: rgba(var(--sys-button-bg-rgb), 0.04);\n            }\n\n            &:hover {\n                border-left: none;\n                background-color: rgba(var(--sys-button-bg-rgb), 0.08);\n                color: var(--sys-center-channel-color);\n                cursor: pointer;\n            }\n\n            .actionIcon {\n                width: 32px;\n\n                .MenuWrapper {\n                    width: 32px;\n                    margin-left: auto;\n                }\n            }\n\n            .actionIcon a i {\n                display: none;\n            }\n\n            .actionIcon a {\n                display: flex;\n                width: 32px;\n                height: 32px;\n                flex-direction: column;\n                align-items: center;\n                padding: 8px;\n                margin-left: auto;\n                background: transparent;\n                border-radius: 4px;\n                color: rgba(var(--sys-center-channel-color-rgb), 0.72);\n                text-decoration: none;\n            }\n\n            &:hover .actionIcon a i {\n                display: flex;\n            }\n\n            .actionIcon a:hover {\n                background: rgba(var(--sys-center-channel-color-rgb), 0.08);\n            }\n\n            .DataGrid_cell {\n                padding: 10px 16px;\n                margin: 0;\n                white-space: normal;\n\n                &.actionIcon {\n                    overflow: visible;\n                    padding: 4px 16px;\n                }\n            }\n        }\n\n        .DataGrid_footer {\n            border-bottom: none;\n        }\n    }\n}\n","@charset 'UTF-8';\n\n// Color Variables\n$primary-color: #166de0;\n$primary-color--hover: darken($primary-color, 10%);\n$bg--gray: rgb(245, 245, 245);\n$white: rgb(255, 255, 255);\n$black: rgb(0, 0, 0);\n$red: rgb(214, 73, 70);\n$yellow: rgb(255, 255, 0);\n$light-gray: rgba(0, 0, 0, 0.15);\n$gray: rgba(0, 0, 0, 0.3);\n$dark-gray: rgba(0, 0, 0, 0.5);\n$link-color: rgb(35, 137, 215);\n$transparent: rgba(0, 0, 0, 0);\n$highlight-color: #fcea8d;\n\n// Typography\n$font-weight--semibold: 600;\n\n// Page Variables\n$border-gray: 1px solid rgba(var(--center-channel-color-rgb), 0.12);\n$announcement-bar-height: 40px;\n$backstage-bar-height: 43px;\n\n// Random variables\n$border-rad: 2px;\n$emoji-per-row: 9; // needs to match variable `EMOJI_PER_ROW` in emoji_picker.jsx\n\n// Transition timing defaults\n$transition-quick: 0.12s;\n\n// Elevations\n$elevation-1: var(--elevation-1);\n$elevation-2: var(--elevation-2);\n$elevation-3: var(--elevation-3);\n$elevation-4: var(--elevation-4);\n$elevation-5: var(--elevation-5);\n$elevation-6: var(--elevation-6);\n",".Filter {\n    position: relative;\n    display: inline-block;\n    padding-left: 8px;\n\n    .Filter_button {\n        width: auto;\n        height: 32px;\n        padding: 0 10px;\n        border: 0;\n        background: var(--sys-center-channel-bg);\n        border-radius: 4px;\n        color: var(--sys-button-bg);\n        font-size: 12px;\n\n        &.Filter__active,\n        &:focus {\n            background: rgba(var(--sys-button-bg-rgb), 0.12);\n        }\n\n        &:hover {\n            background: rgba(var(--sys-button-bg-rgb), 0.06);\n        }\n    }\n\n    .Icon {\n        margin-right: 2px;\n        font-size: 14px;\n    }\n\n    .Filter_content {\n        position: absolute;\n        z-index: 1;\n        display: none;\n        min-width: 256px;\n        box-sizing: border-box;\n        padding: 16px;\n        border: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.08);\n        margin-top: 4px;\n        margin-bottom: 24px;\n        background: var(--sys-center-channel-bg);\n        border-radius: 4px;\n        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);\n\n        &.Filter__show {\n            display: block;\n        }\n\n        hr {\n            padding: 0;\n            margin: 8px -16px 8px -16px;\n            color: rgba(var(--sys-center-channel-color-rgb), 0.08);\n        }\n    }\n\n    .Filter_header {\n        display: flex;\n        flex-direction: row;\n        justify-content: space-between;\n\n        .Filter_title {\n            padding: 8px;\n            color: var(--sys-center-channel-color);\n            font-size: 14px;\n            font-weight: bold;\n            line-height: 14px;\n        }\n\n        .Filter_reset {\n            padding: 8px;\n            font-size: 12px;\n            line-height: 16px;\n        }\n    }\n\n    .Filter_lists {\n        white-space: nowrap;\n    }\n\n    .Filter_apply {\n        margin: 8px 8px 8px 0;\n        border-radius: 4px;\n        float: right;\n        font-size: 12px;\n\n        &:disabled {\n            background: rgba(var(--sys-center-channel-color-rgb), 0.1);\n            color: var(--sys-center-channel-color);\n        }\n    }\n\n    .FilterList {\n        display: inline-block;\n        width: 160px;\n        padding: 8px;\n        font-size: 14px;\n        vertical-align: top;\n\n        &.FilterList__full {\n            display: block;\n            width: 320px;\n        }\n\n        .FilterList_name {\n            padding-bottom: 12px;\n            color: rgba(var(--sys-center-channel-color-rgb), 0.5);\n            font-size: 12px;\n            font-weight: 600;\n        }\n\n        .FilterList_checkbox {\n            color: rgba(var(--sys-center-channel-color-rgb), 0.8);\n\n            input {\n                position: relative;\n                top: -4px;\n                margin: 0 8px 0 2px;\n                opacity: 0.64;\n                vertical-align: bottom;\n\n                &:checked {\n                    opacity: 1;\n                }\n            }\n\n            label {\n                font-weight: normal;\n            }\n        }\n    }\n}\n",".file_card {\n    display: flex;\n    width: 300px;\n    height: 40px;\n    flex-direction: row;\n    align-items: center;\n    padding: 0 6px;\n    border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);\n    margin: 0 2px;\n    border-radius: 4px;\n    color: var(--center-channel-color);\n\n    &__name {\n        overflow: hidden;\n        min-width: 0;\n        flex-shrink: 1;\n        margin-right: 4px;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n\n    &__size {\n        flex-shrink: 0;\n        margin-left: auto;\n        color: rgba(var(--center-channel-color-rgb), 0.56);\n        font-size: 12px;\n    }\n\n    &__image {\n        min-width: 28px;\n        max-width: 28px;\n        min-height: 28px;\n        max-height: 28px;\n        margin-right: 8px;\n        border-radius: 2px;\n    }\n\n    &__attachment {\n        margin-right: 4px;\n        color: rgba(var(--center-channel-color-rgb), 0.5);\n\n        &[class*='text'] {\n            color: rgba(var(--center-channel-color-rgb), 0.5);\n        }\n\n        &[class*='excel'] {\n            color: #1ca660;\n        }\n\n        &[class*='pdf'],\n        &[class*='powerpoint'] {\n            color: #ed522a;\n        }\n\n        &[class*='generic'],\n        &[class*='code'],\n        &[class*='image'],\n        &[class*='audio'],\n        &[class*='video'],\n        &[class*='word'],\n        &[class*='patch'],\n        &[class*='svg'] {\n            color: #338aff;\n        }\n    }\n}\n",".attachment__truncated {\n    overflow: hidden;\n    min-width: 0;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n",".InsightsTable,\n.top-thread-container {\n    .thread-details {\n        display: flex;\n        align-items: center;\n        margin-bottom: 4px;\n        gap: 8px;\n\n        .display-name {\n            overflow: hidden;\n            color: var(--center-channel-color);\n            font-family: 'Open Sans', sans-serif;\n            font-size: 12px;\n            font-style: normal;\n            font-weight: 600;\n            line-height: 16px;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n        }\n\n        .reply-count {\n            flex: 1;\n            margin-left: auto;\n            text-align: end;\n\n            i.icon {\n                width: 12px;\n                height: 12px;\n                color: rgba(var(--center-channel-color-rgb), 0.56);\n                font-size: 12px;\n            }\n\n            span {\n                color: rgba(var(--center-channel-color-rgb), 0.64);\n                font-family: 'Open Sans', sans-serif;\n                font-size: 11px;\n                font-style: normal;\n                font-weight: 600;\n                line-height: 16px;\n            }\n        }\n    }\n\n    .preview {\n        display: -webkit-box;\n        overflow: hidden;\n        height: 32px;\n        max-height: 32px;\n        margin: 0;\n        -webkit-box-orient: vertical;\n        color: rgba(var(--center-channel-color-rgb), 0.72);\n        font-family: 'Open Sans', sans-serif;\n        font-size: 12px;\n        font-style: normal;\n        font-weight: 400;\n        -webkit-line-clamp: 2;\n        line-height: 16px;\n\n        .compliance-information {\n            font-style: italic;\n        }\n\n        .markdown__heading {\n            margin: inherit;\n            font-size: inherit;\n            line-height: inherit;\n        }\n\n        .file_card {\n            width: auto;\n            height: 32px;\n            margin: 0;\n\n            img.file_card__image {\n                min-width: 24px;\n                max-width: 24px;\n                min-height: 24px;\n                max-height: 24px;\n            }\n        }\n    }\n}\n",".channel-action {\n    margin-left: auto;\n\n    button.action-wrapper {\n        display: flex;\n        width: 32px;\n        height: 32px;\n        flex-direction: column;\n        align-items: center;\n        padding: 6px 8px;\n        border: none;\n        margin-left: auto;\n        background: transparent;\n        border-radius: 4px;\n        color: rgba(var(--center-channel-color-rgb), 0.56);\n        text-decoration: none;\n\n        &:hover {\n            background: rgba(var(--center-channel-color-rgb), 0.08);\n            border-radius: 4px;\n            color: rgba(var(--center-channel-color-rgb), 0.72);\n            fill: rgba(var(--center-channel-color-rgb), 0.72);\n        }\n\n        &:active {\n            background-color: rgba(var(--button-bg-rgb), 0.08);\n            color: var(--button-bg);\n        }\n\n        i.icon {\n            font-size: 18px;\n            line-height: 18px;\n        }\n    }\n}\n",".LeastActiveChannelsTable {\n    .DataGrid_header {\n        .DataGrid_cell {\n            &:nth-of-type(3) {\n                text-align: right;\n            }\n        }\n    }\n}\n",".insights-modal {\n    &.modal-dialog {\n        margin-top: calc(50vh - 340px);\n    }\n\n    &.join-channel-modal {\n        max-width: 600px;\n    }\n\n    .modal-content {\n        .modal-header {\n            align-items: flex-start;\n            padding: 22px 32px 26px;\n\n            .title-section {\n                display: flex;\n                flex: 1;\n                flex-direction: column;\n\n                .subtitle {\n                    margin-top: 6px;\n                    margin-bottom: 0;\n                    color: rgba(var(--center-channel-color-rgb), 0.72);\n                    font-family: 'Open Sans';\n                    font-size: 12px;\n                    font-style: normal;\n                    font-weight: 400;\n                    line-height: 16px;\n                }\n            }\n\n            .react-select {\n                margin-right: 40px;\n            }\n\n            .close {\n                top: 16px;\n            }\n        }\n\n        .modal-body {\n            padding: 4px 32px 28px;\n\n            .InsightsTable {\n                padding: 0;\n                background: var(--center-channel-bg);\n\n                &.TopPlaybooksTable,\n                &.TopBoardsTable,\n                &.TopThreadsTable {\n                    .DataGrid_row {\n                        &:hover {\n                            cursor: pointer;\n                        }\n                    }\n                }\n\n                &.TopDMsTable {\n                    .DataGrid_header {\n                        .DataGrid_cell {\n                            &:nth-of-type(3),\n                            &:nth-of-type(4) {\n                                text-align: right;\n                            }\n                        }\n                    }\n                }\n\n                &.LeastActiveChannelsTable {\n                    .DataGrid_header {\n                        .DataGrid_cell {\n                            &:nth-of-type(4) {\n                                text-align: right;\n                            }\n                        }\n                    }\n                }\n\n                .DataGrid_header {\n                    padding: 12px 0;\n                    border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.16);\n                    background-color: rgba(var(--center-channel-color-rgb), 0.04);\n                    border-radius: 4px 4px 0 0;\n                    color: var(--center-channel-color);\n                    font-family: 'Open Sans';\n                    font-size: 14px;\n                    font-style: normal;\n                    font-weight: 600;\n                    line-height: 20px;\n\n                    &:last-child {\n                        border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.08);\n                    }\n\n                    .DataGrid_cell {\n                        padding: 0 16px;\n                    }\n                }\n\n                .DataGrid_rows {\n                    background: transparent;\n\n                    .DataGrid_loading {\n                        padding: 234px 0;\n                    }\n\n                    .DataGrid_row {\n                        display: flex;\n                        flex-direction: row;\n                        padding: 0;\n                        border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.08);\n                        border-left: none;\n                        background-color: var(--center-channel-bg);\n                        color: var(--center-channel-color);\n\n                        &:hover {\n                            border-left: none;\n                            background-color: rgba(var(--center-channel-color-rgb), 0.08);\n                            color: var(--center-channel-color);\n                        }\n\n                        &:nth-of-type(2) {\n                            span.horizontal-bar {\n                                opacity: 0.9;\n                            }\n                        }\n\n                        &:nth-of-type(3) {\n                            span.horizontal-bar {\n                                opacity: 0.8;\n                            }\n                        }\n\n                        &:nth-of-type(4) {\n                            span.horizontal-bar {\n                                opacity: 0.7;\n                            }\n                        }\n\n                        &:nth-of-type(5) {\n                            span.horizontal-bar {\n                                opacity: 0.6;\n                            }\n                        }\n\n                        &:nth-of-type(6) {\n                            span.horizontal-bar {\n                                opacity: 0.5;\n                            }\n                        }\n\n                        &:nth-of-type(7) {\n                            span.horizontal-bar {\n                                opacity: 0.5;\n                            }\n                        }\n\n                        &:nth-of-type(8) {\n                            span.horizontal-bar {\n                                opacity: 0.4;\n                            }\n                        }\n\n                        &:nth-of-type(9) {\n                            span.horizontal-bar {\n                                opacity: 0.3;\n                            }\n                        }\n\n                        &:nth-of-type(10) {\n                            span.horizontal-bar {\n                                opacity: 0.3;\n                            }\n                        }\n\n                        .DataGrid_cell {\n                            display: flex;\n                            align-items: center;\n                            padding: 0 16px;\n                            margin: 0;\n                            white-space: normal;\n\n                            &.message-count {\n                                justify-content: end;\n                            }\n\n                            &.rankCell {\n                                flex: 0.2 0;\n                            }\n\n                            .emoticon {\n                                margin: 12px 12px 12px 0;\n                            }\n\n                            span.replies,\n                            span.cell-text {\n                                display: inline-block;\n                                padding: 14px 0;\n                                font-family: 'Open Sans';\n                                font-size: 14px;\n                                font-style: normal;\n                                font-weight: 400;\n                                line-height: 20px;\n                            }\n\n                            .channel-display-name {\n                                display: flex;\n                                overflow: hidden;\n                                color: var(--center-channel-color);\n\n                                &:hover {\n                                    text-decoration: none;\n                                }\n\n                                .icon {\n                                    color: rgba(var(--center-channel-color-rgb), 0.56);\n                                }\n\n                                span.cell-text {\n                                    overflow: hidden;\n                                    margin-left: 4px;\n                                    font-weight: 600;\n                                    text-overflow: ellipsis;\n                                    white-space: nowrap;\n                                }\n                            }\n\n                            .times-used-container {\n                                display: flex;\n                                width: 100%;\n                                align-items: center;\n\n                                span.cell-text {\n                                    flex: 0.1 0;\n                                    text-align: right;\n                                }\n\n                                span.horizontal-bar {\n                                    height: 8px;\n                                    margin-left: 16px;\n                                    background: var(--button-bg);\n                                    border-radius: 6px;\n\n                                    &.top-dms {\n                                        background: var(--online-indicator);\n                                        opacity: 1;\n                                    }\n                                }\n                            }\n\n                            .thread-item {\n                                width: 100%;\n                                padding: 12px 0;\n\n                                .preview {\n                                    height: auto;\n                                }\n                            }\n\n                            .board-item {\n                                display: flex;\n                                align-items: center;\n\n                                span.board-icon {\n                                    display: flex;\n                                    width: 24px;\n                                    height: 24px;\n                                    align-items: center;\n                                    justify-content: center;\n                                    font-size: 24px;\n                                }\n\n                                span.board-title {\n                                    overflow: hidden;\n                                    max-width: 409px;\n                                    margin-left: 12px;\n                                    font-family: 'Open Sans';\n                                    font-size: 14px;\n                                    font-style: normal;\n                                    font-weight: 600;\n                                    line-height: 20px;\n                                    text-overflow: ellipsis;\n                                    white-space: nowrap;\n                                }\n                            }\n\n                            .replies,\n                            span.board-updates,\n                            .Avatars___xs {\n                                margin-left: auto;\n                            }\n\n                            &.last-activity {\n                                justify-content: flex-end;\n                                margin-right: 8px;\n\n                                .timestamp {\n                                    overflow: hidden;\n                                    color: rgba(var(--center-channel-color-rgb), 0.72);\n                                    text-overflow: ellipsis;\n\n                                    time {\n                                        white-space: nowrap;\n                                    }\n                                }\n                            }\n\n                            .role {\n                                overflow: hidden;\n                                text-overflow: ellipsis;\n                                white-space: nowrap;\n                            }\n\n                            &.actions {\n                                overflow: visible;\n                            }\n\n                            .user-info {\n                                display: flex;\n                                overflow: hidden;\n                                align-items: center;\n\n                                &:hover {\n                                    text-decoration: none;\n                                }\n\n                                .display-name {\n                                    overflow: hidden;\n                                    margin-left: 12px;\n                                    color: var(--center-channel-color);\n                                    font-family: 'Open Sans';\n                                    font-size: 14px;\n                                    font-style: normal;\n                                    font-weight: 600;\n                                    line-height: 20px;\n                                    text-overflow: ellipsis;\n                                    white-space: nowrap;\n                                }\n                            }\n\n                            time {\n                                overflow: hidden;\n                                text-overflow: ellipsis;\n                                white-space: nowrap;\n                            }\n                        }\n                    }\n                }\n            }\n\n            .button-footer {\n                padding-top: 24px;\n                text-align: right;\n\n                button {\n                    height: 40px;\n                    border-radius: 4px;\n                    font-size: 14px;\n                    font-weight: 600;\n\n                    &.join-channel-cancel {\n                        padding: 13px 20px;\n                        margin-right: 8px;\n                        background: rgba(var(--button-bg-rgb), 0.08);\n                        color: rgb(var(--button-bg-rgb));\n                        line-height: 14px;\n                    }\n\n                    &.save-button {\n                        padding: 0 20px;\n                    }\n                }\n            }\n\n            .pagination-buttons {\n                display: flex;\n                align-items: center;\n                justify-content: end;\n\n                .pagination {\n                    margin-right: 4px;\n                    color: var(--center-channel-color);\n                    font-family: 'Open Sans';\n                    font-size: 14px;\n                    font-style: normal;\n                    font-weight: 400;\n                    line-height: 20px;\n                }\n\n                .pagination-button {\n                    padding: 8px;\n                    border: none;\n                    background: none;\n                    border-radius: 4px;\n                    color: rgba(var(--center-channel-color-rgb), 0.56);\n\n                    &:hover {\n                        background-color: rgba(var(--center-channel-color-rgb), 0.08);\n                        color: rgba(var(--center-channel-color-rgb), 0.56);\n                    }\n\n                    &:disabled {\n                        &:hover {\n                            background-color: transparent;\n                            color: rgba(var(--center-channel-color-rgb), 0.56);\n                        }\n                    }\n\n                    &:nth-of-type(1) {\n                        margin-right: 4px;\n                    }\n\n                    i {\n                        width: 16px;\n                        height: 16px;\n                        font-size: 16px;\n                    }\n                }\n            }\n        }\n    }\n}\n\n@media (min-width: 768px) {\n    .insights-modal {\n        width: 800px;\n    }\n}\n"],"names":[],"sourceRoot":""}