#messageContainer {
    position: fixed;
    top: 8px;
    font-size: 18px;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    color: rgba(0, 0, 0, 0.85);
    justify-content: center;
    align-items: center;
    z-index: 1000010;
    width: 100%;
    text-align: center;
}

.messageBar {
    box-shadow: 0 3px 6px -4px rgb(0 0 0 / 12%), 0 6px 16px 0 rgb(0 0 0 / 8%), 0 9px 28px 8px rgb(0 0 0 / 5%);
    border-radius: 4px;
    padding: 10px 16px;
    background: #fff;
    pointer-events: all;
    margin: 8px;
}

.messageContent {
    font-size: 16px;
}

.successIcon {
    color: #2F8208;
}

.errorIcon {
    color: #ff4d4f;
}

.messageBar .messageIcon {
    margin-right: 3px;
    position: relative;
    top: 1px;
    vertical-align: -0.124em;
}

.messageAnimation-enter {
    opacity: 0;
    transform: translateY(-20px);
}

.messageAnimation-enter-active {
    opacity: 1;
    transform: translateY(0px);
    transition: opacity 200ms ease-in, transform 200ms ease-in;
}

.messageAnimation-exit {
    opacity: 1;
    transform: translateY(0px);
}

.messageAnimation-exit-active {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 200ms ease-in, transform 200ms ease-in;
}


.accountSettings_digestProjectsList__Ddqq6 {
    padding: 0 8px;
}

.accountSettings_userSettingsContainer__FaIei {
    padding: 12px 0;
}

.accountSettings_userSettingsContainer__FaIei h2,
.accountSettings_promotionalEmailSettings__8iJXW .accountSettings_emailHeader__GdmTi {
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
}

.accountSettings_userSettingsContainer__FaIei h2 {
    margin-bottom: 8px;
}

.accountSettings_basicSettingsContainer__Kr\+D- {
    margin-bottom: 24px;
}

.accountSettings_basicSettingsContainer__Kr\+D- > *,
.accountSettings_preferencesContainer__JdZ9o > * {
    margin-bottom: 16px;
    max-width: 346px;
}

.accountSettings_preferencesContainer__JdZ9o,
.accountSettings_promotionalEmailSettings__8iJXW {
    padding-top: 25px;
    border-top: 1px solid #EDEBE9;
}

.accountSettings_overviewSettingsLabel__nKpYu {
    margin-bottom: 4px;
    user-select: none;
}

.accountSettings_overviewSettingsLabel__nKpYu .maskChoiceGroup {
    padding: 0 8px;
}

.accountSettings_preferencesContainer__JdZ9o .ms-ChoiceField-field {
    margin-left: 8px;
}

.accountSettings_preferencesContainer__JdZ9o .maskChoiceGroup .ms-ChoiceField {
    margin-top: 10px;
}

.accountSettings_name__6WbBG {
    margin-top: 16px;
}

.accountSettings_promoEmailToggles__4uLYw .accountSettings_name__6WbBG .ms-Toggle {
    margin: 16px 8px 0;
}

.accountSettings_promoEmailToggles__4uLYw > * {
    margin-bottom: 12px;
}

.accountSettings_promoEmailToggles__4uLYw .accountSettings_overviewSettingsLabel__nKpYu {
    font-size: 14px;
    line-height: 20px;
}

.accountSettings_promoEmailToggles__4uLYw .accountSettings_name__6WbBG p {
    font-size: 12px;
    line-height: 16px;
}

.accountSettings_promotionalEmailSettings__8iJXW .accountSettings_promoEmailButton__09MmV {
    margin: 16px 0;
}

.shared_hide__I24ob {
    display: none !important;
}

.shared_bold__Dlnqb {
    font-weight: 600;
}

.shared_normal__AGbmz {
    font-weight: 400;
}

.shared_pointer__CJfQS {
    cursor: pointer;
}

.shared_darkBlueFont__owkq3 {
    color: #004578;
}

.shared_darkGrayFontBold__bK3Bp {
    color: #1B1A19;
    font-weight: 600;
}

.shared_darkGrayFont__0lQKR {
    color: #323130;
}

.shared_lightGrayFont__IAlG3 {
    color: #605E5C;
}

.shared_linkColor__niUKx {
    color: #0078D4;
}

.shared_regularFont__8a4Vb {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}

.shared_flip__j5YnL {
    transform: rotate(180deg);
}

.shared_absolute__D6fiX {
    position: absolute;
}

.shared_flex__bW95Y {
    display: flex;
}

.shared_wrap__9gLie {
    flex-flow: wrap;
}

.shared_hidden__w7KpR {
    display: none;
}

.shared_visibilityHidden__tYFZV {
    visibility: hidden;
}

.shared_absolutePosition__wX8j\+ {
    position: absolute;
}

.shared_verticalFlex__rAS0M {
    flex-direction: column;
}

.shared_verticalCenteredFlex__Ehs7- {
    justify-content: center;
    align-items: center;
}

.shared_horizontalFlex__3OY6i {
    flex-direction: row;
}

.shared_horizontalCenteredFlex__RU29j {
    justify-content: center;
    align-items: center;
}

.shared_horizontalSpacedFlex__PWCyz {
    align-items: center;
    justify-content: space-between;
}

.shared_horizontalAlignCenteredFlex__12A87 {
    align-items: center;
}

.shared_alignEnd__wdHVN {
    align-items: flex-end;
}

.shared_rowReverseFlex__v-tpC {
    flex-direction: row-reverse;
}

.shared_shadowBold__dOyIg::before {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 1px;
    color: transparent;
    overflow: hidden;
    visibility: hidden;
}

.shared_breakLongWords__79IOm {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.shared_tabContent__c7sZa {
    display: flex;
    overflow-y: hidden;
    flex: 1;
    position: relative;
}

.shared_projContent__nZv89,
.shared_tabContentWithFilter__opvdU {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
    position: relative;
}

.shared_chartContentLoading__a2vWq {
    height: 350px;
}

.shared_capitalizeText__K4Itj {
    text-transform: capitalize;
}

.shared_fullHeight__sNI5B {
    height: 100%;
}

.shared_fullWidth__8U\+Sq {
    width: 100%;
}

.shared_forceFullWidth__VFFWX {
    width: 100% !important;
}

.shared_autoOverflow__Jgnu7 {
    overflow: auto;
}

.shared_hiddenOverflow__t0prM {
    overflow: hidden;
}

.shared_oneLineText__6z5KE {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shared_filterButton__4bxHY i {
    height: 20px;
}

.shared_clearFiltersButton__-3\+No {
    background: transparent;
}

.shared_clearFiltersButton__-3\+No span {
    color: #424242;
}

.shared_clearFiltersButton__-3\+No path {
    fill: #424242;
}

.shared_horizontalDivider__hrc6y {
    width: 100%;
    height: 1px;
    background-color: #EDEBE9;
}

.shared_modalHeader__hR1UB {
    display: flex;
    font-weight: 600;
    font-size: 20px;
    margin: 16px 24px;
    justify-content: space-between;
}

.shared_modalHeader__hR1UB .shared_title__TeR3r {
    display: flex;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shared_modalHeader__hR1UB .shared_title__TeR3r:focus {
    outline: none;
}

.shared_modalHeader__hR1UB .shared_title__TeR3r:focus-visible {
    outline: 3px solid;
}

.shared_removeElementContainer__AvErT {
    margin: 24px;
}

/* OVERRIDES */
.project .tabContentHeader {
    border-bottom: 0;
    padding: 12px 16px;
}

.scrolledDashboard .tabContentHeader {
    box-shadow: 0px 0.6px 1.8px rgba(131, 126, 255, 0.1), 0px 3.2px 7.2px rgba(131, 126, 255, 0.12);
    z-index: 3;
}

body a:hover {
    color: inherit;
}

.shared_flexSpacer__Ewb0O {
    flex: 1 1 auto;
}

.shared_loadingContainer__k7h6y {
    align-items: center;
    justify-content: center;
    display: flex;
    flex: 1 1 auto;
}

.shared_linkDescriptionHidden__JhnBg {
    clip-path: inset(100%);
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* Contextual chat */
.copilot_resizer__6HPnq {
    width: 12px;
    cursor: col-resize;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    position: absolute;
    z-index: 5;
    height: 100vh;
}

.copilot_resizerButton__ZghLY {
    cursor: col-resize;
    font-size: 28px;
    display: none;
}

.copilot_resizer__6HPnq:hover .copilot_resizerButton__ZghLY {
    display: inline-block;
}

.copilot_loading__LNYRX {
    margin-top: 40vh;
}

.copilot_closeButton__RzAGF .ms-Icon {
    font-size: 12px;
    color: #424242;
}

.copilot_closeButton__RzAGF.ms-Button {
    width: 24px;
    height: 24px;
}

.copilot_intro__Yoe4D {
    display: flex;
    flex-direction: column;
    overflow: auto;
    flex-shrink: 0;
    font-size: 14px;
}

.copilot_intro__Yoe4D h2 {
    font-size: 40px;
}

.copilot_introCard__\+caKu {
    width: 100%;
    margin: 0 1px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    padding: 16px;
    font-weight: 400;
    line-height: normal;
    color: #111;
    cursor: pointer;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.14);
    border: 1px solid transparent;
}

.copilot_introCard__\+caKu:hover {
    border: 1px solid var(--northern-village-light-purple, #A7A5F5);
}

.copilot_introCardHeader__3q8GB {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #020057;
    font-weight: 600;
}

.copilot_introCardHeader__3q8GB svg {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

.copilot_section__uWy3n {
    height: calc(100% - 82px);
    width: 100%;
    flex-direction: column;
    overflow: hidden scroll;
    padding: 0 6px 0 16px;
    display: flex;
    -webkit-mask-image: linear-gradient(to top, transparent 4px, black 20px), linear-gradient(to left, black 11px, transparent 6px);
}

.copilot_header__D1LN5 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px;
    background-color: #FFF;
    position: sticky;
    border-radius: 8px 0 0 0;
}

.copilot_header__D1LN5 .copilot_title__X5ky1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.copilot_title__X5ky1 svg {
    width: fit-content;
}

.copilot_header__D1LN5 h2 {
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
}

.copilot_header__D1LN5 p {
    line-height: 24px;
}

.copilot_intro__Yoe4D .copilot_note__3G6nd {
    gap: 2px;
    color: #201F1E;
    font-weight: 400;
    max-width: 880px;
}

.copilot_intro__Yoe4D .copilot_links__PqjBv {
    display: inline-flex;
    gap: 4px;
    font-size: 12px;
}

.copilot_intro__Yoe4D .copilot_msg__ADewI {
    font-size: 12px;
}

.copilot_intro__Yoe4D .copilot_link__XwdSD {
    color: #174AE4;
    text-decoration: none;
    display: inline;
}

.copilot_intro__Yoe4D .copilot_link__XwdSD:hover {
    cursor: pointer;
    text-decoration: underline;
}

.copilot_intro__Yoe4D .copilot_link__XwdSD:focus-visible {
    outline:  rgb(16, 16, 16) auto 1px;
}

.copilot_intro__Yoe4D a {
    color: #174AE4;
}

.copilot_intro__Yoe4D a:hover {
    text-decoration: underline;
}

.copilot_intro__Yoe4D .copilot_cards__Gz\+kB {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 16px 0;
    gap: 16px;
}

.copilot_copy__m-hP3 {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.copilot_textArea__6Xy54.fai-Textarea {
    max-width: 100%;
    margin: 0 16px 16px;
}

.copilot_message__F1X9O.fai-UserMessage {
    background-color: #EBEFFF;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
}

.copilot_messageTurns__YsiKd {
    font-size: 10px;
    color: #707070;
    line-height: 14px;
    text-align: center;
    font-style: normal;
    text-wrap: nowrap;
}

.copilot_messageInfo__-Fs2M {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 8px;
}

.copilot_messageInfo__-Fs2M .fai-AiGeneratedDisclaimer {
    text-wrap: wrap;
    margin-right: 8px;
}

.copilot_messageDisclaimer__rbfLL {
    font-size: 10px;
    margin: 0 0 8px 16px;
    padding: 1px 4px;
    background: #EBEBEB;
    width: fit-content;
    font-weight: 600;
    color: #616161;
    border-radius: 4px;
}

.copilot_messageActions__gDBcv {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 8px;
    gap: 6px;
}

.copilot_inputActions__Nmysw {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.copilot_divider__wsdMt {
    margin: 0 4px;
}

.copilot_messageLink__kvduV {
    width: 24px;
    height: 24px;
}

.copilot_latencyHeader__AaQnM .fai-LatencyLoader__header {
    margin: 12px 0 16px;
}

.copilot_badgesToggle__ba1cn {
    margin-left: auto;
}

.copilot_badges__Xrxm0 {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin-top: 8px;
    gap: 8px;
}

.copilot_badges__Xrxm0 > div {
    margin: 0;
    max-width: 100% !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.copilot_notClickable__CQpPN,
.copilot_notClickable__CQpPN > div {
    cursor: default;
}

.copilot_badges__Xrxm0 .filterBadgeLabel {
    font-size: 13px;
}

button.copilot_newTopic__KQj6N {
    width: 48px;
    height: 48px;
    background: linear-gradient(243.43deg, #344DF3 8.73%, #426DF2 41.85%, #2C7CD5 67.37%, #19ACE3 113.51%);
    mix-blend-mode: normal;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 0px 2px rgba(0, 0, 0, 0.12);
    border-radius: 50px;
    color: #FFF;
    font-weight: 600;
    border: none;
    min-width: auto;
}

.copilot_stickyButton__hvzt7.copilot_container__JtjE4 {
    bottom: 114px;
    display: flex;
    max-width: 900px;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 20px;
    margin: 0 -10px;
    transition: bottom 200ms ease;
}

.copilot_beta__ORLOT {
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    padding: 2px 6px;
    background-color: #6864CE;
    margin-left: 8px;
    color: #FFF;
}

.copilot_system__-Ufto {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0 8px;
    margin-right: 0.25em;
}

.copilot_system__-Ufto .copilot_checkmark__Ghnp9 {
    font-size: 28px;
    color: #13A10E;
}

.copilot_system__-Ufto .copilot_query__KJi9x {
    font-weight: 600;
    display: inline;
    margin-left: 0.25em;
    word-wrap: break-word;
}

.copilot_activityText__LYKcB {
    white-space: pre-line;
}

/**
    Prompt guide for chat
**/

.copilot_promptGuide__vCtXy {
    max-width: 100%;
    background: #FFF;
    padding: 4px;
    border-radius: 8px;
    margin: 0 16px;
    box-shadow: #00000022 0px 6.4px 14.4px 0px, #0000001C 0px 1.2px 3.6px 0;
    position: relative;
    z-index: 1;
}

.copilot_guideHeaderText__3ptOI {
    padding: 6px;
    color: #616161;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
}

.copilot_guideBackHeader__IC4Og {
    gap: 8px;
    padding: 6px;
}

.copilot_guideBackHeader__IC4Og .copilot_guideHeaderText__3ptOI {
    padding: 0;
    margin: 0;
}

.copilot_guideBackHeader__IC4Og:hover {
    cursor: pointer;
}

.copilot_guideChoice__Rbz5s {
    justify-content: space-between;
    padding: 6px;
}

.copilot_guideChoiceTitle__tkkru {
    gap: 10px;
}

.copilot_guideChoice__Rbz5s:hover,
.copilot_promptQuestion__GD1CL:hover {
    cursor: pointer;
    background-color: #EAEAFF;
    border-radius: 4px;
}

.copilot_promptQuestion__GD1CL {
    padding: 6px 6px 6px 8px;
}

.copilot_promptQuestion__GD1CL p {
    display: inline;
}

.copilot_promptQuestion__GD1CL p:first-child {
    margin-left: 0px;
}

.copilot_promptQuestion__GD1CL .copilot_inputText__2opa4 {
    color: #717171;
}

/**
*   Selection stage of grouped sessions insights
**/
.copilot_selection__doADm {
    padding: 12px 12px 0 12px;
    overflow: hidden;
    height: 100%;
}


.copilot_selection__doADm .copilot_head__uhGpu {
    display: flex;
    min-height: 60px;
    padding: 8px 16px;
    border-radius: 8px;
    align-items: center;
    margin-bottom: 12px;
    justify-content: space-between;
    background: #EFF6FC;
}

.copilot_selection__doADm .copilot_head__uhGpu button:disabled {
    background-color: rgb(243, 242, 241);
    border-color: lightgray;
    color: lightgray;
}

.copilot_selection__doADm .copilot_head__uhGpu button:disabled path {
    fill: lightgray;
}

.copilot_selection__doADm .copilot_head__uhGpu .copilot_submit__1YJNq {
    margin-left: 16px;
}

.copilot_selection__doADm .copilot_head__uhGpu .copilot_title__X5ky1 {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.copilot_selection__doADm .copilot_head__uhGpu .copilot_subtitle__PKwWw {
    font-size: 12px;
    line-height: 16px;
    color: #A80000;
    display: flex;
    align-items: center;
    gap: 2px;
}

.copilot_selection__doADm .copilot_list__09sre {
    overflow: auto;
    padding-right: 5px;
}

/**
*   Insights stage of grouped sessions insights
**/

.copilot_sessions__-mAkp {
    height: 100%;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.copilot_sessions__-mAkp.copilot_interesting__oj5xa {
    padding: 0px 16px 16px 16px;
}

.copilot_sessions__-mAkp .copilot_back__3nvoB {
    border: none;
    padding-left: 0;
    min-height: 32px;
}

.copilot_sessions__-mAkp .copilot_back__3nvoB span {
    font-weight: 400;
    color: #0078D4;
}

.copilot_sessions__-mAkp .copilot_back__3nvoB i {
    margin: 0px 4px 4px 4px;
}

.copilot_sessions__-mAkp .copilot_title__X5ky1 {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    display: flex;
    align-items: center;
    color: #111111;
    margin-bottom: 8px;
    gap: 8px;
}

.copilot_cardInsights__kLSnZ {
    padding: 12px 0px 8px 0px;
}

.copilot_cardInsightsText__MKv2v h1 {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

.copilot_sessions__-mAkp .copilot_disclosure__6m\+jt,
.copilot_cardInsightsText__MKv2v .copilot_disclosure__6m\+jt,
.copilot_userStruggleSessionList__o6iuZ .copilot_disclosure__6m\+jt {
    font-size: 12px;
    color: #605E5C;
}

.copilot_cardInsightsText__MKv2v .copilot_disclosure__6m\+jt {
    margin: 8px 0;
}

.copilot_disclosure__6m\+jt.copilot_interesting__oj5xa,
.copilot_disclosure__6m\+jt.copilot_interesting__oj5xa div,
.copilot_disclosure__6m\+jt.copilot_interesting__oj5xa span {
    font-size: 11px;
    display: inline;
    margin: 0;
    padding: 0;
    white-space: normal;
}

.copilot_disclosure__6m\+jt.copilot_interesting__oj5xa div {
    margin: 0px 0px 0px 4px;
}

.copilot_disclosure__6m\+jt.copilot_interesting__oj5xa > div:first-child::after {
    content: " ";
}

.copilot_sessions__-mAkp .copilot_link__XwdSD {
    gap: 4px;
    display: flex;
    margin-top: 8px;
    flex-wrap: wrap;
    flex-direction: row;
}

.copilot_sessions__-mAkp .copilot_link__XwdSD:hover {
    background: rgb(0 0 0 / 10%);
}

/**
*   Markdown styles for copilot
**/

.copilot_markdown__MarTV {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    white-space: normal;
    border-radius: 12px;
    word-break: break-word;
    padding: 12px 12px 12px 6px;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 0px 2px rgba(0, 0, 0, 0.12);
}

.copilot_markdown__MarTV.copilot_interesting__oj5xa {
    padding: 0px;
    margin: 0px;
}

.copilot_sessions__-mAkp .copilot_markdown__MarTV {
    margin: 8px 2px;
}

.copilot_markdown__MarTV h3 {
    font-size: 15px;
    font-weight: 500;
    margin: 8px 6px 14px;
}

.copilot_markdown__MarTV.copilot_interesting__oj5xa h3 {
    font-size: 14px;
    font-weight: 400;
    padding: 8px 0px 0px;
    margin: 0px;
}

.copilot_markdown__MarTV a {
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 320px;
    color: #0078D4;
    display: inline-block;
    vertical-align: text-top;
}

.copilot_markdown__MarTV .copilot_selected__3iXRl:hover {
    color: #000000;
    text-decoration-color: #000000;
}

.copilot_markdown__MarTV li::marker {
    font-size: 12px;
}

.copilot_markdown__MarTV table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 12px;
    border-style: hidden;
    box-shadow: 0 0 0 1px #ddd;
    margin: 8px 0;
}

.copilot_markdown__MarTV table thead tr th {
    font-weight: bold;
    text-align: left;
}

.copilot_markdown__MarTV table thead tr th,
.copilot_markdown__MarTV table tbody tr td {
    padding: 6px 14px;
}

.copilot_markdown__MarTV ul,
.copilot_markdown__MarTV ol {
    margin-left: 10px;
}

.copilot_markdown__MarTV ul li,
.copilot_markdown__MarTV ol li {
    list-style-position: outside;
    margin-left: 15px;
    margin-top: 6px;
}

.copilot_markdown__MarTV ul li::marker {
    font-size: 14px;
}

.copilot_markdown__MarTV ol li::marker {
    font-weight: 600;
}

.copilot_sessions__-mAkp .copilot_markdown__MarTV sup {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: baseline;
    top: -1px;
    margin: 0px 2px;
    min-width: 14px;
    height: 14px;
    text-decoration-color: transparent;
    outline: transparent solid 1px;
    background-color: #EAEAFF;
    border-radius: 3px;
    font-size: 10px;
    color: black;
    font-weight: 600;
    cursor: pointer;
}

.copilot_markdown__MarTV a.copilot_custom__zaeah {
    line-height: 20px;
    text-overflow: initial;
    white-space: initial;
    overflow: auto;
    max-width: initial;
    color: #000000;
    display: initial;
    vertical-align: initial;
}

.copilot_sessions__-mAkp .copilot_markdown__MarTV sup:focus-visible,
.copilot_sessions__-mAkp .copilot_markdown__MarTV a.copilot_custom__zaeah:focus-visible {
    content: "";
    border: 1px solid transparent;
    outline: rgb(96, 94, 92) solid 1px;
}

.copilot_sessions__-mAkp .copilot_markdown__MarTV a.copilot_custom__zaeah.copilot_highlight__\+XpKz {
    border-radius: 4px;
    background-color: #EAEAFF;
}

.copilot_sessions__-mAkp .copilot_markdown__MarTV a.copilot_custom__zaeah:hover,
.copilot_sessions__-mAkp .copilot_markdown__MarTV a.copilot_custom__zaeah:focus {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: #000000;
    text-underline-offset: 3px;
}

.copilot_sessions__-mAkp .copilot_feedback__p-qbb,
.copilot_cardInsightsText__MKv2v .copilot_feedback__p-qbb,
.copilot_userStruggleSessionList__o6iuZ .copilot_feedback__p-qbb {
    text-decoration: none;
    line-height: 20px;
    color: #0078D4;
    cursor: pointer;
    display: inline;
}

.copilot_sessions__-mAkp .copilot_feedback__p-qbb:focus,
.copilot_sessions__-mAkp .copilot_feedback__p-qbb:hover, 
.copilot_cardInsightsText__MKv2v .copilot_feedback__p-qbb:focus,
.copilot_cardInsightsText__MKv2v .copilot_feedback__p-qbb:hover,
.copilot_userStruggleSessionList__o6iuZ .copilot_feedback__p-qbb:focus, 
.copilot_userStruggleSessionList__o6iuZ .copilot_feedback__p-qbb:hover  {
    color: #0078D4;
    text-underline-offset: 3px;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: #0078D4;
}

@media screen and (-ms-high-contrast: active), (forced-colors: active) {
    .copilot_sessions__-mAkp .copilot_feedback__p-qbb,
    .copilot_cardInsightsText__MKv2v .copilot_feedback__p-qbb,
    .copilot_userStruggleSessionList__o6iuZ .copilot_feedback__p-qbb {
        color: highlight;
    }
}

/**
    Selected Grouped Sessions - collapsable module
**/

.copilot_sessions__-mAkp details {
    width: 100%;
    margin: 16px 0;
    border-radius: 8px;
    background: #EFF6FC;
}

.copilot_sessions__-mAkp details:hover {
    cursor: pointer;
}

.copilot_sessions__-mAkp details > summary {
    display: flex;
    font-weight: 600;
    list-style-type: none;
    justify-content: space-between;
    padding: 16px;
}

.copilot_sessions__-mAkp details[open] {
    margin: 16px 0 0;
    border-radius: 8px 8px 0 0;
}

.copilot_sessions__-mAkp details[open] > summary i {
    transform: rotate(90deg);
}

.copilot_sessions__-mAkp .copilot_list__09sre {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    background: #EFF6FC;
    padding: 0 12px;
    border-radius: 0 0 8px 8px;
}

.copilot_list__09sre .copilot_card__NwUoH {
    padding: 12px 16px 8px 16px;
    width: 100%;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #605E5C;
    position: relative;
    margin-bottom: 16px;
    box-shadow: 0px 3.2px 7.2px 0px rgba(131, 126, 255, 0.12), 0px 0.6px 1.8px 0px rgba(131, 126, 255, 0.10);
    border-radius: 8px;
    background: #FFFFFF;
    border: 1px solid #EAEAFF;
}

.copilot_list__09sre .copilot_card__NwUoH:hover {
    cursor: pointer;
    box-shadow: 0px 4.8px 14.4px 0px rgba(131, 126, 255, 0.30);
}

.copilot_list__09sre .copilot_card__NwUoH.copilot_selected__3iXRl {
    border: 1px solid rgba(150, 146, 255, 1);
}

.copilot_list__09sre .copilot_card__NwUoH .copilot_tag__7G6wF {
    width: 94px;
    height: 22px;
    border: 1px solid #DEECF9;
    border-radius: 4px;
    display: inline-block;
    text-align: center;
    font-size: 12px;
    color: #323130;
}

.copilot_cardNumber__T0J4j {
    background: #EAEAFF;
    border-radius: 3px;
    width: 20px;
    text-align: center;
    margin-bottom: 8px;
}

.copilot_cardNumber__T0J4j span {
    font-weight: 600;
}

.copilot_cardTime__RyXf9 {
    position: absolute;
    font-size: 12px;
    line-height: 16px;
    right: 16px;
    top: 42px;
    color: #323130;
    text-align: right;
}

.copilot_cardItem__SxaOE {
    max-width: 222px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.copilot_cardItemInline__Zu0Ya {
    margin-right: 12px;
    display: inline-block;
}

.copilot_cardItemName__rNznq {
    margin-right: 4px;
}

.copilot_device__lrnZQ {
    margin: 8px 0;
}

.copilot_device__lrnZQ > .copilot_tag__7G6wF:not(:last-child) {
    margin-right: 8px;
}

.copilot_groupInsightsButton__TRGaH {
    margin-left: 12px;
    margin-right: 16px;
    min-width: max-content;
}

.copilot_groupInsightsButton__TRGaH .ms-Button-label {
    line-height: 21px;
}

.copilot_groupInsightsButton__TRGaH.is-expanded {
    background-color: #EFF6FC;
}

.copilot_groupInsightsButton__TRGaH .ms-Button-menuIcon {
    line-height: 12px;
    height: 12px;
    width: 12px;
}

.copilot_groupInsightsButton__TRGaH .ms-Button-icon {
    height: 20px;
    width: 20px;
}

.copilot_groupInsightsButton__TRGaH:disabled {
    border: 1px solid #E0E0E0 !important;
}

.copilot_groupExitInsightsButton__FkCpK .ms-Icon {
    display: none;
}

@media only screen and (max-width: 950px) {
    .copilot_groupInsightsButton__TRGaH {
        padding: 0 !important;
        margin-right: 0px;
    }

    .copilot_groupExitInsightsButton__FkCpK .ms-Button-icon {
        height: 16px;
        width: 16px;
    }
    
    .copilot_groupInsightsButton__TRGaH .ms-Button-textContainer {
        display: none;
    }

    .copilot_groupExitInsightsButton__FkCpK .ms-Icon {
        display: initial;
    }

    .copilot_groupExitInsightsButton__FkCpK .ms-Button-textContainer {
        display: none;
    }
}

/*
    Playback Understanding styles
*/
.copilot_pivotItem__oytX8 .copilot_markdown__MarTV {
    padding: 8px 21px 16px;
}

.copilot_pivotItem__oytX8 .copilot_markdown__MarTV h1,
.copilot_pivotItem__oytX8 .copilot_markdown__MarTV h2,
.copilot_pivotItem__oytX8 .copilot_markdown__MarTV h3,
.copilot_pivotItem__oytX8 .copilot_markdown__MarTV h4 {
    color: #333;
    margin: 20px 0 14px;
    margin-bottom: 10px;
}

.copilot_pivotItem__oytX8 .copilot_markdown__MarTV h1 {
    font-size: 2em;
    border-bottom: 2px solid #ccc;
    padding-bottom: 10px;
}

.copilot_pivotItem__oytX8 .copilot_markdown__MarTV h2 {
    font-size: 1.5em;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
}

.copilot_pivotItem__oytX8 .copilot_markdown__MarTV h3 {
    font-size: 1.2em;
}

.copilot_pivotItem__oytX8 .copilot_markdown__MarTV p {
    margin: 10px 0;
}

.copilot_pivotItem__oytX8 .copilot_markdown__MarTV .copilot_code__nF8O0 {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    padding: 10px;
    margin: 10px 0;
    overflow-x: auto;
}

.copilot_pivotItem__oytX8 .copilot_markdown__MarTV .copilot_code__nF8O0 pre {
    margin: 0;
    font-family: 'Courier New', Courier, monospace;
}

.copilot_pivotItem__oytX8 {
    height: 100%;
    padding-top: 8px;
    margin: 4px 14px 14px;
    min-height: calc(82vh - 144px);
}

.copilot_loadingSpinner__xWUMQ,
.copilot_copilotIcon__1eBa9 {
    flex: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.copilot_copilotIcon__1eBa9.copilot_clickable__fgdRZ:hover {
    cursor: pointer;
}

.copilot_copilotIcon__1eBa9.copilot_disabled__XEnGc path {
    fill: rgb(161, 159, 157);
}

.copilot_scrollableContent__77JWM {
    overflow-y: 'scroll';
    display: 'flex';
    flex-direction: 'column';
    gap: 21;
}

.copilot_screenshotLabel__-dNMr {
    font-weight: 600;
    margin: 16px 16px 0px;
}

.copilot_screenshot__jCkTd {
    display: block;
    margin: 21px 16px 0;
    border-radius: 12px;
    max-width: calc(100% - 32px);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 0px 2px rgba(0, 0, 0, 0.12); 
}

.copilot_markdown__MarTV.copilot_interesting__oj5xa {
    background: none;
    box-shadow: none;
}

.copilot_subheaderContainer__io2nn {
    display: flex;
    padding: 0px 2px;
}

.copilot_loadingContainer__6XONQ {
    padding-top: 12px;
}

/* User struggle */
.copilot_playlistLink__S93gB {
    width: 380px;
    height: 106px;
    border-radius: 8px;
    border: 1px solid #EAEAFF;
    padding: 16px 24px;
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
}

.copilot_playlistLink__S93gB:focus {
    outline-color: #827DFF;
}

.copilot_playlistLink__S93gB.copilot_debug__R\+AFQ {
    height: fit-content;
}

.copilot_playlistLink__S93gB:hover {
    cursor: pointer;
    background-color: #FAF9F8;
    box-shadow: 0px 1.6px 3.6px 0px #00000021;
}

.copilot_playlistLink__S93gB:active {
    cursor: pointer;
    background-color: #F3F2F1;
    box-shadow: 0px 1.6px 3.6px 0px #00000021;
}

.copilot_playlistLinkScreenshot__q0Mot {
    position: relative;
}

.copilot_playlistLinkScreenshot__q0Mot img {
    height: 67px;
    width: 120px;
    border-radius: 4px;
    z-index: 2;
    position: relative;
    box-shadow: 0px 1px 2px 0px #00000024;
    object-fit: cover;
}

.copilot_playlistLinkScreenshot__q0Mot div {
    height: 67px;
    width: 120px;
    background-color: #EDEBE9;
    border-radius: 4px;
    position: absolute;
    border: 1px solid #EAEAFF;
}

.copilot_playlistLinkScreenshot__q0Mot .copilot_rectOne__g7gQK {
    box-shadow: 0px 1px 2px 0px #00000024;
    top: 4px;
    left: 4px;
    z-index: 1;
}

.copilot_playlistLinkScreenshot__q0Mot .copilot_rectTwo__UIvJv {
    box-shadow: 0px 2px 4px 0px #00000024;
    top: 8px;
    left: 8px;
    z-index: 0;
}

.copilot_playlistLinkScreenshot__q0Mot .copilot_playIcon__IfJti {
    position: absolute;
    top: 25px;
    left: 50px;
    z-index: 4;
}

.copilot_playlistLinkContent__-fT5S {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 2px;
}

.copilot_playlistLinkContent__-fT5S h3 {
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    color: #004578;
}

.copilot_playlistLink__S93gB.copilot_historyPage__9ZwYB {
    box-shadow: 0px 0.6px 1.8px 0px #837EFF1A;
}

.copilot_playlistLink__S93gB.copilot_historyPage__9ZwYB .copilot_playlistLinkContent__-fT5S h3 {
    color: #161514;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    word-break: break-word;
    overflow: hidden;
}

.copilot_playlistLinkContent__-fT5S p {
    font-size: 12px;
    line-height: 16px;
    color: #605E5C;
}

@media screen and (prefers-contrast: more) {
    .copilot_groupInsightsButton__TRGaH path {
        fill: white;
    }
}

.copilot_dateContainer__FYsRT {
    width: fit-content;
    display: flex;
    gap: 12px;
}

.copilot_dateCallout__KvRG2 {
    background-color: #FFF;
    padding: 0 12px 8px 12px;
}

.copilot_sentiment__2dGaL,
.copilot_dateFilter__ACBmD {
    display: flex;
    padding: 4px 8px;
    align-items: center;
    border-radius: 4px;
    border: 1px solid #FFF;
    background: #F3F2F1;
    color: #201F1E;
    height: 28px;
    cursor: pointer;
}

.copilot_dateFilter__ACBmD > i {
    color: #201F1E;
    margin-left: 8px;
    font-size: 8px;
    height: 8px;
}

.copilot_sentiment__2dGaL span.ms-Dropdown-title,
.copilot_sentiment__2dGaL > div.ms-Dropdown:focus::after {
    border: none;
    background: none;
    color: #201F1E;
    outline: none;
}

.copilot_sentiment__2dGaL i {
    font-size: 8px;
    height: 8px;
    color: #201F1E;
}

.copilot_sentiment__2dGaL.copilot_disabled__XEnGc span.ms-Dropdown-title,
.copilot_sentiment__2dGaL.copilot_disabled__XEnGc i {
    color: #a09f9d;
}

.copilot_dateFilter__ACBmD.copilot_disabled__XEnGc > span {
    color: #a09f9d;
}

.copilot_dateFilter__ACBmD.copilot_disabled__XEnGc > i {
    color: #a09f9d;
}

.copilot_userStruggleSessionList__o6iuZ {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.copilot_userStruggleSessionList__o6iuZ .copilot_listHeader__3X8Ut {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
}

.copilot_userStruggleSessionList__o6iuZ .copilot_navigation__SZNaN {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}

.copilot_userStruggleSessionList__o6iuZ .copilot_navigation__SZNaN i {
    font-size: 10px;
    color: #242424;
    font-weight: 600;
}

.copilot_userStruggleSessionList__o6iuZ .copilot_navigation__SZNaN h3 {
    color: #004578;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
}

.copilot_userStruggleSessionList__o6iuZ .copilot_navigation__SZNaN h3:hover {
    cursor: pointer;
}

.copilot_userStruggleSessionList__o6iuZ .copilot_sessionList__e1Cxz {
    overflow-y: scroll;
    padding: 0 16px 16px;
}

.copilot_userStruggleSessionList__o6iuZ .copilot_title__X5ky1 {
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
    margin: 0;
    padding: 0;
}

.copilot_userStruggleSessionList__o6iuZ .copilot_info__bntJE {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
}

.copilot_userStruggleSessionList__o6iuZ .copilot_info__bntJE .copilot_feedbackActions__METk2 span {
    margin: 0 1px;
}

.copilot_userStruggleSessionList__o6iuZ .copilot_info__bntJE p {
    color: #605E5C;
    font-size: 14px;
    line-height: 20px;
}

.copilot_userStruggleSessionList__o6iuZ .copilot_disclosure__6m\+jt {
    padding: 0 0 12px;
}

.copilot_userStruggleSessionList__o6iuZ .copilot_listDetails__zIdZt {
    gap: 8px;
    display: flex;
    margin: 16px;
    flex-direction: column;
    border-bottom: 1px solid #E6E6E6;
}

.copilot_userStruggleHistory__zv6TW {
    background: #FFF;
    border-radius: 8px;
    margin: 12px 16px 0 16px;
    padding: 32px 32px 0 32px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.copilot_userStruggleHistory__zv6TW .copilot_navigation__SZNaN,
.copilot_userStruggleSessionList__o6iuZ .copilot_navigation__SZNaN {
    display: flex;
    flex-direction: row;
    height: 22px;
    gap: 6px;
    align-items: center;
    width: fit-content;
    margin: 5px 12px 5px 0;
}

.copilot_userStruggleHistory__zv6TW .copilot_navigation__SZNaN:hover,
.copilot_userStruggleSessionList__o6iuZ .copilot_navigation__SZNaN:hover {
    cursor: pointer;
}

.copilot_userStruggleHistory__zv6TW .copilot_navigation__SZNaN i,
.copilot_userStruggleHistory__zv6TW .copilot_navigation__SZNaN svg,
.copilot_userStruggleSessionList__o6iuZ .copilot_navigation__SZNaN i,
.copilot_userStruggleSessionList__o6iuZ .copilot_navigation__SZNaN svg {
    height: 16px;
    width: 16px;
}

.copilot_userStruggleHistory__zv6TW .copilot_navigation__SZNaN path,
.copilot_userStruggleSessionList__o6iuZ .copilot_navigation__SZNaN path {
    fill: #424242;
}

.copilot_userStruggleHistory__zv6TW .copilot_navigation__SZNaN p,
.copilot_userStruggleSessionList__o6iuZ .copilot_navigation__SZNaN p {
    color: #004578;
    font-weight: 600;
    line-height: 20px;
}

.copilot_userStruggleSessionList__o6iuZ .copilot_filterBadges__-rxiH {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 12px 0;
}

.copilot_userStruggleSessionList__o6iuZ .copilot_filterBadges__-rxiH span {
    background: #F3F2F1;
    color: #323130;
    border-radius: 4px;
    font-size: 12px;
    line-height: 16px;
    padding: 3px 8px;
}

.copilot_userStruggleHistory__zv6TW .copilot_historyHeader__nGL4u {
    display: flex;
    flex-direction: column;
    margin: 16px 0 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #E6E6E6;
    gap: 12px;
}

.copilot_userStruggleHistory__zv6TW .copilot_historyHeader__nGL4u h3 {
    color: #000;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    margin-bottom: 4px;
}

.copilot_userStruggleHistory__zv6TW .copilot_historyHeader__nGL4u p {
    color: #605E5C;
    font-size: 12px;
    line-height: 16px;
}

.copilot_userStruggleHistory__zv6TW .copilot_datePivot__q3s0I {
    margin-bottom: 20px;
}

.copilot_userStruggleHistory__zv6TW .copilot_playlistLinks__jlIsB {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    overflow-y: auto;
    padding-bottom: 32px;
}

.copilot_userStruggleHistory__zv6TW .copilot_errorState__GrhW3,
.copilot_userStruggleHistory__zv6TW .copilot_noInsights__bEnOr {
    position: unset;
    padding: 0;
    width: 100%;
    margin: auto;
    text-align: center;
}

.copilot_userStruggleHistory__zv6TW .copilot_noInsights__bEnOr h3 {
    font-weight: 600;
    font-size: 20px;
    line-height: 27px;
    margin-top: 16px;
}

.copilot_userStruggleHistory__zv6TW .copilot_noInsights__bEnOr p,
.copilot_userStruggleHistory__zv6TW .copilot_noInsights__bEnOr h3 {
    color: #323130;
}

.copilot_userStruggleHistory__zv6TW .copilot_customDateView__W9jkj {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: calc(100% - 45px);
}

@media only screen and (max-width: 768px) {
    .copilot_playlistLink__S93gB.copilot_historyPage__9ZwYB {
        width: 250px;
        height: 195px;
        flex-direction: column;
        justify-content: center;
    }
}
.dashboard_page__7tcGV {
    min-height: 100%;
    background: #EFF6FC;
}

.dashboard_headerContent__ZUR1V {
    margin-left: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.dashboard_headerContent__ZUR1V.dashboard_headerContentCompare__1HDnk {
    margin-left: 0;
}

.dashboard_dashboard__g2wyt {
    display: grid;
    overflow: auto;
}

.dashboard_appDashboard__JXjep {
    overflow-y: hidden;
}

.dashboard_dashboard__g2wyt .ms-TooltipHost {
    display: flex;
    align-items: center;
    width: fit-content;
}

.dashboard_dashboardContent__DHAgW {
    overflow-y: auto;
    cursor: default;
    z-index: 0;
    margin: 0 auto;
    width: 100%;
    align-items: center;
}

.dashboard_dashboardContent__DHAgW.dashboard_mobile__O46kV {
    overflow-x: hidden;
}

.dashboard_dashboardContent__DHAgW.dashboard_mobile__O46kV button#dashboard_FiltersButton {
    width: 54px;
    min-width: 54px;
    padding: 12px;
}

.dashboard_tabContentHeaderTwoRow__Jj3oF {
    display: flex;
    flex-wrap: wrap;
}

.dashboard_noDataBanner__SEJEb {
    margin-top: 10px;
}

.dashboard_dashboardContent__DHAgW .tabContentHeader {
    position: sticky;
    top: 0px;
    background: #EFF6FC;
    z-index: 100;
    width: 100%;
}

.dashboard_dashboardContent__DHAgW .tabContentHeader.compare{
    flex-direction: column;
}

.dashboard_dashboardContent__DHAgW .tabContentHeaderActions{
    display: flex;
    margin-left: auto;
    align-items: center;
}

.dashboard_mobile__O46kV .filtersContent {
    overflow: auto;
    scrollbar-width: none;
}

.dashboard_mobile__O46kV .scrollingBadges :first-child {
    margin-left: 0;
}

.dashboard_mobile__O46kV .filtersContent::-webkit-scrollbar {
    display: none;
}

.dashboard_mobile__O46kV .filterBadgeNavWrapper {
    overflow: unset;
}

.dashboard_borders__a-1sx {
    border-radius: 0 8px 8px 0;
}

.dashboard_chat__WybCJ {
    height: calc(100vh - 84px);
    min-width: 360px;
    margin: 12px 0;
    order: 2;
}

.dashboard_loud__ynA6u {
    font-weight: 600;
    font-size: 28px;
    line-height: 36px;
}

.dashboard_label__6chaC {
    font-size: 12px;
    line-height: 16px;
}

.dashboard_title__Tsvr2 {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

.dashboard_subtitle__HFgws {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
}

.dashboard_italicSubtitle__c4hmJ {
    font-style: italic;
}

.dashboard_section__XR7-X {
    border: 1px solid #EAEAFF;
    border-radius: 8px;
}

.dashboard_sectionHeader__Ae6qL {
    font-size: 12px;
    line-height: 20px;
    color: #020057;
    padding: 10px 16px;
    background-color: #EAEAFF;
}

.dashboard_section__XR7-X .dashboard_sectionContent__Kmu7w {
    padding: 8px 16px;
}

.dashboard_tileGrid__ZW95E {
    margin: 30px 0;
    width: -moz-fit-content;
    width: fit-content;
    display: grid;
    grid-template-columns: 443px 443px 443px;
    grid-auto-rows: 516px;
    gap: 24px;
    position: relative;
}

.dashboard_tile__rZ5Js {
    position: relative;
}

.dashboard_mobile__O46kV .dashboard_tile__rZ5Js {
    height: 516px;
}

.dashboard_mobile__O46kV .dashboard_tile__rZ5Js.dashboard_largeTile__bJvtt {
    height: 618px;
}

.dashboard_gridRowWrapper__JMp4x {
    display: contents;
}

.dashboard_tileActions__D8HIH,
.dashboard_downloadContainer__8VRsU {
    position: absolute;
    top: 0;
    right: 16px;
    z-index: 4;
    margin-top: 9px;
}

.dashboard_dashboardContent__DHAgW:not(.dashboard_small__vXi2u) .dashboard_tile__rZ5Js.dashboard_trends__r00ft .dashboard_tileActions__D8HIH {
    right: calc(50% + 28px);
}

.dashboard_editCardActionsContainer__wzGzT {
    left: 0;
    top: -3px;
    margin-left: 8px;
    display: none;
}

.dashboard_tile__rZ5Js:hover .dashboard_editCardActionsContainer__wzGzT {
    display: block;
}

@media screen and (-ms-high-contrast: active), (forced-colors: active) {
    .dashboard_tileContent__XVR0e {
        border: 1px solid highlight;
    }

    .dashboard_tileTitle__FY6Zu {
        box-sizing: content-box;
        border: 1px solid highlight;
    }
}

.dashboard_downloadContainer__8VRsU button {
    background: none;
}

.tabContentHeader .dashboard_downloadContainer__8VRsU button:hover {
    background-color: white;
}

.dashboard_downloadContainer__8VRsU.dashboard_wholePage__Kqukd {
    margin-top: 0;
    top: unset;
}

.dashboard_headerContent__ZUR1V .dashboard_downloadContainer__8VRsU {
    position: relative;
}

.dashboard_filtersHeaderWrapper__qrDwI {
    display: flex;
    overflow: hidden;
}

.dashboard_chatButtonIcon__r\+DAt svg {
    height: 28px;
    width: fit-content;
}

.dashboard_chatButtonIcon__r\+DAt:hover {
    cursor: pointer;
}

.dashboard_multiTabTile__8jWXp .dashboard_tileActions__D8HIH,
.dashboard_multiTabTile__8jWXp .dashboard_downloadContainer__8VRsU {
    margin-top: 40px;
    padding-top: 8px;
    background-color: #FFF;
}

.dashboard_downloadContainer__8VRsU button {
    min-width: 24px;
    width: 24px;
    height: 24px;
    border: 0;
    padding-bottom: 6px;
}

.dashboard_downloadContainer__8VRsU svg {
    width: 17px;
}

.dashboard_infoBanner__RFyf6 {
    min-height: 111px;
    width: -moz-fit-content;
    width: fit-content;
    display: grid;
    grid-template-columns: 280px 280px 280px 280px; /* please change mobile as well if this changes */
    grid-template-rows: max-content;
    column-gap: 26px;
    position: relative;
    color: #020057;
}

.dashboard_animationInfoBanner__XhJBG {
    grid-template-columns: repeat(4, 326px);
}

.dashboard_mobile__O46kV.dashboard_infoBanner__RFyf6 {
    grid-template-columns: 280px 280px 280px;
}

.dashboard_mobile__O46kV.dashboard_animationInfoBanner__XhJBG {
    grid-template-columns: repeat(3, 326px);
}

.dashboard_infoBanner__RFyf6>* {
    display: flex;
    flex-direction: column;
}

.dashboard_infoBanner__RFyf6 .ms-TooltipHost {
    padding: 8px 0 4px;
    height: 28px;
}

.dashboard_infoTile__qLmvt {
    background: white;
    padding: 6px 24px 12px;
    border: 1px solid #EAEAFF;
    border-radius: 8px;
    height: 100%;
    position: relative;
}

.dashboard_infoTitle__J0mxB {
}

.dashboard_infoTileInfo__vHdsu {
    color: #020057;
    margin-bottom: 4px;
    height: 32px;
}

.dashboard_infoTileSubtitle__gv1es {
    color: #020057;
}

.dashboard_trees__tEfUp {
    position: absolute;
    left: -89px;
    bottom: -11px;
}

.dashboard_pot__gZ3dU {
    position: absolute;
    left: -89px;
    bottom: -3px;
}

.dashboard_fox__mtR09,
.dashboard_subFox__L0Aiq {
    position: absolute;
    right: -76px;
    bottom: -12px;
}

.dashboard_tabs__21j6s {
    display: flex;
    flex-direction: row;
    position: absolute;
    width: 100%;
    overflow-x: hidden;
}

.dashboard_dashboardContent__DHAgW:not(.dashboard_small__vXi2u) .dashboard_tile__rZ5Js.dashboard_trends__r00ft .dashboard_tabs__21j6s {
    width: 50%;
}

.dashboard_tileTitle__FY6Zu {
    background: white;
    padding: 10px 16px;
    font-size: 14px;
    line-height: 20px;
    box-shadow: 0px 4.8px 14.4px rgba(131, 126, 255, 0.3);
    border-radius: 8px 8px 0 0;
    position: relative;
    width: 100%;
    height: 41px;
}

.dashboard_tileContentBottomCurve__TzLsm::after,
.dashboard_tileTab__lw7o1::after {
    content: "";
    width: 100%;
    height: 10px;
    background: white;
    display: block;
    position: absolute;
    z-index: 3;
    left: 0;
    top: -10px;
}

.dashboard_tileTab__lw7o1 {
    width: -moz-fit-content;
    width: fit-content;
    display: inline-block;
    border-radius: 8px;
    margin-right: 4px;
    cursor: pointer;
    white-space: nowrap;
}

.dashboard_tileTabOverflow__TcwAh {
    display: block;
}

.dashboard_tileTab__lw7o1::after {
    top: unset;
}

.dashboard_tileTabInactive__PDw\+t {
    font-weight: 400;
    z-index: 0;
    box-shadow: 0px 0.6px 1.8px rgba(131, 126, 255, 0.1), 0px 3.2px 7.2px rgba(131, 126, 255, 0.12);
}

.dashboard_scrollingTileContent__lB4Rv {
    overflow-y: auto;
    overflow-x: hidden;
}

.dashboard_tileContent__XVR0e {
    background: white;
    box-shadow: 0px 4.8px 14.4px rgba(131, 126, 255, 0.3);
    border-radius: 0 8px 8px 8px;
    z-index: 2;
    height: calc(100% - 40px);
    width: 100%;
    position: absolute;
    top: 40px;
}

.dashboard_tileContentBottomCurve__TzLsm {
    border-radius: 0 0 8px 8px;
}

.dashboard_infoIcon__taG4x {
    height: 20px;
    margin-left: 4px;
}

.dashboard_sessionsWarningIcon__\+S0h\+ {
    margin-right: 4px;
    color: red;
}

.dashboard_pinIcon__EbN3E {
    height: 20px;
    width: 20px;
    margin-right: 4px;
}

.dashboard_highlightedInfoNoHover__9qhZj {
    display: flex;
    align-items: center;
    padding: 8px 22px;
    border: 1px solid #EFF6FC;
    border-radius: 8px;
}

.dashboard_highlightedInfo__mrM9t {
    cursor: pointer;
}

.dashboard_tile__rZ5Js .dashboard_sortButton__xxfh9 {
    border: none;
    text-align: left;
    width: -moz-fit-content;
    width: fit-content;
    padding: 0 8px;
    margin-left: 24px;
}

.dashboard_sortButton__xxfh9 span i {
    color: #0078D4;
}

.dashboard_sortButton__xxfh9.dashboard_sortFlip__bBtf4 span i {
    transform: rotate(180deg);
}

.dashboard_sortButton__xxfh9 span {
    color: #323130;
    font-weight: normal;
    font-size: 12px;
}

.dashboard_usersData__K8-tI {
    display: grid;
    grid-template-columns: 75px max-content auto 56px;
    grid-template-rows: 57px 57px;
    row-gap: 12px;
    align-items: center;
    margin-top: 38px;
    margin: 38px 32px 12px;
}

.dashboard_usersData__K8-tI>* {
    border: 0 solid #EFF6FC;
    border-top-width: 1px;
    border-bottom-width: 1px;
    padding: 8px 12px 8px 0;
    height: 100%;
}

.dashboard_mobile__O46kV .dashboard_usersData__K8-tI {
    grid-template-columns: 75px auto auto;
}

.dashboard_usersData__K8-tI .dashboard_trendsSelectorContainer__TCjLC,
.dashboard_usersIcon__ivfmJ {
    border-left-width: 1px;
    padding-left: 24px;
    border-radius: 8px; 
}

.dashboard_usersData__K8-tI .dashboard_trendsSelectorContainer__TCjLC {
    padding-left: 21px;
}

.dashboard_usersIcon__ivfmJ .dashboard_pulsate__V-dbQ path {
    animation: 1.6s ease-in-out 800ms 4 alternate dashboard_pulsate__V-dbQ;
}

@keyframes dashboard_pulsate__V-dbQ {
    from {
        transform: scale(1) translate(0,0);
    }
    to {
        transform: scale(1.3) translate(-5px, -5px);
    }
}

.dashboard_usersNumber__0oR2P {
}

.dashboard_usersInfoLabel__1fFNK {
    justify-content: center;
}

.dashboard_mobile__O46kV .dashboard_usersInfoLabel__1fFNK {
    border-right-width: 1px;
    padding-left: 24px;
    border-radius: 0 8px 8px 0;
}

.dashboard_usersInfoSubtitle__DiYOz {
    font-size: 10px;
    margin-top: 4px;
}

.dashboard_usersData__K8-tI .dashboard_usersRecording__uUJ\+x {
    border-right-width: 1px;
    padding-right: 24px;
    border-radius: 8px; 
    display: flex;
    align-items: center;
}

.dashboard_newReturning__4Nt6T {
    margin: 24px 32px;
}

.dashboard_barChart__TfVt9 {
    display: grid;
    height: 20px;
    gap: 2px;
    border-radius: 4px;
    overflow: hidden;
}

.dashboard_barChart__TfVt9:hover {
    cursor: pointer;
}

.dashboard_newReturning__4Nt6T .dashboard_legend__Z6dO5 {
    padding: 0;
}

.dashboard_newReturning__4Nt6T .dashboard_trendsSelectorContainer__TCjLC {
    margin-left: 8px;
}

.dashboard_tile__rZ5Js.dashboard_trends__r00ft .dashboard_newReturning__4Nt6T .dashboard_legend__Z6dO5 {
    grid-template-columns: 60px auto max-content max-content 40px 40px;
}

.dashboard_topUser__Z-Kwv {
    position: absolute;
    width: calc(100% - 64px);
    margin: 0 32px 32px 32px;
    bottom: 0;
}

.dashboard_sparkle__-v4Dj:first-child {
    position: absolute;
    top: -10px;
    left: -6px;
}

.dashboard_sparkle__-v4Dj:last-child {
    position: absolute;
    width: 20px;
    height: 20px;
    bottom: -7px;
    right: -7px;
}

.dashboard_topUserTitle__gVQ96 {
    display: flex;
    padding: 8px 16px;
}

.dashboard_topUserTitle__gVQ96>*:first-child {
    flex: 1;
}

.dashboard_overflowAuto__eK1mQ {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}

.dashboard_scrollingUsers__HYxT\+ {
}

.dashboard_userListSort__fJLG\+ {
    margin-top: 36px;
    margin-bottom: 8px;
}

.dashboard_campaignsGrid__LRuhk,
.dashboard_userList__gjbC1 {
    display: grid;
    padding: 0 30px 30px;
    grid-template-columns: max-content auto min-content min-content;
    align-items: center;
    color: #020057;
}

.dashboard_userList__gjbC1>*:nth-child(5n+1) {
    padding-left: 8px;
}

.dashboard_userList__gjbC1>*:nth-child(5n+4) {
    padding-right: 8px;
}

/* since userList is a grid, there is no row element.
this means that cursor needs to be set for each element individually
except for the separating border */
.dashboard_campaignsGrid__LRuhk>*:not(.dashboard_campaignsListBorder__9U19u),
.dashboard_userList__gjbC1>*:not(.dashboard_userListBorder__Z39ia) {
    cursor: pointer;
    height: 40px;
    line-height: 40px;
}

/* since userList is a grid, there is no row element.
which means clickEvent needs to be set for each element individually
this is why we can't use gap to separate the columns,
because margins will cause a gap in clickable area
5n+4 = last element in each "row" because there are 4 elements in each row and one border */
.dashboard_userList__gjbC1>*:not(:nth-child(5n+4)):not(:nth-child(5n)):not(.dashboard_loading__0h83T) {
    padding-right: 35px;
}

.dashboard_mobile__O46kV .dashboard_userList__gjbC1>*:not(:nth-child(5n+4)):not(:nth-child(5n)):not(.dashboard_loading__0h83T) {
    padding-right: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard_campaignsGrid__LRuhk .dashboard_hover__oeta9,
.dashboard_userList__gjbC1 .dashboard_hover__oeta9,
.dashboard_topUserRow__rJbzl:hover,
.dashboard_smartEventsTile__LEOgD .dashboard_hover__oeta9 {
    background-color: #EDEBE9;
}

.dashboard_userList__gjbC1 .dashboard_device__0eNh3 {
    text-align: center;
}

.dashboard_userList__gjbC1 .dashboard_mobile__O46kV i {
    padding-right: 1px;
}

.dashboard_topUserRow__rJbzl {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    height: 40px;
}

.dashboard_topUserRow__rJbzl div {
    padding: 0px !important;
}

.dashboard_userList__gjbC1 .dashboard_loading__0h83T {
    padding-top: 10px;
    grid-column: 1/5;
}

.dashboard_campaignsListBorder__9U19u,
.dashboard_userListBorder__Z39ia {
    grid-column: 1/5;
    height: 1px;
    background-color: #EDEBE9;
    padding-right: 0;
}

.dashboard_adsNoData__1E6Mv {
    grid-column: 1/5;
}

.dashboard_topUserRow__rJbzl .dashboard_userListBorder__Z39ia {
    display: none;
}

.dashboard_insightsRow__u2Mbb {
    padding: 0 32px;
    margin-bottom: 24px;
}

.dashboard_insightsRow__u2Mbb:first-child {
    margin-top: 4px;
}

.dashboard_insightsHighlightNoHover__xRffc {
    justify-content: center;
    height: 70px;
}

.dashboard_insightsHighlight__IWXOW {
    cursor:pointer;
}

.dashboard_insightsHighlight__IWXOW:hover,
.dashboard_halfPieEntry__WVGGv:hover,
.dashboard_topListGrid__5KNBp:hover {
    box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
    background: #FAF9F8;
    border-radius: 8px;
}

.dashboard_insightsRow__u2Mbb .ms-TooltipHost {
    margin-bottom: 8px;
    height: 16px;
}

.dashboard_insightsTitle__ocRI3 {
}

.dashboard_botTypesTitle__maMQ2 {
    padding-left: 8px;
}

.dashboard_insightsNumbers__jIfrB {
    margin: 0 16px;
    width: 100px;
    flex: 1;
}

.dashboard_insightsPercentage__eoWhZ {
    margin-left: 16px;
    width: 95px;
}

.dashboard_watchlistTile__7eAof {
    height: 100%;
}

.dashboard_watchlistTitleButton__0zXL9 {
    position: absolute;
    top: -34px;
    right: 40px;
    z-index: 14;
    height: 28px;
}

.dashboard_editableDashboard__vb08O .dashboard_watchlistTitleButton__0zXL9 {
    right: 52px;
}

.dashboard_listOfHighlights__Q6NTC {
    flex: 1;
    display: grid;
    align-items: center;
    cursor: pointer;
    row-gap: 12px;
    grid-template-columns: max-content auto max-content;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 0;
    align-content: flex-start;
    padding-bottom: 16px;
}

.dashboard_watchlistTile__7eAof .dashboard_listOfHighlights__Q6NTC {
    padding: 8px 16px 16px;
}

.dashboard_watchlistTile__7eAof .dashboard_zeroStateCard__H5p2K {
    margin: 8px 16px 0;
}

.dashboard_listOfHighlights__Q6NTC .dashboard_gridRowWrapper__JMp4x > * {
    padding: 12px 12px 16px 0;
    border: solid #EFF6FC;
    border-width: 1px 0 1px;
    height: 60px;
    overflow: hidden;
    position: relative;
}

.dashboard_listOfHighlights__Q6NTC .dashboard_loading__0h83T {
    grid-column: 1/4;
    border: 0;
}

.dashboard_listOfHighlights__Q6NTC .dashboard_hover__oeta9 {
    box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
    background: #FAF9F8;
}

/* beginning of row element */
.dashboard_listOfHighlights__Q6NTC .dashboard_gridRowWrapper__JMp4x > *:nth-child(3n+1) {
    border-width: 1px 0 1px 1px;
    padding-left: 16px;
    border-radius: 8px 0 0 8px;
}

/* end of row element */
.dashboard_listOfHighlights__Q6NTC .dashboard_gridRowWrapper__JMp4x > *:nth-child(3n) {
    border-width: 1px 1px 1px 0;
    padding-right: 16px;
    display: flex;
    border-radius: 0 8px 8px 0;
    justify-content: flex-end;
}

.dashboard_listOfHighlights__Q6NTC .dashboard_gridRowWrapper__JMp4x > .dashboard_hover__oeta9:nth-child(3n+1)::after,
.dashboard_listOfHighlights__Q6NTC .dashboard_gridRowWrapper__JMp4x > .dashboard_hover__oeta9:nth-child(3n+2)::after {
    content: "";
    height: 100%;
    width: 11px;
    background: #FAF9F8;
    display: block;
    position: absolute;
    z-index: 4;
    right: -3px;
    top: 0;
}

.dashboard_highlightRowLabel__kLCPq {
}

.dashboard_watchlist__-rK22 .dashboard_loading__0h83T {
    border: 0;
    grid-column: 1/4;
    padding: 0;
    display: block;
    border-radius: 8px;
}

.dashboard_watchlistZeroState__PbJmQ {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.dashboard_watchlistZeroState__PbJmQ>span {
    position: relative;
    top: -40px;
    font-weight: 600;
    font-size: 14px;
    line-height: 19px;
}

.dashboard_watchlistZeroState__PbJmQ>button {
    position: relative;
    top: -20px;
}

.dashboard_watchlistDropdowns__Ytagk {
    padding: 12px 16px 32px;
    background-color: white;
    width: 100%;
    margin: 0;
    position: absolute;
    bottom: 0;
    box-shadow: 0px -0.6px 1.8px rgba(0, 0, 0, 0.1), 0px -3.2px 7.2px rgba(0, 0, 0, 0.13);
    border-radius: 8px;
}

.dashboard_watchlistDropdownHeader__rJ\+lt {
}

.dashboard_watchlistDropdownHeader__rJ\+lt>span {
    flex: 1;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
}

.dashboard_watchlistDropdownHeader__rJ\+lt>button,
.dashboard_watchlistDropdownHeader__rJ\+lt>button:hover {
    margin: -6px;
    color: #605E5C;
}

.dashboard_watchlistDropdownHeader__rJ\+lt>button i {
    font-size: 12px;
}

.dashboard_watchlistDropdowns__Ytagk>*:not(:last-child) {
    margin-bottom: 12px;
}

.dashboard_watchlistCandidate__sEDoE {
    padding-bottom: 0;
}

.dashboard_watchlistRowLabel__CwAE6 {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.dashboard_topChartTile__IX0dZ {
    height: 100%;
}

.dashboard_topChart__INZ5\+ {
    padding: 40px 24px 0px 24px;
}

.dashboard_topChart__INZ5\+ .dashboard_loading__0h83T {
    margin-bottom: 20px;
}

.dashboard_topChartContainer__rSe\+8 {
    overflow: hidden;
}

.dashboard_topChartContainer__rSe\+8 .dashboard_topChart__INZ5\+ {
    padding-top: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.dashboard_topChart__INZ5\+:not(:first-child) {
    padding-top: 8px;
}

.dashboard_topListGrid__5KNBp {
    display: grid;
    align-items: center;
    grid-template-columns: auto 32px 32px;
    padding: 2px 8px 8px;
    margin-bottom: 2px;
}

.dashboard_topListGridChild__0LldY {
    grid-template-columns: auto min-content 32px 32px;
    padding-left: 16px;
    padding-bottom: 2px;
    align-items: center;
}

.dashboard_topListGridChild__0LldY .dashboard_topListItemLabel__4Q70Q {
    grid-column: unset;
}

.dashboard_topListItemLabel__4Q70Q.dashboard_botTypeLabel__-11h- {
    margin-bottom: 6px;
}

.dashboard_campaignsGrid__LRuhk {
    grid-template-columns: auto max-content max-content 56px;
}

.dashboard_campaignsGrid__LRuhk.dashboard_withInsights__nDkaF {
    grid-template-columns: auto max-content max-content 80px;
}

.dashboard_campaignsGrid__LRuhk > div {
    padding-right: 20px;
    color: #605E5C;
}

.dashboard_campaignsGrid__LRuhk .dashboard_campaignRowActions__0lrb7 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 0;
}

.dashboard_campaignsGrid__LRuhk .dashboard_campaignRowActions__0lrb7.dashboard_withInsights__nDkaF {
    gap: 4px;
}

.dashboard_campaignsGrid__LRuhk .dashboard_campaignRowActions__0lrb7.dashboard_withInsights__nDkaF button svg {
    width: 15px;
    height: 14px;
}

.dashboard_campaignRowActions__0lrb7 > button {
    width: 24px;
    height: 24px;
    padding: 2px;
}

.dashboard_campaignsGrid__LRuhk .dashboard_sessionCountColumn__OyOMm {
    text-align: right;
}

.dashboard_campaignsGrid__LRuhk .dashboard_campaignNameColumn__bBLg5 {
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
    color: #020057;
}

.dashboard_campaignsGrid__LRuhk > div:nth-child(3),
.dashboard_campaignsGrid__LRuhk > div:nth-child(2),
.dashboard_campaignsGrid__LRuhk > div:nth-child(1) {
    color: #252423;
}

.dashboard_campaignsListActions__11sKd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 12px 30px;
    gap: 4px;
}

.dashboard_multiTabTile__8jWXp .dashboard_campaignsListActions__11sKd.dashboard_multiTabCampaignActions__B5ckq {
    margin-top: 32px;
}

.dashboard_campaignsListActions__11sKd .dashboard_sortButton__xxfh9 {
    padding: 0;
    margin: 0;
}

.dashboard_campaignsGrid__LRuhk .dashboard_statusIcon__Yd-Pj {
    padding: 0 8px 0 4px;
}

.dashboard_campaignsGridNameHeader__fQc4n {
    padding-left: 14px;
}

.dashboard_campaignsGrid__LRuhk .dashboard_campaignListHeader__XtgqY {
    cursor: default;
}

.dashboard_adCampaignsZeroState__Trptg .dashboard_zeroStateCard__H5p2K{
    padding-top: 0;
}

.dashboard_campaignsGrid__LRuhk .dashboard_infoIcon__taG4x {
    height: 26px;
    margin-left: 0;
}

.dashboard_intentTooltipContent__eCxuD {
    padding: 5px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dashboard_intentTooltipContent__eCxuD strong {
    padding-right: 4px;
}

.dashboard_mobile__O46kV .dashboard_topListGrid__5KNBp,
.dashboard_topListGrid__5KNBp.dashboard_hideHeatmapButton__iyK7A {
    grid-template-columns: auto 0 32px;
}

.dashboard_hideHeatmapButton__iyK7A.dashboard_disableFilter__GZYQw {
    display: grid;
    align-items: center;
    grid-template-columns: auto 0 0;
    padding: 2px 8px 8px;
    margin-bottom: 2px;
}

.dashboard_disableFilter__GZYQw{
}

.dashboard_topListItemLabel__4Q70Q {
    grid-column: span 3;
}

.dashboard_topListItem__MZ7F5 {
    display: flex;
    align-items: center;
}

.dashboard_topListBarArea__gKJXq {
    flex: 1;
}

.dashboard_topListBar__xbUna {
    height: 16px;
    border-radius: 4px;
}

.dashboard_topListCount__RnjNs {
    margin: 0 16px 0 12px;
}

.dashboard_topChartTile__IX0dZ .dashboard_toggle__l9ONo,
.dashboard_topChartContainer__rSe\+8 .dashboard_toggle__l9ONo {
    margin-top: 14px;
    margin-bottom: 16px;
}

.dashboard_distributionTile__Harbr {
    height: 100%;
}

.dashboard_pieChart__6KQXc {
    width: 200px;
    height: 200px;
    margin: 18px auto -30px;
    position: relative;
}

.dashboard_pieChart__6KQXc path {
    cursor: pointer;
}

.dashboard_legend__Z6dO5 {
    display: grid;
    grid-template-columns: 28px auto max-content max-content 40px 40px;
    align-items: center;
    font-size: 12px;
    line-height: 40px;
    cursor: pointer;
    margin: 24px;
    width: calc(100% - 48px);
}

.dashboard_mobile__O46kV .dashboard_legend__Z6dO5 {
    grid-template-columns: 28px auto max-content max-content 40px;
}

.dashboard_newReturning__4Nt6T .dashboard_legend__Z6dO5 {
    margin: 10px -6px;
    width: calc(100% + 12px);
}

.dashboard_legend__Z6dO5 > * {
    padding-right: 8px;
    white-space: nowrap;
    height: 40px;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard_legend__Z6dO5 .dashboard_hover__oeta9 {
    box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
    background: #FAF9F8;
}

.dashboard_legend__Z6dO5:not(.dashboard_mobileLegend__roAjJ) > *:nth-child(6n+1),
.dashboard_legend__Z6dO5.dashboard_mobileLegend__roAjJ > *:nth-child(5n+1)  {
    border-radius: 8px 0 0 8px;
}

.dashboard_legend__Z6dO5:not(.dashboard_mobileLegend__roAjJ) > *:nth-child(6n),
.dashboard_legend__Z6dO5.dashboard_mobileLegend__roAjJ > *:nth-child(5n) {
    border-radius: 0 8px 8px 0;
}

.dashboard_legend__Z6dO5:not(.dashboard_mobileLegend__roAjJ) .dashboard_hover__oeta9:not(:nth-child(6n))::after,
.dashboard_legend__Z6dO5.dashboard_mobileLegend__roAjJ .dashboard_hover__oeta9:not(:nth-child(5n))::after {
    content: "";
    height: 100%;
    width: 6px;
    background: #FAF9F8;
    display: block;
    position: absolute;
    z-index: 4;
    right: 0px;
    top: 0;
}

.dashboard_legendColor__L\+rL3 {
    height: 12px;
    width: 12px;
    border-radius: 12px;
    display: block;
    margin: 14px 8px;
}

.dashboard_legendLabel__C-C9u button {
    height: 20px;
    width: 20px;
    transition: transform 0.2ms ease-in;
}

.dashboard_legendLabel__C-C9u i {
    font-size: 10px;
}

.dashboard_legend__Z6dO5 > .ms-Checkbox {
    height: 26px;
}

.dashboard_tile__rZ5Js.dashboard_trends__r00ft .dashboard_legend__Z6dO5 {
    grid-template-columns: 52px auto max-content max-content 40px 40px;
}

.dashboard_smartEventsTile__LEOgD {
    height: 100%;
}

.dashboard_toggle__l9ONo {
    align-items: center;
    padding: 0 32px;
    margin-top: 4px;
    margin-bottom: 20px;
    gap: 12px;
}

.dashboard_toggle__l9ONo label {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
}

.dashboard_smartEventRows__s1Kyh {
    display: grid;
    grid-template-columns: 36px auto max-content min-content min-content;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    align-items: center;
    padding: 0 24px 28px;
    font-size: 12px;
    line-height: 16px;
    grid-auto-rows: min-content;
}

/* since smartEventRows is a grid, there is no row element.
6n+1 = first element of each "row" since there are 5 elements and 1 border */
.dashboard_smartEventRows__s1Kyh:not(.dashboard_smartEventMobileRow__P\+-mb)>*:nth-child(6n + 1),
.dashboard_mobile__O46kV .dashboard_smartEventMobileRow__P\+-mb>*:nth-child(5n + 1) {
    padding: 16px 0 16px 8px;
    cursor: pointer;
}

.dashboard_smartEventIcon__ABmmP {
    background-color: #EAEAFF;
    color: #9692FF;
    border-radius: 28px;
    height: 28px;
    width: 28px;
}

.dashboard_smartEventRows__s1Kyh>*:nth-child(6n + 1) svg,
.dashboard_mobile__O46kV .dashboard_smartEventRows__s1Kyh>*:nth-child(5n + 1) svg {
    width: 14px;
}

.dashboard_smartEventRows__s1Kyh>*:nth-child(6n + 5) {
    padding-right: 8px;
}

/* since smartEventRows is a grid, there is no row element.
this means that cursor needs to be set for each element individually
except for the separating border */
.dashboard_smartEventRows__s1Kyh>*:not(:nth-child(6n+1)):not(.dashboard_smartEventRowSeperator__Vlv\+6) {
    cursor: pointer;
    height: 60px;
    line-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* since smartEventRows is a grid, there is no row element.
which means clickEvent needs to be set for each element individually
this is why we can't use gap to separate the columns,
because margins will cause a gap in clickable area */
.dashboard_smartEventRows__s1Kyh>*:not(.dashboard_smartEventRowSeperator__Vlv\+6) {
    padding-left: 8px;
}

.dashboard_smartEventRowSeperator__Vlv\+6 {
    grid-column: 1/6;
}

.dashboard_errorStateCard__ue6PP {
    position: absolute;
    top: 5%;
    padding: 0 32px;
    width: 100%;
}

.dashboard_errorStateCardTitle__heL0L {
    margin-bottom: 12px;
}

.dashboard_errorStateCardMessage__aS8C3 {
    margin-bottom: 24px;
}

.dashboard_errorStateCard__ue6PP button {
    color: #242424;
    border: 1px solid #D1D1D1;
    margin-bottom: 24px;
}

.dashboard_halfPieTile__Ysx\+W {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.dashboard_ecommerceTile__AFVmA {
    margin-top: 50px;
}

.dashboard_zeroStateCard__H5p2K {
    padding: 32px;
}

.dashboard_zeroStateCard__H5p2K > *:not(:last-child) {
    margin-bottom: 24px;
}

.dashboard_halfPie__I51pG {
    width: 200px;
    height: 200px;
    margin: -4px auto -84px;
    position: relative;
}

.dashboard_halfPieLabel__9FAFp {
    position: absolute;
    bottom: 87px;
    left: 50%;
    transform: translate(-50%, -90%);
    top: 100px;
    height: 36px;
}

.dashboard_halfPie__I51pG .ms-Checkbox {
    position: absolute;
    left: -12px;
    top: 77px;
}

.dashboard_halfPie__I51pG .dashboard_trendsShape__7CcSu {
    display: none;
}

.dashboard_halfPieRecordingButton__M3jIM {
    flex: 0 0 auto;
    align-self: center;
    margin-bottom: 24px;
}

.dashboard_halfPieBreakdown__sg1Ow {
    height: 100%;
    padding: 0 24px 28px;
}

.dashboard_errorBreakdown__3qsVx {
    overflow-y: auto;
    overflow-x: hidden;
}

.dashboard_totalErrorsContainer__rAgzt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 8px 8px;
}

.dashboard_totalErrorsLabel__\+q-\+c {
}

.dashboard_appsErrorInsightsDropdown__N68wn .ms-Dropdown-title {
    border: unset;
    border-bottom: 1px solid;
    border-radius: 0;
    width: 142px;
    border-color: #8A8886;
}

.dashboard_appsErrorInsightsDropdown__N68wn .ms-Dropdown:focus::after {
    border: unset;
}

.dashboard_halfPieEntry__WVGGv {
    padding: 2px 8px 8px;
    margin-bottom: 6px;
}

.dashboard_halfPieEntry__WVGGv .dashboard_trendsShape__7CcSu {
    margin-right: 8px;
}

.dashboard_halfPieRowLabel__Trwzw {
    margin-bottom: 4px;
}

.dashboard_halfPieBarRow__p3m83 {
}

.dashboard_halfPieBarRow__p3m83 .dashboard_barChart__TfVt9 {
    flex: 1;
    margin-right: 16px;
}

.dashboard_halfPieBold__d4\+rT {
    margin-right: 4px;
}

.dashboard_halfPieBreakdown__sg1Ow button {
    height: 24px;
    width: 24px;
}

.dashboard_pieLabel__gp-DC {
    position: absolute;
    background: linear-gradient(0deg, rgba(240, 84, 255, 0.1), rgba(240, 84, 255, 0.1)), rgba(255, 255, 255, 0.9);
    padding: 16px;
    border-radius: 8px;
    gap: 8px;
    width: max-content;
    z-index: 3;
}

.dashboard_pieLabelNumber__ML9QI {
    margin-top: 8px;
}

.dashboard_distributionTileShimmerContainer__PWOVU,
.dashboard_halfPieShimmerContainer__qKyC8,
.dashboard_userCardShimmerContainer__GHdUi,
.dashboard_smartEventsShimmerContainer__THDOa,
.dashboard_topChartTileShimmer__VykkM {
    height: 100%;
}

.dashboard_distributionTileShimmerContainer__PWOVU>div,
.dashboard_halfPieShimmerContainer__qKyC8>div,
.dashboard_userCardShimmerContainer__GHdUi>div,
.dashboard_smartEventsShimmerContainer__THDOa>div,
.dashboard_topChartTileShimmer__VykkM>div,
.dashboard_topChartContainer__rSe\+8 {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.dashboard_userCardShimmerWrapper__3Kz9w {
    background: white;
    height: 100%;
    padding: 32px;
}

.dashboard_shimmerWrapper__zJG\+i {
    height: 100%;
    background: white;
}

.dashboard_topChartTileShimmerWrapper__M48iJ {
    padding: 24px;
}

.dashboard_insightsShimmerContainer__laGZb,
.dashboard_distributionTileShimmerContainer__PWOVU {
    width: 100%;
}

.dashboard_pieShimmerWrapper__zK7YR {
    width: 100%;
    position: relative;
    height: 168px;
    padding-bottom: 28px;
    background: white;
    margin-top: 18px;
}

.dashboard_pieShimmerOverlay__1qoim {
    width: 95px;
    height: 95px;
    background: white;
    border-radius: 60px;
    position: absolute;
}

.dashboard_jsErrorPieShimmerOverlay__Vo6td {
    width: 112px;
    height: 112px;
    bottom: 0;
}

.dashboard_insightsShimmerContainer__laGZb>div {
    display: flex;
    align-items: center;
    width: 100%;
    height: 54px;
    border-radius: 8px;
}

.dashboard_smartEventsShimmerWrapper__APIXa {
    padding: 8px 32px;
}

.dashboard_watchlistTileShimmer__ene\+e {
    padding: 16px;
}

.dashboard_jsTileShimmerWrapper__2t2g5 {
    height: 100%;
    background: white;
    padding: 42px 24px 24px;
}

.dashboard_newEventGroupButton__YjeZr {
    margin-top: 16px;
}

.dashboard_campaignsListActions__11sKd .dashboard_newEventGroupButton__YjeZr {
    margin-top: 0;
}

.dashboard_heatmapIcon__\+IfOc {
    margin-right: 7px;
}

.dashboard_engagementMetrics__zgohT {
    padding: 8px 36px;
}

.dashboard_articleCount__nK88w {
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 16px;
}

.dashboard_engagementMetrics__zgohT .dashboard_watchlist__-rK22 {
    row-gap: 8px;
}

.dashboard_engagementMetrics__zgohT .dashboard_watchlistRowLabel__CwAE6 {
    color: #1B1A19;
    font-weight: 600;
}

.dashboard_engagementMetrics__zgohT .dashboard_section__XR7-X {
    position: absolute;
    bottom: 16px;
    left: 16px;
    width: calc(100% - 32px);
}

.dashboard_engagementMetrics__zgohT .dashboard_sectionContent__Kmu7w {
    display: grid;
    grid-template-columns: max-content auto;
    gap: 12px;
    font-size: 12px;
    line-height: 16px;
}

.dashboard_engagementMetrics__zgohT .dashboard_sectionContent__Kmu7w>div:not(.dashboard_contentInsightHighlight__c8\+rV) {
    align-self: center;
}

.dashboard_contentInsightHighlight__c8\+rV {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
}

.dashboard_funnelsCard__eGQ63,
.dashboard_goalsCard__lDiA2 {
    height: 100%;
}

.dashboard_goalsDropdown__SUpGz {
    padding: 12px 16px 0;
}

.dashboard_goalsZeroState__SMrIP {
    margin: 0 auto;
    width: 240px;
    text-align: center;
    font-weight: 500;
    margin-top: 30px;
}

.dashboard_goalsZeroState__SMrIP>*:first-child {
    margin-bottom: 32px;
}

.dashboard_stepsShimmer__9LH7W {
    padding: 12px 16px;
    overflow: hidden;
}

.dashboard_stepsContainer__8Fu7P {
    margin-top: 12px;
    padding: 0 16px 12px;
    font-size: 12px;
    line-height: 16px;
}

.dashboard_stepCard__XIo5K {
    border: 1px solid #F3F2F1;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 12px;
}

.dashboard_stepTitleBar__\+PnuG {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dashboard_stepTitleBar__\+PnuG>*:first-child {
    margin-right: 4px;
}

.dashboard_stepTitleBar__\+PnuG>*:nth-child(2) {
    flex: 1;
}

.dashboard_stepBar__bgz45 {
    display: flex;
    column-gap: 2px;
    border-radius: 4px;
    height: 20px;
    overflow: hidden;
    margin: 12px 0;
}

.dashboard_stepBar__bgz45 > div:last-child {
    border-radius: 0 4px 4px 0;
}

.dashboard_funnelsCard__eGQ63 .dashboard_stepBar__bgz45 > div:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.dashboard_funnelsCard__eGQ63 .dashboard_stepBar__bgz45 {
    border-radius: 0;
}

.dashboard_stepLegendBar__gIaWE {
    display: flex;
    align-items: center;
    height: 32px;
}

.dashboard_stepLegendBar__gIaWE>*:nth-child(2) {
    flex: 1;
}

.dashboard_stepLegendBar__gIaWE>*:last-child {
    display: flex;
}

.dashboard_dropoffBar__OTGMy {
    background-color: #EAFFFB;
    color: #00493C;
    padding: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
}

.dashboard_dropoffBar__OTGMy>*:first-child {
    margin-right: 7px;
}

.dashboard_noSessionsLegend__ds4De {
    margin-top: 12px;
}

.dashboard_notificationLink__pc9GN {
    color: #115EA3;
}

.dashboard_notificationCard__9TkOe {
    background-color: #FFFFFF;
    width: 346px;
    min-height: 68px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-top: 12px;
    padding-bottom: 24px;
}

.dashboard_notificationCardIconContent__Gf9sh {
    padding: 10px 0px;
    position: relative;
}

.dashboard_backgroundCircle__U6Bl8 {
    fill: #EAEAFF;
}

.dashboard_notificationsIcons__LnmYA {
    left: 8px;
    top: 18px;
    position: absolute;
}

.dashboard_notificationsIcons__LnmYA path {
    fill: #827DFF;
}

.dashboard_notificationCardHeader__iJ1\+0 {
    justify-content: space-between;
    display: flex;
    align-items: center;
    padding-right: 0px;
    height: 32px;
    width: 297px;
}

.dashboard_notificationCardBottomContent__s2qUZ {
    gap: 4px;
    align-self: stretch;
    gap: 4px;
}

.dashboard_notificationCardTimeContent__-I2R9 {
    display: flex;
    padding-top: 4px;
}

.dashboard_notificationCard__9TkOe h3 {
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    align-items: center;
    display: flex;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard_notificationCard__9TkOe p {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #323130;
}

.dashboard_content__8neSf p {
    color: #323130;
    padding-bottom: 2px;
}

.dashboard_content__8neSf a {
    color: #115EA3;
    margin: 0px;
    display: contents;
}

.dashboard_closeNotificationButtonContainer__-npGM {
    justify-content: flex-end;
}

.dashboard_closeNotificationButtonContainer__-npGM>div>button>span>i {
    color: #424242;
}

.dashboard_closeNotificationButtonContainer__-npGM>div>button>span>i:hover {
    color: #005A9E;
}

.dashboard_notificationCircle__DBFT2 {
    width: 10px;
    height: 10px;
    border-radius: 10px;
    border: 1px solid #FFF;
    margin: 4px;
    background: #CC00DF;
}

.dashboard_notificationCollapsibleTitle__Yvj-t {
    color: #161514;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
}

.dashboard_notificationCollapsibleTitle__Yvj-t>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
    padding-top: 23px;
}

.dashboard_notificationCollapsibleTitle__Yvj-t>div>div {
    margin: 0px;
}

.dashboard_notificationCollapsibleTitle__Yvj-t>div>i {
    padding: 6px;
}

.dashboard_notificationGroups__ZxuC4 {
    display: flex;
    flex-direction: column;
    width: 346px;
}

.dashboard_notificationGroups__ZxuC4 .dashboard_notificationCard__9TkOe:not(:last-child) {
    border-bottom: 1px solid #EDEBE9;
}

.dashboard_small__vXi2u .dashboard_infoBanner__RFyf6 {
    grid-template-columns: 193px 193px;
    grid-template-rows: 1fr 1fr;
    row-gap: 28px;
    min-height: unset;
    margin-left: 0;
}

.dashboard_mobile__O46kV .dashboard_infoBanner__RFyf6 {
    grid-template-columns: auto;
    width: 100%;
    padding: 12px;
    row-gap: 8px;
}

.dashboard_small__vXi2u .dashboard_trees__tEfUp,
.dashboard_small__vXi2u .dashboard_fox__mtR09,
.dashboard_small__vXi2u .dashboard_subFox__L0Aiq {
    display: none;
}

.dashboard_small__vXi2u .dashboard_tileGrid__ZW95E {
    grid-template-columns: 414px;
}

.dashboard_mobile__O46kV .dashboard_tileGrid__ZW95E {
    grid-template-columns: unset;
    padding: 12px;
    margin: auto;
    grid-auto-rows: unset;
    width: 100%;
}

.dashboard_medium__HxdT8 .dashboard_infoBanner__RFyf6 {
    grid-template-columns: 162px 162px 162px 162px; /* please change mobile as well if this changes */
    column-gap: 28px;
}

.dashboard_medium__HxdT8 .dashboard_animationInfoBanner__XhJBG {
    grid-template-columns: repeat(4, 211px);
}

.dashboard_medium__HxdT8 .dashboard_mobile__O46kV.dashboard_infoBanner__RFyf6 {
    grid-template-columns: 162px 162px 162px;
}

.dashboard_medium__HxdT8 .dashboard_mobile__O46kV.dashboard_animationInfoBanner__XhJBG {
    grid-template-columns: repeat(3, 211px);
}

.dashboard_medium__HxdT8 .dashboard_infoTile__qLmvt {
    padding-right: 10px;
    padding-left: 16px;
}

.dashboard_medium__HxdT8 .dashboard_fox__mtR09 {
    right: -114px;
}

.dashboard_medium__HxdT8 .dashboard_subFox__L0Aiq {
    right: -150px;
}

.dashboard_medium__HxdT8 .dashboard_tileGrid__ZW95E {
    grid-template-columns: 452px 452px;
}

.dashboard_embedZapier__Wvstw {
    padding: 24px 32px;
    min-height: 1000px;
}

.dashboard_zapierContainer__zlk6O {
    visibility: hidden;
}

.dashboard_zapierContainerLoading__t5K1j {
    visibility: hidden;
}

.dashboard_performanceContainer__\+Uh0z {
    padding: 40px 32px;
}

.dashboard_performanceUrlContainer__C3\+aH {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 40px 12px 0 12px;
}

.dashboard_performanceContainer__\+Uh0z > .ms-Button {
    margin-left: 0;
}

.dashboard_performanceRow__Rls-7,
.dashboard_performanceUrlRow__r6eKx {
    border: 1px solid #DEECF9;
    width: 100%;
    align-items: start;
}

.dashboard_performanceRow__Rls-7:hover,
.dashboard_performanceUrlRow__r6eKx:hover {
    box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
    background: #FAF9F8;
}

.dashboard_performanceRow__Rls-7,
.dashboard_performanceUrlRow__r6eKx {
    height: 60px;
    margin-top: 8px;
    padding: 10px 12px 10px 16px;
}

.dashboard_performanceUrlRow__r6eKx {
    flex-direction: column;
    height: fit-content;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.dashboard_performanceScoreNumber__mNjV3 {
    font-size: 28px;
    line-height: 36px;
    color: #004578;
    font-weight: 600;
}

.dashboard_mobile__O46kV .dashboard_performanceScoreNumber__mNjV3 {
    font-size: 24px;
    line-height: 32px;
}

.dashboard_performanceScoreUnit__xjCB0 {
    font-weight: 600;
    line-height: 20px;
    color: #004578;
}

.dashboard_performanceTextContainer__tdi-A {
    height: 100%;
    margin-left: 20px;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard_mobile__O46kV .dashboard_performanceTextContainer__tdi-A {
    margin-left: 12px;
}

.dashboard_performanceSmallText__6HwFT,
.dashboard_performanceText__DCHFQ {
    font-weight: 600;
    line-height: 16px;
    color: #1B1A19;
    white-space: nowrap;
}

.dashboard_mobile__O46kV .dashboard_performanceUrlRow__r6eKx,
.dashboard_mobile__O46kV .dashboard_performanceText__DCHFQ,
.dashboard_performanceSmallText__6HwFT  {
    font-size: 12px;
}

.dashboard_performanceSubtitle__hsirH {
    color: #323130;
    font-size: 12px;
    font-style: italic;
    line-height: 16px;
}

.dashboard_perfScoreBarGood__XB1vs {
    background-color: #008A00;
}

.dashboard_perfScoreBarImprove__6lRKG {
    background-color: #F7630C;
}

.dashboard_perfScoreBarPoor__cwfOE {
    background-color: #D40000;
}

.dashboard_performanceScoreContainer__iYnGj {
    display: flex;
    align-items: baseline;
    width: 64px;
}

.dashboard_performanceRowButtonContainer__3bAAD {
    margin-left: auto;
}

.dashboard_performanceRatingIcon__HvOI4 {
    margin-right: 6px;
    height: 16px;
}

.dashboard_ratingContainer__g79DQ {
    display: flex;
    margin-top: 2px;
}

.dashboard_perfBreakdownContainer__t9Jom {
    margin-bottom: 12px;
}

.dashboard_perfBreakdownContainer__t9Jom .dashboard_loading__0h83T {
    margin-top: 12px;
}

.dashboard_perfMetricsScoreBar__9L3Wl {
    width: 100%;
    height: 20px;
    display: flex;
    border-radius: 4px;
    overflow: hidden;
    gap: 2px;
    margin: 12px 0;
    cursor: pointer;
}

.dashboard_perfMetricsScoreBar__9L3Wl .dashboard_div__XuGRi {
    height: 100%;
}

.dashboard_perfMetricsScoreBarText__Vd7S3 {
    color: #605E5C;
    font-size: 12px;
}

.dashboard_perfMetricsScoreBarLegend__9DqQE {
    display: flex;
    margin-bottom: 16px;
    gap: 12px;
    flex-flow: row wrap;
}

.dashboard_perfMetricsScoreBarLegendItem__tKbHZ {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.dashboard_perfMetricsUrlContainer__SbDes {
    display: flex;
    margin-top: 12px;
    align-items: center;
}

.dashboard_perfMetricsUrlContainer__SbDes .dashboard_metricsContainer__1JUeD {
    width: 265px;
    display: flex;
}

.dashboard_perfMetricsUrlSortButton__-jk0y {
    margin-left: 16px;
}

.dashboard_perfMetricsUrlScoreContainer__aSH97 {
    margin-right: 36px;
}

.dashboard_mobile__O46kV .dashboard_perfMetricsUrlScoreContainer__aSH97 {
    margin-right: 12px;
}

.dashboard_perfMetricsUrlScoreNumber__BkVbY {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dashboard_perfMetricsUrlScoreNumber__BkVbY i {
    height: 16px;
}

.dashboard_perfMetricsUrlScore__O2Wx\+ {
    font-size: 18px;
    color: #004578;
    line-height: 24px;
    font-weight: 600;
}

.dashboard_perfMetricsUrlMetricsNumber__DAhWy {
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
    margin-right: 24px;
}

.dashboard_mobile__O46kV .dashboard_perfMetricsUrlMetricsNumber__DAhWy {
    margin-right: 16px;
}

.dashboard_draggableCard__gJzK7 {
    opacity: 0.2;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    filter: alpha(opacity=20);
}

.dashboard_mirrorCard__6hy9q {
    position: fixed !important;
    margin: 0 !important;
    z-index: 9999 !important;
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
}

.dashboard_mirrorCard__6hy9q:hover {
    cursor: grabbing !important;
    cursor: -moz-grabbing !important;
    cursor: -webkit-grabbing !important;
}

.dashboard_editableDashboard__vb08O .dashboard_tile__rZ5Js .dashboard_tileTitle__FY6Zu:first-of-type {
    padding-left: 24px;
}

.dashboard_editableDashboard__vb08O .ms-PositioningContainer-layerHost {
    z-index: 99;
}

.dashboard_editableDashboard__vb08O .dashboard_upsellCardTitle__\+OzHt,
.dashboard_editableDashboard__vb08O :not(.dashboard_tileTabInactive__PDw\+t).dashboard_tileTitle__FY6Zu:first-of-type span:not(.dashboard_dragDisabled__CsW93) {
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

.dashboard_dragIndicator__FHHvA.dashboard_leftDrag__1W6WD {
    position: absolute;
    top: 7px;
    left: 0;
    z-index: 4;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.dashboard_mobile__O46kV button.dashboard_dragIndicator__FHHvA {
    display: none;
}

button.dashboard_dragIndicator__FHHvA:not(.dashboard_dragDisabled__CsW93) {
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

button.dashboard_dragIndicator__FHHvA:hover,
button.dashboard_dragIndicator__FHHvA:active {
    background: transparent;
}

.dashboard_editableDashboard__vb08O .dashboard_grabbingCursor__QM9Qt .dashboard_upsellCardTitle__\+OzHt,
.dashboard_editableDashboard__vb08O .dashboard_grabbingCursor__QM9Qt :not(.dashboard_tileTabInactive__PDw\+t).dashboard_tileTitle__FY6Zu:first-of-type span:not(.dashboard_dragDisabled__CsW93),
.dashboard_grabbingCursor__QM9Qt button.dashboard_dragIndicator__FHHvA,
button.dashboard_dragIndicator__FHHvA:not(.dashboard_dragDisabled__CsW93):active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

.dashboard_grabbingCursor__QM9Qt button.dashboard_dragIndicator__FHHvA:hover {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

.dashboard_infoCardTrendIcon__wuFWv,
.dashboard_tileActions__D8HIH button {
    width: 22px;
    height: 22px;
    margin-right: 8px;
}

.dashboard_infoCardTrendIcon__wuFWv {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 1;
}

.dashboard_tileActions__D8HIH i {
    color: #605E5C;
}

.dashboard_tile__rZ5Js.dashboard_trends__r00ft .dashboard_tileActions__D8HIH i {
    height: 20px;
}

button.dashboard_tabOverflowButton__DH3KN {
    height: 42px;
    width: 40px;
    background: white;
    border-radius: 8px 8px 0px 0px;
    box-shadow: 0px 3.2px 7.2px 0px #00000021;
    box-shadow: 0px 0.6px 1.8px 0px #0000001A;
}

button.dashboard_tabOverflowButton__DH3KN.is-expanded {
    background: #E0E0E0;
}

.dashboard_tabOverflowButton__DH3KN i {
    font-size: 12px;
    color: #323130;
}

.dashboard_tileActions__D8HIH i:nth-child(2),
.dashboard_tabOverflowButton__DH3KN i:nth-child(2) {
    display: none;
}

.dashboard_overflowCallout__tYSwi {
    margin-top: 0 !important;
}

.dashboard_overflowCallout__tYSwi .ms-Callout-main {
    border-radius: 8px !important;
}

.dashboard_overflowCallout__tYSwi button {
    padding: 2px 8px 2px 8px;
    height: 100%;
}

.dashboard_preventPointerEvents__nTP-L {
    pointer-events: none;
}

.dashboard_tileActionsMenu__BJfoX .ms-ContextualMenu-header {
    color: #616161;
    padding: 0;
    margin-left: 8px;
}

.dashboard_tileActionsMenu__BJfoX .ms-ContextualMenu-header i {
    display: none;
}

.dashboard_tileActionsMenu__BJfoX i svg {
    vertical-align: text-bottom;
}

.dashboard_tileActionsMenu__BJfoX button.is-disabled i {
    color: #a19f9d;
}

.dashboard_tileActionsMenu__BJfoX button.is-disabled path {
    fill: #a19f9d;
}

.dashboard_pinOption__5cBGc path {
    fill: #424242;
}

.dashboard_pinOption__5cBGc:hover path {
    fill: #0078D4;
}

.dashboard_hiddenTileOverlay__JjMKA {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    background-color: rgba(255, 255, 255, 0.8);
    bottom: 0;
}

.dashboard_multiTabTile__8jWXp .dashboard_hiddenTileOverlay__JjMKA {
    height: calc(100% - 41px);
}

.dashboard_mobile__O46kV .dashboard_hiddenTilesContent__JVydT {
    width: 100%;
}

.dashboard_hiddenTiles__0IBKX {
    margin-top: 20px;
    width: calc(443px * 3 + 48px);
}

.dashboard_medium__HxdT8 .dashboard_hiddenTiles__0IBKX {
    width: calc(452px * 2 + 24px);
}

.dashboard_small__vXi2u .dashboard_hiddenTiles__0IBKX {
    width: 414px;
}

.dashboard_mobile__O46kV .dashboard_hiddenTiles__0IBKX {
    padding-left: 12px;
    width: unset;
}

.dashboard_hiddenTiles__0IBKX.collapsed {
    margin-bottom: 150px;
}

.dashboard_hiddenTiles__0IBKX + .dashboard_tileGrid__ZW95E .dashboard_tileTabInactive__PDw\+t {
    z-index: auto;
}

.dashboard_hiddenTiles__0IBKX + .dashboard_tileGrid__ZW95E .dashboard_tileTitle__FY6Zu span {
    z-index: 10;
}

.dashboard_hiddenTiles__0IBKX + .dashboard_tileGrid__ZW95E .dashboard_tile__rZ5Js .dashboard_tileTitle__FY6Zu {
    padding-left: 16px;
}

.dashboard_hiddenTiles__0IBKX + .dashboard_tileGrid__ZW95E .dashboard_tile__rZ5Js .dashboard_tileTitle__FY6Zu span:not(.dashboard_dragDisabled__CsW93) {
    cursor: default;
}

.dashboard_hiddenTiles__0IBKX + .dashboard_tileGrid__ZW95E .dashboard_tile__rZ5Js.dashboard_multiTabTile__8jWXp .dashboard_tileTitle__FY6Zu span:not(.dashboard_dragDisabled__CsW93) {
    cursor: pointer;
}

.dashboard_recipeCount__E9nCP {
    padding: 0px 16px;
}

.dashboard_recipeData__hkhIE {
    margin-top: 38px;
}

.dashboard_recipeCard__tWfpj {
    border: 1px solid #EFF6FC;
    border-radius: 4px;
    padding-top: 12px;
    margin: 0px 16px 16px 16px;
}

.dashboard_recipeViewedAndNot__pgccy {
    padding: 4px 16px 0px 16px
}

.dashboard_recipeViewedAndNot__pgccy .dashboard_legend__Z6dO5 {
    padding: 0;
    margin: 10px -6px;
    width: calc(100% + 12px);
}

.dashboard_recipeMetricsRow__9nRQw {
    margin-bottom: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard_notApplicable__foFed {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height:  56px;
}

.dashboard_funnelCardMetricsContainer__1iUAs {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.dashboard_funnelCardMetricsContainer__1iUAs > div {
    max-width: 128px;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    border: 1px solid #EFF6FC;
    padding: 8px 4px;
    align-items: center;
    flex-basis: 100%;
    height: 84px;
    text-align: center;
}

.dashboard_funnelCardMetricsContainer__1iUAs strong {
    color: #004578;
    font-size: 26px;
    line-height: 36px;
}

.dashboard_funnelCardMetricsContainer__1iUAs.dashboard_funnelsMobile__Y5RJ1 > div {
    padding: 4px;
} 

.dashboard_funnelCardMetricsContainer__1iUAs.dashboard_funnelsMobile__Y5RJ1 strong {
    font-size: 20px;
    line-height: 32px;
}

.dashboard_funnelCardMetricsContainer__1iUAs.dashboard_funnelsMobile__Y5RJ1 .dashboard_italicSubtitle__c4hmJ {
    font-size: 11px;
    line-height: 14px;
}

.dashboard_funnelComboBox__aK7dW > div {
    max-height: 404px !important; /*Needed to prevent fluentUI from overriding with 100%*/
}

.dashboard_funnelComboBox__aK7dW .ms-Button-flexContainer > span,
.dashboard_funnelComboBox__aK7dW .ms-Button-flexContainer {
    width: 100%;
}

.dashboard_funnelComboBox__aK7dW button.is-checked.ms-ComboBox-option {
    background-color: #EAEAFF !important; /*important needed as fluentUIOverrides has background with important*/
}

.dashboard_funnelOption__b9YxF {
    display: flex;
    align-items: center;
    width: 100%;
}

.dashboard_funnelOption__b9YxF > div {
    margin: 0 8px;
    max-width: 308px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard_funnelOption__b9YxF button:last-child {
    margin: 0 4px 0 auto;
}

.dashboard_funnelOption__b9YxF button i {
    height: 20px;
    line-height: 20px;
}

.dashboard_funnelsCard__eGQ63 .dashboard_stepTitleBar__\+PnuG>*:last-child {
    flex: 0 1 auto;
}

.dashboard_funnelsCard__eGQ63 .dashboard_stepTitleBar__\+PnuG > *:first-child {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dashboard_funnelsCard__eGQ63 .dashboard_stepBar__bgz45 div {
    min-width: 2px;
}

.dashboard_funnelsCard__eGQ63 .dashboard_errorStateCard__ue6PP {
    top: 10%;
}

.dashboard_funnelCardMetricsContainer__1iUAs .dashboard_conversionTimeCard__tmWS4 .ms-Shimmer-container {
    width: 100%;
    margin: 9px 0;
}

.dashboard_funnelLegendSessions__4Grx1 {
    min-width: 85px;
}

.dashboard_funnelsCard__eGQ63 .dashboard_hover__oeta9:hover {
    box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
    background: #FAF9F8;
    border-radius: 4px;
}

.dashboard_recipeBarChart__7HZ65 {
    gap: 0px;
}

.dashboard_recipeTimeHighlights__rS8np {
    height: 100px;
}

.dashboard_recipeMetricSplit__kwdx- {
    display: grid;
    grid-template-columns: max-content max-content;
}

.dashboard_recipeMetricNumbers__3gV3W {
    width: 156px;
    flex: 1;
    overflow: hidden;
}

.dashboard_recipeMetricNumbers__3gV3W:first-child {
    margin-right: 24px;
}

.dashboard_deadPagesTop__7vdHe {
    margin: 38px 32px 12px;
}

.dashboard_deadPageSummary__khfTb {
    display: grid;
    padding: 12px 24px;
    width: 100%;
    grid-template-columns: 40px max-content auto;
    gap: 12px;
}

.dashboard_deadPagesTile__Al-0Y {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.dashboard_deadPagesFilterMessage__J5vB9 {
    color: #605E5C;
    font-size: 12px;
    margin-bottom:12px;
}

.dashboard_deadPagesUrl__NRkab {
    display: flex;
    align-items: center; 
    color: #323130;
    font-size:12px;
    border-bottom: 1px solid #EDEBE9;
    padding-bottom: 8px;
    padding-top:8px;
    min-height: 24px;
}

.dashboard_deadPagesUrl__NRkab > span {
    display: inline-block;
    padding-right: 22px; 
    text-overflow: ellipsis;
    overflow: hidden;
    text-wrap: nowrap;
    white-space: nowrap;
    width: 100%;
    height: 100%;
}

.dashboard_deadPagesLabel__lUWb1 {
}

.dashboard_deadPagesScrollable__3XLiK {
    padding: 0px 32px 12px;
}

.dashboard_compareModeWrapper__kLZxw {
    display: flex;
    width: 100%;
    margin-top: 12px;
    flex-direction: column;
    gap: 12px;
}

.dashboard_compareModeFilters__5BnTI {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background-color: #FFF;
    width: 100%;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #EAEAFF;
}

.dashboard_compareModeFilters__5BnTI > div {
    display: flex;
}

.dashboard_compareModeWrapper__kLZxw .ms-MessageBar {
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0px 4.8px 14.4px 0px rgba(131, 126, 255, 0.30);
}

.dashboard_compareModeWrapper__kLZxw .ms-MessageBar span {
    font-weight: 600;
}

.dashboard_dashboardContent__DHAgW #filterActionsContainer_dashboard_sec .ms-Button--primary {
    background: linear-gradient(79deg, #EF43FF -7.9%, #9692FF 106.6%), linear-gradient(281deg, #0078D4 0%, #9692FF 94.81%);
}

.dashboard_dashboardContent__DHAgW .dashboard_secondaryFilters__b2YGW .scrollingBadges div {
    background-color: #FAE9FF;
    border: 1px solid  #FFF;
    color: #5B0073;
}

.dashboard_projEmbedContainer__WUNCO {
    height: calc(100% - 60px) !important;
}

.dashboard_upsellCardBody__LUYiG {
    display: flex;
    gap: 16px;
    padding: 12px 32px;
}

.dashboard_upsellCardArrow__GjcxI {
    width: 24px;
    height: 48px;
    padding: 14px 2px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: linear-gradient(102deg, #0078D4 12.01%, #837EFF 89.29%);
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.14);
    display: flex;
    margin: auto 0;
}

.dashboard_upsellCardArrow__GjcxI:hover {
    background: linear-gradient(102deg, #106EBE 12.01%, #7974FF 89.29%);
}

.dashboard_upsellCardArrow__GjcxI i {
    height: 20px;
    line-height: 20px;
}

.dashboard_rightArrow__Bb2cr i {
    transform: rotate(180deg);
}

.dashboard_upsellCardContent__Vz8\+A{
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 400px;
}

.dashboard_upsellCardTitle__\+OzHt {
    position: absolute;
    top: -30px;
    z-index: 4;
    left: 24px;
    color: #1B1A19;
    font-weight: 600;
}

.dashboard_upsellImg__3G8a9 {
    width: 220px;
    padding: 0 40px;
    margin: 12px 0 24px 0;
    height: 226px;
    display: flex;
    align-items: center;
    box-sizing: content-box;
    justify-content: center;
}

.dashboard_upsellImg__3G8a9.dashboard_mobileUpsell__YBqNG {
    width: 80%;
    margin: 4px 0;
}

.dashboard_upsellCardContent__Vz8\+A strong {
    text-align: center;
}

.dashboard_upsellCardMessage__Md37y {
    text-align: center;
    color: #605E5C;
    font-size: 12px;
    line-height: 16px;
    margin: 12px 0 24px;
    min-height: 48px;
}

.dashboard_upsellCardCTA__TDKey {
    display: grid;
    gap: 28px;
    width: 100%;
    justify-content: center;
    grid-template-columns: 50% 50%;
}

.dashboard_upsellCardCTA__TDKey button:first-of-type {
    width: fit-content;
    margin-left: auto;
}

.dashboard_upsellPaginationContainer__cvLIu {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
}

.dashboard_deadPagesGaConnectionContent__s2P59 {
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center;
    min-height: 400px;
}

.dashboard_deadPagesGaConnectionMessage__EaJ5K {
    max-width: 70%;
    text-align: center;
    color: #605E5C;
    font-size: 12px;
    line-height: 16px;
    margin: 12px 0 24px;
    min-height: 48px;
}

.dashboard_deadPagesGaConnectionImg__43tzj{
    width: 220px;
    padding: 40px 40px 0;
    margin: 12px 0 24px 0;
    height: 126px;
    display: flex;
    align-items: center;
    box-sizing: content-box;
    justify-content: center;
}

.dashboard_paginaionCircleContainer__z8TKs {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
}

.dashboard_paginaionCircleContainer__z8TKs > div {
    background: #0078D4;
}

.dashboard_paginationCircle__MVZvL {
    width: 4px;
    height: 4px;
    border-radius: 4px;
}

.dashboard_paginationCircle__MVZvL.dashboard_selectedPage__26ppZ {
    width: 6px;
    height: 6px;
    border-radius: 6px;
}
.dashboard_userStruggle__FJNO2 {
    height: 100%;
}

.dashboard_userStruggleViewAllButton__5i0ku i {
    height: 20px;
    font-size: 20px;
    line-height: 20px;
    margin: 0px 4px 0px 0px;
}

.dashboard_userStruggleViewAllButton__5i0ku .ms-Button-label {
    margin: 0px;
    line-height: 20px;
}

.dashboard_userStruggleFilterDisclosure__5S5dc {
    color: #1B1A19;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    padding: 0 32px 8px;
}

.dashboard_userStruggleHeader__zvbt\+ {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 0 32px;
}

.dashboard_userStruggleHeader__zvbt\+ p {
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
}

.dashboard_userStruggleContent__PCAkv {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 32px 12px 32px;
    height: calc(100% - 84px);
}

.dashboard_noUserStruggleInsights__Em4gf {
    position: unset;
    padding: 0;
    width: 100%;
    margin: auto;
    text-align: center;
}

.dashboard_noUserStruggleInsights__Em4gf h3 {
    font-weight: 600;
    font-size: 16px;
    margin: 12px 0;
}

.dashboard_noUserStruggleInsights__Em4gf p,
.dashboard_noUserStruggleInsights__Em4gf h3 {
    color: #323130;
}

.dashboard_botMetrics__j1AEb {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 24px;
}

.dashboard_tile__rZ5Js.dashboard_trends__r00ft {
    grid-column: span 2;
}

.dashboard_tile__rZ5Js.dashboard_trends__r00ft .dashboard_tileContent__XVR0e {
    display: flex;
    gap: 24px;
    justify-content: space-between;
}

.dashboard_small__vXi2u .dashboard_tile__rZ5Js.dashboard_trends__r00ft {
    grid-row: span 2;
    grid-column: span 1;
}

.dashboard_small__vXi2u .dashboard_tile__rZ5Js.dashboard_trends__r00ft .dashboard_tileContent__XVR0e {
    flex-wrap: wrap;
}

.dashboard_small__vXi2u .dashboard_tile__rZ5Js.dashboard_trends__r00ft .dashboard_tileContent__XVR0e > div:first-child {
    height: 50%;
}

.dashboard_small__vXi2u .dashboard_tile__rZ5Js.dashboard_trends__r00ft .dashboard_tileContent__XVR0e > div:first-child::after {
    content: "";
    position: absolute;
    left: 16px;
    top: 528px;
    width: calc(100% - 32px);
    height: 1px;
    background: #E1DFDD;
}


.dashboard_tile__rZ5Js.dashboard_trends__r00ft .dashboard_tileContent__XVR0e > div {
    width: 50%;
    flex-grow: 1;
}

.dashboard_tile__rZ5Js.dashboard_trends__r00ft .ms-Checkbox.is-disabled .ms-Checkbox-checkbox {
    border-color: #c8c6c4;
}

.dashboard_trendsLineChartContainer__GU8NP {
    padding: 16px 4px 16px 0;
    margin: 16px;
    background-color: #FAF9F8;
    border-radius: 8px;
    box-sizing: content-box;
    position: sticky;
    right: 0;
    top: 16px;
}

.dashboard_trendsLineChartContainer__GU8NP > div {
    height: 100%;
}

.dashboard_trendsLineChartContainer__GU8NP .dashboard_topChartTileShimmerWrapper__M48iJ {
    padding: 0;
}

.dashboard_trendsLineChartContainer__GU8NP .ms-ShimmerGap-root {
    background-color: #FAF9F8;
}

.dashboard_trendChartTitle__wYYgL {
    font-size: 12px;
    color: #323130;
    line-height: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    padding: 0 16px;
}

.dashboard_trendsLineChart__1-C5z {
    height: 388px;
}

.dashboard_trendsShape__7CcSu {
    width: 12px;
    height: 12px;
    padding-right: 0;
    margin-left: 8px;
}

.dashboard_legend__Z6dO5 .dashboard_trendsShape__7CcSu.dashboard_trendsShapePlaceholder__rnwBD,
.dashboard_trendsShape__7CcSu.dashboard_trendsShapePlaceholder__rnwBD {
    width: 4px;
    height: 16px;
    border-radius: 2px;
}

.dashboard_legend__Z6dO5 .dashboard_trendsShape__7CcSu.dashboard_circle__GzY6j,
.dashboard_trendsShape__7CcSu.dashboard_circle__GzY6j {
    border-radius: 6px;
}

.dashboard_trendsShape__7CcSu.dashboard_triangle__a0ieJ {
    width: 16px;
}

.dashboard_trendsShape__7CcSu.dashboard_pyramid__KCn0b {
    transform: rotate(180deg);
}

.dashboard_trendsShape__7CcSu.dashboard_diamond__dznut {
    transform: rotate(45deg);
}

.dashboard_trendTooltipContainer__P4FaM > div {
    min-width: 188px;
    color: #323130;
    font-size: 12px;
    padding: 8px 12px;
    flex-direction: column;
    gap: 8px;
    border-radius: 8px;
    background: linear-gradient(0deg, rgba(131, 126, 255, 0.10) 0%, rgba(131, 126, 255, 0.10) 100%), rgba(255, 255, 255, 0.90);
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.14);
}

.dashboard_trendTooltipContent__yUzy0 {
    display: grid;
    grid-template-columns: 10px auto max-content;
    align-items: center;
    column-gap: 8px;
    row-gap: 4px;
    margin-top: 8px;
}

.dashboard_trendTooltipContent__yUzy0 .dashboard_trendsShape__7CcSu {
    scale: 0.67;
    margin-left: 0;
}

.dashboard_trendTooltipContent__yUzy0 .dashboard_trendToolTipLegend__Z4wdE {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
}

.dashboard_tile__rZ5Js.dashboard_trends__r00ft .dashboard_topListItemLabel__4Q70Q {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dashboard_trendsErrorContainer__dgd3f {
    position: relative;
    width: 50%;
}

.dashboard_trendsCalloutContainer__giSur {
    min-width: 442px;
}

.dashboard_trendsCalloutHeader__3OzI4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px 8px 0 0;
}

.dashboard_trendsCalloutHeader__3OzI4 h1 {
    margin-bottom: 0;
}

.dashboard_trendsCalloutHeader__3OzI4 + .dashboard_trendsLineChartContainer__GU8NP {
    margin-top: 8px;
}

.dashboard_selectedTrendButton__DW0Oa {
    background-color: #EDEBE9;
}
.filters_badge__XUXmL,
.filters_segmentBadge__J0LD- {
    background: #C7E0F4;
    border: 1px solid #FFFFFF;
    border-radius: 4px;
    color: #004578;
    margin-left: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 3px 8px;
    flex: 0 0 auto;
    line-height: 20px;
    height: 32px;
}

.filters_segmentBadge__J0LD- {
    max-width: 90%;
}

.filters_segmentBadge__J0LD- .filters_segmentText__W3klv {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filters_segmentBadge__J0LD- i {
    padding-left: 8px; 
}

.filters_badge__XUXmL i {
    padding: 10px;
    margin-left: 4px;
    margin-right: -8px;
    font-size: 10px;
    height: 10px;
    width: 10px;
    box-sizing: content-box;
    line-height: 10px;
}

.filters_badge__XUXmL button:hover {
    background: transparent;
}

.filters_badge__XUXmL button {
    margin-left: -8px;
}

.filters_badge__XUXmL button::after {
    display: none;
}

.filters_blueFilterBadge__a6es1 {
    background: #004578;
    color: #FFF;
}

.filters_blueFilterBadge__a6es1 i {
    color:#fff;
    display: flex;
    align-items: center;
    margin-left: -5px;
    margin-right: 1px;
}

.filters_badge__XUXmL.filters_inactive__QUzrV {
    background-color: #F3F2F1;
    color: #B3B0AD;
}

.filters_filterInfoIcon__4JDDJ {
    height: 20px;
}

.filters_addSegmentButton__7zqY7 {
    background: transparent;
    white-space: nowrap;
    margin-left: 12px;
}

.filters_filterBarButtonContainer__M3fkI {
    display: flex;
    flex: 1 0 auto;
    width: max-content;
}

.filters_filterBarButtonContainer__M3fkI.filters_withMargin__STLq7 {
    margin-right: 12px;
}

.filters_filterBarButtonContainer__M3fkI button {
    border: none;
}

.filters_filterBarButtonContainer__M3fkI button span {
    color: #424242;
    font-weight: 600;
}

.filters_filterBarButtonContainer__M3fkI button:hover {
    background-color: #fff;
}

.filters_orAndFilterRadio__79TML {
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    margin: 0 8px 0 0;
    font: inherit;
    color: #323130;
    width: 20px;
    height: 20px;
    border: 1px solid #323130;
    border-radius: 50%;
    display: grid;
    place-content: center;
}

.filters_orAndFilterRadio__79TML:checked {
    border: 1px solid #827DFF;
}

.filters_orAndFilterLabel__i\+UBX:hover > .filters_orAndFilterRadio__79TML {
    border-width: 1.5px;
    border-color: #827DFF;
}

.filters_orAndFilterRadio__79TML::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: scale(0);
    transition: 80ms transform ease-in;
    box-shadow: inset 10px 10px #827DFF;
  }

.filters_orAndFilterRadio__79TML:checked::before {
    transform: scale(1);
}

.filters_orAndOption__MJ9kD {
    color: #323130;
    font-weight: normal;
    display: flex;
}

.filters_mobile__EHA4l.filters_orAndOption__MJ9kD .orFilterLabel {
    margin-right: 16px;
}

.filters_universalFilters__gIY8X {
    display: flex;
    height: 100%;
    overflow: hidden;
    flex: 1;
}

.filters_filtersHeader__huS97 {
    margin-bottom: 0;
    padding: 16px;
    display: flex;
    align-items: center;
}

.filters_filtersHeader__huS97 > *:not(:first-child) {
    margin-left: 8px;
}

.filters_filterPanelTitle__eBYHj {
    line-height: 28px;
    font-size: 20px;
    font-weight: 600;
}

.filters_filtersPanel__fhWF3 {
    border-radius: 8px;
    padding: 0;
    position: fixed;
    height: 80%;
    top: 99px;
    left: 17px;
    right: 17px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: white;
    z-index: 14;
    max-height: calc(100vh - 138px);  /* hardcoded: this is the sum of three headers above the panel*/
}

.filters_filterBadgeBar__eOrnM {
    display: flex;
    border-bottom: 1px solid #EDEBE9;
    padding: 8px 12px 8px 0;
}

.filters_filterBadgeBar__eOrnM button {
    border: none;
}   

.filters_activeFilters__Y\+1vr {
    display: flex;
    flex-wrap: wrap;
}

.filters_activeFilters__Y\+1vr.filters_mobile__EHA4l {
    overflow: auto;
    scrollbar-width: none;
    margin-left: 4px;
    flex-wrap: nowrap;
}

.filters_mobile__EHA4l .heatmapUrlSearchBox.ms-SearchBox{
    width: 100%;
}

.filters_filter__p9yBo {
    height: fit-content;
}

.filters_filter__p9yBo.filters_padding__7cKpC {
    padding: 8px;
}

.filters_urlPanelPadding__zlcxR {
    padding: 0 24px;
}

.filters_filter__p9yBo.filters_fitContent__imC-2 {
    width:fit-content;
}

.filters_filter__p9yBo.filters_mobile__EHA4l {
    width: 100%;
}

.filters_filter__p9yBo.filters_badgeView__rMEeb {
    padding-right: 0;
}

.filters_filter__p9yBo.filters_zeroState__SBZc1 {
    padding-left: 0;
    display: flex;
    align-items: flex-start;
}

.filters_filter__p9yBo.filters_range__yB1go:not(:last-child) {
    margin-bottom: 24px;
}

.filters_overflowBadgesButton__-83Dm {
    background: #C7E0F4;
    border: 1px solid #FFFFFF;
    border-radius: 4px;
    color: #004578;
    margin-left: 12px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    padding: 6px 0 0 6px;
}

.filters_overflowBadgesButton__-83Dm:hover {
    background-color: #C7E0F4;
}

.filters_overflowBadgesButton__-83Dm.filters_secondary__PCIyj,
.filters_overflowBadgesButton__-83Dm.filters_secondary__PCIyj:hover {
    color: #5B0073;
    background: #FAE9FF;
}

.filters_overflowBadgesButton__-83Dm.filters_secondary__PCIyj i path {
    fill: #5B0073;
}

.filters_overflowBadgesButton__-83Dm .ms-Button-menuIcon {
    display: none;
}

.filters_overflowBadgesButton__-83Dm i {
    display: flex;
    align-items: center;
}

.filters_overflowBadges__4CvSH {
    padding: 8px 8px 0 0;
}

.filters_overflowBadges__4CvSH > ul {
    margin-left: -4px;
}

.filters_overflowBadges__4CvSH li {
    margin-bottom: 8px;
    width: fit-content;
}

.filters_overflowBadges__4CvSH.filters_secondary__PCIyj ul li div {
    color: #5B0073;
    background: #FAE9FF;
}

.filters_option__Q7vK9 {
    display: flex;
}

.filters_option__Q7vK9 div.ms-TooltipHost {
    margin-left: 10px;
    display: flex;
    align-items: center;
}

.filters_option__Q7vK9 .ms-Checkbox-label {
    align-items: center;
}

.filters_option__Q7vK9.filters_disabled__DKu1y .ms-Checkbox-checkbox {
    border-color: #A19F9D;
}

.filters_option__Q7vK9.filters_disabled__DKu1y .ms-Checkbox-text {
    color: #A19F9D;
}

.filters_dateFilterCallout__k22S0 {
    min-width: 150px;
    padding: 0 12px;
    padding-bottom: 8px;
    background-color: #fff;
}

.filters_filterNavPadding__cqOwP {
    padding-left: 8px;
}

.filters_timeSelector__nifjQ .ms-ComboBox::after {
    border: 1px solid #D1D1D1;
    border-bottom-color: #616161;
}

.filters_resizeGroupContainer__5jN8E {
    flex: 0 1 auto;
    overflow: hidden;
}

.filters_dateTimeField__CYxzS {
    padding-top: 12px;
    min-width: 320px;
}

.filters_dateTimeField__CYxzS .ms-TextField-field {
    cursor: pointer;
}

.filters_dateTimeContainer__KVm8z {
    position: relative;
}

.filters_dateTimeContent__LE6S4 {
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    width: -moz-fit-content;
    margin-top: 5px;
    background: #FFFFFF;
    box-shadow: 0px 1.2px 3.6px rgba(0, 0, 0, 0.1), 0px 6.4px 14.4px rgba(0, 0, 0, 0.13);
    border-radius: 2px;
}

.filters_dateTimeHeader__WSmKC {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px 0px;
    width: 100%;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #323130;
}

.filters_dateTimeCalendars__E0zma {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0 20px;
    background: #FFFFFF;
}

.filters_dateTimeCalendarLabel__jU8y1 {
    align-self: start;
    font-weight: 600;
    margin: 16px 0 0 16px;
    font-size: 16px;
}

.filters_dateTimeCalendarContainer__fmZl- {
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    height: 331px;
    max-height: 331px;
}

.filters_dateTimeCalendarSeparator__HLGay {
    width: 1px;
    height: 330px;
    background: #D9D9D9;
}

.filters_calendarNoTime__OVRZY .filters_dateTimeCalendarContainer__fmZl- {
    height: 260px;
    max-height: 260px;
}

.filters_calendarNoTime__OVRZY .filters_dateTimeCalendarSeparator__HLGay {
    height: 259px;
}

.filters_dateTimeSeparator__CnG\+c {
    height: 1px;
    width: 100%;
    background: #D9D9D9;
}

.filters_dateTimeFooter__dF-hw {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 20px 16px 16px 16px;
    width: 100%;
    gap: 10px;
}

.filters_timepickerContainer__yzz-U {
    display: flex;
    width: 100%;
    margin: auto 0 0 36px
}

.filters_hourComboBox__\+\+c2B,
.filters_ampmComboBox__guyKn {
    width: 60px;
}

.filters_minuteComboBox__qYGcH {
    width: 70px;
}

.filters_hourComboBox__\+\+c2B .ms-ComboBox::after,
.filters_minuteComboBox__qYGcH .ms-ComboBox::after,
.filters_ampmComboBox__guyKn .ms-Dropdown-title,
.filters_lastDaysChoice__H9nRR {
    border-width: 0 0 1px 0;
    border-radius: 0;
}

.filters_calendarRootClass__ggxxW div div div {
    padding-left: 0;
}

.filters_calendarRootClass__ggxxW.ms-DatePicker {
    margin-bottom: 0px;
}

.filters_funnelsFilterContainer__DJ\+TU > div {
    margin-bottom: 12px;
}

.filters_lastDaysOption__3iOt0 {
    margin-left: 25px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.filters_lastDaysOption__3iOt0 input {
    margin: 0 4px;
    height: 32px;
    width: 45px;
}

.filters_lastDaysOption__3iOt0 button {
    min-width: unset;
    width: 60px;
    margin-left: 16px;
}

.filters_lastDaysChoice__H9nRR + label::before {
    top: 7px;
}

.filters_lastDaysChoice__H9nRR + label::after,
.filters_lastDaysChoice__H9nRR + label:hover::after {
    top: 12px;
}

.filters_lastDaysChoice__H9nRR:focus {
    outline: 1px solid #177ecc;
}

.filters_lastDaysChoice__H9nRR::-webkit-inner-spin-button {
    cursor: pointer;
}

.filters_topPathDropdownTitle__W1Bmi {
    padding: 6px;
    font-weight: 600;
    color: #616161;
}

.filters_childDropdownOption__pnd-R {
    margin-left: 20px;
}

.filters_dropdownOption__5iv9k > span:first-child {
    min-width: 16px;
}

.filters_checkboxIndeterminate__iXf0e > span:first-child {
    border: 1px solid #020057;
    position: relative;
    border-radius: 2px;
    min-width: 16px;
}

.filters_checkboxIndeterminate__iXf0e > span:first-child::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background-color: #020057;
}

.filters_dropdownText__QNAuV {
    font-size: 14px;
    color: #616161;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filters_chevronDark__yR7Sw i {
    font-size: 12px;
    color: #323130;
}

.filters_adsFilterComboBox__z6o2k .ms-ComboBox-header {
    padding: 0;
}

.filters_adsSourceHeader__d7V-o {
    background-color: #F3F2F1;
    color: #323130;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    cursor: pointer;
    height: 100%;
}

.filters_adsSourceHeader__d7V-o i {
    font-size: 12px;
}

.filters_adsHeaderExpandIcon__clRpZ {
    transition: transform 0.1s linear 0s;
}

.filters_adsHeaderCollapsed__GmN01 {
    transform: rotate(180deg);
}
.fre_gettingStarted__mYvIF {
    background-color: #FFF;
    overflow: auto;
    height: 100%;
    margin: 0 auto;
    width: 100%;
    position: relative;
}

.fre_centered__wKzAv {
    max-width: 1340px;
    margin: 0 auto;
}

.fre_gettingStarted__mYvIF .fre_centered__wKzAv {
    margin: 0 auto;
    width: fit-content;
    position: relative;
}

.fre_checklistArea__-Q\+e8 {
    display: flex;
    border-radius: 8px;
    user-select: none;
    margin-top: 20px;
}

.fre_mountainArea__sGU1B {
    border-radius: 8px;
    box-sizing: border-box;
    width: 560px;
    height: 594px;
    display: flex;
    align-items: end;
    overflow: hidden;
    justify-content: center;
    background: linear-gradient(180deg, #E9F7FF 0%, #FFFFFF 72.07%);
}

.fre_checklistItem__Mdonn {
    display: flex;
    border-bottom: 1px solid #F4F4F4;
}

.fre_checklistItem__Mdonn:last-child {
    border: none;
}

.fre_checklistItems__NLGRN {
    margin-right: 24px;
    width: 509px;
    max-width: 509px;
    border-radius: 8px;
    box-shadow: 0px 3px 7px 0px rgba(131, 126, 255, 0.12), 0px 1px 2px 0px rgba(131, 126, 255, 0);
}

.fre_checklistTextArea__FWQfC {
    padding: 15px 24px;
    width: 100%;
}

.fre_checklistCircle__jqFIj {
    border-radius: 28px;
    height: 28px;
    width: 28px;
    margin: 26px;
    flex: 1 0 auto;
}

.fre_checklistCircle__jqFIj circle {
    fill: #827DFF;
}

.fre_checklistCircle__jqFIj.fre_unChecked__HIrrn circle {
    fill: white;
}

.fre_appsCheckList__E\+rUG .fre_checklistItem__Mdonn {
    min-height: 98px;
}

.fre_mountainIllustration__LgGRS {
    width: 738px;
    height: 530px;
}

.fre_checklistTitle__FbsPu,
.fre_blogTitle__9bHTf {
    font-weight: 600;
    font-size: 40px;
    line-height: 35px;
    margin-bottom: 8px;
    letter-spacing: 3.2px;
    text-transform: uppercase;
}

.fre_checklist__2BTPW.fre_isSettings__ZKH6b,
.fre_blogUpsell__D1Iak.fre_isSettings__ZKH6b {
    padding: 60px 0px 67px 0px;
    position: relative;
}

.fre_checklistSubtitle__Vv1hA {
    margin-bottom: 32px;
    font-size: 16px;
    line-height: 20px;
    font-style: italic;
    color: #605E5C;
}

.fre_percentageBar__TLT4N {
    width: 509px;
    max-width: 509px;
}

.fre_bar__Xe5yh {
    display: grid;
    gap: 2px;
    width: 509px;
    max-width: 509px;
    margin-top: 5px;
}

.fre_percentageBar__TLT4N span:first-child {
    margin-right: 5px;
    font-weight: 600;
}

.fre_percentageBar__TLT4N span:nth-of-type(2) {
    font-style: italic;
}

.fre_totalBar__qqbuH {
    background-color: #DBDBDB;
    border-radius: 0 8px 8px 0;
    height: 20px;
}

.fre_progressBar__gwYu7 {
    align-items: center;
    background-color: #ED36FF;
    border-radius: 8px 0 0 8px;
    height: 20px;
}

.fre_totalBar__qqbuH.fre_fullBar__kpFjv,
.fre_progressBar__gwYu7.fre_fullBar__kpFjv {
    border-radius: 8px;
}

.fre_blogTitleArea__feUGD {
    text-align: center;
}

.fre_blogUpsell__D1Iak {
    background: linear-gradient(180deg, #DDEFFF 0%, #F2F9FF 100%);
}

.fre_blogUpsell__D1Iak .fre_centered__wKzAv {
    margin-bottom: 0;
}

.fre_blogItems__OfD90 {
    display: grid;
    grid-template-columns: auto auto;
    grid-row-gap: 24px;
    grid-column-gap: 24px;
    margin-top: 48px;
}

.fre_isSettings__ZKH6b .fre_blogItems__OfD90 {
    padding: 60px 50px 67px 50px;
}

.fre_blogItem__NvzHh {
    display: flex;
    /* this shadow is not noticeable without the decimal points on top of the blue background */
    box-shadow: 0px 3.2px 7.2px 0px rgba(131, 126, 255, 0.12), 0px 0.6px 1.8px 0px rgba(131, 126, 255, 0.10);
    border-radius: 8px;
    min-height: 120px;
    overflow: hidden;
    background-color: #FFF;
    align-items: center;
    padding-right: 16px;
    max-width: 559px;
}

.fre_blogItem__NvzHh iframe {
    min-width: 150px;
    min-height: 150px;
}

.fre_blogItem__NvzHh:hover {
    color: #323130;
}

.fre_blogItems__OfD90 img {
    background-color: #FFF;
}

.fre_blogCardContent__g6ayB {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.fre_blogItemTextArea__m9SM7 {
    padding: 24px 23px 16px;
    color: #323130;
    font-size: 14px;
    line-height: 19px;
}

.fre_blogItemTitle__Noi9Q {
    font-weight: 600;
    margin-bottom: 4px;
}

.fre_checkBlogButton__NhM-a {
    margin-top: 24px;
    left: 50%;
    transform: translateX(-50%);
}

.fre_setupOptions__bVikQ {
    background: linear-gradient(307deg, #FAE9FF -9.47%, #DEECF9 75.93%);
    padding: 60px 150px 67px 150px;
}

.fre_setupOptions__bVikQ,
.fre_checklist__2BTPW,
.fre_blogUpsell__D1Iak {
    padding: 60px 150px 67px 150px;
}

.fre_setupTitle__ALire {
    text-align: center;
}

.fre_setupTitle__ALire span {
    font-size: 73px;
    font-weight: 700;
    line-height: 72px;
    letter-spacing: 8px;
    text-transform: uppercase;
}

.fre_setupTitle__ALire.fre_appsSubtitle__FTLRC {
    margin-bottom: 88px;
}

.fre_stillnoData__yMNKX {
    color: #004578;
    text-align: center;
    margin-top: 41px;
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 600;
    display: flex;
    margin-top: 52px;
    justify-content: center;
}

.fre_stillnoData__yMNKX~a:hover,
.fre_stillnoData__yMNKX~a:focus,
.fre_stillnoData__yMNKX~a:active,
.fre_stillnoData__yMNKX~a:active:hover,
.fre_stillnoData__yMNKX .ms-Spinner-label {
    color: #004578;
}

.fre_socialBar__CMmIz {
    padding: 54px 0;
    background-color: #EAEAFF;
}

.fre_socialMediaTitle__\+oy8f {
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    color: #323130;
    margin-bottom: 20px;
}

.fre_socialMediaItems__-vGG-,
.fre_socialMediaItem__0U-C4 {
    display: flex;
    font-size: 12px;
    line-height: 16px;
}

.fre_socialMediaItem__0U-C4 {
    border: 2px solid white;
    border-radius: 38px;
    align-items: center;
    margin-right: 16px;
    padding: 2px 20px 2px 2px;
    background-color: rgba(255, 255, 255, 0.5);
}

.fre_shortSetupOptions__7jseV.fre_setupTittle__-HwMz {
    text-align: center;
}

.fre_shortSetupOptions__7jseV.fre_setupTittle__-HwMz span {
    font-size: 43px;
    line-height: 43px;
}

.fre_setupSubtitle__NNhqq {
    font-size: 16px;
    font-style: italic;
    line-height: 28px;
    color: #323130;
    margin-top: 16px;
    text-align: center;
    margin-bottom: 44px;
}

.fre_socialMediaIcon__d7zhw {
    overflow: hidden;
    transform-origin: top left;
    width: 30px;
    height: 30px;
    margin-right: 12px;
}

.fre_socialMediaIcon__d7zhw::after {
    content: url(https://claritystatic.azureedge.net/images/SocialMediaIcons.png);
    position: relative;
}

.fre_socialMediaItem__0U-C4:nth-child(2) .fre_socialMediaIcon__d7zhw::after {
    left: -32px;
}

.fre_socialMediaItem__0U-C4:last-child .fre_socialMediaIcon__d7zhw::after {
    left: -63px;
}

.fre_socialMediaName__MetO2 {
    color: #323130;
}

.fre_clementineIllustration__LM1GH,
.fre_clementineIllustrationGTM__AX\+kA,
.fre_clementineIllustrationApp__UnVgz {
    position: absolute;
    z-index: 10;
    left: 150px;
}

.fre_clementineIllustration__LM1GH,
.fre_clementineIllustrationApp__UnVgz {
    bottom: 327px;
}

.fre_clementineIllustrationGTM__AX\+kA {
    bottom: 363px;
}

.fre_clemKnockingCupAnimation__VDE5l {
    position: absolute;
    height: 180px;
    left: 32px;
    top: 74px;
    z-index: 2;
}

.fre_clementineIllustrationApp__UnVgz {
    left: 50px;
}

.fre_stillnoData__yMNKX .fre_loadingState__FN2Wl {
    height: 376px;
}

.fre_loadingState__FN2Wl> :first-child {
    margin-bottom: 5px;
}

.fre_loadingState__FN2Wl .fre_ms-Spinner-label__sc21- {
    color: white;
}

.fre_setupOptions__bVikQ.fre_fullHeight__sRUMD {
    background: linear-gradient(180deg, #DDEFFF 0%, #F2F9FF 100%);
    padding: 48px 48px 52px;
    min-height: 400px;
    height: 100%;
    position: relative;
    overflow: auto;
}

.fre_setupOptions__bVikQ.fre_fullHeight__sRUMD.fre_embedded__Hu6eo {
    background: transparent;
    padding: 48px 48px 52px 10px;
    min-height: 400px;
    height: 100%;
    position: relative;
    overflow: auto;
}

.fre_firstStep__mifib,
.fre_trackinStep__dVNHa {
    padding: 24px 32px;
    width: 764px;
}

.fre_trackinStep__dVNHa span {
    font-weight: 600;
}

.fre_thirdPlatformsContent__EeCyK,
.fre_needHelpContent__BKnh0,
.fre_trackingCodeContent__Lgyzc {
    border-radius: 8px;
    background: #FFF;
    width: 100%;
    margin: 0 auto;
}

.fre_thirdPlatformsContentEmbedded__JnZMN {
    box-shadow: 0px 4px 14px 0px rgb(131, 126, 255, 0.30);
}

.fre_needHelpContent__BKnh0,
.fre_trackingCodeContent__Lgyzc {
    display: flex;
    justify-content: space-between;
}

.fre_thirdPlatformsContainer__UZr9h,
.fre_needHelpContainer__v29M1 {
    margin: 0 auto;
    position: relative;
}

.fre_needHelpContent__BKnh0 .fre_step__2gGeP {
    min-width: 480px;
}

.fre_emailTextField__grlnF {
    margin: 25px 0 32px 0;
    height: 75px;
}

.fre_thirdPlatformsContent__EeCyK {
    display: inline-block;
}

.fre_trackingCodeContainer__j5LA9 {
    margin: 0 auto;
    width: 100%;
    position: relative;
}

.fre_trackingCodeContent__Lgyzc .fre_code__p\+Qcb {
    margin: 8px 0 0 0;
}

.fre_trackingCodeContainer__j5LA9 .fre_markdownCode__J9lXa,
.fre_thirdPlatformsContainer__UZr9h .fre_markdownCode__J9lXa {
    margin-bottom: 24px;
}

.fre_thirdPlatformsContainer__UZr9h .fre_copyProjectId__orQd0 {
    margin-left: 12px;
}

.fre_thirdPlatformsContainer__UZr9h .fre_copyProjectId__orQd0 svg {
    filter: none;
}

.fre_thirdPlatformsContent__EeCyK>span:first-child {
    font-weight: 600;
    margin: 32px 0 0 32px;
    display: inline-block;
}

.fre_platformFactsContainer__cGdk6 {
    display: flex;
}

.fre_thirdPlatformsContainer__UZr9h .fre_platformFacts__4dvVI {
    width: 1377px;
    display: grid;
    gap: 24px;
    grid-template-columns: auto auto auto;
}

.fre_stepsContainer__09Kxw {
    background-color: #FFF;
    border-radius: 8px;
    padding: 5px 0;
    margin-top: 24px;
}

.fre_stepsContainerEmbedded__k2CuH {
    box-shadow: 0px 4px 14px 0px rgb(131, 126, 255, 0.30);
}

.fre_stepsContainer__09Kxw .fre_code__p\+Qcb {
    margin-left: 34px;
}

.fre_stepsContainer__09Kxw code {
    text-wrap: wrap;
}

.fre_platformFact__O2o1P {
    border: 1px solid #DEECF9;
    border-radius: 8px;
    padding: 16px 24px;
    max-width: 508px;
    display: flex;
    align-items: start;
    margin-bottom: 12px;
}

.fre_thirdPlatformsContainer__UZr9h .fre_platformFact__O2o1P {
    width: 442px;
    background-color: #FFF;
}

.fre_thirdPlatformsContainer__UZr9h .fre_platformFact__O2o1P.fre_platformFactEmbedded__wz2Aq {
    width: auto;
    background-color: #FFF;
    box-shadow: 0px 4px 14px 0px rgb(131, 126, 255, 0.30);
}

.fre_platformFacts__4dvVI.fre_installation__9JrAb {
    margin: 45px 32px 24px 0;
}

.fre_platformFact__O2o1P .fre_fact__YVYRH {
    display: flex;
    flex-direction: column;
    margin-left: 12px;
    gap: 8px;
}

.fre_platformFact__O2o1P .fre_fact__YVYRH a {
    padding: 5px 12px 5px 0;
}

.fre_code__p\+Qcb {
    margin-left: 34px;
}

.fre_markdownCode__J9lXa {
    background: #EDEBE9;
    padding: 2px 8px 6px;
    margin-top: 4px;
    overflow: auto;
    background: #FAF9F8;
}

.fre_platformFact__O2o1P i {
    display: flex;
    justify-content: center;
    align-items: center;
}

.fre_platformFact__O2o1P div>i {
    border-radius: 24px;
    background: #EAEAFF;
    height: 38px;
    width: 38px;
}

.fre_thirdPartyPlatforms__QOQPp {
    display: grid;
    gap: 24px;
    border-radius: 6px;
    justify-content: center;
    margin: 24px 0;
    grid-template-columns: repeat(auto-fill, 247px);
    background-color: #FFF;
}

.fre_thirdPartyPlatform__DYM3b {
    width: 243px;
    height: 64px;
    background: #FFFFFF;
    box-shadow: 0px 3px 7px 0px rgba(131, 126, 255, 0.12), 0px 0px 1px 0px rgba(131, 126, 255, 0.10);
    border-radius: 6px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.fre_thirdPartyPlatform__DYM3b span {
    margin-left: 68px;
    font-weight: 600;
}

.fre_brunoLookingBack__LShxZ {
    position: absolute;
    right: 0;
}

.fre_installationBreadcrumb__zZeMY {
    margin-bottom: 24px;
}

.fre_installationBreadcrumb__zZeMY ol a {
    font-size: 18px;
}

.fre_installationBreadcrumb__zZeMY ol li:not(:first-child) {
    margin-left: 16px;
}

.fre_installationBreadcrumb__zZeMY li a:focus-visible {
    outline: -webkit-focus-ring-color auto 1px;
}

.fre_installationBreadcrumb__zZeMY ol a,
.fre_installationBreadcrumb__zZeMY .ms-Breadcrumb-chevron {
    color: #605E5C;
}

.fre_installationBreadcrumb__zZeMY ol> :last-child a {
    font-weight: 600;
    color: #323130;
}

.fre_installationBreadcrumb__zZeMY ol a:hover {
    color: #605E5C;
    text-decoration: none;
}

.fre_goBackBreadcrumb__1RMuH {
    margin-right: 8px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.fre_goBackBreadcrumb__1RMuH:focus-visible {
    outline: 1px solid #000;
}

.fre_installationBreadcrumb__zZeMY .ms-Breadcrumb-itemLink {
    margin-right: 8px;
    padding-left: 0;
}

.fre_installationBreadcrumb__zZeMY .ms-Breadcrumb-itemLink:hover {
    background: unset;
    font-weight: 600;
}

.fre_installationBreadcrumb__zZeMY .ms-Breadcrumb-itemLink::after,
.fre_breadCrumbItem__2rxn5::after {
    display: block;
    content: attr(title);
    font-weight: 600;
    height: 0;
    color: transparent;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}

.fre_installationBreadcrumb__zZeMY .ms-Breadcrumb-itemLink::after {
    content: attr(content);
}

.fre_installationBreadcrumb__zZeMY .ms-Breadcrumb-listItem a:focus-visible {
    outline: 1px solid #000;
}

.fre_breadCrumbItem__2rxn5 {
    margin-right: 8px;
}

.fre_breadCrumbItem__2rxn5:hover {
    font-weight: 600;
}

.fre_fennickSitting__UdVbK {
    position: absolute;
    right: calc(50% - 450px);
    top: 290px;
}

.fre_step__2gGeP {
    margin: 32px 24px;
}

.fre_stepContent__AKJkG {
    max-width: 1300px;
}

.fre_firstStep__mifib {
    display: flex;
}

.fre_firstStep__mifib.fre_withCode__aXCIw {
    display: block;
}

.fre_letterIcon__Ggq3R {
    width: 28px;
    height: 28px;
    background: #0078D4;
    text-align: center;
    position: relative;
    top: 2px;
    border-radius: 45px;
    padding-top: 3px;
    font-weight: 600;
    color: #FFF;
    margin-right: 8px;
}

.fre_stepNumber__k2gip {
    margin-right: 12px;
    display: flex;
    justify-content: center;
}

.fre_appsSetupStepsContainer__9VOV9 {
    margin-left: 6px;
}

.fre_setupOptions__bVikQ.fre_fullHeight__sRUMD .fre_appsSetupStepsContainer__9VOV9 {
    margin: 24px 32px;
}

.fre_appSetupTextContainer__0vwEO {
    display: inline-grid;
}

.fre_titleNoOrder__JJosw {
    margin-left: 38px;
}

.fre_subtitleNoOrder__JBelw {
    margin: 18px 0px 4px 38px;
}

.fre_instructionsList__5PXYD {
    margin-top: 2px;
    margin-left: 78px;
}


.fre_appsSetupStepsContainer__9VOV9 .fre_copyProjectId__orQd0.fre_withText__kA15u {
    margin: 4px 0 0 38px;
    min-height: 32px;
    padding: 0;
    width: fit-content;
}

.fre_appSetupTextContainer__0vwEO span:first-child {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.fre_setupStep__MCJzF .fre_markdownCode__J9lXa {
    font-weight: 400;
    margin-left: 38px;
    max-width: 1000px;
}

.fre_copyProjectId__orQd0 svg {
    filter: invert();
}

.fre_stepNumber__k2gip+span {
    font-weight: 600;
}

.fre_setupStep__MCJzF div {
    display: flex;
    align-items: center;
    width: 100%;
}

.fre_setupSubStep__a2V-n {
    display: flex;
    flex-direction: column;
    align-items: stretch !important;
}

.fre_setupStep__MCJzF {
    margin-top: 24px;
}

.fre_setupStep__MCJzF svg path,
.fre_firstStep__mifib svg path {
    fill: white;
}

.fre_appsSetupNpmLink__6tsGz {
    margin-top: 22px;
}

.fre_appsSetupNpmLink__6tsGz a {
    margin-left: 6px;
}

.fre_appsSetupConfigTitle__im6Yi {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #161514;
}

.fre_appsSetupConfigSubtitle__Ea-iU {
    color: #323130;
    margin-top: 4px;
}

.fre_appsInfoIcon__N7q6k {
    display: flex;
    align-items: center;
    height: 20px;
    margin-left: 4px;
}

.fre_appsInfoIcon__N7q6k svg {
    margin-top: 3px;
}

.fre_appsSetupInput__iYGzg {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    height: 32px;
}

.fre_instructionSetupLink__X-3MG a {
    margin-left: 6px;
    margin-right: 6px;
}

.fre_gettingStartedTilesSeparator__LWcoI {
    height: 1px;
    background: white;
    margin-top: 24px;
}


@media only screen and (max-width: 1300px) {
    .fre_isSettings__ZKH6b .fre_checklistArea__-Q\+e8 {
        margin-top: 20px;
        display: grid;
        grid-template-columns: auto;
        gap: 24px;
        justify-items: center;
    }

    .fre_isSettings__ZKH6b .fre_checklistItems__NLGRN {
        max-width: 100%;
        width: 100%;
        margin: unset;
    }


    .fre_isSettings__ZKH6b .fre_blogItems__OfD90 {
        display: grid;
        grid-row-gap: 24px;
        grid-template-columns: auto;
        grid-column-gap: 24px;
        margin-top: 48px;
        justify-content: center;
    }
}

@media only screen and (max-width: 1440px) {

    .fre_clemKnockingCupAnimation__VDE5l,
    .fre_clementineIllustration__LM1GH,
    .fre_clementineIllustrationGTM__AX\+kA,
    .fre_clementineIllustrationApp__UnVgz {
        display: none;
    }

    .fre_checklistArea__-Q\+e8 {
        margin-top: 20px;
        display: grid;
        grid-template-columns: auto;
        gap: 24px;
        justify-items: center;
    }

    .fre_checklistItems__NLGRN {
        max-width: 100%;
        width: 100%;
        margin: unset;
    }

    .fre_mountainArea__sGU1B {
        max-width: 100%;
        width: 100%;
    }
}
@media only screen and (max-width: 1300px) {
    .fre_blogItems__OfD90 {
        display: grid;
        grid-row-gap: 24px;
        grid-template-columns: auto;
        grid-column-gap: 24px;
        margin-top: 48px;
    }

    .fre_blogUpsell__D1Iak {
        padding: 60px 80px 67px 80px;
    }

}

@media only screen and (max-width: 1110px) {
    .fre_stepsContainerEmbedded__k2CuH .fre_firstStep__mifib.fre_firstStep__mifib.fre_withCode__aXCIw {
        width: unset;
    }
}

@media only screen and (max-width: 1100px) {
    .fre_thirdPlatformsContainer__UZr9h .fre_platformFacts__4dvVI {
        display: grid;
        grid-template-columns: auto;
    }

    .fre_thirdPlatformsContainer__UZr9h .fre_platformFact__O2o1P {
        width: 100%;
        min-width: 100%;
    }
}

@media only screen and (max-width: 900px) {
    .fre_blogItems__OfD90 {
        display: grid;
        grid-row-gap: 24px;
        grid-template-columns: auto;
        grid-column-gap: 24px;
        margin-top: 48px;
    }

    .fre_blogUpsell__D1Iak {
        padding: 60px 80px 67px 80px;
    }

    .fre_setupOptionTiles__hWwv2 {
        display: grid;
        gap: 16px;
        grid-auto-columns: auto;
    }

    .fre_trackingCodeContent__Lgyzc {
        display: inline-block;
    }

    .fre_trackinStep__dVNHa {
        width: 100%;
        min-width: 100%;
    }

    .fre_thirdPlatformsContainer__UZr9h .fre_platformFacts__4dvVI {
        display: grid;
        grid-template-columns: auto;
    }

    .fre_platformFacts__4dvVI.fre_installation__9JrAb {
        margin: 45px 32px 24px 32px;
    }

    .fre_thirdPlatformsContainer__UZr9h .fre_platformFact__O2o1P {
        width: 100%;
        min-width: 100%;
    }
}

@media only screen and (max-width: 800px) {
    .fre_setupOptions__bVikQ,
    .fre_checklist__2BTPW,
    .fre_blogUpsell__D1Iak {
        padding: 60px 80px 67px 80px;
    }

    .fre_firstStep__mifib {
        width: unset;
    }

    .fre_platformFact__O2o1P {
        width: 100%;
        max-width: 100%;
    }

}

@media only screen and (max-width: 650px) {

    .fre_setupOptions__bVikQ,
    .fre_checklist__2BTPW,
    .fre_blogUpsell__D1Iak {
        padding: 60px 24px 67px 24px;
    }
}

@media only screen and (max-width: 500px) {
    .fre_needHelpContent__BKnh0 .fre_step__2gGeP {
        min-width: unset;
    }
}

.fre_projectCreation__p9pqB,
.fre_promoEmails__\+aW86,
.fre_fre__P3lkr {
    padding: 0 0 16px;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0px 25.6px 57.6px 0px rgba(0, 0, 0, 0.22), 0px 4.8px 14.4px 0px rgba(0, 0, 0, 0.18);
}

.fre_titleContainer__Mq3e2 {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin: 16px 24px 20px 24px;
}

.fre_newProjectModalTitle__ElZbp {
    font-size: 20px;
    line-height: 28px;
}

.fre_title__pjNAN {
    font-size: 20px;
    line-height: 28px;
    margin: 16px 24px 20px 24px;
}

.fre_projectCreation__p9pqB .fre_close__kcJni {
    color: #323130;
    text-align: center;
    margin-left: auto;
}

.fre_projectCreation__p9pqB .fre_close__kcJni:hover {
    color: #323130;
}

.fre_container__dHIj1 {
    margin: 0 20px 8px;
    gap: 32px;
}

.newProjFormContainer .fre_form__PmoyO {
    min-width: unset;
}

.fre_form__PmoyO {
    gap: 16px;
    min-width: 398px;
    justify-content: center;
}

.fre_form__PmoyO > .fre_form__PmoyO {
    min-height: 284px;
    height: 100%;
}

.fre_wihtIndustryProjectCreation__rx3GJ .fre_unsupportedPlatformForm__xuZGf,
.fre_wihtIndustryProjectCreation__rx3GJ .fre_form__PmoyO > .fre_form__PmoyO {
    min-height: 356px;
}

.fre_platformSelectorContainer__kXsY3 > button {
    margin-top: 8px;
}

.fre_platformSelectorContainer__kXsY3 .fre_versionSupportMessage__Z0rTg {
    display: flex;
    margin-top: 8px;
    color: #605E5C;
}

.fre_versionSupportMessage__Z0rTg > i {
    height: 20px;
}

.fre_versionSupportMessage__Z0rTg > button {
    margin-left: 4px;
}
 
.fre_pivots__428g8 {
    margin-bottom: 8px;
}

.fre_projectCreation__p9pqB .fre_pivots__428g8 button {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #242424;
    line-height: 20px;
}

.fre_projectCreation__p9pqB .fre_relative__ifMfW svg,
.fre_projectCreation__p9pqB .fre_relative__ifMfW .fre_image__1huR1 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
}

.fre_projectCreation__p9pqB .fre_container__dHIj1 {
    flex-grow: 1;
}

.fre_projectCreation__p9pqB .fre_form__PmoyO {
    justify-content: flex-start;
}

.fre_projectCreation__p9pqB .fre_action__vM-P4 {
    margin-top: auto;
}

.fre_relative__ifMfW.fre_finnickPlaceholder__SjJ1O {
    top: -24px;
}

.fre_backChevron__2JUD4 {
    margin: 16px -16px 20px 16px;
    height: 28px;
}

.fre_backChevron__2JUD4 i {
    height: 24px;
}

.fre_unsupportedPlatformForm__xuZGf {
    gap: 24px;
    min-width: 398px;
}

.fre_unsupportedPlatformForm__xuZGf > span {
    margin-top: 12px;
}

.fre_unsupportedPlatformForm__xuZGf .ms-Checkbox label {
    gap: 0;
}

.fre_unsupportedPlatformForm__xuZGf .ms-Checkbox-text {
    margin: -4px 0 0 8px;
}

.fre_unsupportedPlatformForm__xuZGf .fre_action__vM-P4 {
    margin-top: auto;
}

@media screen and (max-width: 890px) {
    .fre_projectCreation__p9pqB .fre_relative__ifMfW {
        display: none;
    }

    .fre_projectCreation__p9pqB .fre_image__1huR1,
    .fre_promoEmails__\+aW86 .fre_image__1huR1,
    .fre_fre__P3lkr .fre_image__1huR1 {
        display: none;
    }
}

@keyframes fre_fadeOut__2HAes {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.fre_promoEmails__\+aW86 .fre_image__1huR1,
.fre_fre__P3lkr .fre_image__1huR1 {
    height: 310px;
}

.fre_projectCreation__p9pqB .fre_image__1huR1.fre_fadeIn__JbI5Y {
    animation: fre_fadeOut__2HAes 0.25s reverse;
}

.fre_projectCreation__p9pqB .fre_image__1huR1.fre_fadeOut__2HAes {
    animation: fre_fadeOut__2HAes 0.25s;
    opacity: 0;
}

.fre_projectCreation__p9pqB .fre_relative__ifMfW {
    position: relative;
    min-width: 400px;
    width: 400px;
    height: 300px;
    align-self: center;
}

.projectModalContainerInstall {
    max-height: calc(100% - 28px);
}

.fre_action__vM-P4 {
    gap: 8px;
    width: 100%;
    height: 48px;
    align-items: end;
    justify-content: end;
    margin-bottom: 8px;
}

.fre_websitePivotReplacement__m6eFx {
    font-weight: 600;
}

.fre_statement__fvr2H {
    color: #605E5C;
    font-size: 12px;
}

.fre_statement__fvr2H a {
    color: #0078D4;
    text-decoration-line: none;
}

.fre_statement__fvr2H a:hover {
    text-decoration-line: underline;
}

.fre_statement__fvr2H a:focus-visible {
    outline: 1px solid #000;
}

.fre_projectCreation__p9pqB .ms-TextField,
.fre_promoEmails__\+aW86 .ms-TextField,
.fre_fre__P3lkr .ms-TextField {
    height: 68px;
}

.fre_projectCreation__p9pqB .ms-TextField-errorMessage,
.fre_promoEmails__\+aW86 .ms-TextField-errorMessage,
.fre_fre__P3lkr .ms-TextField-errorMessage {
    padding-top: 2px;
}

.fre_projectCreation__p9pqB .ms-TextField label,
.fre_projectCreation__p9pqB .ms-Dropdown-container label,
.fre_promoEmails__\+aW86 .ms-TextField label,
.fre_fre__P3lkr .ms-TextField label {
    padding: 0;
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 400;
    color: #242424;
    line-height: 20px;
}

.fre_projectCreation__p9pqB .ms-Checkbox label,
.fre_promoEmails__\+aW86 .ms-Checkbox label,
.fre_fre__P3lkr .ms-Checkbox label {
    gap: 4px;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.fre_checkboxLabel__j5Edl {
    margin-left: 4px;
    white-space: nowrap;
}

.fre_checkboxLabel__j5Edl.fre_mobile__eLuFl {
    white-space: normal;
}

.fre_checkboxLabel__j5Edl a {
    margin-left: 4px;
    color: #0078D4;
    text-decoration-line: underline;
}

.fre_checkboxLabel__j5Edl a:focus-visible {
    outline: 1px solid #000;
}

.fre_checkboxLabel__j5Edl span {
    margin-left: 0;
}

.fre_backgroundLayer__AbTvo {
    display: flex;
    align-content: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #EFF6FC;
}

.fre_modal__Q\+Sk4 {
    width: min-content;
    height: min-content;
    max-height: 80%;
    overflow: auto;
    background-color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 8px;
    box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
}

.fre_modal__Q\+Sk4 .fre_projectCreation__p9pqB {
    min-height: 430px;
}

.fre_modal__Q\+Sk4 .fre_projectCreation__p9pqB.fre_wihtIndustryProjectCreation__rx3GJ {
    max-height: calc(100vh - 92px); /*60px for header and 32px margin*/
    min-height: unset;
    overflow: auto;
}

.fre_modal__Q\+Sk4 .fre_projectCreation__p9pqB.fre_wihtIndustryProjectCreation__rx3GJ .fre_form__PmoyO > .fre_form__PmoyO,
.fre_modal__Q\+Sk4 .fre_projectCreation__p9pqB.fre_wihtIndustryProjectCreation__rx3GJ .fre_unsupportedPlatformForm__xuZGf {
    min-height: 414px;
}

.fre_projectCreation__p9pqB.fre_wihtIndustryProjectCreation__rx3GJ .ms-TextField-errorMessage {
    font-size: 11px;
}

.fre_modal__Q\+Sk4.fre_mobile__eLuFl {
    width: 90%;
}

.fre_modal__Q\+Sk4.fre_mobile__eLuFl .fre_form__PmoyO {
    min-width: unset;
    width: 100%;
}

.fre_modal__Q\+Sk4.fre_mobile__eLuFl .fre_subtitle__T-lWk {
    width: 100%;
}

.fre_attestationContainerWrapper__16\+bv {
    max-height: 252px;
    border: 1px solid #D1D1D1;
    background: #FAFAFA;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
}

.fre_attestationContainer__Feaoc {
    overflow-y: auto;
    padding: 16px 8px 16px 30px;
}

.fre_attestationContainer__Feaoc p {
    margin-left: -14px;
}

.fre_attestationContainer__Feaoc strong {
    text-decoration: underline;
}

.fre_attestationContainer__Feaoc li::marker {
    font-weight: 600;
}

.fre_attestationContainer__Feaoc .fre_alphaList__cXT9J {
    list-style-type: lower-alpha;
    padding-left: 24px;
}

.fre_attestationContainer__Feaoc .fre_romanList__IjMpf {
    list-style-type: lower-roman;
    padding-left: 24px;
}

.fre_attestationContainerWrapper__16\+bv .fre_acceptTerms__iFChP {
    width: auto;
    background: #FFF;
    box-shadow: 0px -3.2px 7.2px 0px rgba(0, 0, 0, 0.08), 0px -0.6px 1.8px 0px rgba(0, 0, 0, 0.10);
    border-radius: 0 0 4px 4px;
    padding: 14px 24px;
    display: flex;
    justify-content: center;
}

.fre_attestationContainerWrapper__16\+bv .fre_acceptTerms__iFChP label {
    align-items: center;
    gap: 0;
}

.fre_attestationContainerWrapper__16\+bv .fre_acceptTerms__iFChP .ms-Checkbox-checkbox {
    margin-right: 0;
}

.fre_projectCreationAttContainer__jgQAk > div:first-of-type {
    color: #605E5C;
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 12px;
}

@media only screen and (max-width: 680px) {

    .solidLightBlueOverlay {
        background: #EFF6FC;
        top: 60px;
    }

    .projectModalContainerInstall {
        top: 84px;
        align-self: flex-start;
    }

    .projectModalContainerInstall .ms-Modal-scrollableContent {
        max-height: calc(100vh - 86px - 25px);
        max-height: calc(100svh - 86px - 25px);
    }

    .fre_projectCreation__p9pqB {
        border-radius: 0px;
    }

    .fre_projectCreation__p9pqB .ms-TextField label,
    .fre_projectCreation__p9pqB .ms-Dropdown-container label {
        font-weight: 600;
    }

    .fre_projectCreation__p9pqB .ms-TextField {
        height: 80px;
    }

    .fre_form__PmoyO .ms-TextField-fieldGroup,
    .fre_form__PmoyO .ms-Dropdown-title,
    .fre_platformSelectorContainer__kXsY3 .ms-Dropdown-title,
    .fre_unsupportedPlatformForm__xuZGf .ms-Dropdown-title {
        border-width: 0 0 1px 0;
        border-radius: 0;
    }

    .fre_form__PmoyO .ms-TextField-fieldGroup::after,
    .fre_form__PmoyO .ms-Dropdown:focus::after,
    .fre_platformSelectorContainer__kXsY3 .ms-Dropdown:focus::after,
    .fre_unsupportedPlatformForm__xuZGf .ms-Dropdown:focus::after {
        border-color: #827DFF;
        border-width: 0 0 1px 0;
        border-radius: 0;
    }
}

@media only screen and (max-width: 470px) {
    .fre_form__PmoyO, .fre_unsupportedPlatformForm__xuZGf {
        min-width: 300px;
    }
}

.header_header__fIQUh {
    height: 60px;
    padding: 14px 32px;
    color: #3B3A39;
    background-color: white;
}

.header_header__fIQUh + div:not(.benchBanner) {
    height: calc(100% - 60px);
}

.header_msLogo__PFnQS {
    margin-right: 18px;
    position: relative;
    top: 3px;
}

.header_msLogo__PFnQS:focus-visible,
.header_clarityLogo__zYzCf:focus-visible {
    outline: 1px solid #000;
}

.header_clarityLogo__zYzCf {
    font-size: 20px;
    color: black;
    position: relative;
    line-height: 28px;
    margin-right: 36px;
}

.header_logoSeparator__a6llf {
    margin-left: 18px;
}

.header_logoSeparator__a6llf::before {
    height: 18px;
    width: 1px;
    background-color: black;
    content: "";
    display: block;
    position: absolute;
    left: -18px;
    top: 5px;
}

.header_clarityLogo__zYzCf:hover span::before {
    content: "";
    display: block;
    background: #3B3A39;
    height: 2px;
    position: absolute;
    width: 100%;
    bottom: -5px;
}

.header_clarityAppLogo__GI0WV {
    margin-top: 6px;
    height: 32px;
}

.header_myProjectsButton__A3fj\+ .ms-Button + span {
    display: none;
}

.header_myProjectsButton__A3fj\+ .ms-Button-label {
    font-weight: 400;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 120px;
    line-height: 20px;
}

.header_myProjectsButtonDisabled__NGGsd {
    border: 0 !important;
}

.header_myProjectsButtonDisabled__NGGsd span {
    color: #3B3A39 !important;
}

.header_myProjectsButton__A3fj\+ button {
    border: 0;
    color: #3B3A39;
}

.header_myProjectsButton__A3fj\+ button:hover {
    color: black;
    background-color: #EDEBE9;
}

.header_myProjectsButton__A3fj\+ button:first-child {
    padding: 0;
    text-align: left;
    min-width: unset;
    padding: 0 12px 0 8px;
}

.header_myProjectsButton__A3fj\+ button:first-child span {
    margin: 0;
}

.header_noNotificationsIcon__MR0Xg,
.header_actionButton__430XA {
    margin-right: 20px;
}

.header_noNotificationsIcon__MR0Xg svg,
.header_actionButton__430XA svg{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

.header_noNotificationsIcon__MR0Xg circle {
    fill: none;
}

.header_notificationsCommandButton__jLUNZ {
    box-sizing: border-box;
}

.header_notificationsCommandButton__jLUNZ:hover {
    background: rgb(243, 242, 241);
    color: rgb(0, 120, 212);
    margin: 0px;
    width: 100%;
}

.header_identity__0AzRU button {
    margin: 0;
    padding: 0;
    margin-left: 12px;
}

.header_hamburger__lqpT0 {
    color: #000;
}

.header_identity__0AzRU button i {
    color: #161514;
}

.header_hamburgerNav__EXlYD button {
    border: none;
    text-transform: capitalize;
    text-align: left;
    width: 100%;
    color:#3B3A39;
    height: 44px; /*to match the FAQ nav link button height*/
}

.header_hamburgerNav__EXlYD span {
    font-weight: normal;
}

.header_hamburgerNav__EXlYD button:hover,
.header_feedbackButton__WsBhO:hover {
    background-color: #EAEAFF;
}

.header_hamburgerNav__EXlYD button.ms-Button--default.is-disabled,
.header_hamburgerNav__EXlYD button.ms-Button.is-disabled {
    border: none;
}

.header_hamburgerNavGroup__9oLFD .ms-Nav-chevronButton {
    left: 12px;
}

.header_hamburgerNavGroup__9oLFD .ms-Nav-chevronButton + button {
    padding-left: 40px;
}

.header_hamburgerNavGroup__9oLFD .ms-Nav-compositeLink.is-disabled:hover .ms-Button {
    background: unset;
    cursor: auto;
}

.header_hamburgerNavGroup__9oLFD li ul .ms-Button-flexContainer {
    padding-left: 27px;
}

.header_feedbackButton__WsBhO {
    line-height: 44px;
    cursor: pointer;
    width: 100%;
}

.header_feedbackButton__WsBhO span,
.header_feedbackButton__WsBhO i {
    color:#3B3A39;
}

.header_commandButton__GdApk {
    height: 32px;
    margin-left: 32px;
}

.header_commandButton__GdApk.ms-Button {
    padding: 0 4px;
}

.header_commandButton__GdApk .ms-Button-textContainer {
    height: 16px;
}

.header_languageDropdownDivider__s9Khn {
    margin-left: 24px;
}

.header_localizationDropdown__pvAQU {
    margin: 0 16px 0 24px;
    width: 110px;
}

.header_localizationDropdown__pvAQU .ms-Dropdown:focus::after,
.header_localizationDropdown__pvAQU .ms-Dropdown-title {
    border: unset;
}

.header_localizationDropdown__pvAQU .ms-Dropdown:focus-visible {
    outline: 1px solid #000;
}

.header_localizationDropdown__pvAQU .ms-Dropdown-title:hover {
    background: #F5F5F5;
}

.header_localizationDropdown__pvAQU .ms-Dropdown.is-open .ms-Dropdown-title {
    background: #EBEBEB;
}

.header_publicHamburgerMenu__26tLr {
    order: -1;
    color: #161514;
    margin-right: 18px;
}

.header_publicHamburgerMenu__26tLr:hover {
    order: -1;
    color: #161514;
}

.header_publicHamurgerNav__za-Jr button.ms-Button {
    padding-left: 24px;
}

.header_publicHamurgerNav__za-Jr a.ms-Button {
    padding-left: 32px;
}

.header_hamburgerFeedbackButton__fozC8 {
    color: #323130;
    padding-left: 32px;
}

.header_signIn__3yg9w {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-color: white;
    padding: 28px 0 38px;
    box-shadow: 0px 2.4px 7.2px rgba(0, 0, 0, 0.18), 0px 12.8px 28.8px rgba(0, 0, 0, 0.22);
    border-radius: 2px;
}

.hamburgerPanel div.header_hamburgerFeedbackButton__fozC8:hover {
    color: #323130;
    background-color: #EAEAFF;
}

.hamburgerPanel div.ms-Panel-commands {
    padding-top: 0;
}

.tabs {
    position: absolute;
    height: 45px;
}

.tabs button {
    padding: 0;
    font-size: 12px;
}

.tabs button:last-child {
    margin: 0;
}

.tabs .ms-Pivot-linkContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.tabs .ms-Pivot-icon {
    line-height: 14px;
    margin: 0;
    height: 20px;
}

.tabs .ms-Pivot-text {
    line-height: 20px;
    margin: 0;
}

@media screen and (max-width: 550px) {
    .header_myProjectsButton__A3fj\+ .ms-Button-label {
        max-width: 80px;
    }
    
    .header_clarityLogo__zYzCf {
        margin-right: 28px;
    }
}

@media only screen and (max-width: 500px) {
    .header_signIn__3yg9w {
        border: none;
        box-shadow: unset;
        top: 58px;
        left: 0;
        transform: unset;
        width: 100vw;
        height: 100vh;
        overflow: auto;
        padding-bottom: 55px;
        border-radius: 0;
        border-top: 1px solid #EDEBE9;
    }
}

@media screen and (max-width: 400px) {
    .header_clarityLogo__zYzCf {
        margin-right: 12px;
    }

    .header_identity__0AzRU > button:first-child {
        margin-left: 0
    }
}

.header_dashboardSubMenu__jpdu0 {
    background: white;
    position: absolute;
    top: 52px;
    z-index: 101;
    left: 0;
    border-radius: 0px 0px 8px 8px;
    box-shadow: 0px 0.3px 0.9px 0px rgba(0, 0, 0, 0.10), 0px 1.6px 3.6px 0px rgba(0, 0, 0, 0.13);
    padding: 8px;
    opacity: 0;
    transform: translateY(-20px);
    animation: header_showButton__AoTkn 300ms ease-in forwards;
}

.header_dashboardSubMenu__jpdu0::after {
    content: "";
    width: 100%;
    height: 8px;
    background: white;
    display: block;
    position: absolute;
    z-index: 3;
    left: 0;
    top: -4px;
}

@keyframes header_showButton__AoTkn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.header_dashboardSubMenu__jpdu0 .ms-ChoiceFieldGroup-flexContainer {
    display: flex;
    align-items: center;
}

.header_dashboardSubMenu__jpdu0 .ms-ChoiceFieldGroup-flexContainer > div {
    margin-top: 0;
    padding: 5px 12px;
    border-top: 1px solid #0078D4;
    border-bottom: 1px solid #0078D4;
}

.header_dashboardSubMenu__jpdu0 .ms-ChoiceField:hover {
    background: #EFF6FC;
}

.header_dashboardSubMenu__jpdu0 .ms-ChoiceField:first-child {
    border-radius: 4px 0px 0px 4px;
    border: 1px solid #0078D4;
    border-right: unset;
}

.header_dashboardSubMenu__jpdu0 .ms-ChoiceField:not(:first-child):not(:last-child) {
    border-left: 1px solid #0078D4;
}

.header_dashboardSubMenu__jpdu0 .ms-ChoiceField:last-child {
    border-radius: 0px 4px 4px 0px;
    border: 1px solid #0078D4;
}

.header_dashboardSubMenu__jpdu0 .ms-ChoiceField-field.is-checked::after {
    background: url(https://claritystatic.azureedge.net/images/selectedCheckmark.svg);
    background-repeat: no-repeat;
    height: 20px;
    width: 20px;
    left: 0;
    top: 0;
    border-width: 0;
}

.header_dashboardSubMenu__jpdu0 .ms-ChoiceField-field::before {
   width: 16px;
   height: 16px;
   top: 2px;
   left: 2px;
}

.header_dashboardSubMenu__jpdu0 .ms-ChoiceField-field:not(.is-checked):hover:after {
    content: unset;
}

.header_dashboardSubMenu__jpdu0 label {
    text-wrap: nowrap;
}

@media only screen and (max-width: 400px) {
    .header_header__fIQUh {
        padding: 14px 12px;
    }
}

@media only screen and (max-width: 320px) {
    .header_header__fIQUh .header_logoSeparator__a6llf {
        margin-left: 10px;
    }

    .header_header__fIQUh .header_clarityLogo__zYzCf,
    .header_header__fIQUh .header_hamburger__lqpT0 {
        margin-right: 6px;
    }

    .header_header__fIQUh .header_msLogo__PFnQS {
        margin-right: 0;
    }

    .header_myProjectsButton__A3fj\+ button:first-child {
        padding: 0 0 0 8px;
    }

    .header_logoSeparator__a6llf::before {
        left: -5px;
    }
}

@media screen and (prefers-contrast: more) {
    .header_header__fIQUh path {
        fill: white;
    }
}

/* Predictive heatmap banner slider rules*/

.heatmapSlider_comparisonItem__koZNX img{
  width: 100%;
  height: auto;
  vertical-align: middle;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

.heatmapSlider_comparisonSlider__Nhv29 {
  max-width: 800px;
  position: relative;
  overflow: hidden;
  margin-top: 40px;
  min-height: 60px;
}

.heatmapSlider_comparisonItem__koZNX, .heatmapSlider_comparisonItemTop__t\+Gf3 {
  overflow: hidden;
}

.heatmapSlider_comparisonItemTop__t\+Gf3 {
  z-index: 1;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
}

.heatmapSlider_comparisonItemTop__t\+Gf3 img {
  height: 100%;
  object-fit: cover;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

.heatmapSlider_handle__gBGJm {
  position: absolute;
  width: 0px;
  height: 100%;
  background: white;
  z-index: 3;
  cursor: col-resize;
  top: 0;
}

.heatmapSlider_handle__gBGJm svg {
  display: block;
  position: absolute;
  top: calc(50% - 30px);
  right: calc(50% - 30px);
  height: 60PX;
  width: 60px;
  background: transparent;
  border-radius: 30px;
  padding: 0PX;
}

/*less than a 1000px (mobile screen)*/
@media only screen and (max-width: 1000px) {
  .heatmapSlider_comparisonSlider__Nhv29 {
    margin-top: 0;
  }
}
.heatmaps_heatmapContainer__Xgj\+5,
.heatmaps_emptyHeatmapContainer__DyZKa {
    flex: 1 1 auto;
    overflow: auto;
}

.heatmaps_heatmapContent__66WGc {
    display: flex;
    overflow: hidden;
    flex: 1;
    margin: 0px 16px 0px 12px;
    border-radius: 8px 8px 0 0 ;
    min-width: 394px;
}

.heatmaps_primary__JFHCO .heatmaps_heatmapContent__66WGc.heatmaps_compare__jSoDP {
    margin-left: 0px;
}

.heatmaps_secondary__4ZSpZ .heatmaps_heatmapContent__66WGc.heatmaps_compare__jSoDP {
    margin-right: 0px;
}

.heatmaps_heatmapVisual__HgEUV {
    overflow:  hidden auto;
    display: flex;
    position: relative;
    justify-content: center;
    flex: 1;
    background-color: #fff;
}

.heatmaps_primary__JFHCO .heatmaps_popularPageContainer__nUW2F,
.heatmaps_secondary__4ZSpZ .heatmaps_popularPageContainer__nUW2F {
    margin-bottom: 0;
    padding: 16px 24px 0;
}

.heatmaps_primary__JFHCO.heatmaps_tabContent__pF6-R {
    flex: 0 1 auto;
}

.heatmaps_secondary__4ZSpZ.heatmaps_tabContent__pF6-R {
    flex: 1 1 0;
}

.heatmaps_primary__JFHCO .heatmaps_popularPageContainer__nUW2F {
    margin-left: 16px;
}

.heatmaps_secondary__4ZSpZ .heatmaps_popularPageContainer__nUW2F {
    margin-right: 16px;
}

.heatmaps_popularPageContainer__nUW2F {
    margin: 0 21px 16px 16px;
    border-radius: 8px;
    padding: 32px 48px 0;
    background-color: #fff;
    height: 98%;
    gap: 24px;
    overflow: auto;
}

.heatmaps_heatmapZeroStateTitle__giYl5 {
    gap: 4px;
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
}

.heatmaps_heatmapURLV2Title__X9Qn5 {
    gap: 4px;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
}

.heatmaps_heatmapZeroStateSubTitle__mBonB{
}

.heatmaps_zeroStateControls__EQuuy {
    display: flex;
    align-items: center;
    gap: 32px;
}

.heatmaps_zeroStateControls__EQuuy .heatmaps_topListSortButton__faH3E {
    border: none;
}

.heatmaps_zeroStateControls__EQuuy .heatmaps_urlToggle__bfs4i label{
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #242424;
}

.heatmaps_zeroStateControls__EQuuy .heatmaps_urlToggle__bfs4i div{
    margin-bottom: 0;
}

.heatmaps_viewHeatmapAction__Mi2T1 {
    display: flex;
    width: max-content;
    align-items: center;
}

.heatmaps_viewHeatmapAction__Mi2T1 button:hover {
    background: transparent;
}

.heatmaps_topListSortButton__faH3E {
    border: none;
    text-align: left;
    padding-left: 0px;
}

.heatmaps_topListSortButton__faH3E span {
    color: #323130;
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
}

.heatmaps_topListSortButton__faH3E i {
    color: #0078D4;
}

.heatmaps_topListSortButton__faH3E.heatmaps_sortFlip__-we0q span i {
    transform: rotate(180deg);
}

.heatmaps_urlContent__MvNJN {
    padding: 0 32px 0 28px;
}

.heatmaps_urlContent__MvNJN table {
    width: 100%;
}

.heatmaps_urlContent__MvNJN tr:hover {
    cursor: pointer;
    background-color: #EAEAFF;
}

.heatmaps_urlContent__MvNJN .heatmaps_zeroHeader__9-b6C:hover {
    cursor: default;
    background-color: initial;

}

.heatmaps_urlContent__MvNJN td {
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid #EDEBE9;
    padding: 10px 0 10px 8px;
    white-space: nowrap;
    width: auto;
}

.heatmaps_urlContent__MvNJN td:first-child{
    width: 80%;
}

.heatmaps_zeroHeader__9-b6C {
    font-weight: 600;
}

.heatmaps_zeroHeader__9-b6C .ms-TooltipHost {
    display: flex;
    align-items: center;
    width: fit-content;
}

.heatmaps_zeroHeader__9-b6C .heatmaps_infoBubbleIcon__eY64z {
    height: 20px;
    margin-left: 4px;
}

.heatmaps_urlContent__MvNJN.heatmaps_urlContentWithTitle__DATz2 td:first-child {
    width: 20px;
    padding-right: 4px;
}

.heatmaps_urlContent__MvNJN.heatmaps_urlContentWithTitle__DATz2 td {
    padding: 10px 0 10px 12px;
}

.heatmaps_urlContent__MvNJN tr:last-child td {
    border-bottom: 0px;
}

.heatmaps_urlColumn__0P4m2 {
    display: inline-flex;
    gap: 8px;
}

.heatmaps_urlColumn__0P4m2 span,
.heatmaps_urlName__8q5Wq span,
.heatmaps_pageTitle__rDfeI span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.heatmaps_urlColumn__0P4m2 span:first-child{
    width: 20px;
}

.heatmaps_pageTitle__rDfeI {
    width: 450px;
}

.heatmaps_pageTitle__rDfeI .heatmaps_titleName__BNQno {
    max-width: 412px;
    display: inline-block;
    vertical-align: bottom;
}

.heatmaps_pageTitle__rDfeI .heatmaps_noTitle__Gc\+DO {
    color: gray;
}

.heatmaps_pageTitle__rDfeI .heatmaps_andMore__cxMcn {
    color: gray;
    margin-left: 4px;
    font-size: 12px;
}

.heatmaps_urlName__8q5Wq {
    max-width: 900px;
}

.heatmaps_urlName__8q5Wq span {
    width: 95%;
    display: inline-block;
}

.heatmaps_noHeat__iiOMX {
    flex: 1;
    display: flex;
    justify-content: center;
    background-color: #fff;
    margin: 0 12px 12px 12px;
    border-radius: 8px;
}

.heatmaps_noHeat__iiOMX img {
    width: 250px;
}

.heatmaps_noHeat__iiOMX.heatmaps_zeroState__M5ldR {
    margin-bottom: 0;
}

.heatmaps_popularPageContainer__nUW2F .heatmaps_showMoreShowLess__gBjIS {
    color: #0078D4;
    text-decoration: underline;
}

.heatmaps_heatmapHeader__pN0hg {
    padding: 8px 16px;
    margin: 0px 16px 12px 16px;
    align-items: center;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0px 4.8px 14.4px 0px rgba(131, 126, 255, 0.30);
    gap: 8px;
    position: relative;
    height: 48px;
}

.heatmaps_heatmapHeader__pN0hg button:disabled {
    border-color: lightgray;
    color: lightgray;
}

.heatmaps_heatmapHeader__pN0hg button:disabled path {
    fill: lightgray;
}

.heatmaps_heatmapButtonGroup__BAVHX {
    display: flex;
    align-items: flex-start;
    height: 32px;
}

.heatmaps_heatmapButtonGroup__BAVHX button#heatmaps_button_heatmapType_Click__0aVkt {
    width: 100px;
}

.heatmaps_heatmapDeviceButton__j6Tpj {
    width: 40px;
    min-width: 40px;
}

.heatmaps_heatmapDeviceButtonCollapsed__cnE6e {
    width: 60px;
    min-width: 60px;
}

.heatmaps_heatmapTypeButtonCollasped__cmb9d {
    border-radius: 4px 0 0 4px !important;
}

.heatmaps_heatmapTypeButton__jf1nL {
    height: 32px;
    border: 1px solid #0078D4;
    font-weight: 600;
    padding-left: 5px;
    padding-right: 5px;
}

.heatmaps_heatmapTypeButton__jf1nL :hover,
.heatmaps_heatmapTypeButton__jf1nL :focus,
.heatmaps_heatmapTypeButton__jf1nL i,
.heatmaps_heatmapTypeButton__jf1nL i :hover {
    color: #004578;
}

.heatmaps_heatmapTypeButton__jf1nL i,
.heatmaps_heatmapDeviceButtonCollapsed__cnE6e i {
    height: 20px;
}

.heatmaps_heatmapTypeButton__jf1nL i[data-icon-name="ChevronDown"],
.heatmaps_heatmapDeviceButtonCollapsed__cnE6e i[data-icon-name="ChevronDown"] {
    height: unset;
}

.heatmaps_heatmapTypeMenuItem__HVZpB .heatmaps_ms-ContextualMenu-link__hLPVb {
    background-color: #000;
}

.heatmaps_heatmapTypeMenuItem__HVZpB button i {
    display: flex;
    align-items: center;
}

.heatmaps_heatmapTypeMenuItem__HVZpB button.is-disabled i svg path {
    fill: lightgray;
}

.heatmaps_moreClickButton__mH1kG {
    width: 10px;
    border: 1px solid;
    border-left: none;
    border-right: none;
    background: #fff;
    border-radius: 0;
}

.heatmaps_leftButton__mtu3Y ,
.heatmaps_leftButtonApps__0v7Ef {
    display: flex;
}

.heatmaps_leftButton__mtu3Y button:first-child,
.heatmaps_leftButtonApps__0v7Ef button:first-child {
    border-radius: 4px 0px 0px 4px;
    border-right-width: 0px;
}

.heatmaps_leftButtonApps__0v7Ef button:nth-child(2) {
    border-radius: 0px 4px 4px 0px;
    border-right: 1px solid;
    padding: 0 12px;
}

.heatmaps_leftButton__mtu3Y button:nth-child(2) {
    border-radius: 0px;
    border-right-width: 0px;
    padding: 0 12px;
}

.heatmaps_centerButton__xL6BL button {
    border-radius: 0px;
    border-right-width: 0px;
}

.heatmaps_centerButtonAreamapV2__X-MnR button {
    border-radius: 0px;
    border-right: 1px solid;
}

.heatmaps_rightButton__BfeWb button {
    border-radius: 0px 4px 4px 0px;
}

.heatmaps_heatmapHeaderInfoBubble__FmqxA {
    padding: 8px;
}

.heatmaps_heatmapInfoTitle__JkS7g {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.heatmaps_heatmapInfoSubtitle__8X3Lg {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
}

.heatmaps_heatmapInfoImage__Kr3NF {
    width: 163px;
    height: 92px;
    margin-right: 6px;
}

.heatmaps_heatmapInfoImageVertical__JzTSI {
    width: 200px;
    height: 113px;
}

.heatmaps_heatmapInfoList__Tgx8t,
.heatmaps_heatmapInfoListV2__nREjC,
.heatmaps_heatmapInfoListVertical__GHvvu {
    display: flex;
    padding-top: 13px;
}

.heatmaps_heatmapInfoListV2__nREjC {
    padding-top: 26px;
}

.heatmaps_heatmapInfoListVertical__GHvvu {
    flex-direction: column;
    gap: 16px;
    padding: 8px;
}

.heatmaps_listItemTitle__CFGwx {
    color: #333;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

.heatmaps_heatmapInfoListItem__VXwK\+ {
    margin-left: 10px;
}


.heatmaps_heatmapInfoListItemVertical__cYPU4 ul,
.heatmaps_heatmapInfoListItem__VXwK\+ ul {
    margin-left: 15px;
}

.heatmaps_heatmapInfoListItemVertical__cYPU4 li,
.heatmaps_heatmapInfoListItem__VXwK\+ li,
.heatmaps_heatmapInfoListItemVertical__cYPU4 span,
.heatmaps_heatmapInfoListItem__VXwK\+ span,
.heatmaps_heatmapInfoListDesc__9ozvQ {
    margin-top: 3px;
    font-size: 12px;
    line-height: 16px;
    color: #666;
}

.heatmaps_heatmapInfoListItemVertical__cYPU4 span,
.heatmaps_heatmapInfoListItem__VXwK\+ span {
    color: #333;
    font-weight: 600;
}

.heatmaps_heatmapHeaderRightStack__KoGrG {
    display: flex;
    position: absolute;
    right: 16px;
    align-items: center;
}

.heatmaps_heatmapHeaderRightStack__KoGrG button {
    padding-left: 8px;
    padding-right: 8px;
}

.heatmaps_heatmapHeaderRightStack__KoGrG.heatmaps_narrow__AiA3P button {
    min-width: unset;
    width: 32px;
}

.heatmaps_heatmapHeaderRightStack__KoGrG.heatmaps_narrow__AiA3P button i {
    padding-left: 8px;
}

.heatmaps_heatmapHeaderLeftStack__iUwHL {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}

.heatmaps_copilotInsightsButton__YETek,
.heatmaps_changeScreenshotButton__VtACB {
    margin-left: 12px;
}

.heatmaps_changeScreenshotButton__VtACB.heatmaps_compare__jSoDP,
.heatmaps_copilotInsightsButton__YETek.heatmaps_compare__jSoDP {
    min-width: 32px;
    width: 32px;
}

.heatmaps_changeScreenshotButton__VtACB.heatmaps_compare__jSoDP i,
.heatmaps_copilotInsightsButton__YETek.heatmaps_compare__jSoDP i {
    padding-left: 8px;
}

.heatmaps_heatmapFooter__tpxJG {
    margin: 0 16px 12px 12px;
    display: flex;
    height: 50px;
    background-color: #fff;
    align-items: center;
    box-shadow: 0px 4.8px 14.4px 0px rgba(131, 126, 255, 0.30);
    padding: 14px 16px;
    border-radius: 8px;
    position: relative;
    min-width: 394px;
}

.heatmaps_heatmapFooter__tpxJG.heatmaps_twoline__jLNwS {
    height: 74px;
    flex-direction: column;
    gap: 8px;
}

.heatmaps_heatmapFooter__tpxJG.heatmaps_primary__JFHCO {
    margin-right: 0px;
    margin-left: 0px;
    border-radius: 8px 0 0 8px;
    flex-direction: row-reverse;
}

.heatmaps_heatmapFooter__tpxJG.heatmaps_zero__Xc15-.heatmaps_primary__JFHCO {
    margin-left: 12px;
}

.heatmaps_heatmapFooter__tpxJG.heatmaps_zero__Xc15-.heatmaps_secondary__4ZSpZ {
    margin-right: 12px;
}

.heatmaps_heatmapFooter__tpxJG.heatmaps_secondary__4ZSpZ {
    margin-left: 0px;
    margin-right: 0px;
    border-radius: 0 8px 8px 0;
}

.heatmaps_heatmapFooterFirstLine__IjTGt {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.heatmaps_primary__JFHCO .heatmaps_heatmapFooterSecondLine__OPH5l {
    flex-direction: row-reverse;
}

.heatmaps_heatmapFooterSecondLine__OPH5l {
    display: flex;
    align-items: center;
    width: 100%;
}

.heatmaps_centeredControls__n0lBV {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
}

.heatmaps_heatmapFooterFirstLine__IjTGt .heatmaps_centeredControls__n0lBV {
    position: unset;
    left: unset;
    transform: unset;
}

.heatmaps_heatmapFooterMenu__GoJbz {
    position: absolute;
    right: 16px;
}

.heatmaps_heatmapMetricsBadge__LGHue {
    background-color: #F3F2F1;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 12px;
    line-height: 16px;
    margin-right: 12px;
}

.heatmaps_heatmapRanksCallout__tE2Mn {
    padding: 14px 12px;
    background-color: white;
}

.heatmaps_heatmapRanksCallout__tE2Mn .ms-Toggle-innerContainer label {
    margin-right: 0px;
}

.heatmaps_heatmapRanksCallout__tE2Mn .ms-Toggle label {
    font-weight: 400;
}

.heatmaps_heatmapTooltipBadge__pKu8\+ {
    border: none;
}

.heatmaps_heatmapMetricsBadge__LGHue.heatmaps_primary__JFHCO {
    background-color: #DEECF9;
    color: #004578;
}

.heatmaps_heatmapMetricsBadge__LGHue.heatmaps_secondary__4ZSpZ {
    background-color: #FAE9FF;
    color: #5B0073;
}

.heatmaps_heatmapSidebarWrapper__q\+pvy {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    width: 394px;
    border-radius: 0px 8px 8px 0px;
    box-shadow: 0px 4.8px 14.4px 0px rgba(131, 126, 255, 0.30);
    margin-bottom: 12px;
    height: 100%;
}

.heatmaps_heatmapSidebarWrapperCompareParent__Rp-Vo,
.heatmaps_heatmapSidebarWrapperCompareParent__Rp-Vo.heatmaps_compare__jSoDP {
    height: 100%;
    padding-bottom: 12px;
}

.heatmaps_heatmapSidebarWrapperCompareParent__Rp-Vo {
    display: flex;
}

.heatmaps_heatmapSidebarWrapperCompareParent__Rp-Vo.heatmaps_compare__jSoDP {
    position: absolute;
}

.heatmaps_heatmapSidebarWrapper__q\+pvy.heatmaps_compare__jSoDP {
    padding-top: 0;
    z-index: 1000000;
    transition: 0.2s; /*for sidebar transform*/
    height: 100%;
}

.heatmaps_panelTopWrapper__HCeP4 .heatmaps_heatmapSidebarToggleContainer__zzYox {
    margin-bottom: 0;
    margin-top: 16px;
}

.heatmaps_heatmapSidebarToggleContainer__zzYox {
    background: #EAEAFF;
    padding: 4px;
    display: flex;
    gap: 8px;
    margin-left: 16px;
    margin-bottom: 8px;
    border-radius: 4px;
    width: fit-content;
}

.heatmaps_heatmapSidebarToggleContainer__zzYox .ms-Button--default {
    background: transparent;
    color: black;
    height: 32px;
    border: none;
    min-width: 56px;
    width: 56px;
}

.heatmaps_heatmapSidebarToggleContainer__zzYox .ms-Button--default.is-checked {
    background: white;
    border: 1px solid #6561D6;
}

.heatmaps_heatmapPanelClose__Plkh5 {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    padding-right: 12px;
}

.heatmaps_heatmapPanelClose__Plkh5.heatmaps_spaceBetween__X7AZq {
    justify-content: space-between;
    align-items: flex-start;
}

.heatmaps_heatmapPanelClose__Plkh5.heatmaps_switchScreenshot__3kde0 {
    justify-content: space-between;
}

.heatmaps_heatmapPanelClose__Plkh5 button {
    border: none;
}

.heatmaps_heatmapSidebar__AP1t2 {
    height: 100%;
    padding-left: 16px;
    overflow: hidden;
}

.heatmaps_heatmapSidebar__AP1t2.heatmaps_sidebarInsights__774F3 {
    padding: 0;
}

.heatmaps_heatmapSidebarClosed__mkQT5 {
    width: 29px;
    background-color: #fff;
    border-radius: 0 8px 8px 0;
    margin-bottom: 12px;
}

.heatmaps_heatmapSidebarWrapper__q\+pvy.heatmaps_panelClosed__zJqhT {
    transform: translateX(-100%);
    width: 0px;
    visibility: hidden;
}

.heatmaps_secondary__4ZSpZ .heatmaps_heatmapSidebarWrapper__q\+pvy.heatmaps_panelClosed__zJqhT {
    transform: translateX(100%);
}

.heatmaps_primary__JFHCO .heatmaps_heatmapSidebarClosed__mkQT5 {
    margin-right: 12px;
}

.heatmaps_secondary__4ZSpZ .heatmaps_heatmapSidebarClosed__mkQT5 {
    margin-left: 12px;
    border-radius: 8px 0 0 8px;
}

.heatmaps_editAreaActionWrapper__9il4i,
.heatmaps_sidebarPanelActionWrapper__tfPK3 {
    padding: 8px;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
    background-color: #EFF6FC;
    border-radius: 8px;
    margin: 0 16px 12px 16px;
}

.heatmaps_editAreaActionWrapper__9il4i {
    margin-top: 16px;
}

#heatmaps_heatmapInfoButton__eNDHd i,
.heatmaps_editAreaActionWrapper__9il4i i {
    height: 20px;
}

.heatmaps_appShowScreenSidebar__gZiWA {
    margin: 0 16px 12px 16px;
}

.heatmaps_heatmapTypeCollapsedMenu__TpKBk {
    border: 1px solid;
    border-radius: 0 4px 4px 0 !important;
    border-left: 0;
}

.heatmaps_heatmapTypeCollapsedMenu__TpKBk:hover {
    background-color: transparent;
}

.heatmaps_withShadow__vokMw {
    box-shadow: 0px 3.2px 7.2px 0px #837EFF1F;
    position: relative;
}

.heatmaps_withShadow__vokMw:hover {
    box-shadow: 0px 4.8px 14.4px 0px #837EFF4D;
}

.heatmaps_sidebarPanelTitleWrapper__zYs75 {
    margin-bottom: 12px;
    gap: 4px;
    margin-top: 16px;
}

.heatmaps_sidebarCard__U0oHc {
    width: 100%;
    white-space: nowrap;
    box-shadow: 0px 3.2px 7.2px 0px #837EFF1F;
    border: 1px solid;
    border-color: #EAEAFF;
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 12px 16px 8px 16px;
    cursor: pointer;
}

.heatmaps_sidebarCard__U0oHc.heatmaps_recording__EMS2q {
    padding-bottom: 12px;
}

.heatmaps_sidebarCard__U0oHc:hover {
    box-shadow: 0px 4.8px 14.4px 0px #837EFF4D;
}

.heatmaps_cardSelected__6Ygb6 {
    border: 1px solid #827DFF;
}

.heatmaps_sidebarCardBody__6YkKg {
    display: flex;
    white-space: nowrap;
    border-bottom: 1px solid #EDEBE9;
    padding-bottom: 9px;
}

.heatmaps_sidebarCardBody__6YkKg.heatmaps_recording__EMS2q {
    border-bottom: none;
    padding-bottom: 0px;
    position: relative;
}

.heatmaps_sidebarCardBody__6YkKg.heatmaps_recording__EMS2q .cardRow.bold {
    display: inline;
}

.heatmaps_sidebarCardOrder__xmAdP {
    background-color: #0078D4;
    color: white;
    flex: 0 0 auto;
    height: 32px;
    width: 32px;
    border-radius: 32px;
    text-align: center;
    line-height: 32px;
    margin-right: 10px;
}

.heatmaps_sidebarCardAction__u34VU {
    height: 36px;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px 0 0;
}

.heatmaps_sidebarCard__U0oHc div {
    text-overflow: ellipsis;
    overflow: hidden;
}

.heatmaps_sidebarCardRow__zG42R {
    font-weight: 600;
}

.heatmaps_sidebarCardRow__zG42R span {
    font-weight: 400;
    color: #605E5C;
}

.heatmaps_sidebarViewRecordings__6ib6b {
    color: #424242;
    font-weight: 600;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.heatmaps_sidebarViewRecordings__6ib6b:hover {
    text-decoration: none;
    color: #424242;
}

.heatmaps_sidebarViewRecordings__6ib6b i {
    height: 20px;
    margin-right: 4px;
}

.heatmaps_recordingSidebarCopy__nnB9K {
    flex: 1 0 auto;
    align-self: center;
    margin-left: auto;
    max-width: fit-content;
    height: 32px;
    display: flex;
    align-items: center;
}

.heatmaps_recordingSidebarCopy__nnB9K i {
    color: #424242;
}

.heatmaps_scrollMarker__AxrCZ {
    width: 100%;
    position: absolute;
    text-align: center;
    z-index: 3;
    user-select: none;
}

.heatmaps_scrollMarkerInfo__RNgri,
.heatmaps_attentionMarkerInfo__EyR1G {
    display: inline-flex;
    width: 192px;
    height: 48px;
    padding: 7px 12px;
    background: #fff;
    font-weight: 400;
    border-radius: 4px;
    font-size: 12px;
    font-style: italic;
    align-items: center;
    text-align: start;
}

.heatmaps_attentionMarkerInfo__EyR1G {
    height: 128px;
    font-style: normal;
}

.heatmaps_scrollMarkerPercent__PIyKc {
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    padding-right: 8px;
}

.heatmaps_scrollMarkerInfo__RNgri::before,
.heatmaps_scrollMarkerInfo__RNgri::after,
.heatmaps_attentionMarkerInfo__EyR1G::before,
.heatmaps_attentionMarkerInfo__EyR1G::after {
    content: "";
    border-top: 1px solid #323130;
    margin: auto;
    display: block;
    width: calc((100% - 192px)/2);
    position: absolute;
    left: 0;
    top: 24px;
}

.heatmaps_attentionMarkerInfo__EyR1G::before,
.heatmaps_attentionMarkerInfo__EyR1G::after {
    top: var(--attentionMarkerTop);
}

.heatmaps_scrollMarkerInfo__RNgri::after,
.heatmaps_attentionMarkerInfo__EyR1G::after {
    right: 0;  
    left: auto;
}

.heatmaps_scrollMarkerIndicator__h4cKY {
    height: 28px;
    text-align: center;
    padding: 5px;
    font-size: 12px;
    background: #fff;
    width: 100px;
    border-radius: 4px;
    position: absolute;
    left: 12px;
}

.heatmaps_elementMetadata__lsH5x {
    padding: 8px 12px;
    display: flex;
    align-items: center;
}

.heatmaps_elementMetadataCallout__hmCJy {
    border-radius: 4px;
}

.heatmaps_elementMetadataContainer__wAj8x {
    display: flex;
    align-items: baseline;
}

.heatmaps_areaMetadataContainer__C9Sr- {
    align-items: start;
    width: 116px;
}

.heatmaps_areamapCallout__baS0B .ms-Callout-beakCurtain,
.heatmaps_areamapCallout__baS0B .ms-Callout-main {
    border-radius: 4px;
}

.heatmaps_elementMetadataNumber__txypO {
    font-size: 28px;
    font-weight: 600;
    margin-right: 8px;
    font-style: normal;
}

.heatmaps_elementMetadataPercent__QszEh {
    font-size: 14px;
}

.heatmaps_elementMetadataRightPadding__pj4Lo {
    margin-right: 12px;
}

.heatmaps_elementMetadataBottomPadding__\+Im5p {
    margin-bottom: 12px;
}

.heatmaps_areaMetadataAction__z4F6l {
    display: flex;
    width: 100%;
    align-items: flex-start;
}

.heatmaps_moneymapMetadata__k\+DbA {
    padding: 8px 12px;
}

.heatmaps_moneymapMetadataPurchase__TWg9k {
    display: flex;
    font-style: italic;
    align-items: center;
    gap: 8px;
}

.heatmaps_webHeatmapSidebarContent__ISC4J,
.heatmaps_appHeatmapSidebar__x2aLQ {
    overflow: auto;
    height: 100%;
    padding-right: 16px;
}

.heatmaps_replayHeader__UR8ug {
    display: flex;
    background: white;
    align-items: center;
}

.heatmaps_panelTopWrapper__HCeP4 {
    padding-bottom: 12px;
}

.heatmaps_panelInfo__xhHCm {
    display: flex;
    margin-top: 8px;
    font-size: 14px;
    line-height: 20px;
    align-items: center;
}

.heatmaps_recordingSidebarLabel__OBBJy {
    width: 107px;

}

.heatmaps_panelUrl__XgAER {
    word-break: break-all;
    width: 207px;
    margin-right: 16px;
}

button.heatmaps_backToScreenshots__w42Ve {
    padding-left: 0;
    margin-top: 8px;
    margin-left: 16px;
    margin-bottom: 16px;
}

.heatmaps_backToScreenshots__w42Ve span {
    font-weight: 400;
    color: #0078D4;
}

@media screen and (prefers-contrast: more) {
    .heatmaps_backToScreenshots__w42Ve span i svg path, .heatmaps_openCloseSidePanel__63m-i span i svg path {
        fill: #FFF;
    }
}

.heatmaps_heatmapScrenshotCardSelected__JSTa7 {
    border: 1px solid #827DFF;
    height: 274px;
}

.heatmaps_switchScreenshotSidebar__sDJHX {
    padding-right: 0;
}

.heatmaps_appScreenNavigatorSpin__s-Y02 {
    width: 54px;
    margin-right: 8px;
    min-width: 0;
}

.heatmaps_appScreenNavigatorSpin__s-Y02 i {
    height: unset;
}

.heatmaps_appScreenNavigatorSpin__s-Y02 div,
.heatmaps_appScreenNavigatorSpin__s-Y02 input {
    min-width: 0;
}

.heatmaps_appScreenNavigatorSpin__s-Y02 span {
    background-color: white;
}

.heatmaps_heatmapCompareResizer__AhAef {
    width: 0px;
    cursor: col-resize;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    background: #E1DFDD;
    margin-top: 143px;
}

.heatmaps_heatmapCompareResizer__AhAef .heatmaps_resizerButton__jO5UT {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 0 4px;
    z-index: 1;
}

.heatmaps_heatmapCompareResizer__AhAef .heatmaps_resizerButton__jO5UT i {
    height: 20px;
}

.heatmaps_heatmapCompareCloseIcon__aGe19 {
    color: #004578;
    width: 30px;
    height: 30px;
}

.heatmaps_cancelIconContainer__DOw1X {
    box-sizing: border-box;
    border-radius: 2px;
    margin-left: auto;
    border: 1px solid #0078D4;
}

.heatmaps_heatmapCompareFilterButton__ImPiC {
    width: 32px;
}

.heatmaps_heatmapCompareFilterButton__ImPiC i {
    height: 20px;
}

.heatmaps_primary__JFHCO .heatmaps_heatmapCompareFilterButton__ImPiC {
    background: var(--button-gradient-rest, linear-gradient(325deg, #0078D4 0%, #9692FF 100%));
}

.heatmaps_secondary__4ZSpZ .heatmaps_heatmapCompareFilterButton__ImPiC {
    background: linear-gradient(122deg, #EF43FF 0%, #9692FF 100%), linear-gradient(325deg, #0078D4 0%, #9692FF 100%);
}

.heatmaps_downloadHeatmap__EJs4W button {
    border: none;
}

.heatmaps_downloadHeatmap__EJs4W button:hover {
    background-color: #EDEBE9;
}

.heatmaps_elementRank__u1CDX {
    position: absolute;
    width: 36px;
    height: 36px;
    background: #0078D4;
    color: white;
    border: 1px solid #FFFFFF;
    border-radius: 32px;
    text-align: center;
    line-height: 32px;
    filter: drop-shadow(0px 1.2px 3.6px rgba(0, 0, 0, 0.1));
    cursor: default;
}

.heatmaps_secondary__4ZSpZ .heatmaps_sidebarCardOrder__xmAdP,
.heatmaps_secondary__4ZSpZ.heatmaps_sidebarCardOrder__xmAdP,
.heatmaps_secondary__4ZSpZ .heatmaps_elementRank__u1CDX {
    background: #EF43FF;
}

.heatmaps_compareBadge__Jdo5L {
    background: #C7E0F4;
    border: 1px solid #FFFFFF;
    border-radius: 4px;
    color: #004578;
    margin-left: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 3px 8px;
    flex: 0 0 auto;
    line-height: 20px;
    height: 32px;
}

.heatmaps_compareBadge__Jdo5L.heatmaps_urlFilter__LoTs5 {
    min-width: fit-content;
}

.heatmaps_compareBadge__Jdo5L i {
    padding: 10px;
    margin-left: 4px;
    margin-right: -8px;
    font-size: 10px;
    height: 10px;
    width: 10px;
    box-sizing: content-box;
    line-height: 10px;
}

.heatmaps_compareBadge__Jdo5L.heatmaps_urlFilter__LoTs5 i {
    margin-left: 0;
}

.heatmaps_compareBadge__Jdo5L.heatmaps_inactive__cGVB9 {
    background-color: #F3F2F1;
    color: #B3B0AD;
}

.heatmaps_compareBadge__Jdo5L button:hover {
    background: transparent;
}

.heatmaps_compareBadge__Jdo5L button {
    margin-left: -8px;
}

.heatmaps_compareBadge__Jdo5L button::after {
    display: none;
}

.heatmaps_secondary__4ZSpZ .heatmaps_compareBadge__Jdo5L {
    color: #5B0073;
    background: #FAE9FF;
}

.heatmaps_heatmapPanelTop__VQkGr {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    background-color: white;
    padding: 8px 12px 0 12px;
}

.heatmaps_heatmapPanelTop__VQkGr.heatmaps_justifyBetween__ZmlsG {
    justify-content: space-between;
    align-items: flex-start;
}

.heatmaps_heatmapPanelTop__VQkGr.heatmaps_justifyBetween__ZmlsG .heatmaps_heatmapSidebarToggleContainer__zzYox {
    margin-left: 6px;
}

.heatmaps_secondary__4ZSpZ .heatmaps_heatmapPanelTop__VQkGr {
    flex-direction: row-reverse;
}

.heatmaps_secondary__4ZSpZ .heatmaps_heatmapPanelTop__VQkGr.heatmaps_justifyBetween__ZmlsG .heatmaps_heatmapSidebarToggleContainer__zzYox {
    margin-right: 6px;
}

.heatmaps_urlActionWrapper__bkqtZ {
    display: flex;
    align-items: center;
    margin-right: 10px;
    border: 1px solid #C8C6C4;
    border-radius: 4px;
    background-color: white;
    border-bottom-color: #616161;
}

.heatmaps_urlActionWrapper__bkqtZ.heatmaps_insidePanel__QV6Yy{
    border: none;
    margin-bottom: 12px;
    margin-top: 12px;
    flex-grow: 1;
}

.heatmaps_urlActionWrapper__bkqtZ.heatmaps_badgeView__bGcnJ {
    background-color: unset;
    gap: 2px;
    margin-right: 0;
}

.heatmaps_urlActionWrapper__bkqtZ.heatmaps_mobile__PrN8v {
    display: block;
}

.heatmaps_mobile__PrN8v .heatmaps_urlFilterDropdowns__7yZtc,
.heatmaps_badgeView__bGcnJ .heatmaps_urlFilterDropdowns__7yZtc,
.heatmaps_urlFilterDropdowns__7yZtc.heatmaps_noRightMargin__FHOOP {
    margin-right: 0;
}

.heatmaps_urlFilterDropdowns__7yZtc {
    display: flex;
    margin-right: 16px;
}

.heatmaps_mobile__PrN8v .testRegexURLButton {
    margin-top: 4px;
}

.heatmaps_heatmapUrlFilterActionWrapper__kJwX2 {
    display: flex;
    justify-content: flex-end;
    margin: 24px 24px 12px 24px;
}

.heatmaps_heatmapURLPanelRadius__DEIZv {
    border-radius: 8px;
}

.heatmaps_heatmapUrlFilterHeaderWrapper__9iRjK {
    width: 100%;
    align-items: center;
    line-height: 28px;
    padding: 16px 24px 0;
}

.heatmaps_scrollbarList__3jkri,
.heatmaps_attentionbarList__yELDJ {
    overflow-x: hidden;
}

.heatmaps_scrollbarList__3jkri .ms-DetailsRow:hover,
.heatmaps_attentionbarList__yELDJ .ms-DetailsRow:hover {
    background-color: transparent;
}

.heatmaps_attentionbarList__yELDJ .ms-DetailsHeader {
    min-height: 60px;
    cursor: pointer;
}

.heatmaps_attentionbarList__yELDJ .ms-DetailsHeader-cellTitle {
    align-items: center;
}

.heatmaps_attentionbarList__yELDJ .ms-DetailsHeader-cellName {
    padding-left:0;
    padding-right: 5px;
}

#heatmapSidebarPortal .heatmaps_heatmapSidebar__AP1t2 {
    height: 100%;
    padding: 0 16px;
    overflow: hidden auto;
    border: unset;
    background-color: #FFF;
}

#heatmapSidebarPortal .heatmaps_heatmapSidebar__AP1t2 .ms-DetailsList {
    overflow-x: hidden;
}

#heatmapSidebarPortal .heatmaps_sidebarPanelActionWrapper__tfPK3 {
    margin: 12px 12px 0;
}

.heatmaps_attentionSidemapContainer__ew\+LB {
    overflow: auto;
    background-color: white;
    width: 80px;
    padding: 8px 4px 8px 8px;
    overflow-x: hidden;
    position: relative;
}

.heatmaps_attentionSidemapCanvas__WTGMY {
    cursor: pointer;
    border-radius: 8px;
    margin-left: 2px;
    z-index: 2;
}

.heatmaps_attentionMarkerBox__T6u7K {
    display: flex;
    flex-direction: column;
}

.heatmaps_attentionSidemapCurrentView__fuIbe {
    width: 60px;
    position: absolute;
    border-radius: 10px;
    border: 1px solid #B7D3EB;
    box-shadow: 0px 0px 0px 1px #0078D4, 0px 0px 0px 1px #0078D4 inset, 0px 0px 0px 2px #FFF inset;
    transition: transform 0.5s ease-in-out;
    z-index: 3;
}

.heatmaps_screenshotGrid__qATWO {
    margin-top: 12px;
    margin-bottom: 24px;
    width: -moz-fit-content;
    width: fit-content;
    display: grid;
    grid-template-columns: 430px 430px 430px;
    grid-auto-rows: 450px;
    gap: 40px;
    position: relative;
    align-self: center;
}

.heatmaps_smallGrid__VN54f.heatmaps_screenshotGrid__qATWO {
    grid-template-columns: 430px;
}

.heatmaps_mediumGrid__L4P5c.heatmaps_screenshotGrid__qATWO {
    grid-template-columns: 430px 430px;
}

.heatmaps_heatmapScreenshotCardV2__f8a0N,
.heatmaps_heatmapScreenshotCardUpsell__kbdZI {
    display: flex;
    width: 426px;
    height: 456px;
    flex-direction: column;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #EAEAFF;
    gap: 12px;
    padding-top: 12px;
    /* Card shadow front */
    box-shadow: 0px 4.8px 14.4px 0px rgba(131, 126, 255, 0.30);
    position: relative;
}

.heatmaps_heatmapScreenshotCardV2__f8a0N > button > span > i {
    height:20px;
}

.heatmaps_heatmapScreenshotCardUpsell__kbdZI {
    padding: 32px;
}

.heatmaps_heatmapScreenshotCardUpsell__kbdZI .heatmaps_UpsellImage__xh7aH {
    margin-top: 44px;
}

.heatmaps_heatmapScreenshotCardUpsell__kbdZI .heatmaps_UpsellTitle__RnkL8 {
    font-size: 16px;
    font-weight: 600;
    margin-top: 32px;
}

.heatmaps_heatmapScreenshotCardUpsell__kbdZI .heatmaps_UpsellSubTitle__vUmEP {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 20px;
    text-align: center;
}

.heatmaps_changeScreenshotTitle__TFL3h {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
}

.heatmaps_changeScreenshotSubTitle__hTZFB {
    margin-bottom: 12px;
    margin-top: 16px;
}

.heatmaps_sidebarwrapperFullScreen__al4nb {
    margin-right: 14px;
}

.heatmaps_sidebarwrapperFullScreen__al4nb.heatmaps_padding__Hk7zi {
    padding-left: 48px;
}

.heatmaps_screenshotCardGradient__8eCtk {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.30) 50%, #FFF 100%);
    height: 100px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    cursor: pointer;
}

.heatmaps_screenshotcardScrollWrapper__3p7Hc {
    height: 400px;
    overflow: auto;
    overflow-x: hidden;
    width: 100%;
    cursor: pointer;
    background-color: #F3F2F1;
}

.heatmaps_screenshotSidebarPaddingLeft__OPz-9 {
    padding-left: 12px;
}

.heatmaps_screenshotSidebarPaddingRight__ax3Cf {
    padding-right: 12px;
}

.heatmaps_zeroStateDivider__TySFO {
    height: 1px;
    background-color: #C8C6C4;
}

.heatmaps_zeroStateDivider__TySFO.heatmaps_firstColumn__8ePy5 {
    width:40px;
}

.heatmaps_zeroStateDivider__TySFO.heatmaps_fullWidth__t8P\+j {
    width: 100%
}

.heatmaps_zeroStateDividerContainer__xYysq {
    display: flex;
    align-items: center;
    gap: 8px;
}

.heatmaps_zeroStateUrlPathFilerRow__TPqJ7 {
    display: flex;
    flex-direction: row;
    margin-top: -16px;
}

.heatmaps_zeroStateViewHeatmapButton__AgSJ2.ms-Button--default,
.heatmaps_zeroStateViewHeatmapButton__AgSJ2.ms-Button--default.is-disabled {
    border: none;
}

.heatmaps_zeroStateViewHeatmapButton__AgSJ2.ms-Button--default:hover.is-disabled {
    background: transparent;
}

.heatmaps_zeroStateViewHeatmapButton__AgSJ2 span {
    font-weight: normal;
    color:#000000;
}

.heatmaps_zeroStateViewHeatmapButton__AgSJ2.ms-Button--default:hover {
    background: #EAEAFF;
}

.heatmaps_urlFilterGrid__ervVI {
    display: grid !important; /* !important is needed to override the display: flex */
    grid-template-columns: auto auto auto;
    align-items: center;
}

.heatmaps_urlFilterGrid__ervVI .heatmaps_firstColumn__8ePy5 {
    grid-column: 1;
    text-align: right;
}

.heatmaps_urlFilterGrid__ervVI.heatmaps_columnGap__WNq4C {
    column-gap: 16px;
}

.heatmaps_urlFilterGrid__ervVI.heatmaps_noMargin__iC8vo {
    margin: 0;
}

@media screen and (prefers-contrast: more) {
    .heatmaps_heatmapFooter__tpxJG path {
        fill: #FFF;
    }

    .heatmaps_elementMetadata__lsH5x path {
        fill: #FFF;
    }
}
.homepage_homePageContainer__gH7U8 {
    height: auto !important;
}

.homepage_homePageContainer__gH7U8 button.ms-Button--default,
.homepage_homePageContainer__gH7U8 a.ms-Button--default {
    border-radius: 4px;
    border: 1px solid #827DFF;
    background: rgba(255, 255, 255);
    color: #020057;
    font-weight: 600;
}

.homepage_homePageContainer__gH7U8 button.ms-Button--default:focus,
.homepage_homePageContainer__gH7U8 a.ms-Button--default:focus,
.homepage_homePageContainer__gH7U8 button.ms-Button--default:hover,
.homepage_homePageContainer__gH7U8 a.ms-Button--default:hover {
    background: #F5F5F5;
    color: #020057;
}

.homepage_homepageBannerWrapper__BAnB\+ {
    height: 612px;
    padding: 26px 0;
    background: linear-gradient(280deg, #A0D6FF 0%, #C2E3FF 36.46%, #DFF0FF 50%, #F5FBFF 77.08%);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.homepage_homepageBanner__SizYU {
    max-width: 1248px;
    box-sizing: content-box;
    align-items: center;
    justify-content: space-between;
    flex: 1 1 auto;
    gap: 77px;
}

.homepage_homepageBannerContent__Cq2DD {
}

.homepage_homepageBannerContent__Cq2DD h1 {
    color: #353535;
    font-size: 58px;
    font-weight: 600;
    line-height: 116.5%;
    margin-bottom: 16px;
}

.homepage_homepageBannerContent__Cq2DD .homepage_everyClickTitle__uymwz {
    font-size: 57px;
}

.homepage_homepageBanner__SizYU .homepage_assumptionsTitle__--1UO {
    margin-bottom: 0;
}

.homepage_homepageBannerContent__Cq2DD h2 {
    color: #353535;
    font-size: 24px;
    font-weight: 600;
}

.homepage_desktopBannerImg__lqtZ\+ {
    max-height: 612px;
    width: 50%;
}

.homepage_mobileBannerImg__5q8js {
    display: none;
}

.homepage_homepageBannerContent__Cq2DD .homepage_pageBannerFeatures__liG0t,
.homepage_pageBannerFeatures__liG0t {
    margin: 38px 0;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.homepage_homepageBannerContent__Cq2DD .homepage_pageBannerFeature__-RaDv,
.homepage_pageBannerFeature__-RaDv {
    display: flex;
    align-items: center;
    color: #323130;
    font-size: 16px;
    font-weight: 600;
    line-height: 21px;
    margin-right: 16px;
}

.homepage_pageBannerFeature__-RaDv i {
    height: 24px;
    margin-right: 8px;
}

.homepage_homepageBannerContent__Cq2DD .homepage_buttonArea__s9n6Y {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.homepage_homepageBannerContent__Cq2DD .homepage_buttonArea__s9n6Y a:last-child {
    color: #0078D4;
    border-color: #005493;
}

.homepage_homepageBannerContent__Cq2DD .homepage_buttonArea__s9n6Y a:last-child:hover {
    background: #EFF6FC;
}

.homepage_homepageBannerContent__Cq2DD .homepage_buttonArea__s9n6Y a,
.homepage_homepageBannerContent__Cq2DD .homepage_buttonArea__s9n6Y button {
    width: 156px;
    height: 38px;
    box-sizing: content-box;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    border-radius: 47px;
    padding: 5px 12px;
    box-shadow: 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.13), 0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.10);
}

.homepage_homepageBannerContent__Cq2DD .homepage_ratingContainer__em9JY > div {
    height: 20px;
    margin-bottom: 4px;
}

.homepage_ratingContainer__em9JY button {
    padding: 0;
    height: 20px;
}

.homepage_platformContainer__AfZnE {
    padding: 20px 0;
    margin: 38px 38px 0 0;
}

.homepage_platformContainer__AfZnE:focus-visible {
    outline: -webkit-focus-ring-color auto 1px;
}

.homepage_homepageBannerContent__Cq2DD .homepage_platfromLogoContainer__t9vvy {
    width: 36px;
    height: 36px;
    overflow: hidden;
    margin-right: 16px;
}

.homepage_platfromLogoContainer__t9vvy > img {
    position: relative;
}

.homepage_platfromLogoContainer__t9vvy .homepage_capterraLogo__EDZff {
    left: -62px;
}

.homepage_platfromLogoContainer__t9vvy .homepage_g2Logo__XIkLY {
    left: 0;
}

.homepage_banner__ckZwc {
    padding: 96px;
    align-items: center;
    justify-content: space-between;
    max-width: 1248px;
    margin: 0 auto;
    box-sizing: content-box;
}

.homepage_bannerContent__R2vSH {
    margin-right: 80px;
    min-width: 376px;
}

.homepage_banner__ckZwc h2 {
    color: #161514;
    font-size: 32px;
    font-weight: 600;
    line-height: 40px;
    margin-bottom: 16px;
}

.homepage_bannerContent__R2vSH div {
    color: #323130;
    font-size: 16px;
    margin-bottom: 32px;
}

.homepage_freeModuleContent__5CQ4R button {
    width: 122px;
    height: 22px;
    padding: 5px 12px;
    box-sizing: content-box;
}

.homepage_freeModule__6QE54 img {
    height: 238px;
    margin: 26px 76px;
}

.homepage_privacyModule__8LTuQ {
    background: url("data:image/svg+xml,<svg width=\"1440\" height=\"554\" viewBox=\"0 0 1440 554\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M701 430.5C292.774 429.224 10.8679 541.873 0 554V0C199.472 46.1666 463.924 136 701 136C965 136 1296.68 46.1666 1440 0V554C1364.15 500.6 1027.58 431.521 701 430.5Z\" fill=\"url%28%23paint0_linear_467_952%29\"/><defs><linearGradient id=\"paint0_linear_467_952\" x1=\"-9.68158e-06\" y1=\"0.638248\" x2=\"1413.1\" y2=\"616.373\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"%23F1F1FF\"/><stop offset=\"1\" stop-color=\"%23F9F0FF\"/></linearGradient></defs></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    height: 38vw;
}

.homepage_industryTilesContainer__imZpq,
.homepage_privacyPointsContainer__ifuCN {
    gap: 24px;
}

.homepage_industryTilesContainer__imZpq {
    flex: 1 1 auto;
    max-width: 480px;
    min-width: 380px;
}

.homepage_industryTile__AOjtH,
.homepage_privacyPoint__9A-4e {
    align-items: center;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0px 4.8px 14.4px 0px rgba(131, 126, 255, 0.30);
    padding: 9px 16px;
    gap: 16px;
}

.homepage_industryTile__AOjtH {
    padding: 0 16px 0 0;
    flex: 1 1 auto;
    gap: 0;
    cursor: pointer;
}

.homepage_industryTile__AOjtH > strong {
    font-size: 16px;
    line-height: 20px;
}

.homepage_industryTile__AOjtH a {
    margin-left: auto;
}

.homepage_industryTile__AOjtH a i {
   height: 24px;
   line-height: 24px;
}

.homepage_industryTile__AOjtH a svg {
    height: 24px;
    width: 24px;
 }

.homepage_privacyPoint__9A-4e span {
    color: #161514;
    font-weight: 600;
    line-height: 20px;
}

.homepage_integrationsContainer__NmI1s {
    margin: 96px 0;
}

.homepage_integrationsContainer__NmI1s > h2 {
    text-align: center;
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 20px;
    background: linear-gradient(90deg, #8F58AB -8.93%, #3D60E0 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.homepage_integrationsContainer__NmI1s > p:last-of-type {
    width: 56%;
    font-size: 16px;
    color: #323130;
    margin: 0 auto;
}

.homepage_integrationsContainer__NmI1s > a {
    margin: auto;
}

.homepage_carouselContainerWrapper__y68MJ {
    overflow: hidden;
    position: relative;
    height: 250px;
}

.homepage_carouselContainerWrapper__y68MJ.homepage_companiesCarouselWrapper__FZ9SQ {
    height: 100px;
    margin: 40px 0;
    background: linear-gradient(270deg, #FFF 0%, #F9F9FF 63.75%, #F1F1FF 100.52%);
}

.homepage_carouselContainerWrapper__y68MJ::after,
.homepage_carouselContainerWrapper__y68MJ::before {
    content: "";
    background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    height: 100%;
    position: absolute;
    width: 200px;
    z-index: 2;
}

.homepage_carouselContainerWrapper__y68MJ::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}

.homepage_carouselContainerWrapper__y68MJ::before {
    left: 0;
    top: 0;
}

.homepage_carouselContainer__-ifji {
    position: absolute;
    left: 0;
    top: 0;
    height: 132px;
    width: 300%;
    background: url(https://claritystatic.azureedge.net/images/integrationsLogoInLineV2.png);
    margin: 60px 0;
    background-repeat: repeat-x;
    background-position-y: center;
    animation: homepage_autoScroll__nznYz 50s linear infinite;
    transform: translate3d(0, 0, 0);
}

.homepage_companiesCarouselWrapper__FZ9SQ .homepage_carouselContainer__-ifji {
    background: url(https://claritystatic.azureedge.net/images/companiesWithClarity.png);
    animation: unset;
    background-repeat: no-repeat;
    width: calc(100% + 100px);
    height: 100px;
    background-position-x: center;
    margin: 0;
    left: -100px;
} 

@keyframes homepage_autoScroll__nznYz {
	0% { left: 0; }
	100% { left: -200%; }
}

.homepage_homePageContainer__gH7U8 .focusSection.landingFooter {
    background: url("data:image/svg+xml,<svg width=\"1440\" height=\"401\" viewBox=\"0 0 1440 401\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1440 228.36H0V60.4003C57.6 55.9003 400.2 49.4043 542.4 52.4043C684.6 55.4043 950.546 27.1758 1070 27.1758C1242.2 27.1758 1340.4 61.4043 1440 48.4043V228.36Z\" fill=\"url%28%23paint0_linear_292_25%29\"/><path d=\"M1440 248.414H0V64.9138C57.6 60.4138 322.8 24.1762 465 27.1762C607.2 30.1762 934.146 59.9138 1053.6 59.9138C1225.8 59.9138 1340.4 61.4132 1440 48.4132V248.414Z\" fill=\"url%28%23paint1_linear_292_25%29\"/><path d=\"M1440 400.176H0V51.1758C57.6 46.6758 397.2 52.6758 539.4 55.6758C681.6 58.6758 935.346 67.1758 1054.8 67.1758C1227 67.1758 1340.4 59.6758 1440 46.6758V400.176Z\" fill=\"url%28%23paint2_linear_292_25%29\"/><defs><linearGradient id=\"paint0_linear_292_25\" x1=\"725.5\" y1=\"58.1763\" x2=\"1805.5\" y2=\"80.1764\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"%2397C7FD\"/><stop offset=\"1\" stop-color=\"%23F3FCFF\"/></linearGradient><linearGradient id=\"paint1_linear_292_25\" x1=\"471\" y1=\"35.9043\" x2=\"1547.57\" y2=\"119.715\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"%23B8B6FF\"/><stop offset=\"1\" stop-color=\"%2383ADFF\"/></linearGradient><linearGradient id=\"paint2_linear_292_25\" x1=\"720\" y1=\"46.6758\" x2=\"720\" y2=\"260.176\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"%235AB2F1\"/><stop offset=\"0.5625\" stop-color=\"%23308ADB\"/><stop offset=\"1\" stop-color=\"%23025EC4\"/></linearGradient></defs></svg>");
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 86px;
    padding-top: 152px;
}

.homepage_homePageContainer__gH7U8 .footer {
    padding: 0;
}

.homepage_featuresPivotItems__1azxB,
.homepage_featuresPivot__HsXU4 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.homepage_featuresPivot__HsXU4 {
    margin: 16px 0 68px 0;
    min-height: 672px;
}

.homepage_featuresPivot__HsXU4 .ms-Pivot {
    border-bottom: 4px solid #D9D9D9;
}

.homepage_featuresPivot__HsXU4 .ms-Pivot button::before {
    bottom: -4px;
    height: 6px;
}

.homepage_featuresPivot__HsXU4 .ms-Pivot-text {
    font-weight: 600;
}

.homepage_featuresPivotItems__1azxB h1 {
    color: #201F1E;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
}

.homepage_featuresPivotItems__1azxB p {
    margin: 28px 0 16px 0;
}

.homepage_featuresPivotItems__1azxB img {
    max-width: 800px;
    margin-top: 28px;
    border-radius: 8px;
    box-shadow: 0px 25.6px 57.6px 0px rgba(0, 0, 0, 0.22), 0px 4.8px 14.4px 0px rgba(0, 0, 0, 0.18);
}

.homepage_featuresPivotItems__1azxB .ms-Button-label {
    text-transform: lowercase;
}

.homepage_featuresPivotItems__1azxB .ms-Button-label::first-letter {
    text-transform: capitalize;
}

.homepage_featuresPivot__HsXU4 button:last-child {
    margin-right: 0;
}

.homepage_industriesBanner__B90PD {
    position: relative;
    overflow: hidden;
}

.homepage_industriesBanner__B90PD .homepage_bannerContent__R2vSH {
    max-width: 46%;
}

.homepage_industriesBanner__B90PD .homepage_ellipse__gVIb8 {
    position: absolute;
    border-radius: 522px;
    background: linear-gradient(180deg, #F1F1FF 0%, #F9F0FF 100%);
    z-index: -1;
    right: -261px;
    bottom: 38px;
    width: 522px;
    height: 522px;
    flex-shrink: 0;
}

.homepage_testimonialsContainer__icaYb {
    overflow: hidden;
    padding: 96px 60px;
}

.homepage_testimonialsContainer__icaYb h2 {
    font-size: 36px;
    font-weight: 600;
    text-align: center;
    background: linear-gradient(90deg, #8F58AB -8.93%, #3D60E0 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.homepage_testimonialsWrapper__uXDAn {
    max-width: 1032px;
    min-height: 380px;
    margin: 50px auto;
    display: flex;
    justify-content: center;
    gap: 120px;
}

.homepage_testimonial__WBpjH {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 264px;
    min-width: 180px;
    min-height: 136px;
}

.homepage_testimonial__WBpjH img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 48px;
}

.homepage_testimonial__WBpjH h3 {
    color: #605E5C;
    font-size: 16px;
}

.homepage_testimonial__WBpjH h3::after,
.homepage_testimonial__WBpjH h3::before {
    content: '"';
}

.homepage_testimonial__WBpjH p {
    align-self: flex-start;
    margin-top: 24px;
}

button.homepage_paginationChevron__4m3Yg {
    margin-right: 40px;
    padding: 22px;
}

.homepage_mobilePaginationChevron__c8xp0.homepage_previous__M\+82g,
.homepage_paginationChevron__4m3Yg.homepage_previous__M\+82g {
    transform: rotate(180deg);
}

.homepage_mobilePaginationChevron__c8xp0 {
    margin-left: auto;
    display: none;
}

.homepage_mobilePaginationChevron__c8xp0.homepage_previous__M\+82g {
    margin-left: 0;
    margin-right: auto;
}

.homepage_paginationChevron__4m3Yg.homepage_previous__M\+82g {
    margin: 0 0 0 40px;
}

.homepage_mobilePaginationChevron__c8xp0 svg,
.homepage_mobilePaginationChevron__c8xp0 i,
.homepage_paginationChevron__4m3Yg i,
.homepage_paginationChevron__4m3Yg svg {
    width: 40px;
    height: 40px;
}

.homepage_mobilePaginationChevron__c8xp0 path,
.homepage_paginationChevron__4m3Yg path {
    fill: #A7A5F5;
}

.homepage_paginationIndicator__JmZt2 {
    width: 4px;
    height: 4px;
    border-radius: 4px;
    background-color: #0078D4;
    margin-right: 12px;
}

.homepage_paginationIndicator__JmZt2.homepage_selected__FK14q {
    width: 6px;
    height: 6px;
    border-radius: 6px;
}

@media screen and (prefers-contrast: more) {
    .homepage_paginationIndicator__JmZt2 {
        border: 2px solid black;
    }

    .homepage_paginationIndicator__JmZt2.homepage_selected__FK14q {
        width: 8px;
        height: 8px;
        border-radius: 8px;
    }
}

.homepage_homePageContainer__gH7U8 .footerLinksContainer {
    padding: 0 54px;
}

.homepage_footerContainer__iRMIu {
    background: url("data:image/svg+xml,<svg width=\"1440\" height=\"1279\" viewBox=\"0 0 1440 1279\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1440 7.41149V1279H0V25.5523C14.1706 26.6105 75.3065 30.1781 206.485 35.983C370.459 43.2391 405.548 36.4365 619.456 26.0058C833.365 15.5752 879.25 3.78343 1062.12 0.608876C1208.41 -1.93077 1375 4.08577 1440 7.41149Z\" fill=\"url%28%23paint0_linear_467_666%29\"/><defs><linearGradient id=\"paint0_linear_467_666\" x1=\"720\" y1=\"29.5\" x2=\"720\" y2=\"1488\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"%23EDF7FF\"/><stop offset=\"0.113453\" stop-color=\"%23F9FCFF\"/><stop offset=\"0.682292\" stop-color=\"%23F7FBFF\"/><stop offset=\"1\" stop-color=\"%23DDEFFF\"/></linearGradient></defs></svg>");
    background-repeat: no-repeat;
    background-size: cover;
}

.homepage_sdkImage__12W6D {
    width: 500px;
    margin: 0 42px;
}

.homepage_sdkModuleContent__zEVC2 > div {
    margin-bottom: 16px;
}

.homepage_sdkModuleContent__zEVC2 > a {
    margin-top: 16px;
}

.homepage_sdkSupport__qfpd7 {
    margin-bottom: 32px;   
    gap: 8px; 
}

.homepage_sdkSupport__qfpd7 > strong {
    margin-right: 4px;
}

.homepage_extensionModuleContent__NmaBn {
    margin: 0 0 0 80px;
}

.homepage_extensionModuleContent__NmaBn > div {
    margin-bottom: 16px;
}

.homepage_extensionModuleContent__NmaBn > a {
   display: block;
}

.homepage_extensionModuleContent__NmaBn > a:last-of-type {
    margin-top: 32px;
    padding: 0 16px;
    max-width: 128px;
}

@media screen and (prefers-contrast: more) {
    .homepage_learnMoreLink__qysjz:focus {
        border: 2px solid aqua;
        text-decoration: underline;
    }
}

@media only screen and (max-width: 1440px) {
    .homepage_homepageBannerWrapper__BAnB\+ {
        padding: 51px 48px;
    }

    .homepage_homepageBanner__SizYU {
        gap: 40px;
    }

    .homepage_bannerContent__R2vSH {
        margin-right: 40px;
    }

    .homepage_freeModule__6QE54 img {
        margin-right: 0;
        margin-left: 0;
    }
} 

/*less than a 1000px (mobile screen)*/
@media only screen and (max-width: 1000px) {
    .homepage_homepageBannerWrapper__BAnB\+ {
        height: 883px;
        padding: 48px 20px 8px 20px;
    }

    .homepage_homepageBanner__SizYU {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    .homepage_homepageBanner__SizYU .homepage_desktopBannerImg__lqtZ\+ {
        display: none;
    }
    
    .homepage_mobileBannerImg__5q8js {
        display: block;
    }

    .homepage_homepageBannerContent__Cq2DD {
        text-align: center;
        align-items: center;
    }

    .homepage_pageBannerFeatures__liG0t {
        justify-content: center;
    }

    .homepage_featuresPivotItems__1azxB {
        margin: 0 20px;
        text-align: center;
    }

    .homepage_featuresPivotItems__1azxB {
        margin-top: 80px;
    }

    .homepage_featuresPivotItems__1azxB > p {
        margin: 16px 0;
    }

    .homepage_featuresPivotItems__1azxB > img {
        width: 100%;
    }

    .homepage_freeModule__6QE54 {
        margin-top: 80px;
    }

    .homepage_banner__ckZwc {
        padding: 80px 48px;
        flex-direction: column;
        align-items: center;
        gap: 80px;
    }

    .homepage_banner__ckZwc > img {
        display: none;
    }

    .homepage_bannerContent__R2vSH {
        text-align: center;
        margin-right: 0;
    }

    .homepage_integrationsContainer__NmI1s {
        margin: 80px 0;
    }

    .homepage_integrationsContainer__NmI1s > p:last-of-type,
    .homepage_integrationsContainer__NmI1s p {
        margin-right: 20px;
        margin-left: 20px;
    }

    .homepage_integrationsContainer__NmI1s > p:last-of-type {
        width: calc(100% - 20px);
    }

    .homepage_industryTilesContainer__imZpq {
        margin: 0;
        flex-direction: column;
    }

    .homepage_industriesBanner__B90PD .homepage_bannerContent__R2vSH {
        width: 100%;
        max-width: unset;
    }

    .homepage_companiesCarouselWrapper__FZ9SQ .homepage_carouselContainer__-ifji {
        animation: homepage_autoScroll__nznYz 30s linear infinite;
        background-repeat: repeat-x;
        width: 300%;
        background-position-x: left;
    }

    .homepage_testimonialsContainer__icaYb {
        padding: 80px 38px;
    }

    .homepage_paginationChevron__4m3Yg {
        display: none;
    }

    .homepage_mobilePaginationChevron__c8xp0 {
        display: block;
    }

    .homepage_sdkModuleContent__zEVC2 {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .homepage_sdkModuleContent__zEVC2 ul {
        text-align: left;
    }

    .homepage_extensionModuleContent__NmaBn {
        margin: 0;
    }

    .homepage_extensionModuleContent__NmaBn a {
        margin-right: auto;
        margin-left: auto;
    }
}

@media only screen and (max-width: 390px) {
    .homepage_homepageBannerWrapper__BAnB\+ {
        height: unset;
        overflow: hidden;
        padding: 24px 10px;
    }

    .homepage_homepageBannerContent__Cq2DD .homepage_buttonArea__s9n6Y {
        flex-direction: column;
    }

    .homepage_homepageBannerContent__Cq2DD .homepage_platformsRating__HCPnB {
        flex-direction: column;
        margin: 38px 0 0 0;
    }

    .homepage_platformContainer__AfZnE {
        margin: unset;
    }

    .homepage_mobileBannerImg__5q8js {
        display: none;
    }

    .homepage_banner__ckZwc {
        padding: 24px 10px;
    }

    .homepage_industriesBanner__B90PD .homepage_banner__ckZwc {
        padding-bottom: 80px;
    }
}

@media only screen and (max-width: 320px) {
    .homepage_industriesBanner__B90PD,
    .homepage_extensionModuleContent__NmaBn {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .homepage_bannerContent__R2vSH,
    .homepage_industryTilesContainer__imZpq {
        min-width: unset;
    }

    .homepage_industriesBanner__B90PD .homepage_banner__ckZwc {
        margin: 0;
    }
}
.integrationsRebrand_integrationsContainer__QA1bA {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.integrationsRebrand_title__aQtkP {
    font-weight: 600;
    font-size: 36px;
    line-height: 48px;
    background: linear-gradient(90deg, #8F58AB -8.93%, #3D60E0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
}

.integrationsRebrand_integrationSubtitle__OTCNN {
    font-size: 20px;
    color: #161514;
    padding-top: 16px;
}

.integrationsRebrand_toolsToUseClarityWithContainer__N\+xt0 {
    background-image: url("https://claritystatic.azureedge.net/images/faqBG1920.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    padding-top: 60px;
}
 
.integrationsRebrand_IntegrationsSection__1sOQl {
    width: 100%;
    padding: 96px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.integrationsRebrand_integrationsToInstallClarityContainer__aPYL6 {
    background-image: url(https://claritystatic.azureedge.net/images/module-wave-L.svg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    padding-top: 60px;
}

.integrationsRebrand_wordpressTitle__zgZmX {
    font-weight: 600;
    font-size: 32px;
}

.integrationsRebrand_platformGrid3ColContainer__DP2Ce {
    display: grid;
    grid-template-columns: repeat(3, 360px);
    gap: 48px;
    justify-items: center;
    align-items: center;
}

.integrationsRebrand_platformGridContainer__xmGfs {
    display: grid;
    grid-template-columns: repeat(2, 400px);
    gap: 48px 80px;
    justify-items: center;
    align-items: center;
}

.integrationsRebrand_platformCard__xkysR { 
    width: 400px;
    height: 160px;
    border-radius: 8px;
    padding: 36px 24px;
    gap: 36px;
    background-color: #FFFFFF;
    box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
    display: flex;
    align-items: center;
}

.integrationsRebrand_platformCardCompact__Cj4Ir {
    width: 360px;
    height: 112px;
    gap: 32px;
    padding: 24px;
}
 
.integrationsRebrand_platformCard__xkysR:hover {
    box-shadow: 0px 4.8px 14.4px rgba(0, 0, 0, 0.18), 0px 25.6px 57.6px rgba(0, 0, 0, 0.22);
    cursor: pointer;
}

.integrationsRebrand_platformCard__xkysR:focus-visible,
.integrationsRebrand_platformCardCompact__Cj4Ir:focus-visible {
    outline: 1px solid #000;
}

.integrationsRebrand_platformInfo__mceOy {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.integrationsRebrand_platformName__3Emak {
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: #106EBE;
}

.integrationsRebrand_platformDescription__Xq0r7 {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #323130;
}

.integrationsRebrand_platformLogo__cCAQx {
   width: 64px;
   height: 64px;
}
  
.integrationsRebrand_platformsIcons__RGXNG {
    position: absolute;
    overflow: hidden;
    transform-origin: top left;
    height: 64px;
    width: 64px;
    min-width: 64px;
}
  
.integrationsRebrand_platformsIcons__RGXNG {
    background-image: url(https://claritystatic.azureedge.net/images/allIntegrationsIcons10.png);
    background-repeat: no-repeat;
    overflow: hidden;
    position: relative;
    background-size: 372px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_abtastyIcon__cHr6D {
    background-position: 5px -290px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_optimizelyIcon__\+Jv7K {
    background-position: -270px 0px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_kameleoonIcon__8Rc3p {
    background-position: -137px -290px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_zapierIcon__h4E8\+ {
    background-position: -211px -290px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_firebaseIcon__8W9QS {
    background-position: -280px -290px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_elevarIcon__Hy2Na {
    background-position: 0px 0px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_bubbleIcon__wz5n9 {
    background-position: -66px 5px;
}
  
.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_GAIcon__5NsUj {
    background-position: -133px 0px;
}
  
.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_GOIcon__y1vtC::after {
    left: -370px;
}
  
.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_adobeIcon__MOAc5 {
    background-position: 5px -72px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_clickFunnelsIcon__oyBus {
    background-position: -70px -76px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_gatsbyIcon__1Fpza {
    background-position: -136px -72px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_gtagIcon__UVzXR {
    background-position: -212px -72px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_joomlaIcon__StZOe {
    background-position: -280px -70px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_shopifyIcon__inxYh {
    background-position: 0 -149px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_squarespaceIcon__bchYZ {
    background-position: -62px -152px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_unbounceIcon__PBmIt {
    background-position: -131px -149px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_webflowIcon__9nWc4 {
    background-position: -203px -150px;
}
  
.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_aitocIcon__Ovcdl {
    background-position: -138px -220px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_analyzifyIcon__aayEF {
    background-position: -66px -225px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_softrIcon__QADhg {
    background-position: 0px -225px;
}
  
.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_wordpressIcon__3Hp0U {
    background-position: -209px -220px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_gadsIcon__720g8 {
    background-position: 3px -354px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_msAdsIcon__KMz52 {
    background-position: -64px -354px;
}
  
.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_sharePointIcon__9mfaO {
    background-position: -64px -293px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_wixIcon__x3D8U {
    background-image: url(https://claritystatic.azureedge.net/images/integrations_wixIcon.png);
    background-position: 0px 50%;
    background-size: 64px auto;
}
  
.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_weeblyIcon__w7Mu3 {
    background-image: url(https://claritystatic.azureedge.net/images/integrations_weeblyIcon.png);
    background-size: 64px auto;
    background-position: 0 50%;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_hubspotIcon__ZESZp {
    background-image: url(https://claritystatic.azureedge.net/images/hubspotIcon.png);
    background-size: 64px auto;
    background-position: 0 50%;
}

@media (max-width: 1300px) {
    .integrationsRebrand_platformGrid3ColContainer__DP2Ce {
        grid-template-columns: repeat(2, 360px);
    }
}

@media only screen and (max-width: 900px) {
    .integrationsRebrand_platformGrid3ColContainer__DP2Ce {
        grid-template-columns: repeat(1, 360px);
    }

    .integrationsRebrand_platformGridContainer__xmGfs {
        grid-template-columns: repeat(1, 400px);
    }

    .integrationsRebrand_title__aQtkP,
    .integrationsRebrand_integrationSubtitle__OTCNN {
        padding-left: 40px;
        padding-right: 40px;
        text-align: center;
    }
}

@media only screen and (max-width: 500px) {
    .integrationsRebrand_platformCard__xkysR,
    .integrationsRebrand_platformCardCompact__Cj4Ir {
        width: 350px;
    }

    .integrationsRebrand_platformGrid3ColContainer__DP2Ce,
    platformGridContainer {
        grid-template-columns: repeat(1, 350px);
    }
}

@media only screen and (max-width: 380px) {
    .integrationsRebrand_platformCard__xkysR,
    .integrationsRebrand_platformCardCompact__Cj4Ir {
        width: 280px;
    }

    .integrationsRebrand_platformCard__xkysR {
        height: 180px;
    }

    .integrationsRebrand_platformGrid3ColContainer__DP2Ce,
    platformGridContainer {
        grid-template-columns: repeat(1, 250px);
    }
}

.landingPageRebrandedHeader_homePageContainer__5ttwS {
    height: auto !important;
}

.landingPageRebrandedHeader_homePageContainer__5ttwS button.ms-Button--default,
.landingPageRebrandedHeader_homePageContainer__5ttwS a.ms-Button--default {
    border-radius: 4px;
    border: 1px solid #827DFF;
    background: rgba(255, 255, 255);
    color: #020057;
    font-weight: 600;
}

.landingPageRebrandedHeader_homePageContainer__5ttwS button.ms-Button--default:focus,
.landingPageRebrandedHeader_homePageContainer__5ttwS a.ms-Button--default:focus,
.landingPageRebrandedHeader_homePageContainer__5ttwS button.ms-Button--default:hover,
.landingPageRebrandedHeader_homePageContainer__5ttwS a.ms-Button--default:hover {
    background: #F5F5F5;
    color: #020057;
}

.landingPageRebrandedHeader_homepageBannerWrapper__7QEp5, .landingPageRebrandedHeader_homepageBannerWrapperFull__TnYV7 {
    height: 480px;
    background: linear-gradient(280deg, #A0D6FF 0%, #C2E3FF 36.46%, #DFF0FF 50%, #F5FBFF 77.08%);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.landingPageRebrandedHeader_homepageBannerWrapperFull__TnYV7 {
    height: 620px;
}

.landingPageRebrandedHeader_homepageBanner__n0b8J {
    max-width: 1248px;
    box-sizing: content-box;
    align-items: center;
    justify-content: space-between;
    flex: 1 1 auto;
    gap: 40px;
}

.landingPageRebrandedHeader_homepageBannerContent__yTA7w {
}

.landingPageRebrandedHeader_homepageBannerContent__yTA7w h1 {
    color: #353535;
    font-size: 56px;
    font-weight: 600;
    line-height: 116.5%;
    margin-bottom: 16px;
}

.landingPageRebrandedHeader_homepageBannerContent__yTA7w h2 {
    color: #353535;
    font-size: 24px;
    font-weight: 600;
}

.landingPageRebrandedHeader_homepageBanner__n0b8J .landingPageRebrandedHeader_desktopBannerImg__\+ZzAQ, .landingPageRebrandedHeader_homepageBanner__n0b8J {
    height: 480px;
}

.landingPageRebrandedHeader_desktopBannerSliderImg__23d0V {
    height: 620px;
}

.landingPageRebrandedHeader_desktopBannerSliderImg__23d0V {
    width: 100%;
    overflow: hidden;
    display: block;
}

@media (max-width: 1122px) {
    .landingPageRebrandedHeader_homepageBanner__n0b8J .landingPageRebrandedHeader_desktopBannerImg__\+ZzAQ {
        height: 300px;
    }
}

.landingPageRebrandedHeader_homepageBanner__n0b8J .landingPageRebrandedHeader_mobileBannerImg__nFTE7 {
    display: none;
}

.landingPageRebrandedHeader_homepageBannerContent__yTA7w .landingPageRebrandedHeader_pageBannerFeatures__Z5jS7 {
    margin: 38px 0;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.landingPageRebrandedHeader_homepageBannerContent__yTA7w .landingPageRebrandedHeader_pageBannerFeature__nJesk {
    display: flex;
    align-items: center;
    color: #323130;
    font-size: 16px;
    font-weight: 600;
    line-height: 21px;
    margin-right: 16px;
}

.landingPageRebrandedHeader_pageBannerFeature__nJesk i {
    height: 24px;
    margin-right: 8px;
}

.landingPageRebrandedHeader_homepageBannerContent__yTA7w .landingPageRebrandedHeader_buttonArea__CcbGL {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.landingPageRebrandedHeader_homepageBannerContent__yTA7w .landingPageRebrandedHeader_buttonArea__CcbGL a:last-child {
    color: #0078D4;
    border-color: #005493;
}

.landingPageRebrandedHeader_homepageBannerContent__yTA7w .landingPageRebrandedHeader_buttonArea__CcbGL a:last-child:hover {
    background: #EFF6FC;
}

.landingPageRebrandedHeader_homepageBannerContent__yTA7w .landingPageRebrandedHeader_buttonArea__CcbGL a,
.landingPageRebrandedHeader_homepageBannerContent__yTA7w .landingPageRebrandedHeader_buttonArea__CcbGL button {
    width: 156px;
    height: 38px;
    box-sizing: content-box;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    border-radius: 47px;
    padding: 5px 12px;
    box-shadow: 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.13), 0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.10);
}

.landingPageRebrandedHeader_homepageBannerContent__yTA7w .landingPageRebrandedHeader_ratingContainer__HDKf\+ > div {
    height: 20px;
    margin-bottom: 4px;
}

.landingPageRebrandedHeader_ratingContainer__HDKf\+ button {
    padding: 0;
    height: 20px;
}

.landingPageRebrandedHeader_platformContainer__qfPSN {
    padding: 20px 0;
    margin: 38px 38px 0 0;
}

.landingPageRebrandedHeader_homepageBannerContent__yTA7w .landingPageRebrandedHeader_platfromLogoContainer__ibeW4 {
    width: 36px;
    height: 36px;
    overflow: hidden;
    margin-right: 16px;
}

.landingPageRebrandedHeader_platfromLogoContainer__ibeW4 > img {
    position: relative;
}

.landingPageRebrandedHeader_platfromLogoContainer__ibeW4 .landingPageRebrandedHeader_capterraLogo__bUebw {
    left: -62px;
}

.landingPageRebrandedHeader_platfromLogoContainer__ibeW4 .landingPageRebrandedHeader_g2Logo__jklhM {
    left: 0;
}

.landingPageRebrandedHeader_banner__pXyih {
    padding: 96px;
    align-items: center;
    justify-content: space-between;
    max-width: 1248px;
    margin: 0 auto;
    box-sizing: content-box;
}

.landingPageRebrandedHeader_bannerContent__\+6fyo {
    margin-right: 80px;
    min-width: 376px;
}

.landingPageRebrandedHeader_banner__pXyih h2 {
    color: #161514;
    font-size: 32px;
    font-weight: 600;
    line-height: 40px;
    margin-bottom: 16px;
}

.landingPageRebrandedHeader_bannerContent__\+6fyo div {
    color: #323130;
    font-size: 16px;
    margin-bottom: 32px;
}

.landingPageRebrandedHeader_freeModuleContent__1EOAA button {
    width: 122px;
    height: 22px;
    padding: 5px 12px;
    box-sizing: content-box;
}

.landingPageRebrandedHeader_freeModule__\+BO81 img {
    height: 238px;
    margin: 26px 76px;
}

.landingPageRebrandedHeader_privacyModule__cwG1u {
    background: url("data:image/svg+xml,<svg width=\"1440\" height=\"554\" viewBox=\"0 0 1440 554\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M701 430.5C292.774 429.224 10.8679 541.873 0 554V0C199.472 46.1666 463.924 136 701 136C965 136 1296.68 46.1666 1440 0V554C1364.15 500.6 1027.58 431.521 701 430.5Z\" fill=\"url%28%23paint0_linear_467_952%29\"/><defs><linearGradient id=\"paint0_linear_467_952\" x1=\"-9.68158e-06\" y1=\"0.638248\" x2=\"1413.1\" y2=\"616.373\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"%23F1F1FF\"/><stop offset=\"1\" stop-color=\"%23F9F0FF\"/></linearGradient></defs></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    height: 38vw;
}

.landingPageRebrandedHeader_industryTilesContainer__BNmPD,
.landingPageRebrandedHeader_privacyPointsContainer__rS7fK {
    gap: 24px;
}

.landingPageRebrandedHeader_industryTilesContainer__BNmPD {
    flex: 1 1 auto;
    max-width: 480px;
    min-width: 380px;
}

.landingPageRebrandedHeader_industryTile__4fy5k,
.landingPageRebrandedHeader_privacyPoint__lt7K9 {
    align-items: center;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0px 4.8px 14.4px 0px rgba(131, 126, 255, 0.30);
    padding: 9px 16px;
    gap: 16px;
}

.landingPageRebrandedHeader_industryTile__4fy5k {
    padding: 0 16px 0 0;
    flex: 1 1 auto;
    gap: 0;
    cursor: pointer;
}

.landingPageRebrandedHeader_industryTile__4fy5k > strong {
    font-size: 16px;
    line-height: 20px;
}

.landingPageRebrandedHeader_industryTile__4fy5k a {
    margin-left: auto;
}

.landingPageRebrandedHeader_industryTile__4fy5k a i {
   height: 24px;
   line-height: 24px;
}

.landingPageRebrandedHeader_industryTile__4fy5k a svg {
    height: 24px;
    width: 24px;
 }

.landingPageRebrandedHeader_privacyPoint__lt7K9 span {
    color: #161514;
    font-weight: 600;
    line-height: 20px;
}

.landingPageRebrandedHeader_integrationsContainer__knW2N {
    margin: 96px 0;
}

.landingPageRebrandedHeader_integrationsContainer__knW2N > p {
    text-align: center;
}

.landingPageRebrandedHeader_integrationsContainer__knW2N > p:first-of-type {
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 20px;
    background: linear-gradient(90deg, #8F58AB -8.93%, #3D60E0 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.landingPageRebrandedHeader_integrationsContainer__knW2N > p:last-of-type {
    width: 56%;
    font-size: 16px;
    color: #323130;
    margin: 0 auto;
}

.landingPageRebrandedHeader_integrationsContainer__knW2N > a {
    margin: auto;
}

.landingPageRebrandedHeader_carouselContainerWrapper__rnRMm {
    overflow: hidden;
    position: relative;
    height: 250px;
}

.landingPageRebrandedHeader_carouselContainerWrapper__rnRMm.landingPageRebrandedHeader_companiesCarouselWrapper__-esll {
    height: 100px;
    margin: 40px 0;
    background: linear-gradient(270deg, #FFF 0%, #F9F9FF 63.75%, #F1F1FF 100.52%);
}

.landingPageRebrandedHeader_carouselContainerWrapper__rnRMm::after,
.landingPageRebrandedHeader_carouselContainerWrapper__rnRMm::before {
    content: "";
    background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    height: 100%;
    position: absolute;
    width: 200px;
    z-index: 2;
}

.landingPageRebrandedHeader_carouselContainerWrapper__rnRMm::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}

.landingPageRebrandedHeader_carouselContainerWrapper__rnRMm::before {
    left: 0;
    top: 0;
}

.landingPageRebrandedHeader_carouselContainer__aGfuk {
    position: absolute;
    left: 0;
    top: 0;
    height: 132px;
    width: 300%;
    background: url(https://claritystatic.azureedge.net/images/integrationsLogoInLineV2.png);
    margin: 60px 0;
    background-repeat: repeat-x;
    background-position-y: center;
    animation: landingPageRebrandedHeader_autoScroll__v\+cDa 50s linear infinite;
    transform: translate3d(0, 0, 0);
}

.landingPageRebrandedHeader_companiesCarouselWrapper__-esll .landingPageRebrandedHeader_carouselContainer__aGfuk {
    background: url(https://claritystatic.azureedge.net/images/companiesWithClarity.png);
    animation: unset;
    background-repeat: no-repeat;
    width: calc(100% + 100px);
    height: 100px;
    background-position-x: center;
    margin: 0;
    left: -100px;
} 

@keyframes landingPageRebrandedHeader_autoScroll__v\+cDa {
	0% { left: 0; }
	100% { left: -200%; }
}

.landingPageRebrandedHeader_homePageContainer__5ttwS .focusSection.landingFooter {
    background: url("data:image/svg+xml,<svg width=\"1440\" height=\"401\" viewBox=\"0 0 1440 401\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1440 228.36H0V60.4003C57.6 55.9003 400.2 49.4043 542.4 52.4043C684.6 55.4043 950.546 27.1758 1070 27.1758C1242.2 27.1758 1340.4 61.4043 1440 48.4043V228.36Z\" fill=\"url%28%23paint0_linear_292_25%29\"/><path d=\"M1440 248.414H0V64.9138C57.6 60.4138 322.8 24.1762 465 27.1762C607.2 30.1762 934.146 59.9138 1053.6 59.9138C1225.8 59.9138 1340.4 61.4132 1440 48.4132V248.414Z\" fill=\"url%28%23paint1_linear_292_25%29\"/><path d=\"M1440 400.176H0V51.1758C57.6 46.6758 397.2 52.6758 539.4 55.6758C681.6 58.6758 935.346 67.1758 1054.8 67.1758C1227 67.1758 1340.4 59.6758 1440 46.6758V400.176Z\" fill=\"url%28%23paint2_linear_292_25%29\"/><defs><linearGradient id=\"paint0_linear_292_25\" x1=\"725.5\" y1=\"58.1763\" x2=\"1805.5\" y2=\"80.1764\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"%2397C7FD\"/><stop offset=\"1\" stop-color=\"%23F3FCFF\"/></linearGradient><linearGradient id=\"paint1_linear_292_25\" x1=\"471\" y1=\"35.9043\" x2=\"1547.57\" y2=\"119.715\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"%23B8B6FF\"/><stop offset=\"1\" stop-color=\"%2383ADFF\"/></linearGradient><linearGradient id=\"paint2_linear_292_25\" x1=\"720\" y1=\"46.6758\" x2=\"720\" y2=\"260.176\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"%235AB2F1\"/><stop offset=\"0.5625\" stop-color=\"%23308ADB\"/><stop offset=\"1\" stop-color=\"%23025EC4\"/></linearGradient></defs></svg>");
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 86px;
    padding-top: 152px;
}

.landingPageRebrandedHeader_homePageContainer__5ttwS .footer {
    padding: 0;
}

.landingPageRebrandedHeader_featuresPivotItems__yQsHN,
.landingPageRebrandedHeader_featuresPivot__-fnia {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.landingPageRebrandedHeader_featuresPivot__-fnia {
    margin: 16px 0 68px 0;
    min-height: 672px;
}

.landingPageRebrandedHeader_featuresPivot__-fnia .ms-Pivot {
    border-bottom: 4px solid #D9D9D9;
}

.landingPageRebrandedHeader_featuresPivot__-fnia .ms-Pivot button::before {
    bottom: -4px;
    height: 6px;
}

.landingPageRebrandedHeader_featuresPivot__-fnia .ms-Pivot-text {
    font-weight: 600;
}

.landingPageRebrandedHeader_featuresPivotItems__yQsHN h1 {
    color: #201F1E;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
}

.landingPageRebrandedHeader_featuresPivotItems__yQsHN p {
    margin: 28px 0 16px 0;
}

.landingPageRebrandedHeader_featuresPivotItems__yQsHN img {
    max-width: 800px;
    margin-top: 28px;
    border-radius: 8px;
    box-shadow: 0px 25.6px 57.6px 0px rgba(0, 0, 0, 0.22), 0px 4.8px 14.4px 0px rgba(0, 0, 0, 0.18);
}

.landingPageRebrandedHeader_featuresPivotItems__yQsHN .ms-Button-label {
    text-transform: lowercase;
}

.landingPageRebrandedHeader_featuresPivotItems__yQsHN .ms-Button-label::first-letter {
    text-transform: capitalize;
}

.landingPageRebrandedHeader_featuresPivot__-fnia button:last-child {
    margin-right: 0;
}

.landingPageRebrandedHeader_industriesBanner__9I51Y {
    position: relative;
    overflow: hidden;
}

.landingPageRebrandedHeader_industriesBanner__9I51Y .landingPageRebrandedHeader_bannerContent__\+6fyo {
    max-width: 46%;
}

.landingPageRebrandedHeader_industriesBanner__9I51Y .landingPageRebrandedHeader_ellipse__Ix6OR {
    position: absolute;
    border-radius: 522px;
    background: linear-gradient(180deg, #F1F1FF 0%, #F9F0FF 100%);
    z-index: -1;
    right: -261px;
    bottom: 38px;
    width: 522px;
    height: 522px;
    flex-shrink: 0;
}

.landingPageRebrandedHeader_testimonialsContainer__pq\+T0 {
    overflow: hidden;
    padding: 96px 60px;
}

.landingPageRebrandedHeader_testimonialsContainer__pq\+T0 h2 {
    font-size: 36px;
    font-weight: 600;
    text-align: center;
    background: linear-gradient(90deg, #8F58AB -8.93%, #3D60E0 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.landingPageRebrandedHeader_testimonialsWrapper__nZaUG {
    max-width: 1032px;
    min-height: 380px;
    margin: 50px auto;
    display: flex;
    justify-content: center;
    gap: 120px;
}

.landingPageRebrandedHeader_testimonial__xWKsx {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 264px;
    min-width: 180px;
    min-height: 136px;
}

.landingPageRebrandedHeader_testimonial__xWKsx img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 48px;
}

.landingPageRebrandedHeader_testimonial__xWKsx h3 {
    color: #605E5C;
    font-size: 16px;
}

.landingPageRebrandedHeader_testimonial__xWKsx h3::after,
.landingPageRebrandedHeader_testimonial__xWKsx h3::before {
    content: '"';
}

.landingPageRebrandedHeader_testimonial__xWKsx p {
    align-self: flex-start;
    margin-top: 24px;
}

button.landingPageRebrandedHeader_paginationChevron__fOhJJ {
    margin-right: 40px;
    padding: 22px;
}

.landingPageRebrandedHeader_mobilePaginationChevron__o1aiI.landingPageRebrandedHeader_previous__Opvca,
.landingPageRebrandedHeader_paginationChevron__fOhJJ.landingPageRebrandedHeader_previous__Opvca {
    transform: rotate(180deg);
}

.landingPageRebrandedHeader_mobilePaginationChevron__o1aiI {
    margin-left: auto;
    display: none;
}

.landingPageRebrandedHeader_mobilePaginationChevron__o1aiI.landingPageRebrandedHeader_previous__Opvca {
    margin-left: 0;
    margin-right: auto;
}

.landingPageRebrandedHeader_paginationChevron__fOhJJ.landingPageRebrandedHeader_previous__Opvca {
    margin: 0 0 0 40px;
}

.landingPageRebrandedHeader_mobilePaginationChevron__o1aiI svg,
.landingPageRebrandedHeader_mobilePaginationChevron__o1aiI i,
.landingPageRebrandedHeader_paginationChevron__fOhJJ i,
.landingPageRebrandedHeader_paginationChevron__fOhJJ svg {
    width: 40px;
    height: 40px;
}

.landingPageRebrandedHeader_mobilePaginationChevron__o1aiI path,
.landingPageRebrandedHeader_paginationChevron__fOhJJ path {
    fill: #A7A5F5;
}

.landingPageRebrandedHeader_paginationIndicator__Atx3v {
    width: 4px;
    height: 4px;
    border-radius: 4px;
    background-color: #0078D4;
    margin-right: 12px;
}

.landingPageRebrandedHeader_paginationIndicator__Atx3v.landingPageRebrandedHeader_selected__GPXwL {
    width: 6px;
    height: 6px;
    border-radius: 6px;
}

.landingPageRebrandedHeader_homePageContainer__5ttwS .footerLinksContainer {
    padding: 0 54px;
}

.landingPageRebrandedHeader_footerContainer__3jsnU {
    background: url("data:image/svg+xml,<svg width=\"1440\" height=\"1279\" viewBox=\"0 0 1440 1279\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1440 7.41149V1279H0V25.5523C14.1706 26.6105 75.3065 30.1781 206.485 35.983C370.459 43.2391 405.548 36.4365 619.456 26.0058C833.365 15.5752 879.25 3.78343 1062.12 0.608876C1208.41 -1.93077 1375 4.08577 1440 7.41149Z\" fill=\"url%28%23paint0_linear_467_666%29\"/><defs><linearGradient id=\"paint0_linear_467_666\" x1=\"720\" y1=\"29.5\" x2=\"720\" y2=\"1488\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"%23EDF7FF\"/><stop offset=\"0.113453\" stop-color=\"%23F9FCFF\"/><stop offset=\"0.682292\" stop-color=\"%23F7FBFF\"/><stop offset=\"1\" stop-color=\"%23DDEFFF\"/></linearGradient></defs></svg>");
    background-repeat: no-repeat;
    background-size: cover;
}

.landingPageRebrandedHeader_sdkImage__HNvny {
    width: 500px;
    margin: 0 42px;
}

.landingPageRebrandedHeader_sdkModuleContent__BWyjY > div {
    margin-bottom: 16px;
}

.landingPageRebrandedHeader_sdkModuleContent__BWyjY > a {
    margin-top: 16px;
}

.landingPageRebrandedHeader_sdkSupport__8maz2 {
    margin-bottom: 32px;   
    gap: 8px; 
}

.landingPageRebrandedHeader_sdkSupport__8maz2 > strong {
    margin-right: 4px;
}

.landingPageRebrandedHeader_extensionModuleContent__FOJWT {
    margin: 0 0 0 80px;
}

.landingPageRebrandedHeader_extensionModuleContent__FOJWT > div {
    margin-bottom: 16px;
}

.landingPageRebrandedHeader_extensionModuleContent__FOJWT > a {
   display: block;
}

.landingPageRebrandedHeader_extensionModuleContent__FOJWT > a:last-of-type {
    margin-top: 32px;
    padding: 0 16px;
    max-width: 128px;
}

@media only screen and (max-width: 1440px) {
    .landingPageRebrandedHeader_homepageBanner__n0b8J {
        gap: 40px;
        padding-left: 20px;
    }
}

@media only screen and (max-width: 1440px) {
    .landingPageRebrandedHeader_bannerContent__\+6fyo {
        margin-right: 40px;
    }

    .landingPageRebrandedHeader_freeModule__\+BO81 img {
        margin-right: 0;
        margin-left: 0;
    }
} 

/*less than a 1157px (laptop screen)*/
@media only screen and (max-width: 1157px) {
    .landingPageRebrandedHeader_homepageBannerWrapperFull__TnYV7 {
        height: 680px;
    }
}

/*less than a 1000px (mobile screen)*/
@media only screen and (max-width: 1000px) {
    .landingPageRebrandedHeader_homepageBannerWrapperFull__TnYV7 {
        height: 1100px;
        padding-top: 60px;
    }

    .landingPageRebrandedHeader_homepageBanner__n0b8J {
        flex-direction: column;
        padding: 0px 60px 0px;
        align-items: center;
        justify-content: center;
        gap: 60px;
        height: 100%;
    }

    .landingPageRebrandedHeader_homepageBanner__n0b8J .landingPageRebrandedHeader_desktopBannerImg__\+ZzAQ {
        display: none;
    }

    .landingPageRebrandedHeader_homepageBanner__n0b8J .landingPageRebrandedHeader_desktopBannerSliderImg__23d0V {
        height: 620px;
    }

    .landingPageRebrandedHeader_pageBannerFeatures__Z5jS7 {
        justify-content: center;
    }

    .landingPageRebrandedHeader_featuresPivotItems__yQsHN {
        margin: 0 20px;
        text-align: center;
    }

    .landingPageRebrandedHeader_featuresPivotItems__yQsHN {
        margin-top: 80px;
    }

    .landingPageRebrandedHeader_featuresPivotItems__yQsHN > p {
        margin: 16px 0;
    }

    .landingPageRebrandedHeader_featuresPivotItems__yQsHN > img {
        width: 100%;
    }

    .landingPageRebrandedHeader_freeModule__\+BO81 {
        margin-top: 80px;
    }

    .landingPageRebrandedHeader_banner__pXyih {
        padding: 80px 48px;
        flex-direction: column;
        align-items: center;
        gap: 80px;
    }

    .landingPageRebrandedHeader_banner__pXyih > img {
        display: none;
    }

    .landingPageRebrandedHeader_bannerContent__\+6fyo {
        text-align: center;
        margin-right: 0;
    }

    .landingPageRebrandedHeader_integrationsContainer__knW2N {
        margin: 80px 0;
    }

    .landingPageRebrandedHeader_integrationsContainer__knW2N > p:last-of-type,
    .landingPageRebrandedHeader_integrationsContainer__knW2N p {
        margin-right: 20px;
        margin-left: 20px;
    }

    .landingPageRebrandedHeader_integrationsContainer__knW2N > p:last-of-type {
        width: calc(100% - 20px);
    }

    .landingPageRebrandedHeader_industryTilesContainer__BNmPD {
        margin: 0;
        flex-direction: column;
    }

    .landingPageRebrandedHeader_industriesBanner__9I51Y .landingPageRebrandedHeader_bannerContent__\+6fyo {
        width: 100%;
        max-width: unset;
    }

    .landingPageRebrandedHeader_companiesCarouselWrapper__-esll .landingPageRebrandedHeader_carouselContainer__aGfuk {
        animation: landingPageRebrandedHeader_autoScroll__v\+cDa 30s linear infinite;
        background-repeat: repeat-x;
        width: 300%;
        background-position-x: left;
    }

    .landingPageRebrandedHeader_testimonialsContainer__pq\+T0 {
        padding: 80px 38px;
    }

    .landingPageRebrandedHeader_paginationChevron__fOhJJ {
        display: none;
    }

    .landingPageRebrandedHeader_mobilePaginationChevron__o1aiI {
        display: block;
    }

    .landingPageRebrandedHeader_sdkModuleContent__BWyjY {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .landingPageRebrandedHeader_sdkModuleContent__BWyjY ul {
        text-align: left;
    }

    .landingPageRebrandedHeader_extensionModuleContent__FOJWT {
        margin: 0;
    }

    .landingPageRebrandedHeader_extensionModuleContent__FOJWT a {
        margin-right: auto;
        margin-left: auto;
    }
}

@media only screen and (max-width: 440px) {
    .landingPageRebrandedHeader_homepageBanner__n0b8J {
        padding: 0px 10px 0px;
    }
}

@media only screen and (max-width: 390px) {

    .landingPageRebrandedHeader_homepageBannerWrapper__7QEp5 {
        height: 1028px;
    }

    .landingPageRebrandedHeader_homepageBannerContent__yTA7w .landingPageRebrandedHeader_buttonArea__CcbGL {
        flex-direction: column;
    }

    .landingPageRebrandedHeader_homepageBannerContent__yTA7w .landingPageRebrandedHeader_platformsRating__5qidv {
        flex-direction: column;
        margin: 38px 0 0 0;
    }

    .landingPageRebrandedHeader_platformContainer__qfPSN {
        margin: unset;
    }
}
/* Common */

.landingPages_landingPageContainer__tt-\+M {
    height: auto !important;
}

.landingPages_focusSection__UZJ\+B {
	background: white;
    text-align: center;
    width: 100%;
}

.landingPages_focusSectionLight__rmSoa {
    background-color: #deecf9;
    color: #fff;
    text-align: center;
    width: 100%;
}

.landingPages_landingSectionTitle__1G9cc {
    background-image: linear-gradient(90deg, #8F58AB -8.93%, #3D60E0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 36px;
    font-weight: 600;
    text-align: center;
}

/* Highlights*/

.landingPages_highlightsSection__UWr9c {
    margin: 0 auto;
    color: inherit;
    padding: 0px;
}

.landingPages_highlightContainer__0ykxE {
    text-align: left;
}

.landingPages_highlightContainer__0ykxE h3 {
    font-size: 36px;
    line-height: 47px;
    font-weight: 600;
    color: inherit;
    text-align: left;
    margin-bottom: 32px;
}

.landingPages_highlight__1fLzT {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 96px;
    color:#323130;
    cursor: default;
    gap: 80px;
}

.landingPages_highlightContainer__0ykxE:nth-child(odd) .landingPages_highlight__1fLzT {
    flex-direction: row-reverse;
}

.landingPages_highlightContainer__0ykxE:nth-child(even) .landingPages_highlight__1fLzT {
	background-image: url("https://claritystatic.azureedge.net/images/module-wave-L.svg");
	background-size: cover;
	background-repeat: no-repeat;
}

.landingPages_highlightMedia__huD\+e {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    justify-self: center;
    width: calc(50% - 40px);
    max-width: 800px;
}

.landingPages_highlightMedia__huD\+e img {
    width: 100%;
    display: block;
    margin: 0;
    border-radius: 10px;
    filter: drop-shadow(0px 4.8px 14.4px rgba(0, 0, 0, 0.18));
}

.landingPages_highlightTextWrapper__Xe84t {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-items: flex-start;
    color: #323130;
    flex: 1;
    max-width: 670px;
}

.landingPages_highlightPointsList__v4HSb {
    gap: 8px;
    display: flex;
    flex-direction: column;
    margin-left: 16px;
    text-align: left;
}

.landingPages_highlightPoint__2Rdlh {
    color: #323130;
    font-size: 16px;
}

.landingPages_highlightPoint__2Rdlh span {
	font-weight: 600;
    margin-right: 5px;
}

.landingPages_highlightSectionsList__PZHM2 {
	list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.landingPages_highlightSection__Pb5tC {
	font-size: 16px;
    line-height: 26px;
}

.landingPages_highlightSection__Pb5tC span {
	display: block;
	font-weight: 600;
    margin-right: 5px;
}

.landingPages_highlightButtonsContainer__s9YfW {
    margin: 16px 0px 12px;
    display: flex;
    gap: 8px;
}

.landingPages_highlightButtonItem__HYUsZ {
	font-size: 14px;
	line-height: 20px;
	padding: 5px 12px;
	font-weight: 600;
	color: #020057;
	border-radius: 4px;
	border: 1px solid #827DFF;
	background: rgba(255, 255, 255, 0.30);
}

.landingPages_highlightButtonItem__HYUsZ:hover {
	background: #F5F5F5;
	text-decoration: none;
}

.landingPages_highlightMediaCarousel__vkVXe {
    display: flex;
    height: fit-content;
    width: 350px;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
}

.landingPages_highlightMediaCarousel__vkVXe h4 {
    text-align: center;
}

.landingPages_highlightMediaCarouselButtons__YaMhp {
    display: block;
}

.landingPages_highlightMediaCarouselButtons__YaMhp:hover {
    background: none;
}

.landingPages_previousButton__Cqkdz {
    transform: rotate(180deg);
}

.landingPages_highlightMediaCarouselButtons__YaMhp i, 
.landingPages_highlightMediaCarouselButtons__YaMhp svg {
    width: 24px;
    height: 24px;
}

.landingPages_highlightMediaCarouselButtons__YaMhp path {
    fill: #A7A5F5;
}

.landingPages_highlightMediaPagination__OvkTW {
    display: flex;
    align-items: center;
    padding-top: 12px;
    gap: 12px;
}

.landingPages_paginationItem__onInW {
    width: 4px;
    height: 4px;
    border-radius: 4px;
    background-color: #0078D4;
}

.landingPages_paginationItemSelected__nq34L {
    width: 6px;
    height: 6px;
    border-radius: 6px;
}

@media only screen and (max-width: 900px) {

    .landingPages_highlightContainer__0ykxE:nth-child(odd) .landingPages_highlight__1fLzT,
    .landingPages_highlightContainer__0ykxE:nth-child(even) .landingPages_highlight__1fLzT {
        flex-direction: column;
        padding: 40px 20px;
        gap: 30px;
    }

    .landingPages_highlightMedia__huD\+e {
        width: 100%;
    }

    .landingPages_highlightMedia__huD\+e img {
        width: 100%;
        min-width: 300px;
        max-width: 500px;
    }

    .landingPages_highlightTextWrapper__Xe84t {
        text-align: center;
        align-items: center;
        width: 90%;
        margin: auto;
        max-width: 550px;
    }

    .landingPages_highlightContainer__0ykxE h3 {
        text-align: center;
    }

    .landingPages_highlightSection__Pb5tC {
        line-height: 24px;
    }

    .landingPages_highlightButtonsContainer__s9YfW {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Clarity Offers */

.landingPages_clarityOffersSection__T3rT\+ {
    display: flex;
    align-items: center;
    padding: 96px 80px;
    flex-direction: column;
    gap: 50px;
}


.landingPages_clarityOffersContainer__14ooD {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-items: center;
    gap: 50px;
    max-width: 1700px;
}

.landingPages_clarityOfferInstance__YDaJX {
    max-width: 320px;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
}

.landingPages_clarityOfferImage__e1YKD {
    max-width: 100%;
    max-height: 350px;
    min-width: 250px;
    margin-bottom: 36px;
    width: auto;
}

.landingPages_clarityOfferText__uO4ib h3 {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    text-align: center;
}

.landingPages_clarityOfferInstance__YDaJX p {
    width: 100%;
    max-width: 320px;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    margin: 12px 0px 24px;
}

.landingPages_clarityOfferLearnMore__L4MyF {
    margin-top: auto;
    border: 1px solid #0078D4;
    color: #004578;
    border-radius: 4px;
    padding: 4px 16px;
    font-weight: 600;
    line-height: 22px;
    text-wrap: nowrap;
}

.landingPages_clarityOfferLearnMore__L4MyF:hover {
    background-color: #EFF6FC;
    text-decoration: none;
    color: #004578;
}

@media only screen and (min-width: 1440px) {
    .landingPages_clarityOffersContainer__14ooD {
        gap: 120px;
    }
}

@media only screen and (max-width: 900px) {

    .landingPages_clarityOffersSection__T3rT\+ {
        padding: 40px 20px;
        gap: 30px;
    }

    .landingPages_clarityOfferInstance__YDaJX {
        width: 90%;
    }

    .landingPages_clarityOffersContainer__14ooD {
        grid-template-columns: auto;
    }

    .landingPages_clarityOfferText__uO4ib {
        min-height: unset;
    }

	.landingPages_clarityOfferInstance__YDaJX p {
        max-width: 450px;
    }

    .landingPages_standaloneFeaturesContainer__8MIvo table {
        margin: 50px 30px 60px;
    }
}

/* FAQs */

.landingPages_faqSection__WeaLW {
    background-image: url("https://claritystatic.azureedge.net/images/purpleCircle.png");
    background-repeat: no-repeat;
    background-position-y: top;
    background-position-x: calc(100% + 195px);
    min-height: 520px;
    padding: 0px 80px;
    margin: 80px 0px;
    gap: 40px;
    display: flex;
    align-items: center;
    background-color: transparent;
}

@media only screen and (min-width: 1380px) {
    .landingPages_faqSection__WeaLW {
        background-position: calc(50% + 620px);
    }   
}

@media only screen and (max-width: 640px) {
	.landingPages_faqSection__WeaLW {
		padding: 40px 20px;
        background-position-x: calc(100% + 255px);
	}
}

.landingPages_singleCol__poK9N {
    flex-direction: row;
    justify-content: center;
}

.landingPages_doubleCol__\+PI-m {
    flex-direction: column;
    background-position-y: 160px;
    min-height: 680px;
}

.landingPages_faqSectionSingleColTitle__F-3T3 {
    width: 50%;
    row-gap: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 624px;
}

.landingPages_faqSectionSingleColTitle__F-3T3 .landingPages_landingSectionTitle__1G9cc {
    text-align: left;
}

.landingPages_faqSectionSingleColTitleBtn__p3psy {
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid #827DFF;
    border-radius: 4px;
}

.landingPages_faqSectionSingleColTitleBtn__p3psy a {
    font-weight: 600;
    color: #020057;
}

.landingPages_faqSectionSingleColTitleBtn__p3psy a:focus-visible {
    outline: 1px solid #000;
}

.landingPages_faqSectionDoubleColContainer__AZV9u {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 40px;
}

.landingPages_faqsColumn__jT8sw {
    width: 50%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media only screen and (max-width: 767px) {
    .landingPages_faqSectionDoubleColContainer__AZV9u {
        flex-wrap: wrap;
        gap: 24px;
    }

    .landingPages_faqsColumn__jT8sw {
        width: 100%;
    }
}

.landingPages_faqCard__hNF2G {
    box-shadow: 0px 4.8px 14.4px 0px #837EFF4D;
    border-radius: 8px;
    background: #FFFFFF;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.landingPages_faqQuestion__iU-fw {
    display: flex;
    align-items: center;
    cursor: pointer;
    justify-content: space-between;
}

.landingPages_faqQuestion__iU-fw h2 {
    font-weight: 600;
    color: #161514;
    padding-right: 20px;
}

.landingPages_faqAnswer__vNYwr {
    padding-right: 34px;
}

@media only screen and (max-width: 900px){
    .landingPages_paginationChevron__RxVFt {
        display: none;
    }

    .landingPages_paginationChevronInline__OdnR1 {
        display: block;
    }

    .landingPages_paginationControls__yiC78 {
        justify-content: space-between;
    }
}


/* Landing page header */

.landingPages_landingPageHeaderSection__Gmkp4 {
    background: linear-gradient(280.24deg, #A0D6FF 0%, #C2E3FF 36.46%, #DFF0FF 50%, #F5FBFF 77.08%);
    height: fit-content;
    min-height: 480px;
    padding: 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.landingPages_landingPageBanner__ADvtI {
    display: flex;
    align-items: center;
    gap: 40px;
    width: 100%;
    max-width: 1700px;
}

.landingPages_landingPageHeaderSection__Gmkp4 img {
    width: calc(50% - 40px);
    max-height: 480px;
    object-fit: scale-down;
}

.landingPages_landingPageBannerContent__XOAxc {
    padding-left: 90px;
    display: flex;
    flex-direction: column;
    max-width: 50%;
}

.landingPages_landingPageBannerContent__XOAxc h2 {
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: #353535;
}

.landingPages_landingPageBannerContent__XOAxc h1 {
    font-weight: 600;
    font-size: 58px;
    line-height: 67px;
    color: #353535;
    padding-bottom: 16px;
}

.landingPages_landingPageBannerSubtitle__ZU0nI {
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #3B3A39;
}

.landingPages_landingPageActionButtons__XKIEr {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.landingPages_landingPageActionButtons__XKIEr .ms-Button,
.landingPages_extraButtons__npxRH a {
    min-width: 156px;
    height: 38px;
    box-sizing: content-box;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    border-radius: 47px;
    padding: 5px 0px;
    box-shadow: 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.13), 0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.10);
}

.landingPages_landingPageActionButtons__XKIEr .ms-Button-textContainer {
    text-wrap: nowrap;
    padding: 0px 12px;
}

@media only screen and (max-width: 1440px) {
   .landingPages_landingPageBannerContent__XOAxc {
        padding: 20px 0px 20px 48px;
   }
}

@media only screen and (max-width: 1000px) {
    .landingPages_landingPageHeaderSection__Gmkp4 {
        height: fit-content;
        min-height: 480px;
    }

    .landingPages_landingPageHeaderSection__Gmkp4 img {
        display: none;
    }

    .landingPages_landingPageBanner__ADvtI {
        justify-content: center;
        max-width: 100%
    }

    .landingPages_landingPageBannerContent__XOAxc {
        padding-left: 0px;
        text-align: center;
        align-items: center;
        max-width: 100%;
        padding: 20px;
    }

    .landingPages_landingPageActionButtons__XKIEr {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Free Features (Pricing landing page) */

.landingPages_freeFeaturesSection__ngw8m {
    padding: 80px 96px;
    display: flex;
    gap: 80px;
    align-items: center;
    justify-content: center;
}

.landingPages_freeFeaturesTitleContainer__OCeJK {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    color: #323130;
    width: 50%;
    max-width: 700px;
}

.landingPages_freeFeatureTitle__nEEfd {
    font-size: 36px;
    line-height: 34px;
    font-weight: 600;
    color: inherit;
    text-align: left;
    margin-bottom: 36px;
}

.landingPages_freeFeatureSubtitle__cDtt0 {
    font-size: 16px;
    line-height: 26px;
}

.landingPages_freeFeaturesListContainer__rfpSH {
    width: 50%;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.landingPages_freeFeaturesList__hUhNQ {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.landingPages_freeFeatureItem__E5sjx {
    display: flex;
    align-items: center;
    gap: 12px;
}

.landingPages_freeFeatureItem__E5sjx svg {
    min-width: 32px;
    min-height: 32px;
}

.landingPages_freeFeatureItem__E5sjx span {
    color: #323130;
    font-size: 16px;
}

.landingPages_freeFeaturesToggleButton__o-DMN {
    font-size: 14px;
    line-height: 20px;
    padding: 5px 12px !important;
    font-weight: 600;
    color: #020057 !important;
    border: 1px solid #827DFF !important;
    background: rgba(255, 255, 255, 0.30);
    width: fit-content;
}

@media only screen and (max-width: 900px) {
    .landingPages_freeFeaturesSection__ngw8m {
        flex-direction: column;
        padding: 80px 20px;
        gap: 40px;
    }

    .landingPages_freeFeaturesTitleContainer__OCeJK,
    .landingPages_freeFeaturesListContainer__rfpSH {
        width: 100%;
        align-items: center;
    }

    .landingPages_freeFeatureSubtitle__cDtt0,
    .landingPages_freeFeatureTitle__nEEfd {
        text-align: center;
    }
}

.landingPages_mobileWorksWithSection__mMoSe {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 96px;
    padding: 0px 96px 96px;
    gap: 60px;
    background-size: 100% 100%;
    flex-direction: column;
}

@media only screen and (min-width: 1920px) {
    .landingPages_mobileWorksWithSection__mMoSe {
        background-image: url("https://claritystatic.azureedge.net/images/purpleBG2440-1920.png");
    }   
}

@media only screen and (min-width: 1440px) and (max-width: 1920px) {
    .landingPages_mobileWorksWithSection__mMoSe {
        background-image: url("https://claritystatic.azureedge.net/images/purpleBG1920-1440.png");
    }   
}

@media only screen and (min-width: 1000px) and (max-width: 1440px) {
    .landingPages_mobileWorksWithSection__mMoSe {
        background-image: url("https://claritystatic.azureedge.net/images/purpleBG1493-1000.png");
    }   
}

@media only screen and (min-width: 440px) and (max-width: 1000px) {
    .landingPages_mobileWorksWithSection__mMoSe {
        background-image: url("https://claritystatic.azureedge.net/images/purpleBG999-440.png");
    }   
}

@media only screen and (max-width: 440px) {
    .landingPages_mobileWorksWithSection__mMoSe {
        padding: 0px 20px 40px;
        margin-top: 40px;
        gap: 40px;
        background-image: url("https://claritystatic.azureedge.net/images/purpleBG439-380.png");
    }   
}

.landingPages_mobileFrameworksContainer__aqhZJ {
    display: flex;
    gap: 48px;
    flex-wrap: wrap;
    justify-content: center;
}

.landingPages_mobileFrameworkCard__NBv8r {
    width: 360px;
    height: 112px;
    padding: 24px 24px 24px 32px;
    display: flex;
    gap: 32px;
    align-items: center;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 4.8px 14.4px 0px #837EFF4D;
}

.landingPages_mobileFrameworksContainer__aqhZJ img {
    height: 64px;
    width: 64px;
    object-fit: contain;
}

.landingPages_mobileFrameworkLabel__00ugW {
    color: #106EBE;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
}

.landingPages_mobileFeaturesSection__GLZsf {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 46px;
    padding: 0px 96px 96px;
    gap: 60px;
    flex-direction: column;
}

.landingPages_mobileFeaturesContainer__Ovr-r {
    grid-template-columns: 390px 390px 390px;
    display: grid;
    gap: 40px;
}

.landingPages_mobileFeaturesCard__Ht7ZC {
    display: flex;
    flex-direction: column;
}

.landingPages_mobileFeaturesCard__Ht7ZC i,
.landingPages_mobileFeaturesCard__Ht7ZC svg {
    height: 60px;
    width: 60px;
}

.landingPages_mobileFeatureTitle__Q9VnB {
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    padding: 16px 0px 8px;
    color: #323130;
    text-align: left;
}

.landingPages_mobileFeatureText__yKt1z {
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    color: #323130;
}

@media only screen and (min-width: 1000px) and (max-width: 1440px) {
    .landingPages_mobileFeaturesContainer__Ovr-r {
        grid-template-columns: 430px 430px;
    }

    .landingPages_mobileFeaturesSection__GLZsf {
        padding: 0px 46px 46px;
    }
}

@media only screen and (max-width: 999px) {
    .landingPages_mobileFeaturesContainer__Ovr-r {
        grid-template-columns: 400px;
    }

    .landingPages_mobileFeaturesCard__Ht7ZC {
        align-items: center;
    }

    .landingPages_mobileFeatureText__yKt1z {
        text-align: center;
    }
}

@media only screen and (max-width: 400px) {
    .landingPages_mobileFeaturesContainer__Ovr-r {
        grid-template-columns: 350px;
    }
}

.layout_footer__DE8eA {
    background-color: #F2F2F2;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #6A6A6A ;
    font-size: 11px;
    line-height: 16px;
}

.layout_footerNavContainer__-98l6 {
    background: #EAEAFF;
    padding: 80px 54px;
    display: flex;
    gap: 96px;
    width: 100%;
    justify-content: center;
    color: #323130;
    font-size: 16px;
    line-height: 22px;
}

.layout_footerNavContainer__-98l6 path {
    fill: #323130;
}

.layout_footerLink__EJRQw {
    cursor: pointer;
    color: #323130;
    text-decoration: none;
}

div.newFooterLinksContainer {
    padding: 26px 54px;
}

@media only screen and (max-width: 1100px) {
    .layout_footerNavContainer__-98l6 {
        flex-direction: column-reverse;
        padding: 26px 54px;
        row-gap: 24px;
    }
}
.mobile_projContent__GpqR4 {
}

.mobile_projContent__GpqR4.mobile_mobile__7hiIo {
    background-color: #EFF6FC;
}

.mobile_projContent__GpqR4.mobile_mobile__7hiIo .tabContentHeader.mobile {
    box-shadow: 0px 3.2px 7.2px 0px rgba(131, 126, 255, 0.12), 0px 0.6px 1.8px 0px rgba(131, 126, 255, 0.10);
    padding: 8px 16px;
}

.mobile_projContent__GpqR4.mobile_mobile__7hiIo .tabContentHeader.app {
    overflow-x: hidden;
}

.mobile_closeMobilePlayer__x5Dt1 {
    position: absolute;
    z-index: 100;
    width: fit-content;
    top: 0;
    right: 0;
}

.mobile_closeMobilePlayer__x5Dt1 i {
    color: #212121;
    font-weight: 600;
}

.mobile_closeMobilePlayer__x5Dt1 .mobile_closeIcon__GwMFi {
    height: 45px;
    width: 45px;
}

/********************************************/
/***********      Footer     **************/
/********************************************/

.mobile_footerNavButton__JsXDr {
    text-align: center;
    width: 100%;
    height: 100%;
    margin-top: 8px;
    display: flex;
    flex-flow: column;
}

.mobile_footerNavButton__JsXDr.mobile_selected__ArVDF div {
    font-weight: 600;
}

.mobile_footerNavButton__JsXDr.mobile_disabled__h9gsc {
    pointer-events: none;
    color: #BEBBB8;
}

.mobile_footerNavButton__JsXDr.mobile_disabled__h9gsc path {
    fill: #BEBBB8;
}

.mobile_footerNavButton__JsXDr i {
    height: 24px;
}

/********************************************/
/***********   Getting started  **************/
/********************************************/

.mobile_gettingStartedMobile__1d6dh {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: linear-gradient(180deg, #E9F7FF 0%, #FFFFFF 100%);
    gap: 32px;
}

.mobile_gettingStartedMobile__1d6dh img {
    width: 100%;
    max-width: 400px;
    padding: 24px 40px 0px;
}

.mobile_gettingStartedMobileText__KtGuB {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    padding: 0px 40px;
}

.mobile_gettingStartedMobileTitle__zMrR3 {
    font-size: 20px;
    font-weight: 600;
}

.mobile_gettingStartedMobileMessage__yDA55 {
    max-width: 345px;
}

.mobile_gettingStartedMobileButton__9qmwZ {
    min-height: 44px;
    margin: 0px 40px;
}

.mobile_setUpEmailStatusContainer__evTwB {
    height: 40px;
    width: 100%;
    bottom: 0;
    position: absolute;
}

.mobile_setUpEmailStatus__DNGJJ {
    background: #FAFAFA;
    display: flex;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 0px 16px;
    height: 40px;
}

.mobile_setUpEmailStatus__DNGJJ svg path {
    fill: #008A00;
}

@media screen and (max-width: 400px) {
    .mobile_gettingStartedMobile__1d6dh img {
        max-width: 340px;
        padding-top: 16px;
    }
}

/********************************************/
/***********      Player     **************/
/********************************************/

.mobile_playbackContainer__6wixs.mobile_mobile__7hiIo {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
}

.mobile_mobile__7hiIo .mobile_videoWrapper__cdCql {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

.mobile_mobile__7hiIo .filtersContent {
    overflow: auto;
    scrollbar-width: none;
}

.mobile_mobile__7hiIo .filtersContent::-webkit-scrollbar {
    display: none;
}

.mobile_mobile__7hiIo .filterBadgeNavWrapper {
    overflow: unset;
}

.mobile_filtersDivider__QvGzA {
    height: 40px;
    width: 1px;
    background: #A19F9D;
    margin-left: 16px;
}

.mobile_filtersGradient__1bVuh {
    width: 14px;
    height: 40px;
    position: relative;
    z-index: 2;
}

.mobile_filtersGradient__1bVuh.mobile_left__tWGt1 {
    background: linear-gradient(90deg, #EFF6FC 0%, rgba(239, 246, 252, 0.00) 100%);
    left: 6px;
}

.mobile_filtersGradient__1bVuh.mobile_right__9Tgdz {
    background: linear-gradient(-90deg, #EFF6FC 0%, rgba(239, 246, 252, 0.00) 100%);
    right: 5px;
}

.mobile_filtersGradient__1bVuh.mobile_left__tWGt1.mobile_withButton__n6YSh {
    left: 6px;
}

.mobile_impressions__TtLDA.mobile_mobile__7hiIo {
    width: 100%;
    background-color: #EFF6FC;
    overflow: hidden;
    padding: 12px;
}

.mobile_impressions__TtLDA.mobile_mobile__7hiIo>div {
    width: 100%;
    overflow: hidden;
}

.mobile_videoControlPanel__WQ582 {
    padding-top: 6px;
    background-color: white;
    width: 100%;
    padding: unset;
    border-bottom: solid 1px #EDEBE9;
    z-index: 101;
    position: absolute;
    bottom: 0;
}

.mobile_mobile__7hiIo .mobile_videoTimestamp__m0ELP {
    height: 42px;
    min-height: 42px;
    display: flex;
    align-items: center;
    background-color: white;
    margin: 0 5px 0 32px;
    font-weight: 600;
    gap: 4px;
}

.mobile_mobile__7hiIo .mobile_videoTimestamp__m0ELP .mobile_timeString__oV-iY {
    min-width: 86px;
}

.mobile_mobile__7hiIo .mobile_videoTimestamp__m0ELP .mobile_shortTimeString__c1UYb {
    width: 35px;
    min-width: 35px;
}

.mobile_mobile__7hiIo .mobile_slider__aCun6 {
    position: relative;
    display: flex;
    background: linear-gradient(281deg, #0078D4 0%, #9692FF 94.81%);
}

.mobile_progressWrapper__RpRTN {
    display: flex;
    justify-content: end;
}

.mobile_mobileControllers__cmbTJ {
    position: absolute;
    display: flex;
    align-items: center;
    left: 50%;
    z-index: 101;
    transition: "transform 0.2s";
}

.mobile_mobileControllers__cmbTJ i {
    height: 32px;
}

.mobile_mobileControllers__cmbTJ .mobile_is-disabled__41SYq.mobile_disabledVideoControl__Oi8lY {
    background-color: transparent;
}

.mobile_mobileControllers__cmbTJ .mobile_ms-Button--icon__o0euN:hover {
    background-color: transparent;
}

.mobile_mobile__7hiIo .mobile_mobilePlayButton__5HAvW {
    margin: 0 10px;
    height: 74px;
}

.mobile_mobileReplayHeader__SYTrf {
    display: grid;
    position: absolute;
    right: 0;
    z-index: 100;
    bottom: 0;
    padding-bottom: 22%;
    margin-right: 20px;
    gap: 12px;
}

.mobile_mobileReplayHeader__SYTrf i {
    height: 24px;
    width: 24px;
    font-size: 24px;
    line-height: 24px;
}

.mobile_mobile__7hiIo .mobile_mobileReplayHeader__SYTrf .ms-Button {
    background-color: white;
    min-width: unset;
    height: 56px;
    width: 56px;
    border-radius: 40px;
    box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, .132), 0 1.2px 3.6px 0 rgba(0, 0, 0, .108);
}

.mobile_mobileReplayHeader__SYTrf.mobile_landscape__zQ7fB {
    display: grid;
    display: flex;
    position: absolute;
    padding-bottom: 10%;
    gap: 8px;
}

/********************************************/
/***********     Timeline      **************/
/********************************************/

.mobile_mobileTimelineEvent__8X-9t {
    margin-top: 12px;
    padding: 3px 8px;
    margin-right: 8px;
    display: inline-block;
    border-radius: 4px;
}

.mobile_mobileTimelineEvent__8X-9t.mobile_timeline__X7ZOi {
    padding: 3px;
    margin-top: 0;
}

.mobile_mobileTimelineEvent__8X-9t strong {
    margin-left: 8px;
}

.mobile_mobileTimelineEvent__8X-9t.mobile_timeline__X7ZOi strong {
    margin: 3px;
}

.mobile_mobileTimeline__bB1BM,
.mobile_mobilePanel__zRhCD {
    width: 100%;
    bottom: 0;
    z-index: 101;
    padding: 8px 16px 0;
    background: #FFF;
    box-shadow: 0px -2px 4px rgb(0 0 0 / 4%);
    border-radius: 14px 14px 0px 0px;
    display: flex;
    flex-direction: column;
    transition: "transform 0.2s";
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.20), 0px 14px 28.8px 0px rgba(0, 0, 0, 0.24);
}

.mobile_mobileTimeline__bB1BM {
    position: absolute;
    height: 75%;
}

.mobile_mobilePanel__zRhCD {
    position: fixed;
    left: 0;
    padding: 0;
    margin-bottom: 0px !important;
}

.mobile_mobilePanel__zRhCD.mobile_fullHeight__z2mLC {
    height: 90%;
}

.mobile_mobilePanel__zRhCD .textInput .input,
.mobile_mobilePanel__zRhCD .textInput .input .inputFilterEntry {
    width: 100%;
}

.mobile_mobilePanel__zRhCD .filterLabel {
    font-weight: 600;
}

.mobile_mobilePanel__zRhCD .noVariables {
    color: #616161;
}

.mobile_mobileTimelinePage__-S-eV {
    background-color: white;
    padding: 12px 16px 8px 16px;
    margin-bottom: 12px;
    border-radius: 8px;
    border: 1px solid #EAEAFF;
    box-shadow: 0px 3.2px 7.2px 0px rgba(131, 126, 255, 0.12), 0px 0.6px 1.8px 0px rgba(131, 126, 255, 0.10);
}

.mobile_closePanel__lRlOS {
    width: 36px;
    height: 4px;
    flex-shrink: 0;
    border-radius: 2px;
    background: #D1D1D1;
    margin: 0 auto 12px auto;
}

.mobile_eventsLabel__iH7Y1 {
    margin-right: 4px;
}

.mobile_eventTag__nyFiq {
    font-size: 12px;
    overflow: hidden;
    padding-left: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile_rewindTenMobile__CLDHo {
    margin-left: 44px;
}

.mobile_forwardTenMobile__pTe8n {
    margin-right: 44px;
}

.mobile_noData__GDeNT {
    background-color: #EFF6FC;
    display: flex;
    flex: 1;
    justify-content: center;
    padding: 16px;
}

.mobile_mobileFooter__1nAfL {
    display: flex;
    justify-content: space-around;
    cursor: pointer;
    min-width: 320px;
    height: 57px;
    border-top: 1px solid #EDEBE9;
}

/********************************************/
/***********     Filters      **************/
/********************************************/

.mobile_mobile__7hiIo .filters {
    padding: 16px 16px 12px;
    grid-row-gap: 36px;
    user-select: none;
    height: min-content;
    overflow: hidden;
    width: 100%;
    display: block;
    min-width: 100%;
}

.mobile_universalFilters__YdLH1 {
    display: inline-block;
    height: min-content;
    overflow: hidden auto;
}

.mobile_collapsibleFiltersNav__3Oqa9 {
    font-size: 20px;
    font-weight: 600;
    padding: 12px 16px;
    border-bottom: 1px solid #E0E0E0;
    position: sticky;
    top: 0;
    background-color: #FFF;
    z-index: 99;
}

.mobile_collapsibleFiltersNav__3Oqa9 i.ms-Icon {
    color: #323130
}

.mobile_collapsibleFiltersNav__3Oqa9 div {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.mobile_collapsibleFiltersNav__3Oqa9 :last-child {
    margin: 0;
}

.mobile_mobile__7hiIo.mobile_universalFilters__YdLH1 .filterPanelNav {
    border: unset;
    width: 100%;
    padding: 16px;
    overflow: hidden;
    border-bottom: 1px solid #EDEBE9;
    height: fit-content;
}

.mobile_mobile__7hiIo.mobile_universalFilters__YdLH1 .filterPanelNav * {
    font-size: 16px;
}

.mobile_mobile__7hiIo.mobile_universalFilters__YdLH1 .filterPanelNav button.ms-Nav-chevronButton,
.mobile_mobile__7hiIo.mobile_universalFilters__YdLH1 .filterPanelNav i {
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    flex-flow: row-reverse;
    align-items: center;
}

.mobile_mobile__7hiIo.mobile_universalFilters__YdLH1 .filterPanelNav button.ms-Nav-chevronButton{
    padding: 0 0 0 12px;
}

.mobile_mobile__7hiIo.mobile_universalFilters__YdLH1 .filterPanelNav i {
    position: static;
}

.mobile_mobile__7hiIo.mobile_universalFilters__YdLH1 .filterPanelNav .ms-Nav-linkTex {
    padding-left: 24px;
}

.mobile_mobile__7hiIo.mobile_universalFilters__YdLH1 .filterPanelNav li.ms-Nav-navItem {
    height: 48px;
}

.mobile_mobile__7hiIo.mobile_universalFilters__YdLH1 .filterPanelNav li span {
    padding-left: 8px;
}

.mobile_mobile__7hiIo.mobile_universalFilters__YdLH1 .spanFilter .selectedOptions div:first-child {
    margin-right: 12px;
}

.mobile_multiSelectValueWrapper__DIM4P {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobile_mobile__7hiIo.mobile_universalFilters__YdLH1 .mobile_multiSelectValueWrapper__DIM4P {
    display: flex;
    justify-content: end;
    align-items: center;
}

.mobile_mobile__7hiIo .filterCategoryTitle {
    margin-bottom: 8px;
}

.mobile_mobile__7hiIo .filterCategoryTitle:not(:first-child) {
    margin-top: 16px;
}

.mobile_mobile__7hiIo .filterUrlWrapper {
    display: block;
    margin-right: unset;
    margin-top: 4px;
}

.mobile_mobile__7hiIo .filterUrlWrapper .deleteURLButton {
    margin-left: 85%;
}

.mobile_mobilePanelHeader__xc0Fj {
    display: grid;
    padding: 8px 16px 0;
}

.mobile_mobilePanelFooter__l5zNh {
    z-index: 999;
    width: 100%;
    height: 68px;
    display: grid;
    grid-auto-flow: column;
    gap: 8px;
    align-content: center;
    padding: 0 16px;
    box-shadow: 0px 25.6px 57.6px 0px rgba(0, 0, 0, 0.22), 0px 4.8px 14.4px 0px rgba(0, 0, 0, 0.18);
}

.mobile_mobilePanelFooter__l5zNh button {
    margin: 12px 0;
    height: 44px;
    font-size: 18px;
}

.mobile_mobilePanelTitle__3CPFB {
    display: flex;
    justify-content: space-between;
}

.mobile_panelActions__rkD2H .ms-Button {
    border: none;
}

.mobile_liveSessionsContainerCollapsed__Mp\+qR {
    border: 2px solid #FFF;
}

.mobile_liveSessionsContainerExpanded__vsO-8 {
    border: 2px solid #FFF;
    border-bottom: none;
}

.mobile_mobile__7hiIo.mobile_liveRecordingCardContainer__Jyydw {
    border: 2px solid #FFF;
    border-top: none;
}

.mobile_mobile__7hiIo.mobile_mobileRecordingsTab__\+NC5y button#recordings_FiltersButton {
    width: 54px;
    min-width: 54px;
    padding: 12px;
}

.mobile_mobile__7hiIo .scrollingBadges :first-child {
    margin-left: 0;
}

@media screen and (max-height: 400px) {
    .mobile_projContent__GpqR4.mobile_mobile__7hiIo .tabContentHeader.mobile {
        position: relative;
    }

    .mobile_projContent__GpqR4.mobile_mobile__7hiIo .tabContent.tabContentRecordingsVideo {
        overflow-y: unset;
    }

    .mobile_footerNavButton__JsXDr i {
        height: unset;
        display: none;
    }

    .mobile_mobileFooter__1nAfL {
        height: 29px;
    }
    .mobile_mobile__7hiIo.mobile_mobileRecordingsTab__\+NC5y {
        overflow-y: auto;
    }
}

@media screen and (max-height: 320px) {
    .mobile_collapsibleFiltersNav__3Oqa9 {
        position: relative;
    }
}

/********************************************/
/**********   Settings - Team  **************/
/********************************************/

.mobile_userRowContainerMobile__pfyHv {
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    width: 100%;
}

.mobile_mobileUserRowInfo__O6WlN {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mobile_mobileUserRowName__ommqI {
    line-height: 20px;
    width: 100%;
    text-wrap: balance;
}

.mobile_mobileUserRowEmail__Z1Fte {
    font-size: 14px;
    color: #616161;
    line-height: 20px;
    width: 100%;
    padding-bottom: 2px;
}

.mobile_mobileUserRowActions__Yi5x- {
    display: flex;
    justify-content: space-between;
}

.mobile_mobileMembershipList__4U3rf.ms-Button {
    padding: 0px;
    border: none;
}

.mobile_mobileMembershipList__4U3rf .ms-Button-flexContainer {
    text-align: left;
    justify-content: left;
    align-items: center;
}

.mobile_mobileMembershipList__4U3rf .ms-Button-textContainer {
    flex-grow: 0;
}

.mobile_mobileMembershipList__4U3rf .ms-Button-label {
    margin: 0px;
}

.mobile_mobileMembershipList__4U3rf .ms-Icon {
    height: 12px;
    font-size: 9px;
    width: 12px;
    font-weight: 600;
}

.mobile_mobileMembershipList__4U3rf.ms-Button--default:hover,
.mobile_mobileMembershipList__4U3rf.is-expanded {
    background-color: transparent;
}

.mobile_mobileSettingsContainer__cqWHX {
    width: 100%;
    overflow: auto;
    margin: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mobile_mobileSettingsContent__uo9h8 {
    border-radius: 8px;
    background-color: #FFF;
    padding: 22px 48px;
    flex-grow: 1;
}

.mobile_mobileSettingsNavContainer__1aCkk {
    width: 100%;
    overflow: auto;
    margin: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mobile_mobileSettingsTitle__SqnkS {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
}

.mobile_mobileSettingsSubtitle__NHp4R {
    color: #707070;
    padding-top: 4px;
}

.mobile_backToSettingsbtn__63tix.ms-Button {
    padding: 0px;
    font-size: 16px;
}

.mobile_backToSettingsbtn__63tix i {
    height: 24px;
}

.mobile_pullIndicator__te\+et {
    left: 0;
    width: 100%;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #323130;
    transition: transform 0.2s ease-in-out;
    z-index: 10;
    padding-top: 10px;
}

.mobile_pullIndicatorHidden__i3ETE {
    display: none;
}

.mobile_pullIndicator__te\+et i {
    height: 16px;
    width: 16px;
    margin-right: 8px;
    transition: transform 0.2s ease-in-out;
}

.mobile_pullIndicatorFlipped__Dcv-V i {
  transform: rotate(180deg);
}

.mobile_pullIndicator__te\+et i path {
    fill: #323130;
}

.predictiveHeatmaps_predictiveHeatmaps__ng395 {
  height: calc(100% - 49px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 100%;
}

.predictiveHeatmaps_predictiveHeatmaps__ng395 .predictiveHeatmaps_predictiveHeatmapsContainer__XQZN9 {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

/* Initial view rules */

.predictiveHeatmaps_predictiveHeatmapsLandingView__WNlYb {
  display: flex;
  flex-direction: column;
}

.predictiveHeatmaps_predictiveHeatmapsBannerControls__LCLyA {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 24px;
  width: 100%;
}

.predictiveHeatmaps_predictiveHeatmapsBannerInputs__Z7T9d {
  display: flex;
  gap: 8px;
  height: 48px;
  align-items: center;
  font-weight: 600;
  justify-content: space-between;
}

.predictiveHeatmaps_predictiveHeatmapsBannerSearchBox__qTvdm {
  border-radius: 4px;
  height: 47px;
  padding: 0px 0px 0px 12px;
  flex-grow: 1;
}

.predictiveHeatmaps_predictiveHeatmapsResultsSearchBox__4GJ2x.error,
.predictiveHeatmaps_predictiveHeatmapsBannerSearchBox__qTvdm.error {
  border-color: #d13438;
}

.predictiveHeatmaps_predictiveHeatmapsResultsSearchBox__4GJ2x .ms-SearchBox-iconContainer,
.predictiveHeatmaps_predictiveHeatmapsBannerSearchBox__qTvdm .ms-SearchBox-iconContainer{
  display: none;
}

.predictiveHeatmaps_predictiveHeatmapsResultsSearchBox__4GJ2x .ms-SearchBox-clearButton,
.predictiveHeatmaps_predictiveHeatmapsBannerSearchBox__qTvdm .ms-SearchBox-clearButton {
  margin: 0px;
}

.predictiveHeatmaps_predictiveHeatmapsResultsSearchBox__4GJ2x .ms-Button,
.predictiveHeatmaps_predictiveHeatmapsBannerSearchBox__qTvdm .ms-Button {
  width: 30px;
}

.predictiveHeatmaps_bannerImageSelectorButton__PORZH {
  height: 47px;
  border: 1px solid #0078D4;
  border-radius: 4px;
  padding: 5px 16px;
  background: #FFFFFF4D;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  cursor: pointer;
}

.predictiveHeatmaps_bannerImageSelectorButton__PORZH input[type="file"] {
    display: none;
}

.predictiveHeatmaps_predictiveHeatmapsBannerControls__LCLyA .predictiveHeatmaps_searchButton__OpRir .ms-Icon {
  height: 24px;
}

.predictiveHeatmaps_predictiveHeatmapsBannerError__wGmU9, .predictiveHeatmaps_controlsLeftStackInputErrors__ameYU {
  height: 18px;
}

.predictiveHeatmaps_predictiveHeatmapsBoldText__hcUKh {
  font-weight: 600;
  margin-top: 16px;
}

.predictiveHeatmaps_requiredAsterisk__x7MJ6 {
  color: #A80000;
}
/* Results view rules*/

.predictiveHeatmaps_predictiveHeatmapsControlsBar__2ngbH {
  display: flex;
  flex-direction: row;
  align-self: center;
  margin-top: 0;
  width: 100%;
  max-width: 1400px;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 20px;
  gap: 12px;
}

.predictiveHeatmaps_predictiveHeatmapsControlsBar__2ngbH .predictiveHeatmaps_controlButton__U5rzr {
  gap: 4px;
  border-radius: 4px;
  padding: 5px 12px 5px 10px;
  display: flex;
  cursor: pointer;
  color: #004578;
}

.predictiveHeatmaps_predictiveHeatmapsControlsBar__2ngbH .predictiveHeatmaps_controlButtonLeft__stiJ1 {
  border-radius: 4px 0px 0px 4px;
}

.predictiveHeatmaps_predictiveHeatmapsControlsBar__2ngbH .predictiveHeatmaps_controlButtonRight__IbwcL {
  border-radius: 0px 4px 4px 0px;
  border-left: none;
}

.predictiveHeatmaps_predictiveHeatmapsControlsBar__2ngbH .predictiveHeatmaps_controlsLeftStack__10IKG {
  display: flex;
  flex-direction: column;
}

.predictiveHeatmaps_predictiveHeatmapsControlsBar__2ngbH .predictiveHeatmaps_controlsLeftStackInput__pjVkO {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
}

.predictiveHeatmaps_predictiveHeatmapsResultsSearchBox__4GJ2x {
  padding: 0px 0px 0px 12px;
}

.predictiveHeatmaps_predictiveHeatmapsBannerControls__LCLyA .predictiveHeatmaps_errorMessage__VQLMU,
.predictiveHeatmaps_predictiveHeatmapsControlsBar__2ngbH .predictiveHeatmaps_errorMessage__VQLMU {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-top: 2px;
  font-size: 12px;
  color: #d13438;
  line-height: 16px;
}

.predictiveHeatmaps_predictiveHeatmapsControlsBar__2ngbH .predictiveHeatmaps_controlsRightStack__FUjHe {
  display: flex;
  gap: 8px;
}

.predictiveHeatmaps_controlsRightStack__FUjHe .ms-Toggle-label {
  margin-right: 8px;
  word-break: keep-all;
  color: #004578;
}

.predictiveHeatmaps_controlsRightStack__FUjHe .ms-Toggle-stateText {
  width: 20px;
}

.predictiveHeatmaps_predictiveHeatmapsControlsBar__2ngbH .predictiveHeatmaps_controlsRightStack__FUjHe .predictiveHeatmaps_buttonGroup__DQdlO {
  display: flex;
}

.predictiveHeatmaps_predictiveHeatmapsControlsBar__2ngbH .predictiveHeatmaps_searchButton__OpRir {
  background: linear-gradient(325deg, #0078d4 0%, #9692ff 100%);
  border: 1px solid transparent;
  color: white;
}

.predictiveHeatmaps_predictiveHeatmapsControlsBar__2ngbH .predictiveHeatmaps_controlButton__U5rzr .ms-Icon {
  height: 20px;
}

.predictiveHeatmaps_predictiveHeatmapsControlsBar__2ngbH .predictiveHeatmaps_searchButton__OpRir.is-disabled, 
.predictiveHeatmaps_predictiveHeatmapsControlsBar__2ngbH .predictiveHeatmaps_controlButton__U5rzr.disabled,
.predictiveHeatmaps_predictiveHeatmapsControlsBar__2ngbH .predictiveHeatmaps_controlButton__U5rzr.is-disabled {
    color: #BEBBB8;
    background: #EDEBE9;
    pointer-events: none;
    border: 1px solid #E0E0E0;
}

.predictiveHeatmaps_controlsItem__ICQ3a.disabled,
.predictiveHeatmaps_controlsItem__ICQ3a.is-disabled .ms-Toggle-label,
.predictiveHeatmaps_controlsItem__ICQ3a.is-disabled .ms-Toggle-background {
  color: #A19F9D;
}

.predictiveHeatmaps_controlsItem__ICQ3a.is-disabled .ms-Toggle-background,
.predictiveHeatmaps_controlsItem__ICQ3a.is-disabled.is-checked .ms-Toggle-background {
  background: #C8C6C4;
}

.predictiveHeatmaps_uploadImageIcon__ArLQ3 {
  height: 20px;
  margin: 0px 4px;
}

.predictiveHeatmaps_imageSelectorButton__j7Mvd {
  min-width: unset;
}

.predictiveHeatmaps_predictiveHeatmapsControlsBar__2ngbH .predictiveHeatmaps_imageSelectorButton__j7Mvd.disabled path {
  fill: #BEBBB8;
}

.predictiveHeatmaps_predictiveHeatmaps__ng395 .predictiveHeatmaps_footer__5HA1U {
  margin-top: auto;
  width: 100%;
}

/* Loading and Error view rules*/

.predictiveHeatmaps_predictedHeatmapNoResultContainer__Uw9nT {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 100px 0px;
}

.predictiveHeatmaps_predictedHeatmapNoResultContainer__Uw9nT.loading {
  gap: 50px;
}

.predictiveHeatmaps_predictedHeatmapNoResultContainer__Uw9nT.error {
  gap: 20px;
}

.predictiveHeatmaps_predictedHeatmapNoResultContainer__Uw9nT.error img {
  padding-top: 30px;
  height: 250px;
}

.predictiveHeatmaps_predictedHeatmapNoResultContainer__Uw9nT .predictiveHeatmaps_noResultTitle__FvIpg {
  font-weight: 600;
  font-size: 36px;
  background: linear-gradient(90deg, #8F58AB -8.93%, #3D60E0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  text-align: center;
}

.predictiveHeatmaps_predictedHeatmapNoResultContainer__Uw9nT .predictiveHeatmaps_noResultMessage__RMBIt {
  color: #323130;
  font-size: 16px;
  text-align: center;
}


/* Results view rules */

.predictiveHeatmaps_predictiveHeatmapsResultsView__OvN3B {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #E9F0FA 0%, #F5F6FD 100%);
}

.predictiveHeatmaps_predictedHeatmapContainer__1nMWz {
  margin-left: auto;
  margin-right: auto;
  padding: 12px 20px 0px;
  width: 100%;
  max-width: 1400px;
}

.predictiveHeatmaps_predictedHeatmapContainer__1nMWz .predictiveHeatmaps_predictedHeatmapCard__j6X9x {
  background: #FFFFFF;
  padding: 0px 32px 40px;
  border-radius: 16px;
  box-shadow: 0px 4px 14.4px 0px #837EFF4D;
}

.predictiveHeatmaps_predictedHeatmapURLBanner__F6nrq {
  min-height: 44px;
  padding: 12px;
  font-weight: 600;
  background: white;
  margin-bottom: 16px;
  box-shadow: 0px 0px 2px 0px #0000001F;
  box-shadow: 0px 8px 16px 0px #00000024;
  border-radius: 4px;
}

.predictiveHeatmaps_predictedHeatmapURLBanner__F6nrq span {
  color: #242424;
}

.predictiveHeatmaps_predictedHeatmapFeedbackText__cd81M {
  text-decoration: none;
  line-height: 20px;
  color: #0078D4;
  cursor: pointer;
  display: inline;
  padding-left: 4px;
}

.predictiveHeatmaps_predictedHeatmapContainer__1nMWz .predictiveHeatmaps_predictedHeatmapContainerHeader__hBEuP {
  padding: 16px 0px 12px;
  font-size: 12px;
  display: flex;
  align-items: center;
}

.predictiveHeatmaps_predictedHeatmapContainerHeader__hBEuP .predictiveHeatmaps_predictedHeatmapNote__sEZpt{
  flex-grow: 1;
}

.predictiveHeatmaps_predictedHeatmapSentiment__oBld4 {
  margin-left: auto;
  display: flex;
  gap: 8px;
  padding-left: 8px;
}

.predictiveHeatmaps_predictedHeatmapSentiment__oBld4 span {
  margin: 1px;
  height: 32px;
  padding: 4px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

@media only screen and (min-width: 1201px){
  .predictiveHeatmaps_predictedHeatmapContainerHeader__hBEuP {
    text-align: center;
  }
}

@media only screen and (max-width: 1200px){
  .predictiveHeatmaps_predictedHeatmapContainerHeader__hBEuP {
    text-align: left;
    gap: 32px;
  }
}

@media only screen and (max-width: 600px){
  .predictiveHeatmaps_predictedHeatmapContainerHeader__hBEuP {
    flex-direction: column-reverse;
    gap: 8px;
  }
}

.predictiveHeatmaps_predictedHeatmapContainer__1nMWz .predictiveHeatmaps_heatmapImage__xioki {
  width: 100%; 
  padding: 20px 0px;
  border: 1px solid #DCDEE1;
  border-radius: 8px;
}

/* file selector */

.predictiveHeatmaps_imageSelector__j5eiq {
    margin-right: 16px;
    height: 40px;
    border-radius: 4px;
    color: rgb(50, 49, 48);
    background-color: rgb(255, 255, 255);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.predictiveHeatmaps_imageSelectorButton__j7Mvd {
    border: 1px solid #0078D4;
    background: #FFFFFF4D;
}

.predictiveHeatmaps_imageSelectorButton__j7Mvd:hover {
    background-color: #0000000d;
}

.predictiveHeatmaps_imageSelectorButton__j7Mvd input[type="file"] {
    display: none;
}

/* Share heatmap rules*/

.predictiveHeatmaps_sharePredictedHeatmapModalHeader__lvde5 {
  padding: 16px 24px 20px 24px;
}

.predictiveHeatmaps_sharePredictedHeatmapModalBody__Et3rM {
  margin: 0px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.predictiveHeatmaps_sharePredictedHeatmapModalBody__Et3rM .predictiveHeatmaps_emailInput__nRisH {
  display: flex;
  width: 512px;
  gap: 8px;
  align-items: flex-start;
}

.predictiveHeatmaps_sharePredictedHeatmapModalBody__Et3rM .predictiveHeatmaps_emailInput__nRisH .ms-TextField {
  flex-grow: 1;
}

.predictiveHeatmaps_sharePredictedHeatmapModalBody__Et3rM .predictiveHeatmaps_emailInput__nRisH .predictiveHeatmaps_sentText__QgKXv {
  width: 80px;
  text-align: center;
  color: #0F6CBD;
  padding-top: 6px;
}

@media only screen and (min-width: 1060px){
  .predictiveHeatmaps_controlsLeftStack__10IKG {
    flex-grow: 1;
    padding-right: 64px;
  }

  .predictiveHeatmaps_predictiveHeatmapsResultsSearchBox__4GJ2x {
    flex-grow: 1;
    min-width: 200px;
  }
}

@media only screen and (min-width: 920px) and (max-width: 1059px) {
  .predictiveHeatmaps_controlsLeftStack__10IKG .predictiveHeatmaps_imageSelectorButton__j7Mvd {
    gap: 0px;
    font-size: 0px;
  }

  .predictiveHeatmaps_predictiveHeatmapsResultsSearchBox__4GJ2x {
    min-width: 200px;
  }
}

@media only screen and (min-width: 600px) and (max-width: 919px) {
  .predictiveHeatmaps_predictiveHeatmapsControlsBar__2ngbH {
    flex-direction: column;
  }

  .predictiveHeatmaps_controlsLeftStack__10IKG, .predictiveHeatmaps_controlsRightStack__FUjHe {
    width: 100%;
  }

  .predictiveHeatmaps_predictiveHeatmapsResultsSearchBox__4GJ2x {
    flex-grow: 1;
  }

  .predictiveHeatmaps_controlsRightStack__FUjHe .predictiveHeatmaps_buttonGroup__DQdlO {
    margin-left: auto;
  }
}

@media only screen and (max-width: 599px) {

  .predictiveHeatmaps_predictiveHeatmapsControlsBar__2ngbH {
    flex-direction: column;
  }

  .predictiveHeatmaps_controlsLeftStack__10IKG, .predictiveHeatmaps_controlsRightStack__FUjHe {
    width: 100%;
  }

  .predictiveHeatmaps_predictiveHeatmapsControlsBar__2ngbH .predictiveHeatmaps_controlsLeftStackInput__pjVkO {
    gap: 0px
  }

  .predictiveHeatmaps_predictiveHeatmapsResultsSearchBox__4GJ2x.ms-SearchBox {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border: 1px solid #0078D4;
    flex-grow: 1;
  }

  .predictiveHeatmaps_predictiveHeatmapsResultsSearchBox__4GJ2x.ms-SearchBox.is-disabled {
    border-color: #D1D1D1;
  }

  .predictiveHeatmaps_controlsLeftStack__10IKG .predictiveHeatmaps_controlsItem__ICQ3a {
    display: none;
  }

  .predictiveHeatmaps_controlsLeftStack__10IKG .predictiveHeatmaps_imageSelectorButton__j7Mvd {
    margin-right: 12px;
    font-size: 0;
    gap: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    height: 32px;
    border-left: 0;
    display: block;
  }

  .predictiveHeatmaps_controlsRightStack__FUjHe .predictiveHeatmaps_buttonGroup__DQdlO {
    margin-left: auto;
  }

  .predictiveHeatmaps_sharePredictedHeatmapModalBody__Et3rM .predictiveHeatmaps_emailInput__nRisH {
    flex-direction: column;
    width: 100%;
    align-items: flex-end;
  }

  .predictiveHeatmaps_sharePredictedHeatmapModalBody__Et3rM .predictiveHeatmaps_emailInput__nRisH .ms-TextField {
    width: 100%;
    height: 53px;
  }
}

@media only screen and (max-width: 495px) {
  .predictiveHeatmaps_predictiveHeatmapsControlsBar__2ngbH, .predictiveHeatmaps_predictedHeatmapContainer__1nMWz {
    padding-left: 10px;
    padding-right: 10px;
  }

  .predictiveHeatmaps_controlsLeftStackInput__pjVkO .predictiveHeatmaps_searchButton__OpRir {
    display: none;
  }

  .predictiveHeatmaps_controlsLeftStack__10IKG .predictiveHeatmaps_imageSelectorButton__j7Mvd {
    margin-right: 0px;
  }

  .predictiveHeatmaps_controlsRightStack__FUjHe .ms-Toggle-stateText {
    display: none;
  }

  /* landing view controls */

  .predictiveHeatmaps_predictiveHeatmapsBannerInputs__Z7T9d {
    gap: 0px;
  }

  .predictiveHeatmaps_predictiveHeatmapsBannerSearchBox__qTvdm.ms-SearchBox {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border: 1px solid #0078D4;
    flex-grow: 1;
  }

  .predictiveHeatmaps_predictiveHeatmapsBannerInputs__Z7T9d .predictiveHeatmaps_controlsItem__ICQ3a {
    display: none;
  }

  .predictiveHeatmaps_bannerImageSelectorButton__PORZH {
    font-size: 0;
    gap: 0;
  }

  .predictiveHeatmaps_bannerImageSelectorButton__PORZH.urlField {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-left: 0;
    display: block;
  }
}

@media only screen and (max-width: 1000px) {
  .predictiveHeatmaps_predictiveHeatmapsBannerControls__LCLyA {
    max-width: 800px;
  }
}

.projects_header__Z24SK {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    background-color: #EFF6FC;
}

.projects_header__Z24SK .ms-Button-label {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

.projects_header__Z24SK .projects_projRefresh__Ua01i .ms-Button-textContainer,
.projects_header__Z24SK .projects_projMenu__0sUX0 .ms-Button-textContainer {
    padding-top: 3px;
}

.projects_header__Z24SK .projects_projMenu__0sUX0,
.projects_header__Z24SK .projects_projRefresh__Ua01i {
    border-radius: 4px;
    padding: 5px 12px;
    margin-left: 12px; 
}

.projects_header__Z24SK .projects_projMenu__0sUX0:hover,
.projects_header__Z24SK .projects_projRefresh__Ua01i:hover {
    background-color: #F5F5F5;
    color: #242424;
}

.projects_header__Z24SK .projects_projMenu__0sUX0 .ms-Button-label {
    color: #242424;
}

.projects_projMenuItem__4mh9D .ms-ContextualMenu-icon {
    padding-top: 3px;
    overflow-x: initial;
    overflow-y: clip;
}

.projects_projectGridContainer__zn5gA {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 0fr));
    grid-gap: 24px;
}

.projects_projectCard__A0DyD {
    background-color: #FFF;
    box-shadow: 0px 3.200000047683716px 7.199999809265137px 0px rgba(131, 126, 255, 0.12), 0px 0.6000000238418579px 1.7999999523162842px 0px rgba(131, 126, 255, 0.10);
    border: 1px solid #EAEAFF;
    border-radius: 8px;
    width: 420px;
    height: 100%;
    padding: 12px 16px 8px 16px;
}
.projects_projectCard__A0DyD:hover {
    cursor: pointer;
}

.projects_projectBody__PYpaL {
    font-weight: 600;
    color: #0078D4;
}

.projects_projectTitleContainer__omnky {
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 8px 4px 16px 4px;
    align-items: center;
}

.projects_projectTitle__-z5o0 {
    font-size: 14px;
    line-height: 20px;
    display: flex;
    gap: 0.25em;
}

.projects_projectTitleIcon__1zPZb {
    height: 39px;
}

.projects_projectTag__my0hH {
    font-weight: 400;
    display: inline-block;
    max-width: 325px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
}

.projects_projectFriendlyName__HITpY {
    font-size: 16px;
    line-height: 22px;
    max-width: 330px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
}

.projects_projectActions__U1Ww1 {
    justify-content: space-between;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-top: 1px solid #EDEBE9;
    padding-top: 4px;
    max-height: 36px;
}

.projects_mobile__aMjd7 .projects_projectActions__U1Ww1:not(.projects_projectAdmin__vdKkK) {
    border-top: none;
}

.projects_mobile__aMjd7 {
    display: block;
}

.projects_mobile__aMjd7 .projects_projectCard__A0DyD {
    margin-bottom: 16px;
    width: 100%;
}

.projects_secondRow__LdWms {
    overflow: hidden;
}

.projects_isDisabled__plyb6 {
    color: gray;
}

.projects_projectRowActions__MUxgq {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.projects_projectsRefreshLoading__lRUpZ {
    padding-bottom: 20px;
}

.projects_welcomeBannerWrapper__Pck\+D {
    height: 100%;
}

.projects_projectIcon__0R8au {
    background: url(https://claritystatic.azureedge.net/images/projectType-desktop.png) no-repeat 0 0;
}

.projects_mobileIcon__WdjOi {
    background: url(https://claritystatic.azureedge.net/images/projectType-mobile.png) no-repeat 0 0;
}

.projects_projectIconButton__2KUWj .ms-Button-flexContainer {
    padding: 0px;
}

.projects_projectIconButton__2KUWj .ms-Icon {
    height: auto;
}

.projects_projectIconButton__2KUWj.projects_projectDeleteIcon__79Mul svg {
    margin-bottom: 3px;
}

.projects_projectIcon__0R8au,
.projects_mobileIcon__WdjOi {
    width: 50px;
    height: 50px;
    background-position-y: center;
}

.projects_projectContent__v-f2l {
    background-color: #EFF6FC;
    overflow: auto;
    height: 100%;
    padding: 40px;
}

.projects_projectContent__v-f2l table {
    overflow: visible;
    background: #FFF;
    width: 100%;
}

.projects_projectContent__v-f2l th,
.projects_projectContent__v-f2l td {
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid #EDEBE9;
    border-top: 0;
    height: 55px;
    max-width: 313px;
    min-width: 50px;
    padding: 2px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.projects_projectContent__v-f2l td:nth-child(2) {
    width: 45%;
    font-size: 12px;
    color: #605E5C;
}

.projects_projectContent__v-f2l td:first-child {
    width: 30%;
}

.projects_projectContent__v-f2l tr:hover:nth-child(n+2) {
    cursor: pointer;
    background-color: rgb(243, 242, 241);
}

.projects_projectContent__v-f2l th {
    color: #323130;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    padding: 11px 12px;
}

.projects_projectContent__v-f2l td button:first-child {
    width: 100%;
    display: flex;
    padding: 0;
}

.projects_projectContent__v-f2l td button:hover,
.projects_projectContent__v-f2l td button:active,
.projects_projectContent__v-f2l td button:active:hover {
    text-decoration: none;
}

.projects_projectNameCell__dTfzI:hover {
    cursor: pointer;
    background-color: #f3f2f1;
}

.projects_projectsSortIcon__OUHuZ {
    margin-left: 7px;
}

.projects_projectsListContent__C4Wy5 {
    padding: 20px;
    background: #FFF;
    border-radius: 8px;
    padding: 24px 48px 32px 48px;
    width: 80%;
    margin: auto;
    min-width: fit-content;
}

.projects_projectDeleteIcon__79Mul {
    padding: 0px 4px;
}

.projects_subDeleteIcon__\+Sb0A {
    padding: 0px 4px;
    width: 36px;
    height: 32px;
}

@media only screen and (max-width: 680px) {
    .projects_header__Z24SK {
        padding: 24px 32px;
    }

    .projects_projectContentMobile__Yv9ZV {
        padding: 0px 32px 40px;
    }

}

@media only screen and (max-width: 427px) {
    .projects_header__Z24SK .ms-Button-label {
        line-height: 14px;
    }
}

@media only screen and (max-width: 427px) {
    .projects_header__Z24SK .ms-Button-label {
        line-height: 14px;
    }
}

.recordings_recordingsTab__0ocF\+ {
    background: #EFF6FC;
}

.recordings_visitorDetailsArea__WX13O,
.recordings_impressions__XPSGd {
    background: #FFF;
    border-radius: 0 8px 8px 0;
    box-shadow: 0px 4.8px 14.4px 0px rgba(131, 126, 255, 0.30);
    margin: 0 12px 12px 0;
    padding-top: 8px;
    flex: 0 0 auto;
}

.recordings_tabContentRecordingsVideo__NkOkN.recordings_publicShareView__NZYMx,
.recordings_tabContentRecordingsVideo__NkOkN.recordings_struggleView__LDgRP {
    top: 0px;
    height: 100%;
    margin-top: 12px;
}

.recordings_publicShareView__NZYMx .recordings_moreDetailsPanelActions__OPxwq button:last-of-type {
    margin-left: auto;
} 

.recordings_visitorDetailsArea__WX13O {
    height: calc(100vh - 128px);
}

.recordings_impressions__XPSGd.recordings_scrollable__UVrw0 > .recordings_sessionInfoPivot__UzKpu,
.recordings_impressions__XPSGd.recordings_scrollable__UVrw0 .recordings_moreDetailsContainer__WPVFT { 
    display: flex;
    flex-direction: column;
    padding: 0;
    height: calc(100% - 32px);
}

.recordings_impressions__XPSGd.recordings_scrollable__UVrw0 > .recordings_sessionInfoPivot__UzKpu {
    margin: 0 8px;
}

.recordings_impressions__XPSGd.recordings_scrollable__UVrw0 .recordings_moreDetailsContainer__WPVFT {
    overflow-y: scroll;
}

.recordings_impressions__XPSGd.recordings_scrollable__UVrw0 > .recordings_sessionInfoPivot__UzKpu .recordings_moreDetailsContainer__WPVFT {
    height: 100%;
}

.recordings_impressions__XPSGd.recordings_scrollable__UVrw0 > .sessionInfoPivot { 
    padding-top: 12px;
}

.recordings_impressions__XPSGd #heatmapSidebarPortal {
    width: 100%;
    height: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    margin-top: 6px;
}

.recordings_video__w8N3O {
    position: relative;
    margin: 0 auto;
    transform-origin: 0 0 0;
    background: #FFF;
}

.recordings_video__w8N3O iframe {
    border: 1px solid #CCC;
    overflow: hidden;
}

.recordings_sessionInfoPivot__UzKpu div[role='tabpanel'] {
    height: calc(100% - 50px);
}

.recordings_sessionInfoPivot__UzKpu div[role="tablist"] {
    display: flex;
    justify-content: space-evenly;
}

.recordings_sessionInfoPivot__UzKpu .ms-Pivot-link {
    width: 50%;
}

.recordings_impressions__XPSGd .recordings_heatmapSidebar__lzIxx .recordings_panelTop__x-w0e {
    margin-bottom: 18px;
}

.recordings_staticMoreDetailsContainer__-w7wz {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0 8px;
}

.recordings_infoContainer__0\+ibI .recordings_sessionInfo__QfQo5 .recordings_sessionInfoTitle__vjyGD,
.recordings_tagsTitle__64OLE p {
    padding: 11px 0 13px 0;
    color: #020057;
    font-weight: 600;
}

.recordings_moreDetailsPanelActions__OPxwq {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 8px;
}

.recordings_moreDetailsPanelActions__OPxwq button:not(.recordings_highlightsToggle__Iep0F button) {
    border: none;
    padding: 0 4px;
}

.recordings_moreDetailsPanelActions__OPxwq button.recordings_panelBack__vVFv7:hover {
    background-color: #F5F5F5;
}

.recordings_panelBack__vVFv7 {
    background: transparent;
    line-height: 20px;
}

.recordings_sessionsListContainer__hx4\+k {
    height: 100%;
    width: 100%;
    overflow: hidden;

}

.recordings_sessionsListContainer__hx4\+k .impressionList.scrollable {
    padding: 12px;
}

.recordings_sessionsListContainer__hx4\+k .noRecordingsFound {
    margin: 8px;
}

.recordings_sessionsListContainer__hx4\+k .recordingsPivot,
.recordings_sessionsListContainer__hx4\+k .sortDivContainer {
    margin: 0 8px;
}

.recordings_collapsedVpPanel__Sw-Zn,
.recordings_collapsedSessionsList__mbVsM {
    margin: 0 12px 12px 0;
    border-radius: 0px 8px 8px 0px;
    background: #FFF;
    box-shadow: 0px 4.8px 14.4px 0px rgba(131, 126, 255, 0.30);
}

.recordings_vpSessionCard__TN0qX,
.recordings_liveSessionCard__qxHFA,
.recordings_sessionCard__\+-6q4 {
    border: 1px solid #EAEAFF;
    cursor: pointer;
    border-radius: 8px;
    padding: 12px 16px 8px 16px;
    margin-bottom: 12px;
    background: #FFF;
    box-shadow: 0px 3.2px 7.2px 0px rgba(131, 126, 255, 0.12), 0px 0.6px 1.8px 0px rgba(131, 126, 255, 0.10);
    position: relative;
}

.recordings_userStruggleSummary__dyqAn {
    margin: 8px 0px;
}

.recordings_liveSessionCard__qxHFA {
    border: 1px solid #E5F8F8;
}

.recordings_vpSessionCard__TN0qX:hover,
.recordings_liveSessionCard__qxHFA:hover,
.recordings_sessionCard__\+-6q4:hover {
    box-shadow: 0px 4.8px 14.4px 0px rgba(131, 126, 255, 0.30);
}

.recordings_sessionCard__\+-6q4 .recordings_loading__mIxGo {
    justify-content: end;
}

.recordings_sessionCard__\+-6q4 .recordings_hasError__6OoKO {
    color: #a80000;
    font-size: 18px;
}

.recordings_sessionCard__\+-6q4:not(.recordings_loading__mIxGo):not(.recordings_disabled__CgEtE).recordings_selected__z09t7 {
    border: 1.5px solid rgba(150, 146, 255, 1);
    background-color: #FBFBFE;
}

.recordings_sessionCard__\+-6q4.recordings_disabled__CgEtE,
.recordings_sessionCard__\+-6q4.recordings_disabled__CgEtE:hover {
    box-shadow: none;
    cursor: default;
}

.recordings_liveSessionCard__qxHFA.recordings_selected__z09t7 {
    border: 1px solid #00BABC;
}

.recordings_liveSessionCard__qxHFA.recordings_viewed__cqP\+k,
.recordings_sessionCard__\+-6q4.recordings_viewed__cqP\+k {
    background-color: #FAF9F8;
    box-shadow: 0px 3.2px 7.2px 0px #00000014;
    border: 1px solid #EDEBE9;
}

.recordings_liveSessionCard__qxHFA.recordings_viewed__cqP\+k strong,
.recordings_liveSessionCard__qxHFA.recordings_viewed__cqP\+k span,
.recordings_sessionCard__\+-6q4.recordings_viewed__cqP\+k strong,
.recordings_sessionCard__\+-6q4.recordings_viewed__cqP\+k span,
.recordings_sessionCard__\+-6q4.recordings_viewed__cqP\+k .recordings_sessionCardTitle__G5Nm5 {
    color: #605E5C;
}

.recordings_liveSessionCard__qxHFA.recordings_viewed__cqP\+k .ms-Button-label,
.recordings_sessionCard__\+-6q4.recordings_viewed__cqP\+k .ms-Button-label {
    color: #424242;
}

.recordings_liveSessionCard__qxHFA .recordings_urlDate__IbnPE {
    margin-bottom: 8px;
}

.recordings_liveRecordingsInfoBubble__4b2i8 {
    height: 16px;
    display: flex;
    margin-bottom: -2px;
    margin-left: 4px;
}

.recordings_vpSessionCard__TN0qX {
    max-width: 330px;
    box-sizing: content-box;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #605E5C;
}

.recordings_vpListShowMoreButtonArea__wHbD\+ {
    width: 358px;
}

.recordings_vpSessionCard__TN0qX > .vpSessionItem {
    margin-bottom: 4px;
}

.recordings_vpListShowMoreArea__1PEek {
    width: fit-content;
    width: -moz-fit-content;
    background: white;
    border-radius: 8px;
    margin: 4px 0;
    box-sizing: border-box;
    height: 32px;
    box-shadow: 0px 3.2px 7.2px 0px rgba(131, 126, 255, 0.12), 0px 0.6px 1.8px 0px rgba(131, 126, 255, 0.10);
}

.recordings_vpListShowMoreArea__1PEek button {
    padding: 0;
    height: 32px;
}

.recordings_vpListShowMoreArea__1PEek button:hover .ms-Button-label {
    color: #005A9E;
}

.recordings_cardBadgeRow__CXtsi,
.recordings_cardRow__CRC6M {
    display: flex;
    margin-bottom: 4px;
    align-items: center;
    line-height: 20px;
}

.recordings_sessionCard__\+-6q4.recordings_disabled__CgEtE .recordings_cardDateSection__tgLjS,
.recordings_sessionCard__\+-6q4.recordings_disabled__CgEtE .recordings_cardBadgeRow__CXtsi,
.recordings_sessionCard__\+-6q4.recordings_disabled__CgEtE .recordings_cardActions__SoHV4,
.recordings_sessionCard__\+-6q4.recordings_disabled__CgEtE .recordings_cardRow__CRC6M {
    opacity: 0.5;
}

.recordings_cardBadgeRow__CXtsi {
    margin-bottom: 0;
}

.recordings_liveSessionCard__qxHFA.recordings_viewed__cqP\+k .recordings_cardBadge__Y5qOn,
.recordings_sessionCard__\+-6q4.recordings_viewed__cqP\+k .recordings_cardBadge__Y5qOn {
    border: 1px solid #EDEBE9;
    color: #605E5C
}

.recordings_cardTag__g7Ncb {
    width: fit-content;
    border-radius: 4px;
    padding: 3px 8px;
    text-align: center;
    background: #EAEAFF;
    margin: 4px 8px 4px 0px;
    color: #020057;
    font-size: 12px;
    font-weight: 400;
    flex-grow: 0;
    flex-shrink: 0;
    cursor: pointer;
}

.recordings_lastItem__o99wX {
    margin: 4px 0px;
}

.recordings_cardTag__g7Ncb.recordings_similarSession__VLVzf {
    background: #b84b8a;

}

.recordings_cardTag__g7Ncb.recordings_interestingSession__6eLSs.recordings_selected__z09t7 {
    background: #EAEAFF;
    color: #020057;
    border: 1px solid #EAEAFF;
}

.recordings_cardTag__g7Ncb.recordings_interestingSession__6eLSs {
    background: #FFF;
    color: #323130;
    border: 1px solid #C8C6C4;
}

.recordings_cardTag__g7Ncb.recordings_interestingSession__6eLSs:not(.recordings_disabled__CgEtE):hover {
    background: #EAEAFF;
    color: #020057;
    border: 1px solid #EAEAFF;
}

.recordings_selectedTagIcon__feLAg {
    font-weight: bold;
    flex-shrink: 0;
    padding-right: 4px;
}

.recordings_cardDateRow__DkJAs {
    justify-content: space-between;
    width: 100%;
    gap: 8px;
}

.recordings_cardDateSection__tgLjS {
    white-space: nowrap;
    text-align: end;
    font-size: 12px;
    line-height: 16px;
}

.recordings_urlDate__IbnPE {
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
}

.recordings_cardRow__CRC6M.recordings_urlDate__IbnPE > *:first-child {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 12px;
}

.recordings_cardRow__CRC6M strong {
    color: #323130;
    margin-right: 4px;
}

.recordings_cardRow__CRC6M span {
    color: #605E5C;
}

.recordings_cardRow__CRC6M.recordings_multiValuedRow__EckIt span {
    margin-right: 14px;
}

.recordings_cardActionsContainer__kDD6e {
    justify-content: space-between;
    margin-top: 4px;
}

.recordings_sessionCard__\+-6q4.recordings_viewed__cqP\+k .recordings_cardActionsContainer__kDD6e button {
    background-color: #FAF9F8;
}


.recordings_cardActionsContainer__kDD6e button {
    height: 32px;
    font-size: 14px;
    line-height: 20px;
    color: #0078D4;
}

.recordings_cardActions__SoHV4 {
    display: flex;
    align-items: center;
}

.recordings_cardActions__SoHV4 button {
    padding: 0;
    width: 32px;
    height: 32px
}

.recordings_cardActions__SoHV4 button i {
    color: #161514;
    line-height: 20px;
    height: 20px;
}

.recordings_cardActions__SoHV4 button:hover i {
    color: #005A9E;
}

.recordings_sessionCard__\+-6q4.recordings_viewed__cqP\+k .recordings_cardActions__SoHV4 button:not([disabled]) path {
    fill: #979593;
}

.recordings_sessionCard__\+-6q4.recordings_viewed__cqP\+k .recordings_cardActions__SoHV4 button:not(.is-disabled):hover {
    background-color: #0000000F;
}

.recordings_sessionCard__\+-6q4.recordings_viewed__cqP\+k .recordings_cardActions__SoHV4 .ms-Button i {
    color: #979593;
}


.recordings_cardActions__SoHV4 button:not([disabled]):hover path {
    fill: #005A9E;
}

.recordings_mobile__T5oKa .recordings_cardActions__SoHV4 > div {
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}

.recordings_recordingRatingInHeader__zjCmJ i:last-of-type {
    display: none;
}

.recordings_headerRatingModal__7qvo7 {
    width: 250px;
    height: 104px;
}

.recordings_badgeRow__KMg5- {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    justify-content: space-between;
}

.recordings_cardBadge__Y5qOn {
    margin: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid #DEECF9;
    width: 143px;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    flex: 1 1 auto;
}

.recordings_cardBadge__Y5qOn:not(.recordings_disabled__CgEtE):hover {
    background: #E1DFDD;
    cursor: pointer;
}

.recordings_cardSeparator__Xyv25 {
    height: 1px;
    margin-top: 8px;
    border-bottom: 1px solid #EDEBE9;
}

.recordings_liveSessionsContainer__6IfYc {
    justify-content: space-between;
    border-radius: 8px;
    padding: 8px 12px;
    margin: 0 8px;
    background: rgba(229, 248, 248, 1);
}

.recordings_liveSessionsContainer__6IfYc.recordings_expanded__2o7tn {
    margin-bottom: 0;
    border-radius: 8px 8px 0 0;
}

.recordings_liveSessionsContainer__6IfYc.recordings_clickable__intj8 {
    cursor: pointer;
}

.recordings_liveUserHeader__FU2iu {
    background-color: #00BABC;
    text-align: center;
    text-transform: UPPERCASE;
    color: white;
    border-radius: 2px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    padding: 4px 8px;
    margin-left: 4px;
}

.recordings_liveRecordingCardContainer__Glv4z {
    height: 100%;
    overflow-y: scroll;
    padding:0 8px;
    margin: 0 8px;
    background-color: #E5F8F8;
}

.recordings_liveCardDetails__iNpUI {
    justify-content: end;
    margin-top: 4px;
}

.recordings_liveCardDetails__iNpUI button {
    height: 22px;
    line-height: 20px;
    padding: 5px 12px;
    color: #0078D4;
    box-sizing: content-box;
    border: unset;
}

.recordings_liveBadgeContainer__zhuSX {
    display: flex;
    align-items: center;
    height: 16px;
}

.recordings_liveBadgeContainer__zhuSX svg {
    width: 20px;
    height: 20px;
}

.recordings_liveBadge__We3ml {
    background-color: #00BABC;
    color: white;
    margin-left: 4px;
    border-radius: 2px;
    font-size: 10px;
    line-height: 12px;
    font-weight: 600;
    padding: 2px 12px;
    text-align: center;
    text-transform: uppercase;
}

.recordings_cardRow__CRC6M .recordings_date__dsgy2 {
    font-size: 12px;
    line-height: 16px;
    color: #323130;
}

.recordings_favoritesTabHeader__DKdJw {
    width: 100%;
    display: flex;
    align-items: center;
    line-height: 20px;
    justify-content: center;
}

.recordings_favoritesTabHeader__DKdJw i {
    display: flex;
    height: 20px;
}

.recordings_tabHeader__LXEmY {
    width: 100%;
    display: flex;
    align-items: center;
    line-height: 20px;
    justify-content: center;
}

.recordings_tabHeader__LXEmY i {
    display: flex;
    height: 20px;
}

.recordings_noFavoritesContainer__enMyY {
    height: 600px;
    gap: 16px;
}

.recordings_impressions__XPSGd .recordings_heatmapSidebar__lzIxx .recordings_panelTop__x-w0e {
    margin-bottom: 18px;
}

.recordings_sortingContainer__ThcZb {
    align-items: center;
}

.recordings_sortingContainer__ThcZb button:not(.recordings_highlightsToggle__Iep0F button) {
    background: transparent;
    border: none;
    color: #605E5C;
    padding: 0;
    font-weight: 600;
    line-height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.recordings_sortingContainer__ThcZb button:not(.recordings_highlightsToggle__Iep0F button):hover {
    background-color: rgb(243, 242, 241);
}

.recordings_sortingContainer__ThcZb button:not(.recordings_highlightsToggle__Iep0F button) span,
.recordings_sortingContainer__ThcZb button:not(.recordings_highlightsToggle__Iep0F button) i {
    font-weight: 600;
    line-height: 20px;
    height: 20px;
}

.recordings_sortingContainer__ThcZb button:not(.recordings_highlightsToggle__Iep0F button) i {
    width: 20px;
}

.recordings_sortingContainer__ThcZb button i {
    color: #605E5C;
}

.recordings_downloadRecordingsButton__\+WX2l.recordings_disabled__CgEtE i,
.recordings_sortingContainer__ThcZb .is-disabled .ms-Button-label,
.recordings_sortingContainer__ThcZb .is-disabled i {
    color: rgb(161, 159, 157);
}

.recordings_sortGroupSessions__pOtLw {
    padding: 8px 12px 0px 12px;
}

.recordings_downloadRecordingsButton__\+WX2l.recordings_disabled__CgEtE * {
    fill: rgb(161, 159, 157);
}

.recordings_downloadRecordingsButton__\+WX2l {
    margin-right: 8px;
    width: 32px;
    min-width: 32px;
    box-sizing: border-box;
}

.recordings_downloadRecordingsButton__\+WX2l i:not(:first-child) {
    display: none;
}

/*End of Recording Modal Start*/
.recordings_endOfRecordingModalOverlay__J2wJr {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    z-index: 5;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 8px;
}

.recordings_endOfRecordingModal__4minO {
    background: #FFF;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 465px;
    min-height: 176px;
    max-height: calc(100% - 16px);
    border-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.22) 0px 25.6px 57.6px 0px, rgba(0, 0, 0, 0.18) 0px 4.8px 14.4px 0px;
}

.recordings_endOfRecordingHeader__1Ajq3 {
    background: white;
    color: #323130;
    justify-content: space-between;
    padding: 16px;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px; 
}

.recordings_endOfRecordingHeader__1Ajq3 i {
    color: #323130;
}

.recordings_endOfRecordingModal__4minO .recordings_content__R6JC3 {
    overflow-y: auto;
    padding-bottom: 32px;
    background: linear-gradient(343deg, rgba(250, 233, 255, 0.60) 0%, rgba(210, 224, 244, 0.60) 100%)
}

.recordings_endOfRecordingModal__4minO .recordings_dialogCard__R6Tae {
    text-align: center;
}

.recordings_endOfRecordingModal__4minO .recordings_dialogCard__R6Tae > span {
    font-weight: 600;
}

.recordings_endOfRecordingModal__4minO .recordings_feedbackWrapper__EpbLe {
    text-align: center;
    font-size: 24px;
    line-height: 32px;
    margin-top: 24px;
}

.recordings_thumbsContainer__9\+e\+X {
    margin-top: 24px;
    gap: 12px;
}

.recordings_thumbsContainer__9\+e\+X i,
.recordings_thumbsContainer__9\+e\+X .ms-Button {
    padding: 0;
    margin: 0;
    width: unset;
    height: unset;
}

.recordings_endOfRecordingModal__4minO .recordings_modalSeparator__gQ9Iz {
    border-top: 1px solid #FFF;
    max-width: 288px;
    margin: 24px auto;
}

.recordings_endOfRecordingModal__4minO .recordings_dialogCard__R6Tae {
    text-align: center;
}

.recordings_dialogCard__R6Tae .ms-Button--commandBar {
    border: 1px solid #0078D4;
    color: #005A9E;
}

.recordings_dialogCard__R6Tae .ms-Button-label {
    font-weight: 600;
}

.recordings_dialogCard__R6Tae .ms-Button--commandBar path {
    fill: #005A9E;
}

.recordings_dialogCard__R6Tae .ms-TooltipHost:first-child {
    margin-right: 24px;
}

.recordings_dialogCard__R6Tae i {
    height: 20px;
    line-height: 20px;
}

.recordings_endOfRecordingModal__4minO .recordings_quickLabel__MChZJ {
    background: #FFF;
    line-height: 20px;
    border-radius: 4px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #DEECF9;
}

.recordings_endOfRecordingModal__4minO .recordings_quickLabel__MChZJ:hover {
    border: 1px solid #0078D4;
    background: #EFF6FC;
    color: #004578;

}

.recordings_endOfRecordingModal__4minO .recordings_quickLabel__MChZJ:hover:active {
    background: #DEECF9;
}

.recordings_quickLabel__MChZJ.recordings_selectedLabel__Z3nXr {
    border: 1px solid #0078D4;
    background: #EFF6FC;
    color: #004578;
}

.recordings_endOfRecordingModal__4minO .recordings_quickLabel__MChZJ i {
    width: 20px;
    padding: 0 5px;
    box-sizing: content-box;
}

.recordings_endOfRecordingModal__4minO .recordings_quickLabelsContainer__kN2lf {
    display: flex;
    flex-wrap: wrap;
    column-gap: 12px;
    row-gap: 8px;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    margin: 10px 24px 0 24px;
}

.recordings_endOfRecordingFooter__Xm3k6 {
    background: white;
    width: 100%;
    padding: 12px;
    display: flex;
    gap: 8px;
    justify-content: end;
    margin-top: auto;
}

.recordings_endOfRecordingFooter__Xm3k6 > .ms-Button--default {
    color: #323130;
    border-color: #d1d1dd;
}

.recordings_endOfRecordingFooter__Xm3k6 .recordings_primaryControl__DIWrH {
    width: 202px;
    border-radius: 4px;
    color: #FFF;
}

.recordings_primaryControl__DIWrH.ms-Button {
    padding: 0;
}

.recordings_endOfRecordingFooter__Xm3k6 .recordings_primaryControl__DIWrH:hover {
    border: 1px solid transparent;
}

.recordings_endOfRecordingFooter__Xm3k6 .recordings_primaryControl__DIWrH.recordings_nextDisabled__xKI90 {
    background: #EDEBE9;
}

.recordings_endOfRecordingFooter__Xm3k6 .recordings_primaryControl__DIWrH.recordings_nextCountDown__yaIYN {
    background: linear-gradient(280.75deg, rgb(0, 120, 212, 0.3) 0%, rgb(150, 146, 255, 0.3) 94.81%);
}

.recordings_colorChangingText__sQlbD {
    color: #323130;
    font-weight: 600;
    padding: 0;
    width: 200px;
    height: 20px;
    position: absolute;
    white-space: nowrap;
}

.recordings_primaryControl__DIWrH .ms-Button-textContainer {
    overflow-x: hidden;
    position: absolute;
    height: 100%;
    left: 0;
    width: 200px;
}

.recordings_primaryControl__DIWrH .ms-Button-label {
    flex-grow: 0;
    position: absolute;
    z-index: 5;
    top: 5px;
    width: 200px;
    line-height: 20px;
    margin: 0;
}

.recordings_primaryControl__DIWrH .ms-Button-flexContainer::before {
    content: "";
    position: absolute;
    left: 0;
    height: 100%;
}

.recordings_nextCountDown__yaIYN .ms-Button-flexContainer::before {
    background: linear-gradient(280.75deg, #0078D4 0%, #9692FF 94.81%);
    animation: recordings_load__-lPVY 5s linear;
}

.recordings_nextCountDown__yaIYN .ms-Button-textContainer {
    overflow: hidden;
    animation: recordings_load__-lPVY 5s linear;
}

@keyframes recordings_load__-lPVY {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}
/*End of Recording Modal End*/

/*Event timeline -> Session More details */

.recordings_similarSessionList__MGLGM {
    overflow-y: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    background: #FBFBFE;
    padding-right: 5px;
    border-radius: 0 0 8px 8px;
    margin-bottom: 12px;
}

.recordings_similarSessionCard__fU-Yd {
    width: 334px;
}

.recordings_eventTimelineContainer__7aeFM {
    color: #020057;
    line-height: 20px;
    background: #FBFBFE;
    margin-bottom: 12px;
}

.recordings_eventTimelineContainer__7aeFM:last-of-type {
    margin-bottom: 0;
}

.recordings_eventTimelineContainer__7aeFM > div {
    justify-content: space-between;
    width: 100%;
    height: 44px;
    border-radius: 8px;
    background: #FBFBFE;
    padding: 12px;
}

.recordings_eventTimelineContainer__7aeFM > div > div {
    margin-left: 0;
}

.recordings_eventTimelineContainer__7aeFM.recordings_expanded__2o7tn {
    margin-bottom: 0;
}

.recordings_eventTimelineContainer__7aeFM.recordings_expanded__2o7tn > div {
    border-radius: 8px 8px 0 0;
}

.recordings_eventTimelineContainer__7aeFM i {
    color: #242424;
}

.recordings_eventTimelineContainer__7aeFM #eventTimelineCollapsibleTitle {
    display: flex;
    flex: 1;
}

.recordings_eventTimelineContainer__7aeFM #eventTimelineCollapsibleTitle > div {
    margin-left: auto;
    margin-right: 8px;
}

.recordings_eventsToggle__4S5zE.ms-Toggle {
    background: rgb(251, 251, 254);
}

.recordings_purpleIcon__uM\+P1 {
    padding-right: 4px;
    color: #A864CD;
    font-size: 16px;
}

.recordings_eventFilterIcon__Y0th4 {
    font-size: 16px;
    padding-right: 10px;
}

.recordings_sessionInfo__QfQo5 {
    padding: 0 12px;
    background: #FBFBFE;
    border-radius: 0 8px;
    margin-bottom: 12px;
}

.recordings_sessionEventTitle__CUAu5 {
    display: flex;
    flex-direction: row;
    padding: 0;
    flex: 1;
}

.recordings_sessionEventTitle__CUAu5 .recordings_sessionEventPage__HcIAz {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-all;
    overflow: hidden;
}

.recordings_sessionEventTitle__CUAu5 button {
    margin-top: -7px;
    margin-left: auto;
}

.recordings_sessionInfoLine__SGdNn {
    height: 32px;
    line-height: 20px;
    display: flex;
    align-items: center;
}

.recordings_sessionInfoLine__SGdNn strong {
    min-width: 107px;
    max-width: 107px;
    margin-right: 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.recordings_sessionInfoLine__SGdNn > span {
    color: #605E5C;
}

.recordings_sessionInfoLine__SGdNn button {
    margin-left: auto;
}

.recordings_sessionInfoLink__gMq99 {
    max-width: 198px;
    display: inline-block;
}

.recordings_tagsCollapsibleExtraInfo__z6dg3 {
    background: #EAEAFF;
    border-radius: 80px;
    width: 24px;
    height: 24px;
    text-align: center;
    display: inline-block;
    line-height: 21px;
    margin-left: 4px;
}

.recordings_taggingContainer__FRO2E {
    padding: 0 12px 8px 12px;
    background: #FBFBFE;
    border-radius: 0 0 8px 8px;
    margin-bottom: 12px;
}

.recordings_taggingContainer__FRO2E .ms-SelectionZone {
    display: none;
}

.recordings_tagsTitle__64OLE p {
    display: inline-block;
}

.recordings_basePickerListBelow__XU\+7U .ms-BasePicker-text {
    border: 1px solid #D1D1D1;
    border-bottom-color: #616161;
    border-radius: 4px;
}

.recordings_basePickerListBelow__XU\+7U.recordings_disabled__CgEtE {
    background: #F3F2F1;
}

.recordings_basePickerListBelow__XU\+7U.recordings_disabled__CgEtE .ms-BasePicker-text {
    border: transparent;
    border-radius: 4px;
}

.recordings_basePickerListBelow__XU\+7U.recordings_error__3XtJo .ms-BasePicker-text {
    border-bottom-color: #A80000;
}

.recordings_basePickerListBelow__XU\+7U input {
    height: 30px;
    border-radius: 4px;
}

.recordings_selectedTagsContainer__rCRiK {
    margin-top: 12px;
    border: 1px solid #605E5C;
    background-color: #FFFFFF;
    border-radius: 4px;
}

.recordings_selectedTagsContainer__rCRiK > div {
    display: flex;
    flex-wrap: wrap;
}

.recordings_selectedTagsContainer__rCRiK.recordings_empty__bAvOx {
    border: none;
}

.recordings_tagBadge__ccAWC {
    display: flex;
    justify-content: space-between;
    color: #323130;
    background: #F3F2F1;
    margin: 2px;
    cursor: pointer;
    align-items: center;
    height: 26px;
    line-height: 20px;
    border-radius: 4px;
    max-width: calc(100% - 4px);
    width: fit-content;
    flex: 0 0 auto;
}

.recordings_tagBadge__ccAWC span {
    padding: 3px 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.recordings_tagBadge__ccAWC strong {
    padding-left: 8px;
}

.recordings_tagBadge__ccAWC i {
    line-height: 12px;
    font-size: 12px;
    width: 30px;
    text-align: center;
}

.recordings_customTagsDetailsContainer__VvtWT {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

.recordings_customTagsDetailsContainer__VvtWT .recordings_tagBadge__ccAWC {
    cursor: default;
}

.recordings_sessionTimeline__En-wQ {
    padding: 0 12px 12px;
    background: #FBFBFE;
    border-radius: 0px 0px 8px 8px;
    overflow-y: scroll;
    min-height: 100px;
}

.recordings_impressionTimeline__FnXpI {
    border-radius: 8px;
    border: 1px solid #EAEAFF;
    background: #FFF;
    padding: 12px;
    margin-bottom: 10px;
    cursor: pointer;
}

.recordings_impressionTimeline__FnXpI.recordings_activeImpression__ZIh6- {
    border: 2px solid #9692FF;
    background: #FBFBFE;
}

.recordings_collapsibleSessionInfoContainer__NMnqk {
    background-color: #FAF9F8;
    border-radius: 8px;
}

.recordings_collapsibleSessionInfoContainer__NMnqk.recordings_whiteBackground__WCCeV {
    background-color: #FFF;
}

.recordings_sessionInfoLine__SGdNn {
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 20px;
    color: #323130;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recordings_collapsibleSessionInfoContainer__NMnqk .recordings_sessionInfoLine__SGdNn {
    padding: 0 16px;
}

.recordings_collapsibleSessionInfoContainer__NMnqk .recordings_sessionInfoLine__SGdNn:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.recordings_collapsibleSessionInfoContainer__NMnqk .recordings_sessionInfoLine__SGdNn:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.recordings_sessionInfoLine__SGdNn.recordings_notFiltered__WYYuC {
    background: #FFF;
    color: #747373;
}

.recordings_sessionInfoLine__SGdNn.recordings_notFiltered__WYYuC .recordings_marker__-m4mS {
    background: url("data:image/svg+xml,<svg width=\"44\" height=\"40\" viewBox=\"0 0 44 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g filter=\"url%28%23filter0_dd_88_52095%29\"><path d=\"M22 18.7692L29 8H15L22 18.7692Z\" fill=\"%23747373\"/><path d=\"M15.9213 8.5H28.0787L22 17.8518L15.9213 8.5Z\" stroke=\"white\"/></g><defs><filter id=\"filter0_dd_88_52095\" x=\"0.6\" y=\"4.76837e-07\" width=\"42.8\" height=\"39.5693\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"6.4\"/><feGaussianBlur stdDeviation=\"7.2\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.13 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_88_52095\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1.2\"/><feGaussianBlur stdDeviation=\"1.8\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0\"/><feBlend mode=\"normal\" in2=\"effect1_dropShadow_88_52095\" result=\"effect2_dropShadow_88_52095\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_88_52095\" result=\"shape\"/></filter></defs></svg>");
}

.recordings_sessionInfoLine__SGdNn.recordings_eventFiltered__o0Y3a {
    background-color: #FAF9F8;
    color: #323130;
    font-weight: 600;
    border: 1px solid #E1DFDD;
}

.recordings_sessionInfoLine__SGdNn.recordings_selectedEvent__Ukd6I,
.recordings_sessionInfoLine__SGdNn.recordings_selectedEvent__Ukd6I.recordings_notFiltered__WYYuC,
.recordings_sessionInfoLine__SGdNn.recordings_selectedEvent__Ukd6I.recordings_eventFiltered__o0Y3a {
    background-color: #EAEAFF;
    color: #323130;
}

.recordings_sessionInfoLine__SGdNn.recordings_selectedEvent__Ukd6I,
.recordings_sessionInfoLine__SGdNn.recordings_selectedEvent__Ukd6I.recordings_notFiltered__WYYuC {
    border: 1px solid #9692FF;
}

.recordings_sessionInfoLine__SGdNn.recordings_selectedEvent__Ukd6I.recordings_eventFiltered__o0Y3a {
    border: 1px solid #E1DFDD;
}

.recordings_sessionInfoLine__SGdNn.recordings_selectedEvent__Ukd6I {
    font-weight: 600;
}

.recordings_collapsibleContentHeaderEvents__nqKhA .recordings_headerText__vUZOB {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.recordings_headerText__vUZOB .recordings_sessionInfoLine__SGdNn {
    padding: 0;
    flex: 1;
}

.recordings_impressionTimelineHover__apUFW:hover {
    box-shadow: 0px 4.8px 14.4px 0px rgba(131, 126, 255, 0.3);
}

.recordings_headerText__vUZOB i {
    color: #323130;
}

.recordings_eventHeaderText__AJJB5 {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.recordings_sessionInfoLine__SGdNn span:first-child,
.recordings_sessionEventPage__HcIAz .recordings_pageVisitTitle__IHj8y {
    color: #1B1A19;
    font-weight: 600;
    margin-right: 4px;
}

.recordings_sessionInfoLine__SGdNn span:nth-child(2) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recordings_sessionInfoLine__SGdNn .recordings_eventText__hSdvv {
    font-weight: 600;
}

.recordings_sessionInfoLine__SGdNn .recordings_eventMetadata__9SnQS {
    flex: 1;
    margin-left: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recordings_sessionInfoLine__SGdNn .recordings_time__EBnce {
    margin-left: 12px;
    order: 4;
    width: 35px;
}

.recordings_sessionInfoLineDetails__9p7Cb {
    display: flex;
    align-items: center;
    white-space: nowrap;
    gap: 4px;
    flex-wrap: wrap;
    line-height: 20px;
    min-height: 26px;
}

.recordings_sessionInfoLineDetails__9p7Cb .recordings_sessionDetail__RGjgb > strong::after,
.recordings_sessionInfoLineDetails__9p7Cb > strong::after {
    content: ':';
}

.recordings_sessionInfoLineDetails__9p7Cb .recordings_sessionDetail__RGjgb span,
.recordings_sessionInfoLineDetails__9p7Cb span:not(.recordings_sessionDetail__RGjgb) {
    color: #605E5C;
    flex-grow: 1;
}

.recordings_sessionDetail__RGjgb span {
    margin-left: 4px;
}

.recordings_collapsibleContentHeaderEvents__nqKhA button.recordings_sessionInfoButton__MgQwQ {
    padding: 0;
    color: #106EBE;
}

.recordings_collapsibleContentHeaderEvents__nqKhA .recordings_sessionInfoButton__MgQwQ .ms-Button-label {
    margin: 0;
}

.recordings_timelineImpressionIconContainer__dDwpj {
    display: flex;
}

.recordings_sessionInfoLine__SGdNn .recordings_eventTimelineMarker__nSzHw {
    display: flex;
    align-content: center;
    padding-left: 12px;
    position: relative;
}

.recordings_sessionInfoLine__SGdNn .recordings_line__bdTEH {
    border-left: 2px solid #EDEBE9;
    height: 36px;
}

.recordings_sessionInfoLine__SGdNn .recordings_marker__-m4mS {
    z-index: 1;
    height: 30px;
    width: 30px;
    left: -9px;
    top: 15%;
    position: absolute;
    background: url("data:image/svg+xml,<svg width=\"44\" height=\"40\" viewBox=\"0 0 44 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g filter=\"url%28%23filter0_dd_88_52095%29\"><path d=\"M22 18.7692L29 8H15L22 18.7692Z\" fill=\"%231B1A19\"/><path d=\"M15.9213 8.5H28.0787L22 17.8518L15.9213 8.5Z\" stroke=\"white\"/></g><defs><filter id=\"filter0_dd_88_52095\" x=\"0.6\" y=\"4.76837e-07\" width=\"42.8\" height=\"39.5693\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"6.4\"/><feGaussianBlur stdDeviation=\"7.2\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.13 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_88_52095\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1.2\"/><feGaussianBlur stdDeviation=\"1.8\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0\"/><feBlend mode=\"normal\" in2=\"effect1_dropShadow_88_52095\" result=\"effect2_dropShadow_88_52095\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_88_52095\" result=\"shape\"/></filter></defs></svg>");
}

.recordings_sessionInfoLine__SGdNn .recordings_purpleMarker__y9nKI {
    background: url("data:image/svg+xml,<svg width=\"44\" height=\"40\" viewBox=\"0 0 44 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g filter=\"url%28%23filter0_dd_88_52095%29\"><path d=\"M22 18.7692L29 8H15L22 18.7692Z\" fill=\"%23A864CD\"/><path d=\"M15.9213 8.5H28.0787L22 17.8518L15.9213 8.5Z\" stroke=\"white\"/></g><defs><filter id=\"filter0_dd_88_52095\" x=\"0.6\" y=\"4.76837e-07\" width=\"42.8\" height=\"39.5693\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"6.4\"/><feGaussianBlur stdDeviation=\"7.2\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.13 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_88_52095\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1.2\"/><feGaussianBlur stdDeviation=\"1.8\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0\"/><feBlend mode=\"normal\" in2=\"effect1_dropShadow_88_52095\" result=\"effect2_dropShadow_88_52095\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_88_52095\" result=\"shape\"/></filter></defs></svg>");
}

.recordings_sessionInfoLine__SGdNn .recordings_blueMarker__mDcQ0 {
    background: url("data:image/svg+xml,<svg width=\"44\" height=\"40\" viewBox=\"0 0 44 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g filter=\"url%28%23filter0_dd_2082_1667%29\"><path d=\"M22 18.7692L29 8H15L22 18.7692Z\" fill=\"%230086F0\"/><path d=\"M15.9213 8.5H28.0787L22 17.8518L15.9213 8.5Z\" stroke=\"white\"/></g><defs><filter id=\"filter0_dd_2082_1667\" x=\"0.6\" y=\"4.76837e-07\" width=\"42.8\" height=\"39.5692\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"6.4\"/><feGaussianBlur stdDeviation=\"7.2\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.13 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_2082_1667\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1.2\"/><feGaussianBlur stdDeviation=\"1.8\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0\"/><feBlend mode=\"normal\" in2=\"effect1_dropShadow_2082_1667\" result=\"effect2_dropShadow_2082_1667\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_2082_1667\" result=\"shape\"/></filter></defs></svg>");
}

.recordings_eventsFilter__5wxA\+ {
    padding: 12px 16px;
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
}

.recordings_eventsFilter__5wxA\+ div {
    display: flex;
    flex-direction: row;
    gap: 6px;
}

.recordings_eventsFilter__5wxA\+ div button,
.recordings_eventsFilter__5wxA\+ .recordings_navEventButton__yuEpF {
    border: 1px solid #827DFF;
    border-radius: 4px;
}

.recordings_eventsFilter__5wxA\+ div button i,
.recordings_eventsFilter__5wxA\+ .recordings_navEventButton__yuEpF i {
    color: #020057;
    font-size: 12px;
}

.recordings_eventsFilter__5wxA\+ .recordings_navEventButton__yuEpF.is-disabled {
    color: #020057;
    background: #F0F0F0;
    border: 1px solid #E0E0E0;
}

.recordings_eventsTimelineImpressions__31RoZ {
    padding: 8px 16px;
    overflow: auto;
    height: calc(100% + 6px); /* Add 6 pixels because .sessionInfoPivot subtracts more than it should for events tab */
}

.recordings_eventsTimelineImpressions__31RoZ.recordings_eventFiltering__5\+fu2 {
    height: calc(100% - 50px) /* Subtract height of filter dropdown */
}

.recordings_eventsTypeButton__N\+XmM.ms-Button--default,
.recordings_eventsTypeButton__N\+XmM.ms-Button--default:hover {
    border: 1px solid #827DFF;
    color: #323130;
    font-weight: 600;
    background: #FFF;
}

.recordings_eventsTypeButton__N\+XmM:focus {
    border: 2px solid #827DFF
}

.recordings_eventsTypeButton__N\+XmM.ms-Button--default.is-expanded {
    background: #EAEAFF;
}

.recordings_eventsTypeButton__N\+XmM.recordings_filterApplied__6qkPq div {
    background: #827DFF;
    border-radius: 80px;
    width: 16px;
    height: 16px;
    text-align: center;
    display: inline-block;
    line-height: 16px;
    margin-left: 4px;
    color: #FFF;
    font-size: 12px;
}

.recordings_eventsTypeButton__N\+XmM.ms-Button--default i {
    font-size: 8px;
    color: #323130;
    font-weight: 600;
    padding-left: 2px;
    line-height: 18px;
}

.recordings_eventTypesHeader__ERlZk .ms-ContextualMenu-itemText {
    color: #616161;
}

.recordings_eventFilterRow__OplV9 {
    padding: 8px 6px 8px 10px;
    width: 275px;
}

.recordings_eventFilterRow__OplV9 label .ms-Checkbox-text {
    line-height: 16px;
    margin-left: 6px;
}

.recordings_eventFilterRow__OplV9 .ms-Checkbox-label {
    margin: 0;
}

.recordings_eventFilterRow__OplV9:hover {
    cursor: pointer;
    background-color: #EAEAFF;
}

.recordings_eventFilterRow__OplV9.recordings_noEventType__tWssy,
.recordings_eventFilterRow__OplV9.recordings_noEventType__tWssy .ms-Checkbox-text {
    color: #BDBDBD !important;
}

.recordings_eventFilterRow__OplV9.recordings_noEventType__tWssy .ms-Checkbox-label div.ms-Checkbox-checkbox {
    border-color: #BDBDBD;
}

.recordings_eventFilterRow__OplV9.recordings_noEventType__tWssy:hover,
.recordings_eventFilterRow__OplV9.recordings_noEventType__tWssy .ms-Checkbox-label:hover {
    background-color: #FFF;
    cursor: default;
}

.recordings_eventClearButton__vIGbJ {
    text-align: right;
    padding: 2px;
}

.recordings_eventClearButton__vIGbJ button,
.recordings_eventClearButton__vIGbJ button.is-disabled {
    border: none;
}

.recordings_filterableInfoTooltip__5pwIl {
    display: flex;
    overflow: hidden;
}

.recordings_filterableInfoTooltip__5pwIl button {
    margin-left: unset;
    color: #106EBE
}

/*Share Modal*/
.recordings_shareModalContainer__0RjoU {
    min-height: 364px;
    max-width: 560px;
    flex: 1 0 auto;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0px 25.6px 57.6px 0px rgba(0, 0, 0, 0.22), 0px 4.8px 14.4px 0px rgba(0, 0, 0, 0.18);
}

.recordings_shareModalPivot__8LF6V {
    margin: 0 24px;
}

.recordings_shareModalPivotTab__lnlVL {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 8px;
    min-height: 248px;
}

.recordings_shareModalPivotTab__lnlVL .ms-MessageBar {
    margin-top: 8px;
}

.recordings_shareSettingsGroup__Yul0N div:first-child {
    display: flex;
    gap: 24px;
    align-items: center;
}

.recordings_shareSettingsGroup__Yul0N .ms-ChoiceField {
    margin: 0;
}

.recordings_shareSettingsGroup__Yul0N label {
    display: flex;
    align-items: center;
    text-align: center;
}

.recordings_shareSettingsGroup__Yul0N .ms-ChoiceFieldLabel {
    padding: 5px 0 8px 12px;
}

.recordings_shareSettingsGroup__Yul0N label:hover::before,
.recordings_shareSettingsGroup__Yul0N label::before {
    width: 16px;
    height: 16px;
    position: static;
}

.recordings_shareSettingsGroup__Yul0N label:hover::after,
.recordings_shareSettingsGroup__Yul0N label::after {
    left: 3px;
    top: 11px;
}

.recordings_shareModalLinkDescription__5VMYO {
    padding: 12px 0;
    margin-top: 4px;
    line-height: 20px;
}

.recordings_shareModalLinkContainer__O-I0C {
    display: flex;
}

.recordings_shareModalCloseButtonGroup__ik2H6 > button,
.recordings_shareModalLinkContainer__O-I0C > button {
    min-width: 100px;
} 

.recordings_shareModalLinkContainer__O-I0C > div {
    margin-right: 8px;
    max-width: 404px;
    flex-grow: 1;
}

.recordings_shareLinkConfig__RzH9K {
    position: relative;
    display: flex;
    align-items: center;
    margin: 16px 0;
    gap: 4px;
}

.recordings_shareLinkConfig__RzH9K .ms-Checkbox-label {
    align-items: center;
}

.recordings_shareTimeStamp__MaYt1 {
    position: static;
    width: 58px;
    margin-right: 20px;
}

.recordings_shareTimeStamp__MaYt1 > span {
    left: 0px;
    position: absolute;
}

.recordings_shareModalCloseButtonGroup__ik2H6 {
    display: flex;
    align-items: center;
    flex-direction: row;
    margin: 16px 0 24px auto;
}

.recordings_shareModalEmailMessage__TZdPU {
    margin-top: 12px;
}

.recordings_shareModalEmailMessage__TZdPU .ms-TextField-fieldGroup {
    min-height: 122px;
}

.recordings_shareModalLoadingSpinner__hbdmD {
    margin-right: 8px;
}

.recordings_shareModalSendEmailButton__sSKOA {
    margin-left: 16px;
}

.recordings_shareModalEmailExpirationMessage__aRbY8 {
    padding: 5px 0px;
    border-radius: 4px;
    margin-top: 12px;
}

.recordings_shareModalEmailExpirationMessage__aRbY8 .ms-MessageBar-icon {
    padding-top: 4px;
}

.recordings_shareModalEmailExpirationMessage__aRbY8 .ms-MessageBar-text p:not(:last-child) {
    margin-bottom: 10px;
}   

.recordings_shareModalEmailExpirationMessage__aRbY8 .ms-MessageBar-text p:last-child {
    margin-top: 10px;
}

.recordings_shareModalEmailExpirationMessage__aRbY8 .recordings_shareModalExpirationDropdown__bWhbg span {
    font-size: 12px;
}

.recordings_shareModalExpirationDropdown__bWhbg {
    display: flex;
    align-items: center;
    gap: 4px;
}

.recordings_shareModalExpirationDropdown__bWhbg label {
    font-weight: 400;
}

.recordings_replay__l8GGR {
    min-width: 350px;
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
    position: relative;
    justify-content: center;
    flex-direction: column;
    border-radius: 8px;
    background: linear-gradient(281deg, rgba(0, 120, 212, 0.10) 0%, rgba(150, 146, 255, 0.10) 94.81%);
    margin: 0 32px 12px 0;
}

.recordings_replay__l8GGR.recordings_isSelected__5vEZb {
    background: transparent;
    margin: 0;
    justify-content: normal;
}

.recordings_replay__l8GGR .errorWrapper {
    background-color: transparent;
}

.recordings_replay__l8GGR.recordings_isSelected__5vEZb .errorWrapper {
    background: linear-gradient(281deg, rgba(0, 120, 212, 0.10) 0%, rgba(150, 146, 255, 0.10) 94.81%);
    min-height: unset;
    flex: 1 1 auto;
    margin: 0 12px 12px 0;
    border-radius: 8px;
    height: 100%;
}

.recordings_timelineHeader__iPxnG {
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    color: #323130;
    font-weight: 600; 
    padding: 16px;
    height: 45px;
}

.recordings_playbackContainer__2wVBK {
    border-radius: 8px;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    margin-right: 16px;
}

.recordings_videoWrapper__Lnxtg {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    position: relative;
    background: rgba(255, 255, 255, 0.30);
}

.recordings_highlightsWrapper__qpSIH {
    width: 100%;
    height: 100%;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}

.recordings_highlightsContainer__Z3RGW {
    position: relative;
}

.recordings_playerControlsWrapper__q1HjT {
    padding: 16px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0px 4.8px 14.4px 0px rgba(131, 126, 255, 0.30);
    margin: 12px 16px 12px 0;
}

.recordings_playerControls__h5ggW {
    display: flex;
    align-items: center;
    gap: 12px;
}

.recordings_playerControls__h5ggW i {
    min-height: 20px;
    line-height: 20px;
}

.recordings_playerControls__h5ggW .recordings_playButton__AkPQU {
    cursor: pointer;
    height: 40px;
    width: 40px;
    border-radius: 40px;
    box-shadow: 0 6.4px 14.4px 0 rgba(0,0,0,.132), 0 1.2px 3.6px 0 rgba(0,0,0,.108);
}

.recordings_playerControls__h5ggW .recordings_playButton__AkPQU:hover {
    box-shadow: 0 25.6px 57.6px 0 rgba(0,0,0,.22), 0 4.8px 14.4px 0 rgba(0,0,0,.18);
}

.recordings_playerControls__h5ggW .ms-Checkbox-label {
    align-items: center;
}

.recordings_autoPlayControl__YXOAL .ms-Toggle-thumb {
    background-repeat: no-repeat;
    background-position-y: center;
    width: 16px;
    height: 16px;
}

.recordings_autoPlayControl__YXOAL .ms-Toggle-thumb {
    background-image: url("data:image/svg+xml,<svg width=\"6\" height=\"9\" viewBox=\"0 0 6 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 4.77344L0 8.79688V0.796875L6 4.77344Z\" fill=\"white\"/></svg>");
}

.recordings_autoPlayControl__YXOAL.is-checked .ms-Toggle-thumb {
    background-image: url("data:image/svg+xml,<svg width=\"6\" height=\"9\" viewBox=\"0 0 6 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 4.77344L0 8.79688V0.796875L6 4.77344Z\" fill=\"%239692FF\"/></svg>");
}

.recordings_muteButton__jYCCr {
    padding: 0;
    width: 32px;
    height: 32px;
    border: unset;
}

.recordings_muteButton__jYCCr.recordings_muteInMenu__BJlRU {
    width: 100%;
    padding: 0 8px;
}

.recordings_muteButton__jYCCr i {
    height: 20px;
    line-height: 20px;
}

.recordings_muteButton__jYCCr:hover {
    background-color: rgb(243, 242, 241);
    color: #323130;
}

.recordings_muteButton__jYCCr:not(.recordings_muteInMenu__BJlRU) > span{
    justify-content: center;
}
 
.recordings_scrubberEvent__ro8GM {
    position: absolute;
    top: -18px;
}

.recordings_scrubberEventContainer__fS7Gc {
    position: absolute;
    top: -42px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.recordings_scrubberEventContainer__fS7Gc .recordings_eventIcon__Grxuk svg {
    width: 14px;
    height: 14px;
}

.recordings_scrubberEventContainer__fS7Gc .recordings_eventIcon__Grxuk i {
    vertical-align: middle;
}

.recordings_scrubberEventContainer__fS7Gc .recordings_errorIcon__1b-EU,
.recordings_scrubberEventContainer__fS7Gc .recordings_eventIcon__Grxuk,
.recordings_scrubberEventContainer__fS7Gc .recordings_multiEventIcon__Zoke3 {
    width: 28px;
    height: 28px;
    padding: 4px 6px;
    border-radius: 14px;
    border: 1px solid #FFF;
    position: relative;
    z-index: 10;
}

.recordings_scrubberEventContainer__fS7Gc .recordings_errorIcon__1b-EU {
    background: #FAE9FF;
}

.recordings_scrubberEventContainer__fS7Gc .recordings_errorIcon__1b-EU:hover {
    background: #F5D8FD;
}

.recordings_scrubberEventContainer__fS7Gc .recordings_multiEventIcon__Zoke3,
.recordings_scrubberEventContainer__fS7Gc .recordings_eventIcon__Grxuk {
    background: #C7E0F4;
}

.recordings_scrubberEventContainer__fS7Gc .recordings_multiEventIcon__Zoke3:hover,
.recordings_scrubberEventContainer__fS7Gc .recordings_eventIcon__Grxuk:hover,
.recordings_scrubberEventContainer__fS7Gc .recordings_errorIcon__1b-EU:hover {
    box-shadow: 0px 4px 8px 0px #00000024;
}

.recordings_scrubberEventContainer__fS7Gc .recordings_multiEventIcon__Zoke3 {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.recordings_scrubberEventContainer__fS7Gc .recordings_multiEventIcon__Zoke3 span {
    color: #106EBE;
    font-weight: 600;
}

.recordings_scrubberEventContainer__fS7Gc .recordings_multiEventIcon__Zoke3 span:hover {
    cursor: default;
}

.recordings_scrubberEventContainer__fS7Gc .recordings_eventIcon__Grxuk path {
    fill: #106EBE;
}

.recordings_eventTooltip__Pu7Z\+ {
    padding: 0;
    width: fit-content;
}

.recordings_eventTooltip__Pu7Z\+ .ms-Tooltip-content {
    padding: 12px;
}

.recordings_eventTooltip__Pu7Z\+ .ms-Callout-beakCurtain,
.recordings_eventTooltip__Pu7Z\+ {
    box-shadow: 0px 0.6px 1.8px 0px #837EFF1A;
    border-radius: 4px;
}

.recordings_eventInTooltip__mxWRf {
    display: flex;
    flex-direction: row;
    gap: 2px;
    align-items: flex-start;
}

.recordings_eventInTooltip__mxWRf .recordings_eventIcon__Grxuk {
    width: 20px;
    margin-top: 2px;
}

.recordings_eventTextTooltip__g9URA {
    width: 200px;
    display: inline-block;
    word-wrap: break-word;
}

.recordings_tooltipHeader__lkbz6 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.recordings_tooltipHeader__lkbz6 .recordings_eventTime__NW\+v3 {
    color: #605E5C;
}

.recordings_eventDetailsTooltip__8KnHp,
.recordings_singleEventTooltip__j\+aK3 .recordings_tooltipHeader__lkbz6 {
    width: 200px;
}

.recordings_singleEventTooltip__j\+aK3,
.recordings_eventInTooltip__mxWRf {
    padding: 6px 4px;
}

.recordings_eventInTooltip__mxWRf:hover,
.recordings_singleEventTooltip__j\+aK3:hover {
    background: #F3F2F1;
    border-radius: 4px;
    cursor: pointer;
}

.recordings_slider__TOwvT {
    position: relative;
    display: flex;
    margin-bottom: 19px;
    height: 6px;
}

.recordings_slider__TOwvT.recordings_sliderBg__jkLEF {
    background: linear-gradient(281deg, #0078D4 0%, #9692FF 94.81%);
}

.recordings_slider__TOwvT .recordings_progressWrapper__s7nnB {
    display: flex;
    justify-content: end;
}

.recordings_slider__TOwvT.recordings_v2__VWfkD {
    margin-bottom: 16px;
    margin-top: 7px;
}

.recordings_progress__eGfrl {
    height: 6px;
    position: absolute;
    border-color: white;
    border-style: solid;
    border-width: 0 0 1px 0;
}

.recordings_progress__eGfrl.recordings_fullTimeline__Bbugm {
    border-width: 0px;
}

.recordings_sliderSlice__pPT-w {
    box-sizing: border-box;
    border-color: white;
    border-style: solid;
    border-width: 0 0 1px 0;
    display: inline-block;
    height: 6px;
    cursor: pointer;
    position: relative;
}

.recordings_sliderSlice__pPT-w.recordings_fullTimeline__Bbugm {
    border-width: 0px;
}

.recordings_sliderSlice__pPT-w.recordings_v2__VWfkD,
.recordings_sliderSlice__pPT-w.recordings_v2__VWfkD .recordings_progress__eGfrl {
    border-radius: 3px;
}

.recordings_sliderSlice__pPT-w.recordings_newPageSlice__2c2qi,
.recordings_sliderSlice__pPT-w.recordings_newPageSlice__2c2qi .recordings_progress__eGfrl {
    border-radius: 0 3px 3px 0;
}

.recordings_newPage__9USPu {
    height: 13px;
    border-radius: 14px;
    margin-top: -3px;
}

.recordings_sliderSlice__pPT-w.recordings_isDead__tBNcY .recordings_progress__eGfrl,
.recordings_sliderSlice__pPT-w.recordings_isDead__tBNcY {
    border: unset;
}

.recordings_sliderSlice__pPT-w.recordings_isDead__tBNcY.recordings_deadThin__XBsSi {
    margin-top: 1.5px;
}

.recordings_sliderSlice__pPT-w.recordings_isDead__tBNcY.recordings_deadThin__XBsSi,
.recordings_sliderSlice__pPT-w.recordings_isDead__tBNcY.recordings_deadThin__XBsSi .recordings_progress__eGfrl {
    height: 2px;
}

.recordings_scrubber__5hghb {
    position: absolute;
    top: -5px;
    width: 16px;
    height: 16px;
    border-radius: 20px;
    cursor: pointer;
    background-color: white;
    border: 1px solid #0078D7;
    z-index: 3;
}

.recordings_speedOptionsDropdown__q9PZ8 span:active,
.recordings_speedOptionsDropdown__q9PZ8 span:focus,
.recordings_speedOptionsDropdown__q9PZ8 span {
    border: unset;
}

.recordings_speedOptionsDropdown__q9PZ8:hover .ms-Dropdown-title {
    background-color: rgb(243, 242, 241);
}

.recordings_speedOptionsDropdown__q9PZ8 > div:focus::after {
    border: unset;
}

.recordings_speedOptionsDropdown__q9PZ8 > div:focus-visible::after {
    outline: -webkit-focus-ring-color auto 1px;
}

.recordings_speedOptionsDropdown__q9PZ8.recordings_rotateChevron__6y2D5 i {
    transform: rotate(-90deg);
}

.recordings_selectedSpeedOption__U9Usu {
    display: flex;
    align-items: center;
}

.recordings_selectedSpeedOption__U9Usu i {
    height: 16px;
    width: 16px;
    line-height: 16px;
    font-weight: 600;
    margin-right: 4px;
}

.recordings_selectedSpeedOption__U9Usu span {
    color: #323130;
}

.recordings_playerEventInfo__gckZk {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.recordings_liveButton__aDQM- {
    background-color: #00BABC;
    color: white;
    margin-left: 8px;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 600;
    width: 69px;
    text-align: center;
}

.recordings_liveButtonMobile__g2kah {
    max-width: fit-content;
    padding: 3px 8px;
}

.recordings_goLiveButton__sjyM3 {
    background-color: white;
    color: #008066;
    border: 1px solid #008066;
    margin-left: 8px;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 600;
    width: 69px;
    text-align: center;
    cursor: pointer;
}

.recordings_livePlayerStats__BJ-4G {
    gap: 4px;
}

.recordings_videoSettingsButton__pg7nC {
    width: 32px;
    color: #323130;
}

.recordings_videoSettingsButton__pg7nC:hover {
    color: #323130;
}

.recordings_videoSettingsButton__pg7nC i:nth-of-type(2) {
    display: none;
}

.recordings_csvDownloadOptionText__jGP4v,
.recordings_csvDownloadDropdownText__r0vYm,
.recordings_csvDownloadOption__07\+1i {
    color: #323130;
    font-size: 12px;
    line-height: 16px;
    padding: 0px 8px;
}

.recordings_csvDownloadDropdownText__r0vYm {
    padding-top: 6px;
    padding-bottom: 8px;
}

.recordings_csvDownloadOption__07\+1i {
    display: flex;
    padding: 6px 0;
    cursor: pointer;
}

.recordings_csvDownloadOption__07\+1i:hover {
    background-color: #EAEAFF;
}

.recordings_csvDownloadOptionText__jGP4v {
    width: 100%;
}

.recordings_csvDownloadDropdownTitle__yc88M > div {
    color: #161514;
    font-weight: 600;
    height: unset;
    line-height: 16px;
    padding: 10px 4px 6px 4px;
}

.recordings_cvsDownloadDropdownActions__8aX7e {
    display: flex;
    align-items: center;
    padding: 0 8px 10px 8px;
}

.recordings_csvDownloadSpin__bJRdX {
    margin-right: 8px;
    width: 96px;
    height: 32px;
}

.recordings_csvDownloadSpin__bJRdX > div {
    width: unset;
}

.recordings_csvDownloadSpin__bJRdX > div::after {
    border-radius: 2px;
    border: 1px solid #605E5C;
}

.recordings_downloadCSVButton__uMeqv {
    cursor: pointer;
    color: #FFF;
    width: 100px;
    height: 32px;
    border-radius: 4px;
    background: linear-gradient(281deg, #0078D4 0%, #9692FF 94.81%);
}

.recordings_sortMenu__TXiRw button {
    width: 96%;
    margin: 4px;
    border-radius: 4px;
}

.recordings_sortMenu__TXiRw button.is-checked {
    color: #020057;
    background-color: #EAEAFF;
}

.recordings_sortMenu__TXiRw button.is-checked > div {
    margin-left: 20px;
}

.recordings_sortMenu__TXiRw button.is-checked::before {
    content: url("data:image/svg+xml,<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.0458 3.4856C14.3299 3.78703 14.3158 4.26169 14.0144 4.54579L6.08456 12.0197C5.74829 12.3366 5.22042 12.3269 4.89609 11.9977L2.21576 9.27737C1.92504 8.98231 1.92856 8.50745 2.22361 8.21674C2.51867 7.92602 2.99353 7.92954 3.28424 8.22459L5.51839 10.4921L12.9856 3.45421C13.287 3.17011 13.7617 3.18416 14.0458 3.4856Z\" fill=\"%23020057\"/></svg>");
    position: absolute;
    top: 3px;
}

@media screen and (prefers-contrast: more) {
    .recordings_sortMenu__TXiRw button.is-checked::before {
        content: url("data:image/svg+xml,<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.0458 3.4856C14.3299 3.78703 14.3158 4.26169 14.0144 4.54579L6.08456 12.0197C5.74829 12.3366 5.22042 12.3269 4.89609 11.9977L2.21576 9.27737C1.92504 8.98231 1.92856 8.50745 2.22361 8.21674C2.51867 7.92602 2.99353 7.92954 3.28424 8.22459L5.51839 10.4921L12.9856 3.45421C13.287 3.17011 13.7617 3.18416 14.0458 3.4856Z\" fill=\"%23FFF\"/></svg>");
        position: absolute;
        top: 3px;
    }
}

img.recordings_noSessionsSelected__AShxz {
    width: 100%;
}

.noHeatmapModalIllustration img {
    width: 250px;
}

.recordings_goToVpButton__-X4T1 {
    display: flex;
    justify-content: space-between;
    padding: 0 8px;
}

.recordings_goToVpButton__-X4T1 > button {
    padding: 0;
    border: unset;
}

.recordings_goToVpButton__-X4T1 > button:hover {
    background: #F5F5F5;
}

.recordings_visitorProfile__pNsN8 {
    flex: 1;
    background: linear-gradient(165deg, #EFF6FC 31.1%, #D0E7FF 61.85%, #D0E7FF 69.98%, #FFDBD9 91.72%);
    position: relative;
    z-index: 0;
}

.recordings_visitorDetails__kk6S6 {
    padding: 12px 24px;
    color: #323130;
    overflow: auto;
    box-sizing: content-box;
}

.recordings_visitorDetailCard__8gJNE {
    box-sizing: content-box;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #EAEAFF;
    background: #FFF;
    box-shadow: 0px 3.2px 7.2px 0px rgba(131, 126, 255, 0.12), 0px 0.6px 1.8px 0px rgba(131, 126, 255, 0.10);
    margin-bottom: 12px;
}

.recordings_visitorDetailCardTitle__57Ca1 {
    padding-bottom: 8px;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: #161514;
}

.recordings_visitorDetailsCardBreak__XjR2M {
    width: 100%;
    height: 1px;
    background: #EDEBE9;
    mix-blend-mode: normal;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

.recordings_visitorDetailCardContent__aS2gf {
    padding-top: 8px;
    font-size: 14px;
    line-height: 20px;
}

.recordings_visitorDetailCardContent__aS2gf > div:not(:last-child) {
    margin-bottom: 8px;
}

.recordings_visitorDetailLineLabel__oEPD9 {
    display: flex;
    align-items: center;
    color: #323130;
    font-weight: 600;
}

.recordings_visitorDetailValue__\+OQWF {
    max-width: 200px;
    text-align: right;
    color: #605E5C;
}

button.recordings_vpToRecButton__7PRQo {
    padding: 0;
    margin: 0 12px;
}

.ms-Button.recordings_vpToRecButton__7PRQo:hover {
    background: #F5F5F5;
}

.recordings_visitorProfile__pNsN8 .recordings_mountainIllustration__UezIZ {
    position: absolute;
    z-index: -2;
    right: 0;
}

.recordings_brunoWalkingAnimation__VWSWE {
    height: 350px;
    position: absolute;
    bottom: -72px;
    z-index: -1;
    right: 0;
    width: 100%;
}

.recordings_visitorSessions__cu4iN {
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
    margin: 0 12px 0 0;
}

.recordings_visitorSessions__cu4iN .recordings_houseIllustration__cIBZD{
    position: absolute;
    transform-origin: bottom left;
    bottom: -5px;
    z-index: 0;
    left: 0;
}

.recordings_noResultsVisitorSessions__pSpIu {
    background: white;
    height: calc(100vh - 128px);
    border-radius: 8px;
}

.recordings_noResultsVisitorSessions__pSpIu .recordings_visitorSessionsContent__Ylwv- {
    justify-content: center;
}

.recordings_visitorSessionsContent__Ylwv- {
    position: relative;
    margin-right: 16px;
    height: 100%;
    width: 100%;
}

.recordings_vpSessionScroll__50Hr1 {
    overflow-y: scroll;
    max-height: calc(100vh - 130px);
    background: rgba(255, 255, 255, 0.90);
    border-radius: 8px;
    padding: 24px 36px;
}

.recordings_vpKeyEvent__GIh-4 {
    padding: 3px 8px;
    font-size: 12px;
    line-height: 16px;
    margin: 3px;
    border-radius: 4px;
}

.recordings_vpSessionCard__TN0qX .recordings_vpKeyEvent__GIh-4 {
    margin: 3px 0 3px 8px;
}

.recordings_vpCardBreak__C5DiI {
    width: 100%;
    height: 1px;
    border-top: 1px solid #EDEBE9;
    margin-top: 8px;
}

.recordings_vpRecButtonContainer__uSCzO {
    margin-top: 8px;
    height: 24px;
    overflow: hidden;
}

.recordings_visitorSessionsTable__tx4Ww .recordings_vpHeader__Hsz4b {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    padding: 12px;
}

.recordings_vpHeader__Hsz4b {
    justify-self: flex-start;
}

.recordings_visitorSessionsTable__tx4Ww {
    display: grid;
    grid-template-columns: min-content max-content min-content min-content min-content min-content min-content 1fr;
    align-items: center;
}

.recordings_visitorSessionsTable__tx4Ww .recordings_vpData__UPFl1 {
    padding: 0 12px;
    vertical-align: middle;
    font-size: 12px;
    line-height: 16px;
    color: #605E5C;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 62px;
}

.recordings_vpData__UPFl1.recordings_vpPlayColumn__nBlgk {
    padding: 0;
    width: 40px;
    align-items: center;
}

.recordings_visitorPlayButton__A3Dx5 {
    cursor: pointer;
    transform: scale(0.6);
    box-shadow: 0 6.4px 14.4px 0 rgba(0,0,0,.132), 0 1.2px 3.6px 0 rgba(0,0,0,.108);
    border-radius: 40px;
    height: 40px;
}

.recordings_visitorPlayButton__A3Dx5:hover {
    box-shadow: 0 25.6px 57.6px 0 rgba(0,0,0,.22), 0 4.8px 14.4px 0 rgba(0,0,0,.18);
}

.recordings_vpNumeric__4JtbK {
    text-align: right;
}

.recordings_visitorSessionsTable__tx4Ww .recordings_vpKeyEventMargin__DpM9M {
    padding: 10px 10px;
}

.recordings_vpNoData__sPpZp {
    align-items: center;
    padding: 24px;
    background-color: white;
    font-weight: 600;
    color: #323130;
}

button.recordings_visitorBackToRec__397bn {
    width: -moz-fit-content;
    width: fit-content;
    border: unset;
}

.recordings_noMargin__rrIIE {
    margin: 0;
}

.recordings_hintButton__r8-Tm,
.recordings_hintButton__r8-Tm i {
    height: 20px;
}

.recordings_hintButton__r8-Tm path {
    fill: #424242;
}

.recordings_vpRecButtonContainer__uSCzO .recordings_hintButton__r8-Tm svg {
    width: 16px;
    height: 16px;
}

.recordings_visitorDetailCardContent__aS2gf .recordings_hintButton__r8-Tm {
    transform: translateY(4px);
}

@media only screen and (max-width: 1119px) {
    .recordings_vpListShowMoreButtonArea__wHbD\+,
    .recordings_vpSessionCard__TN0qX {
        width: 86%;
        min-width: 280px;
    }

    .recordings_vpListShowMoreButtonArea__wHbD\+ {
        max-width: 358px;
    }

    .recordings_vpSessionScroll__50Hr1 {
        border-width: 8px;
        padding: 16px 24px;
        background-color: transparent;
    }

    .recordings_vpSessionScroll__50Hr1 >:first-child {
        margin-bottom: 12px;
    }

    .recordings_vpSessionCard__TN0qX > .vpSessionItem {
        max-width: 80%;
    }
}

@media only screen and (max-width: 440px) {
    .recordings_vpSessionScroll__50Hr1 >:first-child {
        align-items: flex-start;
    }
}

.recordings_noHeatmapInfoIcon__cWOk0 i,
.recordings_noHeatmapInfoIcon__cWOk0 {
    height: 20px;
}

.recordings_noHeatmapInfoIcon__cWOk0 {
    margin-bottom: -3px;
}

@media screen and (max-width: 550px) {
    .recordings_shareModalContainer__0RjoU {
        max-width: 90%;
    }
}

@media screen and (prefers-contrast: more) {
    .recordings_sessionCard__\+-6q4:not(.recordings_loading__mIxGo):not(.recordings_disabled__CgEtE).recordings_selected__z09t7 {
        border: 3px solid rgba(150, 146, 255, 1);
    }

    .recordings_cardActions__SoHV4 path,.recordings_playerControlButton__yqChr:not(.recordings_disabled__CgEtE) path,
    .recordings_muteButton__jYCCr path {
        fill: white;
    }
}

.recordings_interestingInsights__3OOHc {
    padding: 8px 12px;
}

.recordings_interestingInsights__3OOHc.recordings_expanded__2o7tn {
    margin-bottom: 0px;
    height: 100%;
}

.recordings_insightsContent__xlx-G{
    max-height: 100%;
    background: #F8F8F8;
}

.recordings_interestingFilters__H8QWq {
    display: flex;
    flex-shrink: 0;
    position: sticky;
    padding: 0px 12px;
    transition: max-height 0.3s ease-out;
    flex-wrap: wrap;
}

.recordings_interestingTagsContainer__N\+c5p {
    display: flex; 
    flex-wrap: wrap;
    align-items: center;
}

.recordings_interestingCollapseButton__uTx9Q {
    background: none;
    color: #0078d4;
    cursor: pointer;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    padding: 3px 8px;
}

.recordings_interestingHeather__iqzaw {
    margin-bottom: 0px

}

.recordings_impressionList__0PhFo {
    outline: none;
}

.recordings_impressionList__0PhFo.recordings_hidden__yT\+xd {
    display: none;
}

.recordings_impressionList__0PhFo.recordings_scrollable__UVrw0 {
    overflow-y: scroll;
    padding: 12px;
    height: calc(100vh - 180px);
}

.recordings_interestingInsightsContainer__grXwp {
    display: block;
    background: #F8F8F8;
    height:100%;
    border-radius: 8px;
    cursor: pointer;
}

.recordings_interestingInsightsTitle__yEK\+a {
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    display: flex;
    color: #161514;
    font-weight: 600;
    padding: 12px 16px;
}

.recordings_insightsTitle__OWzA7 {
    padding: 0px 2px;
}

.recordings_interestingFilters__H8QWq.recordings_disabled__CgEtE div,
.recordings_interestingInsightsContainer__grXwp.recordings_disabled__CgEtE {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}

.recordings_noRecordings__EHpK2 {
    padding: 12px;
}
.settings_settingsVertical__xrY3s {
    background: #EFF6FC;
    display: flex;
    height: 100%
}

.settings_navContent__YRdqO ul li:first-child {
    margin-top: 24px;
}

.settings_navContent__YRdqO {
    margin: 12px 0;
    border-radius: 8px;
    border-right: 1px solid rgb(237, 235, 233);
    background: #FFF;
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 222px;
}

.settings_navContent__YRdqO .is-selected a,
.settings_navContent__YRdqO .ms-Nav-compositeLink a:hover {
    background-color: #EAEAFF;
    color: #020057;
}

.settings_navContent__YRdqO a {
    height: 60px;
    padding: 24px;
}

.settings_navContent__YRdqO .is-selected a::after  {
    border-right: 2px solid #827DFF;
    border-left: 0px;
}

.settings_settingsContent__HfAm8 {
    width: 100%;
    overflow: auto;
    margin: 12px;
    border-radius: 8px;
    background-color: #FFF;
}

.settings_settingsContent__HfAm8.settings_base__i0xYZ {
    padding: 22px 48px;
}

.settings_settingsContent__HfAm8.settings_base__i0xYZ .settings_title__GiOyv {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
}

.settings_settingsContent__HfAm8.settings_base__i0xYZ .settings_settingsSubtitle__QKS5u {
    font-size: 26px;
    line-height: 32px;
    margin: 24px 0 40px 0;
    font-weight: 600;
}  

.settings_settingsContent__HfAm8.settings_base__i0xYZ .settings_subtitle__XgnNr,
.settings_settingsContent__HfAm8.settings_base__i0xYZ .settings_instructions__uGQAt {
    font-size: 16px;
    font-weight: 600;
    border-top: 1px solid #EDEBE9;
    margin-top: 16px;
    padding-top: 10px;
}

.settings_settingsContent__HfAm8.settings_smartEvents__\+O4ff {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}

.settings_settingsContent__HfAm8.settings_smartEvents__\+O4ff .content {
    height: 100%;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
}

.settings_instructions__uGQAt {
    margin-bottom: 16px;
}

/*Overview*/
.settings_overviewContainer__f1e0n {
    margin-top: 16px;
    max-width: 404px;
}

.settings_overviewContainer__f1e0n .ms-Dropdown-label {
    font-weight: 400;
}

.settings_settingsFieldContainer__08iHh .ms-TextField-fieldGroup {
    border: 1px solid #D1D1D1;
}

.settings_settingsFieldContainer__08iHh input {
    border-bottom: 1px solid #616161;
}

.settings_ipNameModalContainer__4aMnF, 
.settings_ipAddressModalContainer__pMh96,
.settings_addElementContainer__xyARv,
.settings_addApiTokenContainer__zoqqh,
.settings_email__Qi0mF {
    height: 75px;
}

.settings_email__Qi0mF {
    margin: 24px 24px 0px;
}

.settings_role__AOtnn {
    margin: 5px 24px 24px;
}

.settings_role__AOtnn i{
    color: #616161;
}

.settings_addUserButtonsContainer__wf8sJ {
    margin: 24px;
    display: flex;
    justify-content: flex-end;
    gap: 16px;
}

.settings_ipNameModalContainer__4aMnF, 
.settings_ipAddressModalContainer__pMh96, 
.settings_ipCurrentContainer__fEDY5,
.settings_addElementContainer__xyARv {
    margin: 20px;
}

.settings_settingsContainer__D4Wy3 {
    margin-top: 24px;
}

.settings_overviewLabel__p8h-M {
    font-weight: 400;
    margin-bottom: 5px;
    -webkit-user-select: none;
    user-select: none;
}

.settings_projectIdLabel__RwMmr {
    margin-left: 0 12px;
    color: #707070;
}

.settings_projectIdLabel__RwMmr + button {
    min-width: 32px;
    min-height: 32px;
}

.settings_overviewContainer__f1e0n > * {
    margin-bottom: 24px;
}

.settings_actionsContainer__3eTYS {
    display: flex;
}

.settings_actionsContainer__3eTYS button:first-child {
    margin-right: 12px;
}

.settings_projectIdContainer__-YwyK,
.settings_endpointContainer__fBUdS {
    display: flex;
    align-items: center;
    gap: 12px;
}

.settings_projectIdContainer__-YwyK .settings_overviewLabel__p8h-M,
.settings_endpointContainer__fBUdS .settings_overviewLabel__p8h-M {
    margin-bottom: 0px;
}

.settings_projectIdContainer__-YwyK svg path,
.settings_endpointContainer__fBUdS svg path {
    fill: white;
}

.settings_projectIdContainer__-YwyK .settings_copyButtonClass__PfHFn,
.settings_endpointContainer__fBUdS .settings_copyButtonClass__PfHFn {
    margin-top: 0px;
}

.settings_industryDropdown__pETWW label {
    color: #000;
}

.settings_attestationCollapsible__ifGbx #attestationComplete {
    display: flex;
    align-items: center;
    gap: 16px;
}

.settings_attestationCollapsible__ifGbx.collapsed {
    margin-bottom: 36px;
}

.settings_attestationCollapsible__ifGbx.expanded {
    margin-bottom: 12px;
}

.settings_attestationModalContainer__NxOxm {
    max-width: 560px;
}

.settings_attestationModalContainer__NxOxm .ms-Modal-scrollableContent {
    margin: 16px 24px 24px;
}

.settings_attestationModalTitle__hxFNt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.settings_attestationModalTitle__hxFNt h1 {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
}

.settings_attestationModalBody__C0kGE {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.settings_attestationModalFooter__bCZrr {
    margin-top: 36px;
    gap: 8px;
    display: flex;
    justify-content: end;
}

.settings_attestationCompleteIndicator__Rcg-v {
    display: flex;
    align-items: center;
    color: #707070;
}

.settings_attestationCompleteIndicator__Rcg-v i {
    height: 16px;
    margin-right: 4px;
}

.settings_attestationTermsLink__SFVGk .ms-MessageBar-innerText span a {
    padding-left: 0;
    color: #424242;
    text-decoration: underline;
}

.settings_attestationTermsLink__SFVGk .ms-MessageBar-innerText a:hover {
    color: #005A9E;
}

/*Team*/
.settings_userIcon__DKUkP {
    width: 28px;
    height: 28px;
    background: #008066;
    text-align: center;
    position: relative;
    top: 2px;
    border-radius: 45px;
}

.settings_userIcon__DKUkP > span {
    color: white;
    font-size: 10px;
    font-weight: 600;
    position: relative;
    top: -3px;
}

.settings_team__WULYl tr {
    border-bottom: 1px solid #EDEBE9;
    height: 48px;
}

.settings_team__WULYl thead {
    position: absolute;
    left: -999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.settings_emptyMessage__EcASY {
    text-align: center;
    max-width: 301px;
    margin: 0 auto;
}

.settings_emptyMessage__EcASY img {
    margin-bottom: 24px;
}

.settings_emptyMessage__EcASY svg {
    width: 301px;
    height: 249px;
}

.settings_removeUserContainer__DGD36.settings_withContent__7Ym5- {
    margin: 24px;
}

.settings_removeUserContainer__DGD36 {
    margin: 70px 24px 24px 24px;
}

.settings_modalContainerClass__eI0l2.ms-Dialog-main,
.settings_removeElementContainer__cKWId .ms-Dialog-main {
    width: 560px;
    max-width: 80%;
}

.settings_smallModalContainer__IqOPU .ms-Dialog-main {
    width: 480px;
    max-width: 80%;
}

.settings_mediumModalContainer__bQDjs .ms-Dialog-main {
    width: 560px;
    max-width: 80%;
}

/* Masking */
.settings_maskingContainer__FT9x9 {
    max-width: 1195px;
}

.settings_maskingContainer__FT9x9 .ms-MessageBar {
    margin-top: 8px;
}

.settings_maskingContainer__FT9x9 .ms-MessageBar-content {
    align-items: center;
}

.settings_maskingContainer__FT9x9 .ms-MessageBar-innerText{
    display: flex;
    align-items: center;
}

.settings_maskingContainer__FT9x9 .ms-MessageBar-icon {
    height: 20px;
}

.settings_maskChoiceGroup__8B4-R .ms-ChoiceField {
    background-color: white;
    margin-right: 24px;
}

.settings_maskChoiceGroup__8B4-R .ms-ChoiceField-field {
    border-radius: 8px;
    width: 349px;
    height: 252px;
    box-shadow: 0px 3px 7px 0px rgba(131, 126, 255, 0.12), 
    0px 0px 1px 0px rgba(131, 126, 255, 0.10);
}

.settings_maskChoiceGroup__8B4-R .ms-ChoiceField-labelWrapper > div:first-child {
    font-weight: 600;
    margin-top: 12px;
}

.settings_maskChoiceGroup__8B4-R label:hover,
.settings_maskChoiceGroup__8B4-R label.ms-ChoiceField-field::before:hover  {
    border: 1px solid #827DFF;
}

.settings_maskChoiceGroup__8B4-R .is-checked {
    border: 1px solid #827DFF;
    box-shadow: 0px 4px 14px 0px rgb(131, 126, 255, 0.30);
}

.settings_maskChoiceGroup__8B4-R .ms-ChoiceField-innerField {
    padding: 0px;
}

.settings_maskChoiceGroup__8B4-R label.ms-ChoiceField-field.is-checked::after,
.settings_maskChoiceGroup__8B4-R label.ms-ChoiceField-field.is-checked::before {
    border-color: #827DFF;
}

.settings_maskChoiceGroup__8B4-R .ms-ChoiceField-labelWrapper {
    position: static;
}
.settings_maskChoiceGroup__8B4-R .ms-ChoiceField-labelWrapper:nth-child(2) {
    margin-top: 12px;
}

.settings_maskingChoiceGroupeTitle__gReHi {
    position: absolute;
    top: 0;
    margin: 16px 12px;
    left: 0;
    font-weight: 600;
}

.settings_maskingElements__lc3V0 .ms-Button.ms-Button--default.is-checked {
    background-color: #EFF6FC;
}

.settings_maskButton__StyxE.ms-Button.ms-Button--default {
    width: 99px; 
    border-radius: 8px 0px 0px 8px;
}

.settings_unmaskButton__73inZ.ms-Button.ms-Button--default {
    width: 112px;
    border-left: 0px;
    border-radius: 0px 8px 8px 0px;
    text-wrap: wrap;
}

.settings_maskButton__StyxE .is-checked i.ms-Icon.ms-Button-icon,
.settings_unmaskButton__73inZ .is-checked i.ms-Icon.ms-Button-icon {
    font-weight: 600;
}

.settings_memberBanner__0wpx- {
    margin: 0 0 28px -24px;
}

.settings_infoBanner__wOJhz {
    margin: 8px 0 28px 0;
}

.settings_infoBanner__wOJhz .ms-MessageBar-innerText {
    width: 100%;
}

.settings_infoBanner__wOJhz i {
    display: flex;
    align-items: center;
} 

.settings_memberBannerText__gUKfc {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.settings_memberBannerText__gUKfc .settings_bannerButton__UzpIV.ms-Button {
    border: none;
    color: #0078D4;
    background-color: transparent;
}

.settings_memberBannerText__gUKfc .settings_bannerButton__UzpIV.ms-Button:hover {
    color: #005A9E;
    background-color: transparent;
}

/*Setup*/
.settings_setupContainer__pGgU1, 
.settings_appsSetupContainer__kuEpk {
    margin-top: 24px;
    max-width: 100%;
}

.settings_appsSetupContainer__kuEpk .ms-Toggle-innerContainer {
    margin-left: 8px;
}

.settings_appsSetupContainer__kuEpk .ms-Toggle.is-checked.is-disabled button {
    background-color: #C8C6C4;
}

.settings_appsSetupContainer__kuEpk .ms-ChoiceFieldGroup {
    margin-left: 8px;
}

.settings_appsSetupContainer__kuEpk input.ms-ChoiceField-input.is-disabled + label.ms-ChoiceField-field:hover::before,
.settings_appsSetupContainer__kuEpk input.ms-ChoiceField-input.is-disabled + label.ms-ChoiceField-field:hover::after {
    border: 1px solid #C8C6C4;
}
 
.settings_appsSetupContainer__kuEpk input.ms-ChoiceField-input.is-disabled + label.ms-ChoiceField-field.is-checked::after,
.settings_appsSetupContainer__kuEpk input.ms-ChoiceField-input.is-disabled + label.ms-ChoiceField-field.is-checked::before {
    border-color: #C8C6C4;
}

.settings_appsSetupContainer__kuEpk input.ms-ChoiceField-input.is-disabled + label.ms-ChoiceField-field:hover::after,
.settings_appsSetupContainer__kuEpk input.ms-ChoiceField-input.is-disabled + .ms-Toggle.is-checked.is-enabled button {
    background-color: #C8C6C4;
}

.settings_setupOptionTile__4t7YO,
.settings_simpleTile__u5sVw {
    background-color: white;
    border-radius: 8px;
}

.settings_setupOptionTile__4t7YO.settings_largeTile__qUu3u {
    height: 221px;
}

.settings_setupOptionTile__4t7YO.settings_largeTile__qUu3u .settings_setupOptionTitle__yI8kU {
    margin-top: 20px;
}

.settings_setupOptionTile__4t7YO.settings_largeTile__qUu3u .settings_setupButtonWrapper__0AE7k {
    margin-top: 35px;
}

.settings_setupOptionTile__4t7YO {
    padding: 32px;
    width: 535px;
    min-width: 535px;
    position: relative;
    box-shadow: 0px 4px 14px 0px rgb(131, 126, 255, 0.30);
}

.settings_setupOptionTiles__T\+CwC .settings_setupOptionTile__4t7YO {
    min-width: unset;
    width: auto;
}

.settings_appsOptionTiles__qursi .settings_setupOptionTile__4t7YO {
    width: 100%;
}

.settings_simpleTile__u5sVw {
    display: flex;
    border: 1px solid #DEECF9;
    justify-content: space-between;
    padding: 20px 32px;
    margin-top: 24px;
    align-items: center;
}

.settings_simpleTile__u5sVw .settings_setupOptionTitle__yI8kU {
    margin-bottom: 0px;
}

.settings_setupOptionTile__4t7YO.settings_isSmall__DlnGY {
    width: 189px;
}

.settings_gettingStartedDescriptionArea__JHuOm {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 73px;
}

.settings_gettingStartedDescTextArea__qrOxq {
    max-width: 376px;
}

.settings_gaSiteName__foDUq {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings_googleIntegrationsFRE__f3UJp {
    display: flex;
    margin-bottom: 40px;
    gap: 12px;
    flex-wrap: wrap;
}

.settings_gettingStartedSprite__9SZnI {
    position: absolute;
    overflow: hidden;
    right: 35px;
    top: 35px;
}

.settings_gettingStartedSprite__9SZnI::after {
    content: url(https://claritystatic.azureedge.net/images/integrationSettingsSprite3.png);
    position: relative;
}

.settings_emoji__uJSPi {
    height: 60px;
    width: 80px;
}

.settings_emoji__uJSPi.settings_installGA__94WKU::after {
    left: -60px;
}

.settings_emoji__uJSPi.settings_installGTM__cjqvR::after {
    left: 0px;
}

.settings_emoji__uJSPi.settings_installHubspot__VoC2S::after {
    left: -145px;
}

.settings_emoji__uJSPi.settings_installGAds__0XARu::after {
    left: -240px;
}

.settings_emoji__uJSPi.settings_installMsAds__Iyhwe::after {
    left: -320px;
}

.settings_setupOptionTitle__yI8kU {
    font-size: 16px;
    line-height: normal;
    font-weight: 600;
    margin-bottom: 12px;
    letter-spacing: 1px;
    line-height: 22px;
}

.settings_settingsDividerText__JIBUn {
    margin: 0px 12px;
}

.settings_setupOptionTiles__T\+CwC {
    display: flex;
    margin-top: 16px;
    gap: 16px;
    align-items: center;
}

.settings_emojiDescription__O9KaK {
    padding: 2px 10px;
    border-radius: 16px;
    background-color: #FDE300;
    max-width: -moz-fit-content;
    max-width: fit-content;
    justify-content: space-between;
    display: flex;
    margin-bottom: 12px;
}

.settings_emojiDescription__O9KaK svg {
    margin-left: 6px;
}

.settings_emojiDescription__O9KaK.settings_connected__x4Ej6 {
    background-color: #107C10;
    color: white;
    align-items: baseline;
}

.settings_emojiDescription__O9KaK.settings_connected__x4Ej6.settings_needsAttention__KUlht {
    background-color: #FF660D;
}

.settings_connectedGTMFRE__ek-Ca {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.settings_connectedGTM__sgGug > :last-child ,
.settings_connectedGTMFRE__ek-Ca > :last-child {
    margin-top: 16px;
}

.settings_connectedGTMFRE__ek-Ca .settings_gtmLabel__Ch0ri {
    font-weight: 600;
    margin-right: 5px;
}

.settings_connectedGTMFRE__ek-Ca .settings_gtmLabelWrapper__NAdR0:last-child {
    margin-top: 8px;
}


.settings_setupSection__K-TlQ {
    margin-top: 16px;
}

.settings_setupButtonWrapper__0AE7k {
    flex: 1;
    display: flex;
    align-items: flex-end;
    margin-top: 16px;
}

.settings_setupButtonWrapper__0AE7k button:first-child {
    margin-right: 8px;
}

.settings_dataCaptureRulesTitle__L7fVf {
    margin-bottom: 4px;
}

.settings_dataCaptureInfoMessage__ttDS2 {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.settings_networkConfigChoiceGroup__6lLFK {
    display: inline-block;
}

.settings_deleteAllowedElementsModalPlaceholder__REuWc {
    display: none;
}

.settings_connectedContainerFRE__hoy-N {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.settings_collapsibleContentApps__VMvW\+ {
    margin-top: 22px;
}

.settings_collapsibleContentApps__VMvW\+ {
    color: #020057;
}

.settings_collapsibleContentApps__VMvW\+ > div {
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
}

.settings_addUrlWrapper__eBRa1 {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    border:none;
    padding: 16px 24px 20px 24px;
    height: 32px;
}

.settings_addUrlWrapper__eBRa1 .ms-Dropdown {
    width: 120px;
    border-width: 0 0 1px 0;
    border-radius: 0;  
}

.settings_addUrlWrapper__eBRa1 .ms-Dropdown-title {
    border-width: 0 0 1px 0;
    border-radius: 0;
}

.settings_addUrlWrapper__eBRa1 .ms-SearchBox {
    margin-bottom: 0;
    border-width: 0 0 1px 0;
    border-radius: 0;
    flex-grow: 1;
}

.settings_urlActionWrapper__YEdHz {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 8px 0;
}

.settings_urlModalSeparator__Vrrjx {
    width: 16px;
    padding: 8px;
    background-color: #fff;
}

.settings_urlModalHeader__JbqZT {
    display: flex;
    font-weight: 600;
    padding: 16px 24px 20px;
    font-size: 20px;
    justify-content: space-between;
}

.settings_urlPatternDropDown__qbp5Q {
    width: 120px;
    height: 32px;
}

.settings_urlSearchBox__dMAiI {
    width: 291px;
    height: 32px;
}

.settings_collapsibleSubSteps__G6GSx {
    margin-left: 36px;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    color: #020057;
    margin-top: 22px;
}

.settings_addScreenContainer__JejZn {
    margin: 20px;
    height: 75px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings_addScreenContainer__JejZn .ms-SearchBox-field {
    padding-left: 4px;
}

.settings_addScreenContainerNote__fkUkx {
    font-size: 12px;
}

.settings_addScreenContainer__JejZn .ms-SearchBox:hover {
    border: 1px solid #D1D1D1;
    border-radius: 4px;
}

.settings_addScreenContainer__JejZn .ms-SearchBox::after {
   border-color: #827DFF;
   border-radius: 4px;
}

.settings_addScreenContainer__JejZn .ms-SearchBox-iconContainer {
    display: none;
}

.settings_elementRow__QqoSI {
    display: flex;
    justify-content: space-between;
    border-bottom: solid 1px #F3F2F1;
    padding: 5px 5px 5px 0;
}

.settings_elementRowContent__tihCg {
    width: 90%;
    display: flex;
    justify-content: space-between;
}

@media only screen and (max-width: 1440px) {
    .settings_isSettings__XTAqQ.settings_googleIntegrationsFRE__f3UJp {
        display: grid;
        gap: 24px;
        grid-template-columns: auto;
        margin: 0;
    }
    
    .settings_setupOptionTiles__T\+CwC {
        display: grid;
        gap: 16px;
        grid-auto-columns: auto;
    }

    .settings_setupOptionTile__4t7YO {
        max-width: 702px;
        width: unset;
        min-width: unset;
    }

    .settings_setupOptionTiles__T\+CwC .settings_setupOptionTile__4t7YO,
    .settings_simpleTile__u5sVw {
        width: 670px;
        min-width: 670px;
    }

    .settings_settingsDividerText__JIBUn {
        text-align: center;
        max-width: 702px;
    }
}

@media only screen and (max-width: 979px) {
    .settings_setupOptionTiles__T\+CwC .settings_setupOptionTile__4t7YO,
    .settings_simpleTile__u5sVw {
        width: 100%;
        min-width: auto;
    }
}

@media only screen and (max-width: 600px) {
    .settings_emoji__uJSPi.settings_installGTM__cjqvR::after {
        display: none;
    }
}

.settings_gtmBreadcrumb__v0nzo {
    margin: 0px;
}

.settings_gtmBreadcrumb__v0nzo .ms-Breadcrumb-item {
    padding: 0px;
    font-size: 20px;
    line-height: 28px;
}

.settings_gtmBreadcrumb__v0nzo:first-child button {
    padding: 0px 8px 0px 0px;
}

.settings_gtmBreadcrumb__v0nzo:first-child button::after {
    display: block;
    content: attr(title);
    font-weight: 600;
    height: 0;
    color: transparent;
    overflow: hidden;
    visibility: hidden;    
    pointer-events: none;
}

.settings_gtmBreadcrumb__v0nzo button:hover,
.settings_gtmBreadcrumb__v0nzo button:active,
.settings_gtmBreadcrumb__v0nzo button:active:hover {
    color: #605e5c;
    font-weight: 600;
    background-color: transparent;
}

.settings_gtmBreadcrumbItem__CyYMc,
.settings_hubspotBreadcrumbItem__q5IXm {
    align-items: center;
    padding: 0px 8px;
}

.settings_gtmBreadcrumbItem__CyYMc span,
.settings_hubspotBreadcrumbItem__q5IXm span {
    padding: 6px 8px;
    color: #323130;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    text-align: center;
}

.settings_msadsSetup__ypyp3,
.settings_msadsAccountLoading__n5f3X,
.settings_msadsAccountLinking__sIDlW,
.settings_gadsSetup__8WcMc,
.settings_gadsAccountLoading__fsF7V,
.settings_gadsAccountLinking__E4xzy,
.settings_gtmSetup__lQwM5,
.settings_gtmSetupLoading__5\+g6V,
.settings_gtmAccountLinking__AvXCT,
.settings_gtmAccountsLoading__ZIWxp {
    max-width: 424px;
}

.settings_msadsSetupForm__spKxD,
.settings_gadsSetupForm__0-dh0,
.settings_gtmSetupForm__G26lW {
    margin: 40px 0;
    gap: 24px;
}

.settings_msadsSetupForm__spKxD .settings_emojiDescription__O9KaK,
.settings_gadsSetupForm__0-dh0 .settings_emojiDescription__O9KaK {
    margin-bottom: -12px;
}

.settings_gtmSetupForm__G26lW h2 {
    font-size: 16px;
    color: #161514;
    font-weight: 600;
    line-height: 22px;
}

.settings_gtmSetupForm__G26lW .settings_emojiDescription__O9KaK {
    margin-bottom: 0;
}

.settings_gtmSetupForm__G26lW strong {
    padding-right: 4px;
}

.settings_gtmLabelGap__yvXgc {
    gap: 8px;
}

.settings_gtmInlineLink__nVQrr {
    margin-left: 4px;
}

.settings_msadsEmptyAccounts__Gy5qH,
.settings_gadsEmptyAccounts__J8Rj\+,
.settings_gtmEmptyAccounts__0F7Jt {
    margin: 40px 0;
    gap: 24px;
}

.settings_msadsAccountLinking__sIDlW,
.settings_gadsAccountLinking__E4xzy,
.settings_gtmAccountLinking__AvXCT {
    padding: 21px;
    gap: 42px;
}

.settings_msadsAccountLoading__n5f3X,
.settings_gadsAccountLoading__fsF7V,
.settings_gtmAccountsLoading__ZIWxp {
    gap: 21px;
}

.settings_msadsAccountLoading__n5f3X,
.settings_msadsAccountLinking__sIDlW,
.settings_gadsAccountLoading__fsF7V,
.settings_gadsAccountLinking__E4xzy,
.settings_gtmSetupLoading__5\+g6V,
.settings_gtmAccountLinking__AvXCT,
.settings_gtmAccountsLoading__ZIWxp {
    padding: 14% 0;
}

.settings_gtmMessageBar__nCgLA {
    background: #F3F2F1;
}

.settings_gtmLoading__v0Oh4 {
    flex: 0 0 auto;
}

.settings_gtmErrorMessage__p5XW0 {
    margin-top: 8px;
}

.settings_gtmErrorMessage__p5XW0 a {
    color: rgb(0, 120, 212);
}

.settings_gtmErrorMessage__p5XW0 a:hover {
    color: rgb(0, 69, 120);
    text-decoration: underline;
}

.settings_msadsActions__ppAa1,
.settings_gadsActions__QDcJM,
.settings_gtmActions__oyOVx {
    justify-content: end;
    align-items: end;
    max-width: 424px;
    height: 48px;
    gap: 8px;
}

.settings_gadsActions__QDcJM {
    height: 32px;
}

.settings_msadsConnectedContainer__4moYo,
.settings_gadsConnectedContainer__DnL-Y {
    display: flex;
    gap: 4px;
    align-items: center;
}

.settings_msadsConnectedContainer__4moYo i,
.settings_gadsConnectedContainer__DnL-Y i {
    color: #605E5C;
}

.settings_gtmSeparator__IW23m {
    width: 100%;
    margin: 16px 0;
    border-bottom: 1px solid #EDEBE9;
}

.settings_gtmFacts__gSNL3,
.settings_hubspotFacts__LrXk2 {
    margin: 40px 0 0;
    gap: 12px;
}

.settings_hubspotSetupNote__k-L0T {
    padding: 10px 0px 20px;
}

.settings_hubspotSetupNote__k-L0T a {
    color: rgb(0, 120, 212);
}

.settings_hubspotSetupNote__k-L0T a:hover {
    color: rgb(0, 69, 120);
    text-decoration: underline;
}

@media screen and (max-width: 1100px) {
    .settings_gtmFacts__gSNL3,
    .settings_hubspotFacts__LrXk2 {
        flex-direction: column;
    }        
}

.settings_gtmErrorModal__KcrRK .ms-Dialog-main {
    min-width: 488px;
    min-height: 151px;
    border-radius: 2px;
}

.settings_gtmDisconnectModal__uqGQV .ms-Dialog-main {
    border-radius: 8px;
    background: #FFF;
    min-height: 456px;
    min-width: 560px;
    box-shadow: 0px 25.6px 57.6px 0px rgba(0, 0, 0, 0.22), 0px 4.8px 14.4px 0px rgba(0, 0, 0, 0.18);
}

.settings_gtmDisconnect__-Jbzh {
    margin: 16px 12px 32px;
    gap: 16px;
}    

.settings_gtmDisconnect__-Jbzh p {
    color:#323130;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
}

.settings_gtmConnect__Awffy {
    margin: 12px 0 24px;
}

.settings_gtmTutorialsTitle__2GFpm {
    font-size: 16px;
    font-weight: 600;
    color: #161514;
    line-height: 22px;
    margin-bottom: 16px;
}

.settings_gtmTutorial__Ov5TK {
    height: 44px;
    font-size: 16px;
    font-weight: 600;
    color: #020057;
    line-height: 22px;
}

.settings_gtmTutorial__Ov5TK i {
    width: 20px;
    height: 20px;
    color: #242424;
}

.settings_gaModalRoot__11c23 {
    position: relative;
}

.settings_gaModalRoot__11c23 > div {
    max-height: 29vh;
}

.settings_gaModalLabel__dq7Bu {
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
}

.settings_gaModalCombobox__FmX7q.settings_gaModalCombobox__FmX7q {
    display: grid;
    justify-items: start;
    gap: 5px 24px;
    max-width: 100%;
    margin-top: 9px;
}

.settings_gaModalCombobox__FmX7q > input {
    width: 100%;
    padding-left: 2.4em;
}

.settings_gaModalCombobox__FmX7q > span:nth-child(3) {
    display: flex;
    gap: 5px;
}

.settings_gaModalOption__CFqKC.settings_gaModalOption__CFqKC.settings_gaModalOption__CFqKC::after {
    border: 1px solid rgb(32, 31, 30);
    border-radius: 0px;
}

.settings_gaModalOption__CFqKC > span {
    display: none;
}

.settings_gaModalOption__CFqKC:hover.settings_gaModalOption__CFqKC:hover {
    background-color: #eaeaff;
    border-radius: 0px;
}

.settings_gaModalDisabledOption__8sXQ7.settings_gaModalDisabledOption__8sXQ7 {
    cursor: auto;
}

.settings_gaModalDisabledOption__8sXQ7.settings_gaModalDisabledOption__8sXQ7.settings_gaModalDisabledOption__8sXQ7::after {
    border: 0px;
}

.settings_gaModalIcon__OQmwn {
    position: absolute;
    z-index: 1;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 10px;
    width: 1.4em;
    height: 1.4em;
}

.settings_gaModalComboboxLoadingIcon__1oU9f {
    position: absolute;
    top: 0.6em;
    right: 2.5em;
}

/* Api tokens */
.settings_endpointContainer__fBUdS {
    margin: 24px 0;
}

.settings_listElementsContainer__VLQQG {
    margin-top: 16px;
}

.settings_apiTokensURL__0PFge {
    text-decoration-line: underline;
    margin: 0 12px;
}

.settings_apiElements__BAfZH {
    margin: 24px 24px 24px 0;
    align-items: center;
    white-space: nowrap;
    width: 100%;
}

.settings_apiElements__BAfZH > * {
    border-bottom: solid 1px #F3F2F1;
    height: 33px;
    line-height: 32px;
    padding: 5px 5px 5px 0;
    box-sizing: content-box;
}

.settings_apiElements__BAfZH td {
    padding: 5px 8px 5px 16px;
}

.settings_elementName__JmBcd {
    font-weight: 600;
    max-width: 176px;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    width: 25%;
}

.settings_elementActionsContainer__Nu5MW {
    display: flex;
    color: #0078D4;
    align-items: center;
    justify-content: flex-end;
    min-width: 67px;
}

.settings_elementActionsContainer__Nu5MW > button {
    background: white;
    border: none;
    cursor: pointer;
    color: #0078D4;
}

.settings_elementActionsContainer__Nu5MW > button:focus {
    outline: none;
}

.settings_tokenValueContainer__MqXlh {
    padding: 0 24px 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.settings_tokenValueContainer__MqXlh .ms-Button {
    margin-top: 15px;
}

.settings_tokenContent__1CCgj {
    width: 70%;
    padding-right: 8px;
}

.settings_addApiTokenContainer__zoqqh {
    width: 100%;
}

.settings_addElementButtonsContainer__K2cQZ {
    margin: 24px;
    display: flex;
    justify-content: flex-end;
}

.settings_addElementButtonsContainer__K2cQZ > * {
    margin-left: 8px;
}

.settings_apiTokenNotice__tGLkx {
    padding: 16px 24px;
    color: #C50F1F;
}

/* Funnels */
.settings_funnelsContainer__s5Xss {
    margin-top: 8px;
    max-width: 1195px;
}

.settings_funnelsActionContainer__zZzjP {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 24px 0;
}

.settings_funnelsActionContainer__zZzjP .ms-SearchBox {
    width: 218px;
}

.settings_funnelModalContainer__0e11G {
    max-width: 1140px;
    width: 80%;
    height: 666px;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0px 25.6px 57.6px 0px rgba(0, 0, 0, 0.22), 0px 4.8px 14.4px 0px rgba(0, 0, 0, 0.18);
    overflow-y: hidden;
}

.settings_funnelModalContainer__0e11G .ms-Modal-scrollableContent {
    width: 100%;
    flex-direction: column;
    display: flex;
    height: 100%;
}

.settings_funnelsModalHeader__dH6PI {
    display: flex;
    align-items: center;
    margin: 16px 24px 20px;
    gap: 12px;
}

.settings_funnelsModalHeader__dH6PI > span {
    color: #161514;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
}

.settings_funnelsModalHeader__dH6PI input {
    font-size: 20px;
    line-height: 28px;
}

.settings_funnelsModalHeader__dH6PI > i {
    height: 24px;
}

.settings_funnelsModalHeader__dH6PI > button {
    margin-left: auto;
}

.settings_funnelsModalHeader__dH6PI > button i {
    color: #323130;
}

.settings_funnelsModalBody__7VJOO {
    border-top: 1px solid #EDEBE9;
    display: flex;
    height: calc(100% - 68px);
}

.settings_funnelsPivotContainerWrapper__hQo-S {
    width: 50%;
}

.settings_funnelsPivotContainer__zXr7m {
    border-radius: 0px 0px 0px 7px;
    width: 100%;
    height: 100%;
    padding-top: 12px;
}

.settings_funnelsPivotContainer__zXr7m .ms-Pivot {
    display: flex;
    justify-content: center;
}

.settings_funnelsPivotContainer__zXr7m > div[role="tabpanel"] {
    height: calc(100% - 56px);
}

.settings_funnelsPivotContainer__zXr7m > div[role="tabpanel"] > div {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    gap: 12px;
    margin: 12px 0 0 16px;
}

.settings_funnelsPivotContainer__zXr7m .ms-SearchBox {
    width: 350px;
    align-self: center;
    min-height: 32px;
    border-bottom: 1px solid #616161;
}

.settings_funnelsPivotContainer__zXr7m .eventPageVisitsFilter .ms-SearchBox {
    width: 191px;
    border-radius: unset;
}

.settings_funnelsPivotContainer__zXr7m .eventFilterDropdown:has(> div.is-disabled),
.settings_funnelsPivotContainer__zXr7m .eventPageVisitsFilter .ms-SearchBox.is-disabled {
    border-bottom: 1px solid #E0E0E0;
}

.settings_funnelsPivotContainer__zXr7m .eventPageVisitsFilter .ms-SearchBox.is-disabled .ms-SearchBox-iconContainer,
.settings_funnelsPivotContainer__zXr7m .eventPageVisitsFilter .ms-SearchBox.is-disabled input::placeholder {
    color: #BEBBB8;
}

.settings_funnelsPivotContainer__zXr7m .eventPageVisitsFilter {
    padding-right: 16px;
}

.settings_funnelsPivotContainer__zXr7m .eventPageVisitsAddButton {
    width: 98px;
    background: linear-gradient(280.75deg, #0078D4 0%, #9692FF 94.81%);
    border: 1px solid transparent;
    color: white;
}

.settings_funnelsPivotContainer__zXr7m .eventPageVisitsAddButton.disabled {
    border: 1px solid #E0E0E0;
}

.settings_funnelsPivotContainer__zXr7m .eventPageVisitsAddButton:not(.disabled):hover {
    background: linear-gradient(281deg, #106EBE 0%, #7974FF 94.81%);
    color: white;
}

.settings_funnelsPivotContainer__zXr7m .eventPageVisitsLoading {
    width: 98px;
    flex: none;
}

.settings_funnelPivotSelectionContainer__xPLjZ {
    overflow-y: scroll;
}

.settings_funnelEventsHeader__LSVqm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 20px;
}

.settings_funnelEventsHeader__LSVqm button {
    padding: 5px 12px;
}

.settings_funnelEventNoDataContaier__Wcp5g {
    cursor: default;
    margin-left: auto;
    display: flex;
    font-size: 12px;
    color: #605E5C;
}

.settings_funnelEventNoDataContaier__Wcp5g i {
    margin-left: 8px;
    height: 16px;
}

.settings_funnelEventNoDataContaier__Wcp5g svg {
    width: 16px;
    height: 16px;
}

.settings_funnelPivotSeparator__t9flg {
    height: 1px;
    margin-right: 16px;
    border-bottom: 1px solid #EDEBE9;
}

.settings_funnelSelectedStepsContainer__k5wGk {
    display: flex;
    width: 50%;
    height: 100%;
    flex-direction: column;
    border: 1px solid #E1DFDD;
    background: #F3F2F1;
    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.05) inset, -4px 0px 4px 0px rgba(0, 0, 0, 0.05) inset;
}

.settings_funnelSelectedStepsWrapper__AkJS6 {
    overflow-y: scroll;
    padding: 16px 16px 0 16px;
}

.settings_funnelSelectedStepsWrapper__AkJS6 > h2 {
    margin-bottom: 24px;
    font-size: 18px;
    line-height: 24px;
}

.settings_funnelSelectedStepsWrapper__AkJS6 .settings_funnelCardDetailsConatiner__Fk4Ja {
    margin-top: 8px;
}

.settings_funnelModalFooter__pbT19 {
    background: #FFF;
    display: flex;
    height: 64px;
    padding: 16px;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}

.settings_funnelSelectedStepsWrapper__AkJS6 .settings_funnelsCard__xcMlS {
    gap: 8px;
}

.settings_funnelsCard__xcMlS.settings_noCounter__mkFSZ {
    margin-top: 0;
}

.settings_funnelStepPlaceholder__rpIOc,
.settings_funnelSelectedStepsWrapper__AkJS6 > .settings_funnelsCard__xcMlS:not(.settings_noCounter__mkFSZ) {
    position: relative;
    margin: 0 0 16px 32px;
    display: list-item;
    list-style-type: none;
    counter-increment: customlistcounter;
}

.settings_funnelStepPlaceholder__rpIOc::before,
.settings_funnelSelectedStepsWrapper__AkJS6 > .settings_funnelsCard__xcMlS:not(.settings_noCounter__mkFSZ)::before {
    content: counter(customlistcounter) " ";
    color: #605E5C;    
    font-size: 20px;
    line-height: 28px;
    position: absolute;
    left: -32px;
}

.settings_funnelStepPlaceholder__rpIOc {
    height: 78px;
    border-radius: 4px;
    border: 1px dashed #BEBBB8;
    flex: 1;
}

.settings_funnelStepPlaceholder__rpIOc.settings_highlightedStep__JEPz- {
    border: 1px dashed #0078D4;
}

.settings_funnelsCard__xcMlS {
    border-radius: 4px;
    border: 1px solid #E1DFDD;
    background: #FFF;
    margin: 0 16px 8px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.settings_funnelsCard__xcMlS.settings_isDrageEnabled__7mlc5 {
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

.settings_funnelsCardHeader__hmTla {
    background: linear-gradient(307deg, #FAE9FF -9.47%, #DEECF9 75.93%);
    display: flex;
    padding: 8px 16px;
    justify-content: space-between;
    align-items: center;
    min-height: 48px;
}

.settings_funnelsCardHeader__hmTla.settings_selectedCardHeader__hYK1w {
    padding: 16px;
}

.settings_funnelsCardHeader__hmTla.settings_selectedCardHeader__hYK1w {
    padding: 16px;
}

.settings_funnelsCardHeader__hmTla div:first-child {
    overflow: hidden;
}

.settings_funnelsCardHeader__hmTla div:first-child > div {
    min-width: 0;
}

.settings_funnelsCardHeader__hmTla strong {
    color: #161514;
    font-size: 16px;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings_funnelsCardHeader__hmTla i {
    color: #424242;
    height: 20px;
    line-height: 20px;
}

.settings_funnelsCardHeader__hmTla label.ms-ChoiceField-field:hover::before {
    border: unset;
    border-bottom: 1px solid #827DFF;
}

.settings_funnelsCardTitle__Pz-g5 {
}

.settings_funnelsCardTitle__Pz-g5 > svg {
    width: 24px;
    min-width: 24px;
    height: 24px;
    margin-right: 8px;
}

.settings_funnelsCardHeader__hmTla.settings_selectedCardHeader__hYK1w .settings_funnelsCardTitle__Pz-g5 > svg {
    margin-right: 12px;
}

.settings_funnelsCardTitle__Pz-g5 path {
    fill: #161514;
}

.settings_funnelsCardTitle__Pz-g5 .ms-TextField {
    width: 278px;
    margin-right: 12px;
}

.settings_funnelsCardTitle__Pz-g5 .ms-TextField-fieldGroup {
    height: 24px;
}

.settings_funnelsCardTitle__Pz-g5 .settings_stepNameContainer__Zq2Ug {
    display: flex;
    align-items: center;
    margin-right: 16px;
}

.settings_funnelsCardTitle__Pz-g5 .settings_editNameContainer__FYvcz {
    border-radius: 4px;
    position: relative;
    left: -4px;
    padding: 0 4px;
}

.settings_funnelsCardTitle__Pz-g5 .settings_editNameContainer__FYvcz:hover {
    border-radius: 4px;
    background: #f3f2f1;
    cursor: pointer;
    position: relative;
    left: -4px;
    padding: 0 4px;
}

.settings_funnelsCardTitle__Pz-g5 .settings_editNameContainer__FYvcz button {
    width: 16px;
    height: 16px;
    margin-left: 8px;
}

.settings_funnelsCardTitle__Pz-g5 .settings_editNameContainer__FYvcz i,
.settings_funnelsCardTitle__Pz-g5 .settings_editNameContainer__FYvcz svg {
    height: 16px;
}

.settings_funnelStepActionIcon__kCjj1 {
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.settings_funnelStepActionIcon__kCjj1:not(.settings_disabledFunnelAction__LQJ71):hover {
    cursor: pointer;
    background: #f3f2f1;
}

.settings_deleteModalContainer__1iZp3 {
    width: 560px;
}

.settings_deleteModalContainer__1iZp3 .ms-Modal-scrollableContent > p {
    margin: 0 24px;
}

.settings_deleteModalFooter__3HklA {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    margin: 32px 24px 24px;
}

.settings_funnelCardDetailsConatiner__Fk4Ja {
    margin: 0 16px;
    padding-bottom: 12px;
}

.settings_funnelCardDetailsConatiner__Fk4Ja .settings_funnelsCard__xcMlS {
    margin: 16px 0 0 0;
}

.settings_funnelCardDetailsConatiner__Fk4Ja .settings_funnelsCardHeader__hmTla {
    background: #EFF6FC;
}

.settings_funnelStepDetailsCard__3E3EG {
    display: flex;
    flex-direction: column;
    padding: 8px 24px;
    border-radius: 4px;
    border: 1px solid #E1DFDD;
    margin-top: 16px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings_funnelStepDetailsCard__3E3EG strong {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.settings_funnelsTable__dBtvu {
    width: 100%;
    margin: 24px 38px 0 0;
}

.settings_funnelsTable__dBtvu tr {
    border-bottom: 1px solid #EDEBE9;
}

.settings_funnelsTable__dBtvu tr:hover {
    cursor: pointer;
}

.settings_funnelsTable__dBtvu td {
    padding: 12px;
    vertical-align: top;
    line-height: 32px;
}

.settings_funnelsTable__dBtvu tr td:first-of-type button {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings_funnelsTable__dBtvu th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    line-height: 20px;
}

.settings_funnelsTable__dBtvu th:first-of-type:hover {
    cursor: pointer;
}

.settings_funnelsTable__dBtvu th button {
    width: 20px;
    height: 20px;
    margin-left: 4px;
}

.settings_funnelsTable__dBtvu th:first-of-type i {
    transform: scale(0.75);
    color: #252423;
}

.settings_funnelsTable__dBtvu .settings_definedByHeadr__WAnJE {
    display: flex;
    align-items: center;
}

.settings_funnelsTable__dBtvu .settings_definedByCol__KfU8b {
    white-space: nowrap;
}

.settings_funnelsTable__dBtvu .settings_modalRow__eyG2e {
    display: none;
}

.settings_tableStepNameContainer__g8aRw {
    display: inline-block;
}

.settings_tableStepName__Pi98h {
    display: flex;
    align-items: center;
}

.settings_tableStepName__Pi98h span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: noWrap;
}

.settings_tableStepName__Pi98h i {
    height: 24px;
}

.settings_tableStepNameContainer__g8aRw:not(:first-of-type) .settings_tableStepName__Pi98h > span {
    margin-left: 8px;
}

.settings_tableStepName__Pi98h > span {
    margin-right: 8px;
}

.settings_tableStepName__Pi98h button {
    margin-left: 2px;
    min-width: 32px;
    height: 32px;
    padding: 0;
    border: unset;
}

.settings_tableStepNameContainer__g8aRw:first-of-type i {
    visibility: hidden;
    width: 0;
    margin: 0;
}

.settings_funnelsRowActions__Jjmzc {
    display: flex;
    align-items: center;
    gap: 12px
}

.settings_funnelNamingContainer__KXRmh {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-x: hidden;
}

.settings_funnelModalFooter__pbT19 .ms-Link {
    padding: 0 12px;
}

.settings_funnelIntializationContainer__\+Rzdc {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.settings_funnelsFilterDropdown__ZEDg2 {
    width: 218px;
    margin-right: 20px;
}

@media only screen and (max-width: 700px) {
    .settings_funnelNamingContainer__KXRmh .eventNameContent {
        width: 80%;
    }
    .settings_funnelNamingContainer__KXRmh .eventNameTextField {
        width: 100%;
    }
}

.settings_funnelsEmptyMessage__CgaoT {
    margin-top: 24px;
}

@media only screen and (max-width: 680px) {
    .settings_overviewLabel__p8h-M,
    .settings_industryDropdown__pETWW label,
    .settings_overviewContainer__f1e0n .ms-Dropdown-label {
        font-weight: 600;
    }

    .settings_overviewTextField__Fr6Tn .ms-TextField-fieldGroup,
    .settings_email__Qi0mF .ms-TextField-fieldGroup,
    .settings_industryDropdown__pETWW .ms-Dropdown-title,
    .settings_role__AOtnn .ms-Dropdown-title {
        border-width: 0 0 1px 0;
        border-radius: 0;
        border-color: #616161;
    }

    .settings_industryDropdown__pETWW .ms-Dropdown:focus::after,
    .settings_role__AOtnn .ms-Dropdown:focus::after,
    .settings_overviewTextField__Fr6Tn .ms-TextField-fieldGroup::after,
    .settings_email__Qi0mF .ms-TextField-fieldGroup::after {
        border-color: #827DFF;
        border-width: 0 0 1px 0;
        border-radius: 0;
    }

    .settings_role__AOtnn {
        margin-bottom: 90px;
    }

    .settings_overviewTextField__Fr6Tn .ms-TextField-field {
        border: none;
    }

    .settings_actionsContainer__3eTYS {
        justify-content: flex-end;
    }

    .settings_setupContainer__pGgU1, 
    .settings_appsSetupContainer__kuEpk {
        margin-top: 0px;
    }

    .settings_attestationModalBody__C0kGE {
        margin: 16px;
    }

    .settings_settingsContent__HfAm8 {
        flex-grow: 1;
        margin: 0px;
    }

    .settings_settingsContent__HfAm8.settings_base__i0xYZ {
        padding: 24px 24px 32px;
    }

    .settings_navContent__YRdqO {
        height: fit-content;
        margin: 0px;
    }

    .settings_navContent__YRdqO ul li:first-child {
        margin-top: 0;
    }

    .settings_navContent__YRdqO ul li:not(:last-child) {
        border-bottom: 1px solid #EDEBE9;
    }   

    .settings_navContent__YRdqO .ms-Nav-groupContent {
        margin-bottom: 0px;
    }

    .settings_navContent__YRdqO .is-selected a,
    .settings_navContent__YRdqO .ms-Nav-compositeLink a:hover {
        background-color: white;
        font-weight: 400;
    }

    .settings_navContent__YRdqO a {
        height: 48px;
        padding: 24px;
        color: #020057;

    }

    .settings_navContent__YRdqO .is-selected a::after  {
        border-right: 0px;
        border-left: 0px;
    }

    .settings_settingsContent__HfAm8.settings_base__i0xYZ .settings_instructions__uGQAt {
        border-top: none;
    }

    .settings_team__WULYl {
        margin-top: 16px;
    }
}

.settings_GACard__1WGGr {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 12px;
}

.settings_GACard__1WGGr div {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.settings_integrationsContainer__xzcMJ .settings_thirdPlatformsContent__kmbht span {
    margin-left: 0;
}

.settings_integrationsContainer__xzcMJ .settings_hubspotFacts__LrXk2 {
    margin-top: 0;
}

.settings_integrationsPageHeader__CuH1i {
    margin-top: 12px;
}

.settings_integrationsPageHeader__CuH1i strong {
    color: #161514;
}

.settings_integrationsPageHeader__CuH1i div {
    color: #323130;
    margin-top: 8px;
}

.settings_integrationsPageBreadcrumb__rXFE7 {
    margin-top: 0;
    margin-bottom: 24px;
}

.settings_integrationsPageBreadcrumb__rXFE7 ol li:not(:first-child) {
    margin-left: 16px;
}

.settings_integrationsPageBreadcrumb__rXFE7 ol a {
    margin-right: 4px;
    padding-left: 0;
}

.settings_integrationsPageBreadcrumb__rXFE7 ol a:active,
.settings_integrationsPageBreadcrumb__rXFE7 ol a:hover {
    color: #605E5C;
    text-decoration: none;
    background: unset;
    font-weight: 600;
}

.settings_integrationsPageBreadcrumb__rXFE7 a::after {
    display: block;
    content: attr(content);
    font-weight: 600;
    height: 0;
    color: transparent;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}

@media screen and (prefers-contrast: more) {
    .settings_projectIdContainer__-YwyK svg path,
    .settings_endpointContainer__fBUdS svg path {
        fill: black;
    }
}
.sharedComponents_chevron__qdEKw {
    transform-origin: 50% 50%;
    transition: transform 0.1s linear 0s;
}

.sharedComponents_expandedChevron__OjXZ1 {
    transform: rotate(90deg);
}

.sharedComponents_mobileCollapsible__-wmBy .sharedComponents_collapsibleHeader__yqmEY i {
    transform: rotate(90deg);
}

.sharedComponents_mobileCollapsible__-wmBy .sharedComponents_collapsibleHeader__yqmEY i.sharedComponents_expandedChevron__OjXZ1 {
    transform: rotate(270deg);
}

.sharedComponents_collapsibleHeader__yqmEY {
    display: flex;
    cursor: pointer;
    user-select: none;
    align-items: center;
}

.sharedComponents_collapsibleTitle__hlLR5 {
    margin-left: 8px;
}

.sharedComponents_engagementMetricsCollapse__e3gaq .sharedComponents_collapsibleHeader__yqmEY {
    margin-bottom: 8px;
}

.sharedComponents_engagementMetricsCollapse__e3gaq .sharedComponents_collapsibleTitle__hlLR5 {
    font-size: 12px;
    line-height: 16px;
}

/* Replay header V2 */
.sharedComponents_playerHeader__Pd1sO {
    align-items: center;
    padding: 8px 16px;
    margin: 0 16px 12px 0px;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0px 4.8px 14.4px 0px rgba(131, 126, 255, 0.30);
}

.sharedComponents_playerHeader__Pd1sO i {
    line-height: 20px;
    height: 20px;
}

.sharedComponents_playerHeader__Pd1sO .ms-TooltipHost button:not(.is-disabled):hover path {
    fill: #005A9E;
}

.sharedComponents_replayHeaderMapButtons__yEPUB {
    margin-left: 12px;
    display: flex;
}

.sharedComponents_replayHeaderMapButtons__yEPUB button {
    border-radius: 0;
    border-right-width: 0px;
}

.sharedComponents_replayHeaderMapButtons__yEPUB button:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.sharedComponents_replayHeaderMapButtons__yEPUB button:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-right-width: 1px;
}

.sharedComponents_playerHeader__Pd1sO .ms-TooltipHost button {
    padding: 0 2px;
    margin-left: 12px;
}

.sharedComponents_errorWrapper__Tj8td {
    flex: 1;
    display: flex;
    justify-content: center;
    min-height: 100%;
}

.sharedComponents_csvDownloadOption__NXJ7x {
    line-height: 36px;
    display: flex;
    justify-content: left;
    flex-direction: row;
    cursor: pointer;
}

.sharedComponents_csvDownloadOption__NXJ7x:hover {
    background-color: #EAEAFF;
}

.sharedComponents_csvDownloadOptionText__cjwrT {
    padding:0px 12px;
    width: 100%;
}

.sharedComponents_adsInsightsDownload__wi\+XK .sharedComponents_csvDownloadOptionText__cjwrT {
    padding: 0;
    height: 32px;
}

.sharedComponents_adsInsightsDownload__wi\+XK.sharedComponents_csvDownloadOption__NXJ7x {
    border-radius: 4px;
}

.fullScreenMessage img {
    width: 100%;
}

.sharedComponents_coachMarkSubText__TCtkp {
    margin-top: 16px;
}

@media only screen and (max-width: 680px) {
    .sharedComponents_collapsibleToggleTitle__d6Fzs {
        font-weight: 600;
    }
}

.sharedComponents_thirdPartyPlatformsContainer__looMd .sharedComponents_thirdPartyInstallationsContent__Q7D-7 {
    padding: 32px 32px 8px;
}

.sharedComponents_thirdPartyInstallationsContent__Q7D-7 {
    border-radius: 8px;
    background: #FFF;
    width: 100%;
    padding: 24px 0;
}

.sharedComponents_thirdPartyTilesContainer__cATHi {
    position: relative;
    display: flex;
    gap: 24px;
    margin: 24px 0;
    background-color: #FFF;
    flex-wrap: wrap;
}

.sharedComponents_thirdPartyTile__LuR7k {
    display: flex;
    padding-right: 16px;
    align-items: center;
    gap: 16px;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0px 0.6px 1.8px 0px rgba(131, 126, 255, 0.10), 0px 3.2px 7.2px 0px rgba(131, 126, 255, 0.12);
    height: 64px;
    width: 256px;
}

.sharedComponents_thirdPartyTile__LuR7k:focus-visible {
    outline: 1px solid #000;
}

button.sharedComponents_thirdPartyTile__LuR7k {
    border: unset;
    padding: 0;
}

button.sharedComponents_thirdPartyTile__LuR7k span {
    justify-content: flex-start;
}

button.sharedComponents_thirdPartyTile__LuR7k:hover {
    background: #FFF;
}

a.sharedComponents_thirdPartyTile__LuR7k:focus-visible {
    outline: -webkit-focus-ring-color auto 1px;
}

button.sharedComponents_thirdPartyTile__LuR7k strong,
.sharedComponents_thirdPartyTile__LuR7k:not(button) span {
    margin-left: 76px;
    font-weight: 600;
    color: #161514;
}

.sharedComponents_thirdPartyTile__LuR7k .emoji.platformsIconsSprite.mesh {
    margin-left: 10px;
}

@media screen and (prefers-contrast: more) {
    .sharedComponents_playerHeader__Pd1sO path {
        fill: white;
    }
}

.sidebar_segmentsPanel__TIwr1 {
    padding: 0 16px 12px;
    position: absolute;
    overflow: auto;
    top: calc(100% + 1px);
    background-color: white;
    z-index: 14;
    max-height: calc(100vh - 138px);
    line-height: 20px;
    width: calc(100% - 34px);
    left: 17px;
    border-radius: 8px;
    padding: 0 16px;
}

.sidebar_allSegmentsList__ZIEq5 {
    overflow: auto;
    max-height: 313px;
}

.sidebar_segmentRow__mwXOA {
    display: flex;
    align-items: center;
    height: 44px;
    overflow: hidden;
    cursor: pointer;
}

.sidebar_segmentRow__mwXOA .sidebar_title__lCiUD {
    width: 200px;
    min-width: 200px;
    margin-right: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar_segmentRow__mwXOA:hover {
    background-color: #EAEAFF;
}

.sidebar_segmentRow__mwXOA.sidebar_highlight__6JVxU {
    background-color: #EAEAFF;
    color: #000;
}

.sidebar_loadingSegments__O56M3 {
    margin-bottom: 16px;
}

.sidebar_pinned__JHGcc {
    padding-right: 10px;
    box-shadow: 0px 3.200000047683716px 7.199999809265137px 0px rgba(131, 126, 255, 0.12), 0px 0.6000000238418579px 1.7999999523162842px 0px rgba(131, 126, 255, 0.10);
}

.sidebar_pinned__JHGcc.sidebar_noRightPadding__Xi2tt {
    padding-right: 0;
}

.sidebar_badges__Zn0y2 {
    display: flex;
    flex-wrap: wrap;
}

.sidebar_segmentsHeader__L-oXP {
    padding: 6px 12px 12px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid #ddd;
}

.sidebar_segmentsHeader__L-oXP > h2,
.sidebar_segmentsHeader__L-oXP > span {
    font-weight: 600;
    font-size: 20px;
    line-height: 28px
}

.sidebar_segmentsHeaderContainer__Busa- {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-top: 16px;
}

.sidebar_segmentsSearchBox__-zVzN {
    width: 432px;
    max-width: 432px;
}

.sidebar_iconsContainer__oBOxR.sidebar_gaRow__Kb-rT {
    display: flex;
    align-items: center;
}

.sidebar_iconsContainer__oBOxR.sidebar_gaRow__Kb-rT button + svg {
    margin-right: 12px;
}

.sidebar_iconsContainer__oBOxR:not(.sidebar_gaRow__Kb-rT) {
    margin-right: 25px;
}

.sidebar_segmentRow__mwXOA .sidebar_errorTitle__v3hza {
    color: #A4262C;
}

.sidebar_segmentRow__mwXOA.sidebar_emptyList__26NK\+ {
    height: 215px;
    justify-content: center;
}

.sidebar_segmentRow__mwXOA.sidebar_emptyList__26NK\+:hover {
    background-color: #FFF;
}

.sidebar_noSegmentsTitle__WRBBP {
    display: flex;
    align-items: center;
}

.sidebar_noSegmentsIllustration__j6rMY svg {
    height: 113px;
    width: 102px;
}

.sidebar_noSegmentsTitle__WRBBP .sidebar_content__BbdDw {
    margin-left: 16px;
    width: 460px;
}

.smartEvents_eventSettingsList__tnDgk {
    overflow: auto;
    height: 100%;
    width: 100%;
}

.smartEvents_eventSettingsList__tnDgk table {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: 100%;
}

.smartEvents_eventSettingsList__tnDgk thead {
    width: 100%;
}

.smartEvents_eventSettingsList__tnDgk tbody {
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 22px;
}

.smartEvents_eventSettingsList__tnDgk tr {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 9px;
    cursor: pointer;
}

.smartEvents_eventSettingsList__tnDgk tr:not(.smartEvents_eventSettingsListHeader__pOK9e):hover  {
    background-color: rgb(243, 242, 241);
}

.smartEvents_eventSettingsList__tnDgk th:first-child,
.smartEvents_eventSettingsList__tnDgk th:nth-child(2) {
    display: flex;
    flex-direction: row;
    padding: 13px 0px;
    align-items: center;
    color: #323130;
    font-weight: 600;
    width: 325px;
    overflow: hidden;
}

.smartEvents_eventSettingsList__tnDgk td:first-child,
.smartEvents_eventSettingsList__tnDgk td:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    width: 325px;
    height: 42px;
    overflow: hidden;
}

.smartEvents_eventSettingsListHeader__pOK9e th:first-child {
    display: flex;
    flex-direction: row;
    gap: 4px;
}

.smartEvents_findEventTextbox__GLE9R {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    width: 217px;
    height: 32px;
    border-radius: 2px;
    flex: none;
    flex-grow: 0;
}

.smartEvents_findEventTextbox__GLE9R div {
    color: #616161;
}

.smartEvents_findEventTextbox__GLE9R::after {
    border-color: #9692FF;
}

.smartEvents_eventIconContainer__rB4Al {
    display: flex;
    align-items: center;
}

.smartEvents_eventIconBackground__LqHVN {
    background-color: #EAEAFF;
    color: #9692FF;
    border-radius: 28px;
    height: 28px;
    width: 28px;
    justify-content: center;
    align-items: center;
    display: flex;
    margin-right: 12px;
}

.smartEvents_eventIconBackground__LqHVN svg {
    width: 16px;
}

.smartEvents_eventSettingsContainer__zyhnW {
    display: flex;
    flex-direction: column;
    width: 85%;
    overflow-y: hidden;
    height: 100%;
}

.smartEvents_eventsZeroState__sI\+oa {
    position: unset;
    display: flex;
    flex-direction: column;
    align-self: center;
    justify-content: center;
    text-align: center;
    margin-top: 16px;
}

.smartEvents_settingsContainer__CJyfT {
}

/*
    Chat copilot styles
*/
.chat.copilot {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background: radial-gradient(105.42% 105.42% at 50% 105.42%, #CEDCF3 0%, #D8E8FB 16.15%, #EEF5FF 53.79%, #FFF 100%); 
    border-radius: 8px 0 0 8px;
    box-shadow: 0px 4.8px 14.4px 0px rgba(131, 126, 255, 0.30);
}

.chat.copilot .root {
    width: 100%;
    height: 100%;
    display: flex;
    max-height: 100%;
    justify-content: start;
    flex-direction: column;
}

.chat.copilot .section {
    height: calc(100% - 82px);
    width: 100%;
    flex-direction: column;
    align-items: center;
    overflow: hidden scroll;
    padding: 0 16px;
    display: flex;
    -webkit-mask-image: linear-gradient(to top, transparent 4px, black 20px), linear-gradient(to left, black 11px, transparent 6px);
    mask-image: linear-gradient(to top, transparent 4px, black 20px), linear-gradient(to left, black 11px, transparent 6px);
}

.source {
    display: flex;
    gap: 8px;
    width: 304px;
    height: 48px;
    min-height: 48px;
    background-color: #fff;
    padding: 4px 8px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 0px 2px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    margin: 0 auto 24px;
}

.source button {
    border-radius: 6px;
    max-width: 142px;
    width: 142px;
    height: 100%;
    font-size: 14px;
    line-height: 22px;
    font-weight: 700;
    color: #111;
    border: none;
    padding: 0 5px;
}

.source button .ms-Button-flexContainer {
    flex-direction: column;
    padding: 4.5px 0;
}

.source button.selected {
    background: linear-gradient(129.58deg, #2870EA 20.88%, #2870EA 20.89%, #1B4AEF 77.37%);
    color: #FFF;
}

.source button.ga.selected {
    background: linear-gradient(144.14deg, #2870EA -4.14%, #FFC700 -4.13%, #F7B20D 31.47%, #EF9A1B 70.98%);
    color: #201F1E;
}

.source button .subtext {
    font-weight: 400;
    font-size: 11px;
    line-height: 13px;
    color: rgba(0, 0, 0, 0.7);
}

.source button.selected .subtext {
    color: rgba(255, 255, 255, 0.8);
}

.source button.ga.selected .subtext {
    color: rgba(0, 0, 0, 0.8);
}

.chat.copilot .intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: auto;
    flex-shrink: 0;
}

.chat.copilot .intro .title {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.chat.copilot .intro .title span {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    border-radius: 4px;
    padding: 6px 12px;
    background-color: #50E6FF;
    margin-bottom: 16px;
}

.chat.copilot .intro img {
    width: 64px;
    height: 64px;
    margin-bottom: 10px;
    object-fit: contain;
}

.chat.copilot .intro img.gaImg {
    width: 45vw;
    height: auto;
}

.chat.copilot .intro h2 {
    font-weight: 600;
    font-size: 42px;
    line-height: 52px;
    color: #201F1E;
    margin-top: 10px;
    margin-bottom: 8px;
    text-align: center;
}

.chat.copilot .intro h5 {
    margin-top: 8px;
    margin-bottom: 24px;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #201F1E;
}

.chat.copilot .intro .cards {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    flex-wrap: wrap;
    margin-bottom: 25px;
}

.chat.copilot .intro .introCard {
    max-width: 300px;
    min-width: 300px;
    margin: 12px 24px;
}

.chat.copilot .intro .introCard h4 {
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    color: #000;
    margin-bottom: 16px;
    text-align: center;
    min-width: 300px;
}

.chat.copilot .intro .introCard .subtext {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    padding: 14px 24px 16px;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #111;
    cursor: pointer;
}

.chat.copilot .intro .introCard .subtext:hover {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 0px 2px rgba(0, 0, 0, 0.12);
}

.chat.copilot .intro .note {
    gap: 2px;
    color: #201F1E;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    max-width: 880px;
    text-align: center;
    margin-top: 25px;
    margin-bottom: 20px;
}

.chat.copilot .intro .note a {
    margin: 0 4px;
    text-decoration: underline;
    color: #174AE4;
}

.chat.copilot .intro .introLinks {
    display: flex;
    padding-bottom: 5px;
}

.chat.copilot .state {
    max-width: 880px;
    display: flex;
    margin: 0 auto 10px;
    padding: 0 20px;
    min-height: 50px;
    transition: height 300ms;
    justify-content: center;
}

.chat.copilot .state.error {
    color: #201F1E;
    font-size: 14px;
    display: flex;
    gap: 5px;
    min-height: 25px;
}

.chat.copilot .stickyButton.container {
    width: 100%;
    position: fixed;
    bottom: 114px;
    display: flex;
    max-width: 900px;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 20px;
    margin: 0 -10px;
    transition: bottom 200ms ease;
}

.chat.copilot .stop,
.chat.copilot .goToLatest {
    border: 2px solid #174AE4;
    border-radius: 20px;
    color: #174AE4;
    height: 40px;
    padding: 0px 10px;
    background: #EFF3FF;
    font-weight: 600;
    font-size: 14px;
    line-height: 22px;
    background-color:#fff;
}


.chat.copilot button.goToLatest {
    width: 202px;
}

.chat.copilot .messages {
    display: flex;
    flex-direction: column;
    margin-top: 12px;
    margin-bottom: 8px;
    position: relative;
    flex: 1;
    gap: 12px;
    width: 100%;
}

.chat.copilot .messages:not(:has(.suggestions)) {
    margin-bottom: 50px;
}

.chat.copilot .message {
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.14);
    max-width: 768px;
    margin: 20px 0;
    display: flex;
    font-weight: 400;
    color: #111111;
    flex-direction: column;
    width: fit-content;
    width: -moz-fit-content;
    max-width: 95%;
}

.chat.copilot .message .container {
    position: relative;
}

.chat.copilot .markdown {
    padding: 4px;
    overflow: auto;
}

.chat.copilot .message.bot:has(.base) .markdown {
    padding-bottom: 12px;
}

.markdown table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 12px;
    border-style: hidden;
    box-shadow: 0 0 0 1px #ddd;
    margin: 8px 0;
}

.markdown table thead tr th {
    font-size: 12px;
    line-height: 20px;
    color: #020057;
    text-align: left;
}

.markdown table thead tr th, .markdown table tbody tr td {
    padding: 6px 14px;
}

.markdown table thead {
    background-color: #EAEAFF;
}

.markdown table thead tr:hover {
    background-color: #EAEAFF;
}

.markdown table tbody tr:hover {
    background-color: unset;
}

.markdown table thead tr th:first-child {
    border-radius: 8px 0 0 0;
}

.markdown table thead tr th:last-child {
    border-radius: 0 8px 0 0;
}

.markdown table tbody tr:last-child td:first-child {
    border-radius: 0 0 0 8px;
}

.markdown table tbody tr:last-child td:last-child {
    border-radius: 0 0 8px 0;
}

.markdown table tbody td {
    font-size: 12px;
    color: #020057;
    font-weight: 400;
    line-height: 16px;
}

.markdown ul,
.markdown ol {
    margin-left: 10px;
}

.chat.copilot .markdown ul li,
.chat.copilot .markdown ol li {
    margin: 8px;
}

.markdown ul li,
.markdown ol li {
    list-style-position: outside;
    margin-left: 15px;
    margin-top: 6px;
}

.chat.copilot .markdown ul li,
.chat.copilot .markdown ol li {
    margin-left: 16px;
    margin-top: 8px;
}

.markdown ul li::marker {
    font-size: 14px;
}

.markdown ol li::marker {
    font-weight: 600;
}

.markdown a {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 400px;
    color: #174AE4;
    display: inline-block;
    vertical-align: text-bottom;
}

.chat.copilot .markdown a {
    max-width: 100%;
}

.chat.copilot .message.user {
    margin-left: auto;
    color: #111;
    background: #EBEFFF;
    box-shadow: none;
}

.turn-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: -8px;
}

.convo-turns {
    font-size: 12px;
    text-align: right;
    padding-right: 7px;
    font-weight: bold;
}

.chat.copilot .system {
    gap: 0 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.chat.copilot .system .query,
.chat.copilot .system .report {
    font-weight: 600;
    margin-left: -4px;
}

.chat.copilot .system .checkmark {
    font-size: 28px;
    color: #13A10E;
}

.chat.copilot .tooltip {
    border: 0.5px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13);
    border-radius: 8px;
}

.chat.copilot .message.bot .border {
    border-bottom: 1px solid rgb(194, 194, 194);
}

.chat.copilot .markdown.debug {
    padding: 16px;
    font-size: 16px;
    max-width: 100%;
    width: fit-content;
    background: #faf9f8;
    width: -moz-fit-content;
    border-radius:  12px;
    margin: 12px;
    box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.12), 0px 1.6px 3.6px rgba(0, 0, 0, 0.16);
}

.chat.copilot .markdown ul,
.chat.copilot .markdown.debug ul {
    list-style-position: inside;
}

.chat.copilot .markdown.debug code {
    white-space: normal;
}

.chat.copilot .send {
    width: 52px;
    height: 52px;
    margin-left: 12px;
    border-radius: 8px;
}

.chat.copilot .message.bot .base {
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    border-top: 1px rgba(59, 58, 58, 0.12) solid;
    padding: 10px 12px 10px 21px;
    gap: 20px;
}

.chat.copilot .message.bot .base .ms-TooltipHost:has(+ .filterBadgeNavWrapper) {
    margin-right: -8px;
}

.chat.copilot .message.bot .base .filterBadgeNavWrapper {
    margin-right: auto;
    align-self: center;
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 13px;
    line-height: 20px;
    color: #111111;
    gap: 8px;
}

.chat.copilot .message.bot .base .scrollingBadges div {
    cursor: default;
}

.chat.copilot .message.bot .base .filterBadgeNavWrapper .scrollingBadges {
    gap: 8px;
}

.chat.copilot .message.bot .base .filterBadgeNavWrapper .filterBadge {
    cursor: auto;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    text-align: center;
    color: #323130;
    background-color: #F3F2F1;
    margin-left: 0;
}

.chat.copilot .message.bot .base .filterBadgeNavWrapper .filterBadge .filterBadgeVal,
.chat.copilot .message.bot .base .filterBadgeNavWrapper .filterBadge .date {
    font-weight: 600;
}


.chat.copilot .message.bot .base .filterBadgeNavWrapper .filterBadge .badgeClear {
    margin: -3px -8px -3px 0px;
}

.chat.copilot .message .base a i {
    font-size: 14px;
    color: #0078D4;
}

.chat.copilot .message .base a:hover,
.chat.copilot .message .base a:focus,
.chat.copilot .message .base a:active,
.chat.copilot .message .base a:active:hover {
    color: rgb(0, 120, 212);
}

/*
    Copilot suggestions styles
*/

.copilot .suggestions {
    gap: 10px;
    display: flex;
    flex-wrap: wrap;
    max-width: 880px;
    justify-content: flex-end;
    margin-top: auto;
    width: 100%;
}

.copilot .suggestion {
    cursor: pointer;
    width: fit-content;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 28px;
    border: 1px solid #B0BEFF;
    border-radius: 8px;
    overflow: hidden;
    box-sizing: border-box;
    padding: 4px 8px;
    color: #424242;
    font-size: 12px;
    line-height: 16px;
    max-width: 380px;
    width: 100%;
}

.copilot .suggestion:hover {
    background-color: #CCD6FF;
    color: #3B3FB2;
    border: 1px solid #8295FF;
}


.copilot .suggestions .ms-TooltipHost {
    border-radius: 4px;
    overflow: hidden;
}

.chatHubProgressIndicator {
    padding: 0 5%;
}

.chatHubProgressIndicator .ms-ProgressIndicator-itemName {
    color: rgb(154 154 154);
    font-size: 12px;
}

.chat.copilot .input {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
    max-width: 880px;
    width: 100%;
    margin: auto;
    min-height: 90px;
    max-height: 90px;
    flex-wrap: wrap;
    position: relative;
}

.chat.copilot .input button.newTopic {
    width: 139px;
    height: 100%;
    max-height: 48px;
    background: linear-gradient(243.43deg, #344DF3 8.73%, #426DF2 41.85%, #2C7CD5 67.37%, #19ACE3 113.51%);
    mix-blend-mode: normal;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 0px 2px rgba(0, 0, 0, 0.12);
    border-radius: 42px;
    color: #FFF;
    font-weight: 600;
    font-size: 15px;
    line-height: 22px;
    border: none;
}

.chat.copilot .input button svg {
   width: 24px;
   height: 24px;
   margin-right: 8px;
}

.chat.copilot .input .text.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 24px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 0px 2px rgba(0, 0, 0, 0.12);
    background-color: #fff;
    padding: 8px 18px 0;
    transition: min-height 300ms, border-radius 200ms, width 200ms;
    top: 0;
    max-height: 260px;
    position: absolute;
    justify-content: space-between;
    width: calc(100% - 150px);
    right: 0;
    height: 48px;
    min-height: 48px;
}

.chat.copilot .input .text.container:not(.disabled.error):hover,
.chat.copilot .input .text.container:not(.disabled.error):focus,
.chat.copilot .input .text.container:not(.disabled.error):active {
    height: unset;
    min-height: 90px;
    border-radius: 12px;
}

.chat.copilot .input .text.container:not(.disabled.error):focus-within,
.chat.copilot .input .text.container.pinned:not(.disabled.error),
.chat.copilot .input .text.container.hasData:not(.disabled.error) {
    bottom: 0;
    top: auto;
    height: unset;
    min-height: 90px;
    border-radius: 12px;
}

.chat.copilot .input .text.container .text.row .ms-TextField textarea {
    max-height: 200px;
    overflow: hidden auto;
    padding-top: 5px;
    font-size: 16px;
    line-height: 22px;
    color: #111111;
    transition: height 500ms;
    background: transparent;
}

.chat.copilot .input .text.container .text.row .ms-TextField textarea::placeholder {
    font-size: 16px;
    line-height: 22px;
    color: #767676;
    overflow: hidden;
}

.chat.copilot .input .text.container.disabled.error .text.row .ms-TextField textarea,
.chat.copilot .input .text.container.disabled.error .text.row .ms-TextField textarea::placeholder {
    color: #afa5a5;
}


.chat.copilot .input .text.container .text.row .textField .ms-TextField-fieldGroup {
    border-radius: 7px;
    min-height: unset;
    height: 29px;
    max-height: 250px;
    background-color: transparent;
}

.chat.copilot .input .text.container:not(.disabled.error):hover .text.row .textField .ms-TextField-fieldGroup,
.chat.copilot .input .text.container:not(.disabled.error):active .text.row .textField .ms-TextField-fieldGroup,
.chat.copilot .input .text.container:not(.disabled.error):focus .text.row .textField .ms-TextField-fieldGroup,
.chat.copilot .input .text.container:not(.disabled.error):focus-within .text.row .textField .ms-TextField-fieldGroup,
.chat.copilot .input .text.container.pinned:not(.disabled.error) .text.row .textField .ms-TextField-fieldGroup,
.chat.copilot .input .text.container.hasData:not(.disabled.error) .text.row .textField .ms-TextField-fieldGroup {
    height: unset;
    min-height: 55px;
}

.chat.copilot .input .text.container.pinned .text.row .ms-TextField textarea {
    height: 200px !important;
}

.chat.copilot .input .text.container .text.row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    border-radius: 7px;
}
 
.chat.copilot .input .text.container .text.row svg {
    width: 20px;
    height: 20px;
    margin-top: 7px;
    fill: #767676;
}

.chat.copilot .input .text.container.disabled .text.row svg {
    fill: #afa5a5;
}

.chat.copilot .input .text.container .text.row path {
    fill: inherit;
}

.chat.copilot .input .text.container .text.row .textField {
    background-color: transparent;
    flex: 1;
}

.chat.copilot .input .text.container.disabled .text.row .textField input {
    background-color: transparent;
}

.chat.copilot .input .text.container.pinned .text.row .textField .ms-TextField-fieldGroup,
.chat.copilot .input .text.container.hasData .text.row .textField .ms-TextField-fieldGroup {
    height: unset;
}

.chat.copilot .input .text.container:not(.disabled.error):hover .pin,
.chat.copilot .input .text.container:not(.disabled.error):active .pin, 
.chat.copilot .input .text.container:not(.disabled.error):focus .pin, 
.chat.copilot .input .text.container:not(.disabled.error):focus-within .pin,
.chat.copilot .input .text.container.pinned:not(.disabled.error) .pin, 
.chat.copilot .input .text.container.hasData:not(.disabled.error) .pin {
   opacity: 1;
}

.chat.copilot .input .text.container:not(.disabled):hover .sendIcon,
.chat.copilot .input .text.container:not(.disabled):active .sendIcon,
.chat.copilot .input .text.container:not(.disabled):focus .sendIcon,
.chat.copilot .input .text.container:not(.disabled):focus-within .sendIcon,
.chat.copilot .input .text.container.pinned:not(.disabled) .sendIcon,
.chat.copilot .input .text.container.hasData:not(.disabled) .sendIcon {
   opacity: 1;
}

.chat.copilot .input .text.container .info .pin {
    margin: 0;
    margin-left: auto;
}

.chat.copilot .input .text.container .info {
    opacity: 0;
    height: 0;
    transition: height 300ms, opacity 100ms;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 24px;
    color: #767676;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    padding-bottom: 10px;
}

.chat.copilot .input .text.container:not(.disabled.error):hover .info,
.chat.copilot .input .text.container:not(.disabled.error):active .info,
.chat.copilot .input .text.container:not(.disabled.error):focus .info,
.chat.copilot .input .text.container:not(.disabled.error):focus-within .info,
.chat.copilot .input .text.container.pinned:not(.disabled.error) .info,
.chat.copilot .input .text.container.hasData:not(.disabled.error) .info {
    opacity: 1;
    height: 27px;
}

.chat.copilot .input .text.container .info button {
    background-color: transparent;
    color: #767676;
}

.chat.copilot .input .text.container.pinned .info button,
.chat.copilot .input .text.container.hasData .info button {
    color: #0078D4;
}

.chat.copilot .input .text.container .sendIcon {
    font-size: 20px;
    position: static;
    cursor: pointer;
    color: #0078D4;
    pointer-events: auto;
    margin-top: 4px;
    opacity: 0;
    transition: opacity 400ms;
    height: fit-content;
}

.chat.copilot .input .text.container .sendIcon:focus {
    outline: #000 auto;
    outline-offset: 3px;
    outline-width: thin;
    outline-style: solid;
}

.intro .link {
    color: #174AE4;
    text-decoration: none;
    display: inline;
    margin: 0 0.25em;
}

.intro .link:hover {
    cursor: pointer;
}

.intro .link:focus {
    outline: #000 auto;
    outline-offset: 3px;
}

/*
    Copilot session insights styles
*/

.heatmap.copilot .title,
.session.copilot .title {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    display: flex;
    align-items: center;
    color: #111111;
    margin-bottom: 8px;
    gap: 8px;
}

.session.copilot {
    padding-left: 5px;
}

.session.copilot .content .time,
.insightsContent .time {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 400px;
    color: #174AE4;
    display: inline-block;
    vertical-align: text-bottom;
    vertical-align: bottom;
    cursor: pointer;
    padding: 0 2px;
}

.session.copilot .content .time.playing,
.insightsContent .time.playing {
    border-radius: 4px;
    background-color: #EAEAFF;
}

.session.copilot .content .time:hover,
.insightsContent .time:hover,
.session.copilot .content .time.playing:hover,
.insightsContent .time.playing:hover {
    color: #0078D4;
    text-underline-offset: 3px;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: #0078D4;
}

.heatmap.copilot .markdown,
.session.copilot .content {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    word-break: break-word;
    white-space: normal;
    padding: 12px 16px 12px 28px;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 0px 2px rgba(0, 0, 0, 0.12);
    border-radius: 12px;
}

.heatmap.copilot .markdown.error {
    padding: 16px;
}

.heatmap.copilot .markdown li::marker,
.session.copilot .content li::marker {
    font-size: 12px;
}

.heatmap.copilot .markdown a,
.session.copilot .content a {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 400px;
    color: #174AE4;
    display: inline-block;
    vertical-align: text-bottom;
}

.heatmap.copilot .link,
.session.copilot .link {
    gap: 4px;
    display: flex;
    margin-top: 8px;
    flex-wrap: wrap;
    flex-direction: row;
}

.heatmap.copilot .link:hover,
.session.copilot .link:hover {
    background: rgb(0 0 0 / 10%);
}

.copilot.actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.copilot.actions.session {
    gap: 8px;
    margin-left: auto;
    margin-right: 6px;
}

.copilot.actions.sessionCard {
    gap: 14px;
    margin-top: 8px;
    justify-content: start;
}

.chat .copilot.actions {
    gap: 4px;
}

.copilot.actions .action {
    margin: 1px;
    height: 32px;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-items: center;
}

.chat.copilot .actions .action {
    margin: 0;
    padding: 5px;
    height: 24px;
}

.heatmap.copilot .actions .action,
.session.copilot .actions .action {
    height: 30px;
}

.copilot.actions .action.small {
    height: 28px;
}

.copilot.actions .action:hover {
    background-color: rgba(0, 0, 0, 0.06);
    cursor: pointer;
    border-radius: 8px;
}

.chat .copilot.actions .action:hover {
    background-color: transparent;
}

.copilot.loading {
    height: 38px;
    /* 
    * This to accomodate the temp GIF dimensions
    * Will revert when new loading is implemented
    */
    margin: -2px;
    width: auto;
}

.session.copilot .subtitle {
    font-size: 14px;
    color: #605E5C;
    margin: 16px 2px;
}

.heatmap.copilot .disclosure,
.session.copilot .disclosure {
    font-size: 12px;
    color: #605E5C;
    margin-bottom: 8px;
}

.dot {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    display: inline-block;
}

.greenDot {
    background-color: #2C8247;
}

.orangeDot {
    background-color: orange;
}

.redDot {
    background-color: red;
}

.insightsContent {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    word-break: break-word;
    white-space: normal;
    padding:  8px 0 8px 22px;
}

.insightsContent li::marker {
    font-size: 12px;
}

.insightsActionsContainer, 
.insightsActionsContainerPanel,
.contentInsightsActions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.insightsActionsContainerPanel {
    margin: 8px 4px 0px 8px;
}

.contentInsightsActions {
    margin: 8px 4px 0px -8px;
}

.copilotPreferenceToggle {
    margin-top: 8px;
}

@media only screen and (max-width: 880px) {
    .chat.copilot .input {
        padding-left: 20px;
    }

    .chat.copilot .input .text.container {
        width: calc(100% - 190px);
        right: 20px;
    }
}


@media only screen and (max-width: 600px) {
    .chat.copilot .section {
        padding: 0 10px;
    }

    .chat.copilot .input {
        padding-left: 10px;
    }

    .copilot .suggestions {
        max-width: 100%;
    }

    .chat.copilot .input button.newTopic {
        width: unset;
    }

    .chat.copilot .input .newTopicText {
        display: none;
    }

    .chat.copilot .input .text.container {
        width: calc(100% - 110px);
        right: 10px;
    }

    .chat.copilot button.goToLatest {
        width: unset;
    }
    .chat.copilot .stickyButton.container {
        bottom: 69px;
    }

    .chat.copilot .input .text.container:not(.disabled.error):hover,
    .chat.copilot .input .text.container:not(.disabled.error):focus,
    .chat.copilot .input .text.container:not(.disabled.error):active
    .chat.copilot .input .text.container:not(.disabled.error):focus-within{
        width: calc(100% - 20px);
    }


    .chat.copilot .stickyButton.container span.ms-Button-textContainer {
       display: none;
    }

    .chat.copilot .input .text.container .info {
        display: none;
    }

    .chat.copilot .input {
        min-height: 45px;
    }

    .chat.copilot .stickyButton.container {
        bottom: 65px;
    }

    .chat.copilot :has(.input .text.container:not(.disabled.error):hover) .stickyButton.container,
    .chat.copilot :has(.input .text.container:not(.disabled.error):focus) .stickyButton.container,
    .chat.copilot :has(.input .text.container:not(.disabled.error):active) .stickyButton.container 
    .chat.copilot :has(.input .text.container:not(.disabled.error):focus-within) .stickyButton.container
    .chat.copilot :has(.input .text.container:not(.disabled.error):focus-visible) .stickyButton.container {
        bottom: 105px;
    }

    .chat.copilot .section {
        height: calc(100% - 45px);
    }

    .chat.copilot .intro .introCard {
        max-width: 100%;
        min-width: unset;
    }

    .chat.copilot .intro .introCard h4 {
        min-width: unset;
    }
}

@media only screen and (max-width: 481px) {
    .chat.copilot .stickyButton.container {
        display: none;
    }
    .chat.copilot .input button.newTopic {
        display: none;
    }
    .chat.copilot .input .text.container {
        width: calc(100% - 20px);
        right: 10px;
    }
    .chat.copilot .input .text.container .text.row .ms-TextField textarea {
        height: 100%;
    }
}

@media screen and (prefers-contrast: more) {
    .copilot.actions .action svg path {
        fill: #FFF;
    }
}

/**
    Heatmap copilot insights
**/

.heatmap.copilot {
    height: 100%;
    overflow: auto;
    padding: 0px 16px 16px;
}

.heatmap.copilot .markdown {
    padding: 4px 12px 12px 6px;
}

.heatmap.copilot .markdown h3 {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 14px;
    margin: 8px 6px 14px;
}

.heatmap.copilot .markdown a {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 400px;
    color: #0078D4;
    display: inline-block;
    vertical-align: text-bottom;
}

.heatmap.copilot .markdown a.custom {
    line-height: 20px;
    vertical-align: initial;
    text-overflow: initial;
    white-space: initial;
    max-width: initial;
    display: initial;
    overflow: auto;
}

.heatmap.copilot .markdown a.custom:focus-visible {
    content: "";
    border: 1px solid transparent;
    outline: rgb(96, 94, 92) solid 1px;
}

.heatmap.copilot .markdown i {
    top: 4px;
    width: 20px;
    height: 20px;
    margin: 0 2px;
    cursor: pointer;
    position: relative;
}

.heatmap.copilot .markdown a.highlight {
    padding: 2px 4px;
    color: #000000;
    border-radius: 4px;
    background-color: #EAEAFF;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-style: dotted;
    text-decoration-color: #000000;
}

.heatmap.copilot .feedbackButton,
.session.copilot .feedbackButton {
    text-decoration: none;
    line-height: 20px;
    color: #0078D4;
    cursor: pointer;
    display: inline;
}

@media screen and (-ms-high-contrast: active), (forced-colors: active) {
    .heatmap.copilot .feedbackButton {
        color: highlight;
    }
}

.heatmap.copilot .feedbackButton:focus,
.heatmap.copilot .feedbackButton:hover,
.session.copilot .feedbackButton:focus,
.session.copilot .feedbackButton:hover,
.heatmap.copilot .markdown a:hover,
.heatmap.copilot .markdown a:focus {
    color: #0078D4;
    text-underline-offset: 3px;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: #0078D4;
}

.heatmap.copilot .markdown a.custom.highlight:hover {
    color: #000000;
    border-radius: 4px;
    background-color: #EAEAFF;
    text-decoration-color: #000000;
}

.devices {
    gap: 4px;
    display: flex;
    border-radius: 4px;
    flex-direction: column;
    padding: 11px 12px 7px;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 4px 8px 0px rgba(0, 0, 0, 0.14);
}

.devices h1 {
    color: #242424;
    font-size: 12px;
    line-height: 16px;
}

.icons {
    display: flex;
    gap: 2px;
}

.icons .icon {
    width: 40px;
    height: 32px;
    padding: 0px;
    border-radius: 4px;
}

.icon span {
    margin: 6px;
    width: 28px;
    height: 20px;
    display: block;
}

.devices .icons .icon i {
    top: 0px;
}

.icons .icon.selected {
    background-color: #E0E0E0;
}

.icons .icon:not([disabled]):hover svg path {
    fill: #005A9E;
}

.icons .icon svg path {
    fill: #424242;
}

.icons .icon.selected svg path {
    fill: #004578;
}

.changeIntegrationModal_confirmModalContainer__St1f5 .changeIntegrationModal_confirmModalHeader__-I\+4R {
    display: flex;
    font-weight: 600;
    font-size: 20px;
    margin: 16px 0;
    justify-content: space-between;
    line-height: 28px;
}

.changeIntegrationModal_confirmModalContainer__St1f5 .changeIntegrationModal_closeIcon__752CD {
    color: #666;
}

.changeIntegrationModal_confirmModalContainer__St1f5 {
    min-width: 500px;
    max-width: 560px;
    padding: 15px 20px;
    top: 330px;
    position: absolute;
}

.changeIntegrationModal_confirmModalContainer__St1f5 .changeIntegrationModal_embeddedContent__-GQo9 {
    min-height: unset;
}

.changeIntegrationModal_confirmModalContainer__St1f5 .changeIntegrationModal_buttonsContainer__tCPsX {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
}

.changeIntegrationModal_confirmModalContainer__St1f5 .changeIntegrationModal_buttonsContainer__tCPsX .changeIntegrationModal_confirmModalIntegrationButton__AbpdD {
    margin-right: 15px;
}

.changeIntegrationModal_darkOverlay__9cyOX {
    background-color: rgb(0 0 0 / 70%);
}

.changeIntegrationModal_confirmModalContainer__St1f5 .changeIntegrationModal_projectLoadingScreen__rmgxC {
    width: 100%;
    padding: 20px 5px;
    box-shadow: none;
}

@media only screen and (max-width: 700px) {    
    .changeIntegrationModal_confirmModalContainer__St1f5 {
        width: unset;
        min-width: unset;
        margin: 0 10px;
    }
}

@media only screen and (max-width: 900px) {
    .changeIntegrationModal_confirmModalContainer__St1f5 .changeIntegrationModal_projectLoadingScreen__rmgxC {
        width: 100%;
    }
}

.embedLandingPage_embeddedPage__2nYQo {
    background-color: #EFF6FC;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 160px;
    min-height: 100vh;
    box-sizing: border-box;
}

.embedProjectSettings_settingsBackground__i2\+fp {
    background-color: #EFF6FC;
    height: 100%;
    margin-right: 20px;
    margin-bottom: 20px;
}

.embedProjectSettings_settingsContainer__AQhu3 {
    padding: 16px 48px 30px;
    height: 100%;
}

.embedProjectSettings_settingsContainer__AQhu3 .ms-MessageBar--warning {
    border-radius: 5px;
    justify-content: center;
}

.embedProjectSettings_settingsContainer__AQhu3 .embedProjectSettings_ms-MessageBar-icon__Z\+IO0 i {
    color: #d9ab0b;
}

.embedProjectSettings_settingsContainer__AQhu3 h3 {
    color: #323130;
    font-weight: 600;
    font-size: 26px;
    line-height: 36px;
    margin: 8px 0;
}

.embedProjectSettings_settingsContainer__AQhu3 .embedProjectSettings_allIntegrationNote__iXhIK {
    margin-top: 16px;
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 19px;
    color: #484644;
}

.embedProjectSettings_settingsContainer__AQhu3 .embedProjectSettings_allIntegrationNote__iXhIK a {
    margin-left: 4px;
    color: #0078D4;
}

.embedProjectSettings_settingsContainer__AQhu3 .embedProjectSettings_editProjectText__QCrUW a:active {
    color: #0078D4;
}

.embedProjectSettings_settingsContainer__AQhu3 .embedProjectSettings_editProjectText__QCrUW a:focus {
    outline: auto;
}

.embedProjectSettings_settingsContainer__AQhu3 .embedProjectSettings_collapsibleTitle__U5ZEs .embedProjectSettings_collapsibleContentHeader__joJtw{
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.embedProjectSettings_settingsContainer__AQhu3 .embedProjectSettings_collapsibleTitle__U5ZEs > * {
    font-size: 18px;
    line-height: 24px;
    cursor: pointer;
    color: #0078D4;
}

.embedProjectSettings_settingsContainer__AQhu3 .embedProjectSettings_collapsibleTitle__U5ZEs .embedProjectSettings_ms-Icon__WuXhJ {
    margin-right: 10px;
}

.embedProjectSettings_settingsContainer__AQhu3 .embedProjectSettings_embedSettingsDropDown__PuQE5 {
    max-width: 370px;
}

.embedProjectSettings_settingsContainer__AQhu3 .embedProjectSettings_loadingContainer__Bfm2b {
    padding-top: 0;
}

.embedProjectSettings_settingsContainer__AQhu3 .embedProjectSettings_editProjectText__QCrUW {
    font-size: 14px;
    line-height: 19px;
    max-width: 550px;
    margin-top: 16px;
}

.embedProjectSettings_settingsContainer__AQhu3 .embedProjectSettings_editProjectText__QCrUW a {
    display: block;
    width: fit-content;
    padding: 5px 0;
    color: #0078D4;
}

.embedProjectSettings_embedSetupCard__XGSiU {
    padding: 28px;
    border: 1px solid #C4C4C4;
    border-radius: 8px;
    box-sizing: border-box;
    min-height: 350px;
    width: 370px;
}

.embedProjectSettings_embedSetupCard__XGSiU .embedProjectSettings_titleContainer__SBjhP {
    display: flex;
    align-items: center;
    margin: 4px 0 16px;
    gap: 4px;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
}

.embedProjectSettings_embedSetupCard__XGSiU img {
    height: 80px;
    width: 80px;
    min-width: 80px;
    margin: 6px 0;
    object-fit: contain;
}

.embedProjectSettings_embedEmojiDescription__jIlIy {
    background-color: #2F9596;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-radius: 127.273px;
    padding: 2px 10px;
    color: white;
    max-width: fit-content;
    margin: 14px 0;
    gap: 8px;
}

@media only screen and (max-width: 500px) {
    .embedProjectSettings_settingsContainer__AQhu3 {
        padding: 16px 24px 30px;
    }

    .embedProjectSettings_embedSetupCard__XGSiU {
        width: unset;
        text-align: center;
    }

    .embedProjectSettings_embedEmojiDescription__jIlIy {
        margin: 14px auto;
    }

    .embedProjectSettings_embedSetupCard__XGSiU .embedProjectSettings_titleContainer__SBjhP {
        flex-direction: column;
        align-items: center;
    }
}


.embedProjectSettings_projectActionButton__kdT9t {
    display: block;
    margin-top: 10px;
}

.embedProjectSettings_settingsContainer__AQhu3 .embedProjectSettings_allIntegrationNote__iXhIK {
    margin-top: 16px;
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 19px;
    color: #484644;
}

.embedProjectSettings_embedSetupCard__XGSiU .embedProjectSettings_connectedToContainer__VX0SV {
    margin-bottom: 55px;
}

.embedProjectSettings_editProjectContainer__wzZD\+ {
    padding: 20px;
}

.embedProjectSettings_settingsContainer__AQhu3 .embedProjectSettings_embedSettingsDropDown__PuQE5 {
    max-width: 370px;
}

.embedProjectSettings_settingsContainer__AQhu3 .embedProjectSettings_editProjectText__QCrUW {
    font-size: 14px;
    line-height: 19px;
    max-width: 550px;
    margin-top: 16px;
}

.embedUpsellCard_upsellCard__ymGYm {
    display: flex;
    max-height: unset;
    min-height: 120px;
    box-shadow: none;
    flex-direction: column;
    align-items: center;
    margin-right: 0;
    margin-bottom: 24px;
    overflow: hidden;
    width: 400px;
}

.embedUpsellCard_upsellCardTexth1__gvHrV {
    margin: 18px 0 12px;
}

.embedUpsellCard_upsellCardImg__zcqHZ {
    background: transparent;
    max-width: 100%;
    max-height: unset;
}

.embedUpsellCard_upsellLearnMore__I8yMY {
    border: 1px solid #827DFF;
    border-radius: 4px;
    padding: 5px 12px;
    color: #000;
    margin: 24px;
    text-decoration: none;
    font-weight: 600;
}

.embedUpsellCard_upsellLearnMore__I8yMY:focus,
.embedUpsellCard_upsellLearnMore__I8yMY:hover {
    border: 1px solid #827DFF;
    border-radius: 4px;
    padding: 5px 12px;
    color: #000;
    margin: 24px;
    text-decoration: none;
    font-weight: 600;
}

.firstRunConfirmation_continueButton__y1qxD {
    width: 100%;
    align-items: flex-end;
    display: flex;
    flex-direction: column;

    margin-top: 40px;
    margin-bottom: 10px;
}

.firstRunConfirmation_email__MolYE {
    margin: 24px 0;
}

.firstRunConfirmation_email__MolYE span {
    margin-bottom: 4px;
}

.projDelInacc_embeddedContentText__kHAH9 {
    display: flex;
    flex-direction: column;
}

.projDelInacc_projectDeletedAction__KuFOf {
    width: 95px;
    align-self: flex-end;
    margin-right: 20px;
    margin-top: 30px;
}

.projDelInacc_projectInaccessibleAction__XnkSs {
    width: 266px;
    align-self: flex-end;
    margin-right: 20px;
    margin-top: 30px;
}
.projectLoadingScreen_projectLoadingScreenContainer__7ccU0 {
    display: flex;
    width: 100%;
    padding: 20px 5px;
    box-shadow: none;
}

.projectLoadingScreen_projectLoadingScreenText__kHBOU {
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.projectLoadingScreen_projectLoadingScreenContainer__7ccU0 img {
    width: 40%;
    height: fit-content;
    max-width: 380px;
}

.projectLoadingScreen_projectLoadingScreenText__kHBOU h1 {
    font-weight: 600;
    font-size: 20px;
    line-height: 32px;
}

.projectLoadingScreen_projectLoadingScreenText__kHBOU span {
    margin-top: 20px;
}

@media only screen and (max-width: 900px) {
    .projectLoadingScreen_projectLoadingScreenContainer__7ccU0 {
        width: 100%;
        max-height: none;
    }
}

@media only screen and (max-width: 700px) {
    .projectLoadingScreen_projectLoadingScreenContainer__7ccU0 img {
        display: none;
    }

    .projectLoadingScreen_projectLoadingScreenContainer__7ccU0 {
        justify-content: flex-start;
    }

    .projectLoadingScreen_projectLoadingScreenText__kHBOU {
        text-align: center;
    }
}

@media only screen and (max-width: 500px) {
    .projectLoadingScreen_projectLoadingScreenText__kHBOU h1 {
        font-size: 18px;
        line-height: 24px;
    }
}
.projectv3_embedProjectTitleRebrand__0Dl7F {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #3B3A39;
    padding: 12px 16px;
}

.projectv3_tabsrebrand__UcVQJ {
    position: absolute;
}

.projectv3_tabsrebrand__UcVQJ button {
    padding: 0;
}

.projectv3_tabsrebrand__UcVQJ button:last-child {
    margin: 0;
}

.projectv3_tabsrebrand__UcVQJ .ms-Pivot-linkContent {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

.projectv3_tabsrebrand__UcVQJ .ms-Pivot-icon {
    line-height: 14px;
    margin: 0;
}

.projectv3_tabsrebrand__UcVQJ .ms-Pivot-text {
    line-height: 20px;
    margin: 0;
}

.projectv3_tabsrebrand__UcVQJ button {
    text-transform: capitalize;
}

.projectv3_tabsrebrand__UcVQJ button:hover {
    background-color: inherit;
    font-weight: 600;
}

.projectv3_embedClarityHeaderRebrand__qD54I {
    width: 100%;
    display: flex;
    background: #fff;
    color: #3B3A39;
    align-items: center;
    justify-content: center;
    padding: 14px 16px;
    box-sizing: border-box;
    height: 60px;
    top: 0;
    position: sticky;
    z-index: 1000;
}

.projectv3_embedClarityHeaderRebrand__qD54I a:not(.projectv3_signOutRebrand__2kOi\+),
.projectv3_embedClarityHeaderRebrand__qD54I a:not(.projectv3_signOutRebrand__2kOi\+):hover,
.projectv3_embedClarityHeaderRebrand__qD54I a:not(.projectv3_signOutRebrand__2kOi\+):focus,
.projectv3_embedClarityHeaderRebrand__qD54I a:not(.projectv3_signOutRebrand__2kOi\+):active,
.projectv3_embedClarityHeaderRebrand__qD54I a:not(.projectv3_signOutRebrand__2kOi\+):active:hover {
    color: #3B3A39;
    text-decoration: none;
}

.projectv3_signOutRebrand__2kOi\+,
.projectv3_signOutRebrand__2kOi\+:hover,
.projectv3_signOutRebrand__2kOi\+:focus,
.projectv3_signOutRebrand__2kOi\+:active,
.projectv3_signOutRebrand__2kOi\+:active:hover {
    height: 21px;
    margin-left: auto;
}

.projectv3_embedClarityHeaderRebrand__qD54I .logos {
    margin-bottom: 0;
}

.promo_welcome__D7iA4 {
    color: #000;
    font-weight: 600;
    font-size: 48px;
    line-height: 56px;
}

.promo_subtitle__dnfoY {
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
    color: #000;
}

.promo_firsth3__FQiMA {
    margin-top: 16px;
}

.promo_bannerImg__jgaDo {
    max-width: 50%;
}

.promo_signInButton__5Vamx, .promo_signInButton__5Vamx:hover {
    background: #0078D4 !important;
    box-shadow: 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.13), 0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.10);
    border-radius: 47px !important;
    color: #fff;
    min-width: 180px;
    font-size: 20px;
    line-height: 28px;
    min-height: 48px;
    margin-top: 36px;
}

.promo_promoContent__OX6U6 {
    margin: 41px 0;
}

.promo_promoLanding__TZLvf {
    background: linear-gradient(280deg, #A0D6FF 0%, #C2E3FF 36.46%, #DFF0FF 50%, #F5FBFF 77.08%);
    width: 100%;
    padding: 50px 96px;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    display: flex;
    min-height: 280px;
    position: relative;
    box-sizing: border-box;
}

.promo_promoSignInOptionsContainer__LMTTr {
    padding-top: 32px;
}

.promo_promoSignInOptionsContainer__LMTTr .signInButton {
    margin-left: 0px;
    margin-right: 0px;
    padding: 5px 20px;
    width: 200px;
    height: 30px;
    box-sizing: border-box;
}

@media only screen and (max-width: 900px) {
    .promo_bannerImg__jgaDo {
        max-width: 330px;
    }

    .promo_promoBody__7bhV\+{
        padding: 35px 67px;
    }
}

@media only screen and (max-width: 700px) {
    .promo_bannerImg__jgaDo {
        display: none;
    }

    .promo_promoContent__OX6U6 {
        text-align: center;
    }

    .promo_promoLanding__TZLvf{
        padding: 30px;
        justify-content: center;
    }
}

.promoPage_embedLanding__-t\+Dz {
    width: 100%;
    background-color: #fff;
}

.promoPage_upsellCardsContainer__QFFdt {
    max-width: 1348px;
    margin: auto;
    text-align: center;
    padding: 96px 0;
    background-color: #fff;
}

.promoPage_upsellCardsTitle__Lxj0A {
    background: linear-gradient(90deg, #8F58AB -8.93%, #3D60E0 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px; 
}

.promoPage_upsellCards__Vobbe {
    display: flex;
    margin-top: 40px;
    flex-flow: wrap;
    justify-content: center;
}

@media only screen and (max-width: 900px) {
    .promoPage_upsellCardsContainer__QFFdt {
        padding: 96px 67px;
    }
}

.webflowDone_publishActionButton__lfbbB {
    width: fit-content;
    padding: 6px 20px;
    color: #fff;
    border-radius: 2px;
    align-self: end;
}

.webflowDone_actionButtons__PAvis {
    display: flex;
    gap: 8px;
    margin: 0;
    justify-content: flex-end;
}

.webflowDone_webflowdoneflpcontainer__fMPCl{
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.webflowDone_webflowdoneflpelementscontainer__gecc\+ {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.webflowDone_webflowdoneflpelementscontainer__gecc\+ h1 {
    align-self: flex-start;
}

.webflowDone_webflowdoneflpelementscontainer__gecc\+ .webflowDone_publishActionButton__lfbbB {
    align-self: unset;
    margin-top: 10px;
}

.ms-Button {
    border-radius: 4px;
    padding: 0 12px;
}

.ms-Button--primary {
    background: linear-gradient(280.75deg, #0078D4 0%, #9692FF 94.81%);
    border: 1px solid transparent;
}

.ms-Button--default {
    border: 1px solid #0078D4;
    color: #004578;
}

.ms-Button--default i {
    color: #004578;
}

.ms-Pivot-link.is-selected::before {
    background-color: #9692FF;
}

.ms-Button--default:hover,
.ms-Button--default.is-checked,
.ms-Button--hasMenu.is-checked {
    background-color: #EFF6FC;
}

.ms-Button--primary.is-disabled,
.ms-Button--default.is-disabled {
    background: #EDEBE9;
    color: #BEBBB8;
    border: 1px solid #E0E0E0;
}

.ms-Button--default.is-disabled path,
.ms-Button--commandBar.is-disabled path {
    fill: #BEBBB8;
}

.ms-Button--primary:hover {
    background: linear-gradient(281deg, #106EBE 0%, #7974FF 94.81%);
    color: #FFF;
}

.ms-Button--hasMenu.is-disabled {
    border: none;
}
.ms-Button--icon {
    padding: 0;
}

button.ms-Button.is-disabled,
button.ms-Button.is-disabled i,
button.ms-Button.is-disabled span {
    background: transparent;
    color: #BEBBB8;
}

button.ms-Button.is-disabled i path {
    fill: #BEBBB8;
}

.ms-Modal-scrollableContent scrollableContent {
    border-radius: 8px;
}

.ms-ContextualMenu-link:hover {
    background-color: #EAEAFF;
}

.ms-SearchBox {
    border-radius: 4px;
    border: 1px solid #D1D1D1;
}

/*Checkbox override*/

.ms-Checkbox-label {
    margin-top: 5px;
    margin-bottom: 7px;
}

.ms-Checkbox-checkbox {
    width: 16px;
    height: 16px;
    border-color: #616161;
}

.ms-Checkbox span {
    line-height: 20px;
    color: #616161;
}

.ms-Checkbox-text,
.ms-ComboBox-optionText {
    margin-left: 12px;
}

.ms-Checkbox.is-checked.is-enabled.ms-ComboBox-option,
.ms-Checkbox.is-enabled.ms-ComboBox-option:hover {
    background-color: #EAEAFF;
}

.ms-Checkbox.is-checked.is-enabled.ms-ComboBox-option .ms-Checkbox-checkbox {
    background-color: black;
}

.ms-Checkbox.is-checked.is-enabled .ms-Checkbox-checkbox {
    background-color: #827DFF;
    border: none;
}

.ms-Checkbox.is-checked.is-enabled span {
    color: black;
}

/* disable checkmark on hover for checkboxes for mobile screens*/
@media screen and (max-width: 670px) {
    .ms-Checkbox:not(.is-checked):hover .ms-Checkbox-checkmark {
        opacity: 0;
    }
}

/*Radio Button*/
label.ms-ChoiceField-field.is-checked::after,
label.ms-ChoiceField-field.is-checked::before {
    border-color: #827DFF;
}

label.ms-ChoiceField-field:hover::before,
label.ms-ChoiceField-field:hover::after {
    border: 1px solid #827DFF;
}

label.ms-ChoiceField-field:hover::after,
.ms-Toggle.is-checked.is-enabled button {
    background-color: #827DFF;
}

.ms-BasePicker-text,
.ms-Dropdown-title,
.ms-TextField-field,
.ms-TextField-fieldGroup {
    border-radius: 4px;
}

.ms-BasePicker-text,
.ms-Dropdown-title,
.ms-Dropdown:active .ms-Dropdown-title
.ms-TextField-fieldGroup:hover,
.ms-TextField-fieldGroup {
    border: 1px solid #D1D1D1;
    border-bottom-color: #616161;   
}

.ms-BasePicker-text::after,
.ms-Dropdown:focus::after,
.ms-TextField-fieldGroup::after {
    border-color: #827DFF;
    border-radius: 4px;
}

.ms-TextField.is-disabled .ms-TextField-fieldGroup {
    border-bottom-color: #D1D1D1;   
}

/* Dropdown */
.ms-Dropdown.is-disabled span, 
.ms-TextField.is-disabled input, 
.ms-TextField.is-disabled div {
    border: none;
}

.ms-Dropdown-items .ms-Button[aria-selected="true"],
.ms-Dropdown-items .ms-Button:hover {
    background-color: #EAEAFF;
}

@media screen and (-ms-high-contrast: active), (forced-colors: active) {
    .ms-Dropdown-items .ms-Button[aria-selected="true"],
    .ms-Dropdown-items .ms-Button:hover {
        color: #323130;
    }
}

/* BasePicker */
.ms-Suggestions-item .ms-Suggestions-itemButton.is-suggested,
.ms-Suggestions-item:hover {
    background: #EAEAFF;
}

/* FilterPanel */
.ms-Nav-compositeLink.is-selected button,
.ms-Nav-compositeLink:hover .ms-Button {
    background-color: #EAEAFF;
}

.ms-Nav-compositeLink.is-selected button::after {
    border: none;
}

.ms-Nav-compositeLink:hover .ms-Button {
    color: #424242;
}

.ms-Nav-group div.isSelected button {
    background-color: #EAEAFF
}

/*
    Setting !important here because the style was set in JS in fluentUI
    All other methods (root style, theme provider) are all being overwritten
*/
.ms-ComboBox-optionsContainer > .ms-ComboBox-option:hover,
.ms-ComboBox-optionsContainer > .ms-ComboBox-option:focus {
    background-color: #EAEAFF !important;
}

.ms-ComboBox-optionsContainer > .ms-Button--command {
    background-color: white !important; 
}

/*Toogle overrides*/
.ms-Toggle {
    margin-bottom: 0;
}

.ms-Toggle.is-checked .ms-Toggle-background:hover,
.ms-Toggle.is-checked .ms-Toggle-background {
    background: #9692FF;
}

.ms-Callout-container > .ms-Callout.ms-ContextualMenu-Callout {
    border: unset;
}

.ms-ContextualMenu-Callout {
    border-radius: 4px;
    background: #FFF;
    border: unset;
}

.ms-ContextualMenu-Callout {
    border-radius: 4px;
}

.ms-ContextualMenu-Callout > .ms-Callout-main {
    border-radius: 4px;
    background: #FFF;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.14);
}

.ms-SearchBox-iconContainer,
.ms-SearchBox:hover .ms-SearchBox-iconContainer {
    color: #424242;
}

.ms-ComboBox-CaretDown-button:hover {
    background-color: #EAEAFF
}

.ms-Callout-container > .ms-Callout {
    border-radius: 4px;
}

/*fluent UI use !important to set this style so I need to use !important to override*/
.ms-CalendarDay-daySelected,
.ms-CalendarDay-hoverStyle {
    background-color: #EAEAFF !important;
}

.ms-MessageBar-text {
    margin: 4px 12px 4px 8px;
}

.ms-MessageBar-icon {
    margin: 4px 0 4px 12px;
}

.ms-TeachingBubble-content {
    background: linear-gradient(281deg, #0078D4 0%, #9692FF 94.81%);
}
/* This should be white instead of purple */
.ms-TeachingBubble-primaryButton {
    color: #0078D4;
    background: #FFF !important;
}
.ms-TeachingBubble-primaryButton:hover {
    background-color: rgb(243, 242, 241) !important;
    color: #0078D4;
}

.ms-TeachingBubble .ms-Callout-beak {
    background: #5C88EF;
}

@media screen and (-ms-high-contrast: active), (forced-colors: active) {
    .ms-Pivot-link.is-selected::before {
        background-color: highlight;
    }

    button.ms-Button.is-disabled,
    button.ms-Button.is-disabled i,
    button.ms-Button.is-disabled span {
        background: transparent;
        color: #504c4c;
        opacity: 80%;
    }

    .ms-Checkbox-checkbox {
        border-color: white;
    }
    
    .ms-Checkbox span{
        color: #FFFFFF
    }
}

.adsDashboard_adsDashboardContainer__fWaEN {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.adsDashboard_tableContainer__461Fw,
.adsDashboard_adsDashboard__7qwAv {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
    position: relative;
}

.adsDashboard_adsDashboard__7qwAv.adsDashboard_adsWithInsights__KM1Mb .adsDashboard_tableContainer__461Fw {
    width: 100%;
}

.adsDashboard_adsDashboard__7qwAv.adsDashboard_adsWithInsights__KM1Mb.adsDashboard_grid__W7ll5 {
    display: grid;
    gap: 12px;
}

.adsDashboard_adsDashboard__7qwAv.adsDashboard_hidden__wdYkt {
    display: none;
}

.adsDashboard_adsListHeaderContainer__rUntX,
.adsDashboard_adsTableContainer__QYJy7 {
    display: flex;
    flex-direction: column;
    margin: 56px 32px;
    padding: 32px 40px;
    border-radius: 0 8px 0 0;
    background: #FFF;
    gap: 24px;
}

.adsDashboard_adsTableContainer__QYJy7 > div:not(.adsDashboard_adsTableShimmer__Py7vl) {
    padding-right: 8px;
    padding-left: 8px;
}

.adsDashboard_adsTableContainer__QYJy7 {
    padding-bottom: 0;
}

.adsDashboard_adsTableContainer__QYJy7.adsDashboard_insightsEnabled__rjebG {
    margin: 24px 0 0;
    padding: 26px 24px 24px;
}

.adsDashboard_adsTableContainer__QYJy7.adsDashboard_withTimezoneBanner__qCa8n {
    margin-top: 12px;
}

.adsDashboard_adsListHeaderContainer__rUntX {
    margin: 32px 16px 0 16px;
    padding: 24px 16px;
}

.adsDashboard_adsTableContainer__QYJy7 .adsDashboard_adsTableShimmer__Py7vl {
    overflow: hidden;
}

.adsDashboard_adsTableContainer__QYJy7.adsDashboard_insightsEnabled__rjebG .adsDashboard_adsTableShimmer__Py7vl.adsDashboard_hasXScroll__kArXl {
    margin-right: -26px;
}

.adsDashboard_adsTableContainer__QYJy7.adsDashboard_insightsEnabled__rjebG .adsDashboard_adsTableShimmer__Py7vl.adsDashboard_hasYScroll__GPV62 {
    margin-bottom: -24px;
}

.adsDashboard_adsTableContainer__QYJy7 .adsDashboard_errorStateCard__U\+Xks {
    padding-bottom: 62px;
}

.adsDashboard_adsTableShimmer__Py7vl > div {
    height: 100%;
    overflow: hidden;
}

.adsDashboard_adsDashboardHeader__R9lO3 h1 {
    margin-bottom: 8px;
    color: #161514;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
}

.adsDashboard_adsDashboardHeader__R9lO3 h2 {
    color: #323130;
}

.adsDashboard_adsDashboardTable__-HeDN {
    display: grid;
    grid-template-columns: auto 96px;
    align-items: center;
    overflow-y: scroll;
    height: 100%;
    background: #FFF;
    padding: 0 8px 32px 8px;
}

.adsDashboard_adsDashboardTableBorder__BF3JQ {
    column-span: all;
    height: 1px;
    background-color: #EDEBE9;
    padding-right: 0;
    grid-column-start: 1;
}

.adsDashboard_scrollingRowsContainer__N\+2TL > strong,
.adsDashboard_scrollingRowsContainer__N\+2TL > span,
.adsDashboard_adsDashboardTable__-HeDN > strong:not(.adsDashboard_adsDashboardTableBorder__BF3JQ),
.adsDashboard_adsDashboardTable__-HeDN > div:not(.adsDashboard_adsDashboardTableBorder__BF3JQ):not(.adsDashboard_scrollingRowsContainer__N\+2TL) {
    padding: 12px;
}

.adsDashboard_scrollingRowsContainer__N\+2TL > strong,
.adsDashboard_scrollingRowsContainer__N\+2TL > span,
.adsDashboard_adsDashboardTable__-HeDN > strong:not(.adsDashboard_adsDashboardTableBorder__BF3JQ) {
    text-align: right;
    justify-content: end;
}

.adsDashboard_adsDashboardTable__-HeDN .ms-TooltipHost {
    display: flex;
    align-items: center;
    width: fit-content;
    justify-self: end;
}

.adsDashboard_adsDashboardTable__-HeDN .adsDashboard_tableHeader__7Vt7z,
.adsDashboard_adsDashboardTable__-HeDN .adsDashboard_tableHeaderBorder__flbg0 {
    position: sticky;
    z-index: 1;
}

.adsDashboard_adsDashboardTable__-HeDN .adsDashboard_tableHeaderBorder__flbg0 {
    top: 40px;
}

.adsDashboard_adsDashboardTable__-HeDN .adsDashboard_tableHeader__7Vt7z {
    top: 0;
    width: 100%;
    background: #FFF;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
}

.adsDashboard_adsDashboardTable__-HeDN .adsDashboard_tableHeader__7Vt7z.adsDashboard_campaignsGridNameHeader__MJ9e3 {
    padding-left: 24px;
}

.adsDashboard_adsDashboardTable__-HeDN button {
    width: 20px;
    height: 20px;
    padding: 6px;
    box-sizing: content-box;
}

.adsDashboard_adsDashboardTable__-HeDN strong.adsDashboard_leftAlignColumn__QuJGG,
.adsDashboard_adsDashboardTable__-HeDN span.adsDashboard_leftAlignColumn__QuJGG,
.adsDashboard_adsDashboardTable__-HeDN div.adsDashboard_leftAlignColumn__QuJGG:not(.adsDashboard_scrollingRowsContainer__N\+2TL) {
    text-align: left;
    justify-self: left;
    justify-content: flex-start;
}

.adsDashboard_adsDashboardTable__-HeDN strong,
.adsDashboard_adsDashboardTable__-HeDN div {
    font-size: 12px;
    line-height: 16px;
    color: #252423;
}

.adsDashboard_adsDashboardRowActions__CaWJG {
    display: flex;
    gap: 8px;
    align-items: center;
}

.adsDashboard_adsDashboardRowActions__CaWJG.adsDashboard_withInsights__L7OCH {
    gap: 4px;
}

.adsDashboard_dateHeader__WycGS .adsDashboard_actions__Y2cG9 .adsDashboard_filterAction__ZsBfI svg,
.adsDashboard_adsDashboardRowActions__CaWJG.adsDashboard_withInsights__L7OCH button svg {
    width: 20px;
    height: 18px;
}

.adsDashboard_adsDashboardActions__HIaY0 {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.adsDashboard_adsDashboardActions__HIaY0 > div:first-of-type {
    flex: 1 0 auto;
    justify-content: flex-end;
}

.adsDashboard_adsDashboardActions__HIaY0 > div.adsDashboard_updatedHeader__3iwX1:first-of-type {
    justify-content: flex-start;
}

.adsDashboard_adsDashboardActions__HIaY0 .adsDashboard_campaignsFilter__\+UNf4,
.adsDashboard_adsDashboardActions__HIaY0 .adsDashboard_statusDropdown__Tuc20 {
    flex: 1 0 auto;
    border-radius: 4px;
    position: relative;
}

.adsDashboard_adsDashboardActions__HIaY0 .adsDashboard_statusDropdown__Tuc20 {
    max-width: 188px;
}

.adsDashboard_adsDashboardActions__HIaY0 .adsDashboard_campaignsFilter__\+UNf4 {
    max-width: 640px;
}

.adsDashboard_adsDashboardActions__HIaY0 .adsDashboard_sortButton__lhaG-,
.adsDashboard_newAdsDashboardActions__gYH-x .adsDashboard_campaignsFilter__\+UNf4 {
    margin-right: auto;
}

.adsDashboard_newAdsDashboardActions__gYH-x .adsDashboard_sortButton__lhaG- {
    margin-right: 20px;
}

.adsDashboard_insightsContainer__8dYJt {
    margin-top: 24px;
    min-width: 360px;
    max-width: 360px;
    background-color: #FFF;
    border-radius: 8px 0 0 0;
    order: 2;
    box-shadow: 0px 0.6px 1.8px 0px #837EFF1A;
}

.adsDashboard_insightsContainer__8dYJt,
.adsDashboard_collapsedInsights__XA3tI {
    height: calc(100vh - 84px);
}

.adsDashboard_insightsContainer__8dYJt.adsDashboard_withTimezoneBanner__qCa8n,
.adsDashboard_collapsedInsights__XA3tI.adsDashboard_withTimezoneBanner__qCa8n {
    margin-top: 12px;
}

.adsDashboard_insightsContainer__8dYJt.adsDashboard_withTimezoneBanner__qCa8n,
.adsDashboard_collapsedInsights__XA3tI.adsDashboard_withTimezoneBanner__qCa8n {
    height: calc(100vh - 123px);
}

.adsDashboard_insightsContainer__8dYJt .adsDashboard_loading__JGS2k,
.adsDashboard_insightsPanelContainer__HzB6\+ .adsDashboard_loading__JGS2k {
    padding-top: 16px;
}

.adsDashboard_insightsContainer__8dYJt h2,
.adsDashboard_insightsPanelContainer__HzB6\+ h2 {
    font-weight: 600;
    color: #242424;
    line-height: 20px;
    padding: 0 16px;
}

.adsDashboard_insightsContainer__8dYJt .adsDashboard_insightsHeader__k1XCJ,
.adsDashboard_insightsPanelContainer__HzB6\+ .adsDashboard_insightsHeader__k1XCJ {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 8px 16px 16px;
}

.adsDashboard_insightsContainer__8dYJt .adsDashboard_insightsHeader__k1XCJ .adsDashboard_closeButton__cR1nu {
    margin-left: -11px;
}

.adsDashboard_insightsContainer__8dYJt .adsDashboard_campaignName__8OjSA,
.adsDashboard_insightsPanelContainer__HzB6\+ .adsDashboard_campaignName__8OjSA {
    background: #F3F3FF;
    height: 32px;
    padding: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 4px;
    margin: 8px 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.adsDashboard_insightsContainer__8dYJt .adsDashboard_campaignName__8OjSA span,
.adsDashboard_insightsPanelContainer__HzB6\+ .adsDashboard_campaignName__8OjSA span {
    font-size: 12px;
    line-height: 16px;
    color: #161514;
}

.adsDashboard_insightsPanelContainer__HzB6\+ .ms-Panel-content {
    padding: 0;
}

.adsDashboard_insightsCardGroups__WZ1PA {
    display: flex;
    flex-direction: column;
    height: calc(100% - 155px);
    overflow-y: auto;
}

.adsDashboard_insightsCardGroups__WZ1PA h2 {
    color: #323130;
    line-height: 24px;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: -3px;
}

.adsDashboard_insightsCardGroups__WZ1PA .adsDashboard_dateHeader__WycGS {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 16px;
    gap: 5px;
}

.adsDashboard_insightsCardGroups__WZ1PA .adsDashboard_dateHeader__WycGS h2 {
    padding: 0;
}

.adsDashboard_insightsCardGroups__WZ1PA .adsDashboard_dateHeader__WycGS button {
    border: none;
}

.adsDashboard_insightsCardGroups__WZ1PA .adsDashboard_dateHeader__WycGS .adsDashboard_actions__Y2cG9 {
    display: flex;
    flex-direction: row;
    align-items: end;
    gap: 4px;
}

.adsDashboard_noNewInsights__0sc-t,
.adsDashboard_insightsError__1m6dj,
.adsDashboard_noNewCookingInsights__FmwNH,
.adsDashboard_insightsCookingError__uq8kQ {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.adsDashboard_noNewInsights__0sc-t,
.adsDashboard_insightsError__1m6dj {
    padding: 16px;
}

.adsDashboard_noNewCookingInsights__FmwNH,
.adsDashboard_insightsCookingError__uq8kQ {
    border: 1px solid #EAEAFF;
    border-radius: 8px;
    margin: 0 16px;
    padding: 16px 8px;
}

.adsDashboard_insightsCardsContainer__QcEYh .adsDashboard_insightsCard__oB1yS {
    background-color: #FFF;
    border: 1px solid #EAEAFF;
    padding: 12px 14px 4px 14px;
    margin: 0 16px 16px;
    border-radius: 8px;
}

.adsDashboard_insightsCardsContainer__QcEYh .adsDashboard_insightsCard__oB1yS:hover {
    cursor: default;
}

.adsDashboard_insightsCard__oB1yS .adsDashboard_insightsCardCategory__qJGi1 {
    background: #EAEAFF;
    color: #020057;
    padding: 3px 8px;
    font-size: 12px;
    line-height: 16px;
    border-radius: 4px;
    margin-bottom: 8px;
    width: fit-content;
}

.adsDashboard_insightsCard__oB1yS .adsDashboard_insightsCardTitle__a7rOa {
    margin-bottom: 2px;
    font-weight: 600;
    line-height: 20px;
    color:#323130;
}

.adsDashboard_insightsCard__oB1yS .adsDashboard_insightsCardContent__7GvHc,
.adsDashboard_noNewInsights__0sc-t p,
.adsDashboard_insightsError__1m6dj p,
.adsDashboard_noNewCookingInsights__FmwNH p {
    font-size: 12px;
    line-height: 16px;
    color: #605E5C;
}

.adsDashboard_insightsCard__oB1yS .adsDashboard_infoButton__8witz i {
    height: 20px;
}

.adsDashboard_insightsError__1m6dj .adsDashboard_errorActions__MOXFW,
.adsDashboard_insightsCookingError__uq8kQ .adsDashboard_errorActions__MOXFW {
    display: flex;
    gap: 8px;
    flex-direction: row;
    align-items: center;
    margin-top: 16px; 
}

.adsDashboard_insightsCooking__77tZo {
    margin: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.adsDashboard_insightsCooking__77tZo p {
    color: #242424;
    font-weight: 600;
    font-size: 16px;
    line-height: 23px;
     
}

.adsDashboard_insightsHeader__k1XCJ .adsDashboard_insightsFilterButton__WmaQL {
    border: none;
    color: #424242
}

.adsDashboard_insightsHeader__k1XCJ .adsDashboard_insightsFilterIcon__zNAmT {
    height: 18px;
}

.adsDashboard_insightsHeader__k1XCJ .adsDashboard_insightsFilterChevron__hm9\+d {
    height: 14px;
}

.adsDashboard_insightsHeader__k1XCJ .adsDashboard_insightsFilterIcon__zNAmT path,
.adsDashboard_insightsHeader__k1XCJ .adsDashboard_insightsFilterChevron__hm9\+d path {
    fill: #424242;
}

.adsDashboard_insightsFilterMenu__r3LyD button.is-checked {
    color: #020057;
    background-color: #EAEAFF;
}

.adsDashboard_insightsFilterMenu__r3LyD button.is-checked > div {
    margin-left: 20px;
}

.adsDashboard_insightsFilterMenu__r3LyD button.is-checked::before {
    content: url("data:image/svg+xml,<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.0458 3.4856C14.3299 3.78703 14.3158 4.26169 14.0144 4.54579L6.08456 12.0197C5.74829 12.3366 5.22042 12.3269 4.89609 11.9977L2.21576 9.27737C1.92504 8.98231 1.92856 8.50745 2.22361 8.21674C2.51867 7.92602 2.99353 7.92954 3.28424 8.22459L5.51839 10.4921L12.9856 3.45421C13.287 3.17011 13.7617 3.18416 14.0458 3.4856Z\" fill=\"%23020057\"/></svg>");
    position: absolute;
    top: 3px;
}

.adsDashboard_insightsCard__oB1yS .adsDashboard_cardSeperator__KvkfF {
    height: 1px;
    margin: 12px 0 2px 0;
    border-bottom: 1px solid #EDEBE9;
    width: 100%;
}

.adsDashboard_insightsCard__oB1yS .adsDashboard_insightsCardActions__919HV {
    display: flex;
    justify-content: space-between;
}

.adsDashboard_insightsCard__oB1yS .adsDashboard_insightsCardActions__919HV .adsDashboard_leftActions__KW8BN {
    display: flex;
    flex-direction: row;
}

.adsDashboard_insightsCard__oB1yS .adsDashboard_insightsCardActions__919HV .adsDashboard_leftActions__KW8BN .copilot.actions {
    gap: 0;
}

.adsDashboard_insightsCard__oB1yS .adsDashboard_insightsCardActions__919HV .adsDashboard_leftActions__KW8BN .copilot.actions .action {
    width: 32px;
    height: 32px;
}

.adsDashboard_insightsCard__oB1yS .adsDashboard_insightsCardActions__919HV .adsDashboard_leftActions__KW8BN .copilot.actions .action svg {
    height: 14px;
    width: 32px;
    padding: 0;
}

.adsDashboard_insightsCard__oB1yS .adsDashboard_insightsCardFilters__ISV0d {
    font-size: 12px;
    line-height: 16px;
    color: #616161;
    gap: 7px;
}

.adsDashboard_insightsFilterTooltip__-sAiG {
    display: flex;
    flex-direction: column;
    max-width: 215px;
}

.adsDashboard_insightsFilterTooltip__-sAiG ul {
    margin-left: 22px;
}

.adsDashboard_collapsedInsights__XA3tI {
    margin-top: 24px;
    background-color: #FFF;
    border-radius: 8px 0 0 0;
}

.adsDashboard_accountUpdates__4Nxoz,
.adsDashboard_accountUpdate__yxTTr {
    padding: 16px 0;
    margin: 0 16px 16px;
    border-top: 1px solid #EDEBE9;
    border-bottom: 1px solid #EDEBE9;
}

.adsDashboard_accountUpdates__4Nxoz .adsDashboard_updatesToggle__I61zn {
    align-items: baseline;
    gap: 6px;
}

.adsDashboard_accountUpdates__4Nxoz .adsDashboard_updatesToggle__I61zn i,
.adsDashboard_accountUpdate__yxTTr i {
    color: #D40000;
}

.adsDashboard_accountUpdates__4Nxoz .adsDashboard_updatesToggle__I61zn .adsDashboard_updateTitle__KEXs1,
.adsDashboard_accountUpdate__yxTTr span {
    font-size: 12px;
    font-weight: 600;
    width: 270px;
    text-align: left;
}

.adsDashboard_accountUpdates__4Nxoz .adsDashboard_updatesToggle__I61zn .adsDashboard_numOfUpdates__b4QiQ {
    color: #605E5C;
    font-weight: 400;
}

.adsDashboard_updatesToggle__I61zn span path {
    fill: #616161;
}

.adsDashboard_accountUpdates__4Nxoz ul {
    margin: 4px 0 0 38px;
    font-size: 12px;
    line-height: 16px;
    color: #605E5C;
}

.adsDashboard_accountUpdate__yxTTr {
    text-align: center;
}

.adsDashboard_accountUpdate__yxTTr span {
    margin-left: 3px;
}

.adsDashboard_selectedRow__QA0K- {
    background-color: #F3F3FF;
}

.adsDashboard_campaignsFilterOption__UlK7I span:last-child {
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: ellipsis;
}

.adsDashboard_campaignsFilterOption__UlK7I > span {
    min-width: 16px;
}

.adsDashboard_campaignsFilter__\+UNf4 .fui-Listbox {
    max-height: 50vh !important; /*Needed cause size is dynamically calculated from fluent UI side and re-assigned*/
    overflow-x: hidden;
}

.adsDashboard_adsDashboardActions__HIaY0 .adsDashboard_campaignsFilter__\+UNf4 > div {
    width: 100%;
}

.adsDashboard_adsDashboardActions__HIaY0 .adsDashboard_clearCampaignFilter__Hvd5o {
    position: absolute;
    top: 1px;
    right: 32px;
    height: 30px;
    background: #FFF;
}

.adsDashboard_adsDashboardActions__HIaY0 .adsDashboard_clearCampaignFilter__Hvd5o i {
    font-size: 12px;
    height: 16px;
    color: #616161;
}

.adsDashboard_sortButton__lhaG- {
    border: none;
    background-color: unset;
    text-align: left;
    width: -moz-fit-content;
    width: fit-content;
    padding: 0;
}

.adsDashboard_sortButton__lhaG- span {
    color: #201F1E;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

.adsDashboard_sortButton__lhaG- span i,
.adsDashboard_adsDashboardActions__HIaY0 i {
    color: #323130;
    height: 20px;
    line-height: 20px;
}

.adsDashboard_sortButton__lhaG- span i {
    font-weight: 600;
}

.adsDashboard_sortButton__lhaG-.adsDashboard_sortFlip__-1p7m span i {
    transform: rotate(180deg);
}

.adsDashboard_sortButton__lhaG-:hover {
    background-color: #F3F2F1;
}

.adsDashboard_adsDashboardActions__HIaY0 .adsDashboard_sortButton__lhaG- {
    margin-left: 0;
    padding-left: 0;
}

.adsDashboard_adsFilterDownloadHeader__vmE5Y {
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    min-height: 32px;
}

.adsDashboard_adsFilterDownloadHeader__vmE5Y .downloadContainer .ms-Button {
    border: unset;
}

.adsDashboard_adsFilterContainer__KZMQv {
    display: flex;
    overflow: hidden;
}

.adsDashboard_adsFilterContainer__KZMQv .ms-Dropdown.is-disabled .adsDashboard_adsBadge__aMKxZ,
.adsDashboard_adsFilterContainer__KZMQv .ms-Dropdown.is-disabled i {
    color: #a19f9d;
}

.adsDashboard_adsFilterContainer__KZMQv span.ms-Dropdown-title,
.adsDashboard_adsFilterContainer__KZMQv .scrollingBadges > div {
    border-radius: 4px;
    border: 1px solid #FFF;
    background: #F3F2F1;
    color: #201F1E;
    height: 28px;
    cursor: pointer;
}

.adsDashboard_adsFilterContainer__KZMQv .scrollingBadges > div {
    margin-right: 12px;
}

.adsDashboard_adsFilterContainer__KZMQv .adsDashboard_adsDateFilter__eYD\+m {
    padding: 4px 8px;
}

.adsDashboard_adsDateFilter__eYD\+m {
    display: flex;
    align-items: center;
}

.adsDashboard_adsDateFilter__eYD\+m > i {
    margin-left: 8px;
    font-size: 12px;
    height: 12px;
}

.adsDashboard_adsDateFilter__eYD\+m.adsDashboard_disabled__SRjEK > span {
    color: #a09f9d;
}

.adsDashboard_adsDateFilter__eYD\+m.adsDashboard_disabled__SRjEK > i {
    color: #a09f9d;
}

.adsDashboard_adsFilterContainer__KZMQv i {
    color: #201F1E;
}

.adsDashboard_adsBadge__aMKxZ {
    line-height: 24px;
}

.adsDashboard_adsFilterContainer__KZMQv div.ms-Spinner,
.adsDashboard_adsFilterContainer__KZMQv .ms-Dropdown-caretDownWrapper {
    height: 28px;
    line-height: 28px;
}

.adsDashboard_adsFilterContainer__KZMQv .ms-Dropdown:focus::after,
.adsDashboard_adsFilterContainer__KZMQv .ms-Dropdown:active .ms-Dropdown-title,
.adsDashboard_adsFilterContainer__KZMQv .ms-Dropdown:hover .ms-Dropdown-title {
    border-color: #FFF;
}

.adsDashboard_adsBadge__aMKxZ strong {
    padding-left: 4px;
}

.adsDashboard_adsDashboardContainer__fWaEN .adsDashboard_errorStateCard__U\+Xks {
    position: relative;
}

.adsDashboard_adsDateCallout__CFiKo {
    background-color: #FFF;
    padding: 0 12px 8px 12px;
}

.adsDashboard_adsDashboardTable__-HeDN .adsDashboard_statusIcon__phcjr {
    padding: 0 8px 2px 4px;
}

.adsDashboard_campaignListContainer__AB3Fv .adsDashboard_statusIcon__phcjr {
    padding-right: 4px;
}

.adsDashboard_campaignListContainer__AB3Fv {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    overflow-y: scroll;
    margin-bottom: 16px;
}

.adsDashboard_campaignCard__kEf0c {
    display: flex;
    flex-direction: column;
    padding: 12px 16px 8px 16px;
    background: #FFF;
    border: 1px solid #EAEAFF;
    border-radius: 8px;
    box-shadow: 0px 0.6px 1.8px 0px rgba(131, 126, 255, 0.10), 0px 3.2px 7.2px 0px rgba(131, 126, 255, 0.12);
}

.adsDashboard_campaignCard__kEf0c,
.adsDashboard_sortListContainer__McTaV {
    width: 362px; 
}

.adsDashboard_sortListContainer__McTaV {
    margin: 16px auto;
}

.adsDashboard_campaignCardMetricsContainer__EqUiJ,
.adsDashboard_campaignListContainer__AB3Fv .adsDashboard_campaignNameColumn__I6kUX,
.adsDashboard_campaignCardRow__GCMmx {
    margin-bottom: 8px;
}

.adsDashboard_campaignCardRow__GCMmx {
    color: #323130;
}

.adsDashboard_campaignCardRow__GCMmx strong {
    padding-right: 4px;
}

.adsDashboard_campaignCardRow__GCMmx > div > span:first-of-type {
    padding-right: 16px;
    color: #605E5C;
}

.adsDashboard_campaignNameColumn__I6kUX {
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
    color: #323130;
    width: 100%;
}

.adsDashboard_campaignCardMetricsContainer__EqUiJ {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    row-gap: 4px;
    padding: 4px;
    column-gap: 4px;
}

.adsDashboard_campaignCardMetricsContainer__EqUiJ span {
    color: #323130;
}

.adsDashboard_campaignCardSeparator__AQ-Uh {
    height: 1px;
    border-bottom: 1px solid #EDEBE9;
}

.adsDashboard_campaignListContainer__AB3Fv .adsDashboard_adsDashboardRowActions__CaWJG {
    padding-top: 4px;
}

.adsDashboard_campaignListContainer__AB3Fv .adsDashboard_adsDashboardRowActions__CaWJG button {
    height: 24px;
}

.adsDashboard_adsListShimmerContainer__bfTLU {
    margin: 0 auto;
    overflow: auto;
}

.adsDashboard_adsListShimmerContainer__bfTLU .ms-ShimmerGap-root {
    background-color: #EFF6FC;
}

.adsDashboard_adsFilterDownloadHeader__vmE5Y .adsDashboard_clearFiltersButton__ttidN {
    border: none;
}

.adsDashboard_adsFilterDownloadHeader__vmE5Y .adsDashboard_clearFiltersButton__ttidN path {
    fill: #424242;
}

.adsDashboard_adsFilterDownloadHeader__vmE5Y .adsDashboard_clearFiltersButton__ttidN span {
    color: #424242;
    font-weight: 600;
}

.adsDashboard_timezoneBanner__Ka9nz {
    margin: 24px 32px 0 32px;
    border-radius: 4px;
    max-width: calc(100vw - 64px);
    border: 1px solid #D1D1D1;
    min-height: 36px;
}

.adsDashboard_timezoneBanner__Ka9nz.adsDashboard_smallBanner__df50O {
    margin: 16px 16px -16px 16px;
    max-width: calc(100vw - 32px);
}

.adsDashboard_timezoneBanner__Ka9nz > div {
    min-height: 36px;
    align-items: center;
}

.adsDashboard_timezoneBanner__Ka9nz.adsDashboard_adsWithInsights__KM1Mb {
    max-width: calc(100vw - 48px);
    margin: 12px 24px 1px 24px;
}

.adsDashboard_adsTableShimmer__Py7vl .adsDashboard_adsDashboardTable__-HeDN .adsDashboard_adsNoData__s\+SAR {
    grid-column: 1 / -1;
    text-align: center;
    padding-top: 32px;
}

.adsDashboard_currency__tVaNs {
    margin-left: 4px;
    font-size: 10px;
    color: #605E5C;
}

.adsDashboard_manageAdsColumnsModal__8XHao .ms-Dialog-main {
    overflow-y: hidden;
}

.adsDashboard_manageAdsColumnsModal__8XHao .ms-Modal-scrollableContent {
    overflow-y: hidden;
    max-height: calc(100vh - 32px);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.adsDashboard_manageColsModalHeader__w5Niz {
    margin: 16px 24px 20px;
}

.adsDashboard_manageColsModalHeader__w5Niz > h1 {
    color: #323130;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
}

.adsDashboard_manageColsModalBody__zEwf0 {
    height: 100%;
    overflow-y: auto;
}

.adsDashboard_manageColsModalBody__zEwf0 > div:first-child {
    margin-bottom: 8px;
}

.adsDashboard_manageColsModalBody__zEwf0 > div {
    margin: 0 24px;
}

.adsDashboard_manageColumnsModalFooter__8bOwD {
    background: #FFF;
    display: flex;
    padding: 32px 24px 24px;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}

.adsDashboard_manageColumnsModalFooter__8bOwD > button {
    padding: 0;
    color: #0078D4;
}

.adsDashboard_manageColumnsModalFooter__8bOwD > button span {
    margin: 0;
}

.adsDashboard_manageColumnsModalFooter__8bOwD button.ms-Button--primary {
    margin-right: 8px;
}

.adsDashboard_manageColsRow__mInVZ {
    border-bottom: 1px solid #EDEBE9;
    padding-left: 4px;
}

.adsDashboard_manageColsRow__mInVZ.adsDashboard_draggable__MbTpu:hover {
    background: #F3F2F1;
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

.adsDashboard_scrollerContainer__Zhpvi {
    position: absolute;
    bottom: 0;
    padding: 0;
    height: 12px;
    z-index: 2; 
    overflow-x: auto;
}

.adsDashboard_scrollerContainer__Zhpvi > div {
    height: 4px;
}

.adsDashboard_scrollerContainer__Zhpvi::-webkit-scrollbar {
    height: 10px;
}

.adsDashboard_responsiveAdsTable__VBl15 {
    overflow: hidden auto;
    padding-bottom: var(--table-bottom-padding);
}

.adsDashboard_responsiveAdsTable__VBl15 .adsDashboard_campaignsGridNameHeader__MJ9e3 {
    position: sticky;
    left: 0;
}

.adsDashboard_responsiveAdsTable__VBl15 .adsDashboard_tableHeaderBorder__flbg0 {
    grid-column: span 2;
}

.adsDashboard_adsDashboardTable__-HeDN .adsDashboard_tableHeader__7Vt7z.adsDashboard_scrollingHeader__umAoC {
    position: sticky;
    top: 0;
    display: grid;
    justify-content: flex-start;
    overflow: hidden;
    padding: 10px;
    align-items: center;
}

.adsDashboard_dynamicTextColumn__qlsc9,
.adsDashboard_responsiveAdsTable__VBl15 .adsDashboard_campaignNameColumn__I6kUX {
    display: flex;
    align-items: center;
    text-align: left;
    min-height: 56px;
    max-height: 56px;
    border-bottom: 1px solid #EDEBE9;
}

.adsDashboard_dynamicTextColumn__qlsc9 {
    width: 100%;
    overflow: hidden;
}

.adsDashboard_dynamicTextColumn__qlsc9 > span,
.adsDashboard_responsiveAdsTable__VBl15 .adsDashboard_campaignNameColumn__I6kUX > span {
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 88px);
    text-wrap: nowrap;
    margin-right: 24px;
}

.adsDashboard_dynamicTextColumn__qlsc9 > span {
    width: 100%;
    margin-right: 0;
}

.adsDashboard_scrollingRowsContainer__N\+2TL {
    position: relative;
    display: grid;
    height: 100%;
    overflow: hidden;
    border-left: 1px solid #EDEBE9;
}

.adsDashboard_dropShadow__myns5 {
    content: "";
    border: 0 solid #f1f3f4;
    border-right-width: 4px;
    border-image: linear-gradient(270deg, transparent, rgba(0, 0, 0, .25)) 1 40%;
    height: calc(100% - 32px);
    left: 0;
    padding: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 1px;
    will-change: transform;
    z-index: 105;
}

.adsDashboard_adsDashboardTable__-HeDN.adsDashboard_responsiveAdsTable__VBl15 .adsDashboard_tableHeader__7Vt7z.adsDashboard_scrollingHeader__umAoC {
    padding: 0;
    justify-content: flex-start;
}

.adsDashboard_scrollingHeader__umAoC {
    border-left: 1px solid #EDEBE9;
}

.adsDashboard_tableHeader__7Vt7z.adsDashboard_scrollingHeader__umAoC > div,
.adsDashboard_tableHeader__7Vt7z.adsDashboard_scrollingHeader__umAoC > strong {
    padding: 0 12px;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

.adsDashboard_tableHeader__7Vt7z.adsDashboard_scrollingHeader__umAoC > strong:not(.adsDashboard_leftAlignColumn__QuJGG),
.adsDashboard_tableHeader__7Vt7z.adsDashboard_scrollingHeader__umAoC > div:not(.adsDashboard_leftAlignColumn__QuJGG) {
    justify-content: flex-end;
}

.adsDashboard_tableHeader__7Vt7z.adsDashboard_sourceHeader__7G38U:not(.adsDashboard_disabled__SRjEK):hover,
.adsDashboard_responsiveAdsTable__VBl15 .adsDashboard_campaignsGridNameHeader__MJ9e3:hover,
.adsDashboard_tableHeader__7Vt7z.adsDashboard_scrollingHeader__umAoC > strong:hover,
.adsDashboard_tableHeader__7Vt7z.adsDashboard_scrollingHeader__umAoC > div:hover {
    background-color: #edebe9;
}

.adsDashboard_tableHeader__7Vt7z.adsDashboard_sourceHeader__7G38U.adsDashboard_disabled__SRjEK:hover {
    cursor: default;
}

.adsDashboard_scrollingRowsContainer__N\+2TL > strong,
.adsDashboard_scrollingRowsContainer__N\+2TL > span {
    display: flex;
    min-width: 80px;
    align-self: center;
    min-height: 56px;
    max-height: 56px;
    align-items: center;
    border-bottom: 1px solid #EDEBE9;
}

.adsDashboard_scrollingRowsContainer__N\+2TL .adsDashboard_intentRow__0nB77 {
    display: flex;
    width: 100%;
}

.adsDashboard_responsiveAdsTable__VBl15 .adsDashboard_tableHeader__7Vt7z {
    cursor: pointer;
}

.adsDashboard_responsiveAdsTable__VBl15 .adsDashboard_sortIcon__njEHU {
    width: 12px;
    padding: 0;
    transform: scale(0.75);
    color: #252423;
}

.adsDashboard_zeroStateWrapper__FZOEg {
    overflow-y: auto;
}

.adsDashboard_sourceColumn__A3wcB {
    border-bottom: 1px solid #EDEBE9;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.adsDashboard_sourceColumn__A3wcB img {
    height: 16px;
}

.adsDashboard_tableHeader__7Vt7z.adsDashboard_sourceHeader__7G38U {
    justify-content: center;
}

.adsDashboard_sourceHeader__7G38U i {
    height: 16px;
}

.adsDashboard_sourceHeader__7G38U .adsDashboard_sortIcon__njEHU {
    position: absolute;
    right: calc(50% - 19px);
    top: 12px;
}
.areaMapInteractor {
    width: 100%;
    pointer-events: none;
    background-color: transparent;
    position: absolute;
    overflow: hidden;
}

.areaInfoRow {
    margin-bottom: 8px;
}

.areaInfoRow span{
    font-size: 12px;
    line-height: 16px;
}

.moneyInfoElement {
    margin-left: 15px;
}

.areaMapMetricValue {
    font-weight: 600;
    padding-right: 2px;
}

.areaMapEdit {
    padding-left: 8px;
    max-height: 20px;
    max-width: 93px;
    overflow: hidden;
}

.gettingStarted {
    background-color: #FAF9F8;
    overflow: auto;
    height: 100%;
}

.gettingStartedSprite {
    position: absolute;
    overflow: hidden;
    transform-origin: top left;
}

.gettingStartedSprite::after {
    content: url(https://claritystatic.azureedge.net/images/gettingstartedsprites5.png);
    position: relative;
}

.setupOptions {
    background: linear-gradient(44.4deg, #3A6AD8 35.45%, #3D7FDB 72.93%, #4094EB 107.42%), #C4C4C4;
    padding: 48px 48px 52px;
    overflow: hidden;
    min-height: 645px;
}

.setupOptions.fullHeight {
    height: 100%;
    overflow: auto;
}

.shortSetupOptions {
    min-height: 200px;
    height: 200px;
}

.setupTitle > * {
    height: 48px;
    vertical-align: text-top;
}

.setupTitle svg {
    width: 48px;
}

.setupTitle span {
    font-size: 36px;
    line-height: 48px;
    color: white;
    font-weight: 600;
    margin: 0 0 8px 56px;
    display: inline-block;
    white-space: nowrap;
}

.alreadyInstalledNote {
    color: white;
    text-align: center;
}

.thirdPlatformsContainer, 
.trackingCodeContainer {
    width: calc(100% - 94px);
    position: relative;
    margin: 0 auto;
}

.thirdPlatformsContent,
.trackingCodeContent,
.needHelpContent {
    background-color: #FAF9F8;
    border-radius: 6px;
    display: inline-block;
    width: 100%;
    min-width: 650px;
}

.thirdPlatformsContentEmbedded {
    box-shadow: 0px 4px 14px 0px rgb(131, 126, 255, 0.30);
}

.thirdPlatformSprite {
    position: absolute;
    overflow: hidden;
    transform-origin: top left;
}

.thirdPlatformSprite::after {
    content: url( https://claritystatic.azureedge.net/images/iconTilesSprite.png);
    position: relative;
}

.tickSuccess {
    height: 48px;
    width: 47px;
    overflow: hidden;
    position: absolute;
    vertical-align: text-top;
}

.tickSuccess::after {
    content: url(https://claritystatic.azureedge.net/images/TickSuccess.png);
    position: relative;
}

.emoji.platformsIconsSprite {
    margin-top: 35px;
    margin-left: 35px;
}

.emoji.platformsIconsSprite.mesh {
    margin-left: 12px;
    margin-top: 0px
}

.platformFact .emoji,
.emoji.platformsIconsSprite {
    height: 40px;
    width: 40px;
    min-width: 40px;
}

.platformFact .fact {
    margin-left: 40px;
    max-width: 241px;
}

.thirdPlatformSprite.thirdPartyIcon {
    width: 40px;
}

.thirdPlatformSprite.thirdPartyIcon::after {
    left: -120px
}

.emoji.eyesIcon::after {
    left: 0;
}

.emoji.monkeyIcon::after {
    left: -40px;
}

.emoji.questionFaceIcon::after {
    left: -80px;
}

.thirdPlatformsContent > span:first-child {
    font-weight: 600;
    margin: 32px 0 0 32px;
    display: inline-block;
}

.thirdPartyPlatforms {
    display: grid;
    gap: 8px;
    border-radius: 6px;
    justify-content: center;
    margin: 40px 32px 32px 32px;
    grid-template-columns: repeat(auto-fill, 278px);
}

.thirdPartyPlatform {
    width: 280px;
    height: 64px;
    background: #FFFFFF;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.noPlatformModalTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.noPlatformModalTitleText {
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
}

.thirdPartyPlatform span {
    margin-left: 68px;
}

.platformInputTitle {
    font-weight: 600;
    padding: 21px 0 5px;
}

.noPlatformModal {
    padding: 16px 24px 24px;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    width: 560px;
}

.platformSubmit {
    margin: 16px 0 24px;
}

.trackCodeLink {
    color: #0078D4;
    text-decoration-line: underline;
}

.platformFact {
    display: flex;
    margin: 0 0 24px 24px;
}

.platformFact svg {
    margin-right: 8px;
}

.platformFacts {
    margin: 32px 15% 8px 80px;
    display: flex;
}

.platformFacts.installation{
    margin: 32px 15% 8px 32px; 
}

.platformFactsContainer {
    display: flex;
    background-color: #EFF6FC;
    border-radius: 6px;
}

.platformsIconsSprite {
    position: absolute;
    overflow: hidden;
    transform-origin: top left;
}

.platformsIconsSprite::after {
    content: url(https://claritystatic.azureedge.net/images/platformIconsSprite15.png);
    position: relative;
}

.emoji.hubspotIcon::after {
    left: -180px;
    top: -303px;
}

.emoji.adobeTagIcon::after {
    left: -180px;
    top: -65px;
}

.emoji.clickFunelsIcon::after {
    top: -127px;
}

.emoji.shopifyIcon::after {
    top: -65px;
}

.emoji.squareSpaceIcon::after {
    left: -57px;
}

.emoji.unbounceIcon::after {
    left: -180px;
}

.emoji.weeblyIcon::after {
    left: -56px;
    top: -65px;
}

.emoji.wixIcon::after {
    left: -56px;
    top: -130PX;
}

.emoji.wordPressIcon::after {
    left: -120Px;
}

.emoji.gatsbyIcon::after {
    left: -120px;
    top: -65px;
}

.emoji.joomlaIcon::after {
    left: -120px;
    top: -130px;
}

.emoji.aioseoIcon::after {
    top: -185px;
}

.emoji.seoIcon::after {
    left: -56px;
    top: -185px;
}

.emoji.abTastyIcon::after {
    left: -120px;
    top: -183px;
}

.emoji.aitocIcon::after {
    left: -180px;
    top: -183px;
}

.emoji.elevarIcon::after {
    top: -246px
}

.emoji.softrIcon::after {
    left: -60px;
    top: -245px;
}

.emoji.webflowIcon::after {
    left: -120px;
    top: -245px;
}

.emoji.bubbleIcon::after {
    left: -180px;
    top: -245px;
}

.emoji.analyzifyIcon::after {
    top: -305px;
}

.emoji.sharePointIcon::after {
    left: -60px;
    top: -303px;
}

.emoji.zapierIcon::after {
    left: -120px;
    top: -303px;
}

.emoji.GAIcon::after {
    left: 0px;
    top: -363px;
}

.emoji.kameleoonIcon::after {
    left: -58px;
    top: -363px;
}

.emoji.optimizelyIcon::after {
    left: -120px;
    top: -363px;
}

.emoji.clickFunnelsIcon::after {
    left: -181px;
    top: -360px;
}

.emoji.platformsIconsSprite.noSeePlatformIcon.mesh::after {
    left: -180px;
    top: -130px;
}

.emoji.gAdsIcon::after {
    left: -238px;
    top: 0;
}

.platformFactsContainer > svg:first-child {
    margin: 32px 32px 0 32px;
}

.letterIcon {
    width: 28px;
    height: 28px;
    background: #C7E0F4;
    text-align: center;
    position: relative;
    top: 2px;
    border-radius: 45px;
    padding-top: 3px;
    margin-right: 8px;
    font-weight: 600;
}

.firstStep,
.trackinStep {
    margin: 32px;
    width: 600px;
}

.firstStepHeader {
    display: flex;
    align-items: center;
}

.firstStepHeader span {
    font-weight: 600;
}

.firstStep .code {
    margin-left: 32px;
}

.copyProjectId {
    margin-top: 24px;
    margin-left: 32px;
}

.secondStep {
    margin: 0 32px 32px 32px;
}

.noFirstStep {
    margin-top: 32px;
}

.secondStep .collapsibleTitle {
    font-weight: 600;
}

.secondStep .collapsibleContentTitle { 
    margin-right: 8px;
}

.secondStep .markdownTutorials {
    background: white;
    padding: 5px 32px;
    margin-top: 16px;
}

.secondStep .markdownTutorials ul,
.secondStep .markdownTutorials ol {
    padding-left: 30px;
}

.installationBreadcrum .ms-Breadcrumb-itemLink > * {
    font-size: 14px;
    color: white;
}

.installationBreadcrum .ms-Breadcrumb-chevron {
    color: white;
}

.installationBreadcrum .ms-Breadcrumb-itemLink:hover,
.crumbLink:hover {
    background-color: transparent;
    text-decoration: underline;
    text-decoration-color: white;
    font-weight: 600;
    color: white;
}

.ms-Fabric--isFocusVisible .crumbLink:focus::after {       
    content: "";
    position: absolute;
    inset: 1px;
    border: 1px solid rgb(255, 255, 255);
    outline: rgb(96, 94, 92) solid 1px;
    z-index: 1;
}

.crumbTP {
    color: white;
    padding: 0 8px;
}

.learnMore {
    color: rgb(0, 120, 212);;
}

.learnMore:hover {
    text-decoration: underline;
}

.ms-Fabric--isFocusVisible .learnMore:focus,
.ms-Fabric--isFocusVisible .thirdPartyPlatform:focus {
    box-shadow: rgb(96 94 92) 0px 0px 0px 1px inset;
    outline: rgb(96, 94, 92) auto 1px;
}

.installMethodsButton,
.installationBreadcrum:last-child .ms-Breadcrumb-item {
    font-weight: 600;
    color: white;
    font-size: 14px;
}

.installationBreadcrum.withIcon {
    height: 38.5px;
    display: flex;
    align-items: center;
}

.installationBreadcrum.withIcon svg {
    display: block;
}

.installationBreadcrum svg {
    display: none;
}

.goBackBreadcrumb {
    display: flex;
    color: white;
    align-items: center;
    cursor: pointer;
}

.goBackBreadcrumb svg {
    margin-right: 8px;
}

.breadCrumItem {
    margin-right: 8px;
}

.almostThere {
    height: 48px;
    width: 47px;
}

.gettingStarted .centered {
    margin: 0 auto;
    width: fit-content;
    position: relative;
}

.setupSubtitle {
    color: white;
    font-size: 24px;
    line-height: 32px;
    margin: 0 0 32px 56px;
}

.setupOptionTiles {
    display: flex;
    margin-top: 52px;
}

.appsOptionTiles {
    justify-content: center;
}

.setupOptionTile {
    width: 400px;
    background: #FAF9F8;
    box-shadow: 0px 1.6px 3.6px rgba(0, 0, 0, 0.132), 0px 0.3px 0.9px rgba(0, 0, 0, 0.108);
    border-radius: 8px;
    padding: 24px 24px 44px;
    margin-right: 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 350px;
}

.setupOptionTile:last-child {
    margin-right: 0;
}

.setupOptionTile .emoji {
    height: 100px;
    width: 105px;
}

.setupOptionTitle {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    margin-top: 153px;
    margin-bottom: 16px;
}

.setupOptionTitle.withDescription {
    margin-top: 16px;
}

.setupButtonWrapper {
    flex: 1;
    display: flex;
    align-items: flex-end;
    margin-top: 48px;
}

.setupButtonWrapper> :first-child {
    margin-right: 8px;
}

.emoji.trackingCode::after {
    left: -48px;
}

.emoji.thirdPartyIcon::after {
    left: -162px;
}

.emoji.heartEnvelope::after {
    left: -277px;
}

.emoji.installGTM::after {
    left: -442px;
}

.emoji.installGA::after {
    left: -545px;
}

.emoji.installGO::after {
    left: -647px;
}

.emoji.installHubspot::after {
    left: -749px;
}

.setupOptionTiles ~ a,
.stillnoData {
    color: white;
    text-align: center;
    margin-top: 41px;
    text-decoration: underline;
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 600;
}

.setupOptionTiles ~ a:hover,
.setupOptionTiles ~ a:focus,
.setupOptionTiles ~ a:active,
.setupOptionTiles ~ a:active:hover {
    color: white;
    text-decoration: underline;
}

.checklist {
    padding: 48px 48px 30px;
    color: #323130;
    background-color: #FAF9F8;
    margin-bottom: 78px;
}

.checklistTitle {
    font-weight: 600;
    font-size: 26px;
    line-height: 35px;
    margin-bottom: 8px;
}

.checklistSubtitle {
    margin-bottom: 32px;
    font-size: 16px;
    line-height: 20px;
}

.checklistArea {
    display: flex;
    box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
    border-radius: 8px;
    overflow: hidden;
    user-select: none;
}

.checklistAreaLoading {
    min-height: 900px;
    margin-top: 60px;
}

.checklistItems {
    flex: 0 1 auto;
}

.checklistItem {
    background-color: #EDEBE9;
    display: flex;
    border-bottom: 1px solid #C4C4C4;
}

.appsCheckList .checklistItem {
    min-height: 98px;
}

.checklistItem:last-child {
    border-bottom: none;
}

.checklistCircle {
    background-color: white;
    border: 1px solid #323130;
    border-radius: 24px;
    height: 24px;
    width: 24px;
    margin: 29px;
    flex: 1 0 auto;
}

.checklistCircle.unChecked circle {
    fill: #8A8886;
}

.checklistCircle svg {
    position: relative;
    left: -1px;
    top: -1px;
}

.appsCheckList .checklistCircle {
    margin: auto 29px;
}

.checklistTextArea {
    background-color: #FAF9F8;
    padding: 16px;
    width: 100%;
}

.appsCheckList .checklistTextArea {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.checklistItemTitle {
    margin-bottom: 8px;
}

.mountainArea {
    background-color: white;
    padding: 52px 89px 39px 85px;
    position: relative;
    flex: 0 0 auto;
}

.appsCheckList .mountainArea {
    padding: 46px 104px 14px 104px;
}

.completedBadge {
    display: inline-block;
    position: absolute;
    top: 114px;
    left: 163px;
    padding: 12px;
    color: #2F9596;
    border: 1px solid #2F9596;
    border-radius: 8px;
    font-size: 18px;
    line-height: 24px;
}

.appsCheckList .completedBadge {
    top: 78px;
    left: 172px;
}

.completedBadge.completed {
    background-color: #2F9596;
    color: white;
}

.mountainIllustration {
    position: relative;
    top: 56px;
}

.appsCheckList .mountainIllustration {
    top: 17px;
}

.appsCheckList .mountainIllustration svg {
    display: block;
    width: 494px;
}

.flagEmoji {
    width: 68px;
    height: 68px;
    top: 50px;
    right: 331px;
}

.appsCheckList .flagEmoji {
    top: 18px;
    right: 330px;
}

.flagEmoji::after {
    left: -377px;
}

.goat {
    position: absolute;
}

.goat.step0 {
    right: 132px;
    top: 453px;
}

.appsCheckList .goat.step0 {
    right: 151px;
    top: 391px;
}

.goat.step1 {
    transform: scaleX(-1) rotate(-16.71deg);
    right: 119px;
    top: 376px;
}

.appsCheckList .goat.step1 {
    right: 211px;
    top: 296px;
}

.goat.step2 {
    transform: scaleX(-1) rotate(-16.71deg);
    right: 235px;
    top: 340px;
}

.appsCheckList .goat.step2 {
    transform: scaleX(-1) rotate(-27.21deg);
    right: 374px;
    top: 231px;
}

.goat.step3 {
    transform: scaleX(-1) rotate(-27.21deg);
    right: 346px;
    top: 296px;
}

.appsCheckList .goat.step3 {
    transform: rotate(-7deg);
    right: 323px;
    top: 179px;
}

.goat.step4 {
    transform: rotate(-7deg);
    right: 412px;
    top: 234px;
}

.appsCheckList .goat.step4 {
    transform: scaleX(-1) rotate(-63.83deg);
    right: 203px;
    top: 140px;
}

.goat.step5 {
    transform: rotate(-7deg);
    right: 285px;
    top: 217px;
}

.appsCheckList .goat.step5 {
    transform: scaleX(-1) rotate(-50.83deg);
    right: 258px;
    top: 44px;
}

.goat.step6 {
    transform: scaleX(-1) rotate(-62.26deg);
    right: 210px;
    top: 160px
}

.goat.step7 {
    transform: scaleX(-1) rotate(-50.83deg);
    right: 263px;
    top: 71px
}

.goatHearts {
    position: absolute;
    top: 32px;
    left: 376px;
}

.appsCheckList .goatHearts {
    top: 6px;
    left: 376px;
}

.blogUpsell {
    padding: 0 48px;
}

.blogTitle {
    display: inline-block;
    font-weight: 600;
    font-size: 26px;
    line-height: 35px;
    margin-bottom: 32px; 
    margin-right: 8px;
}

.blogTitleArea a {
    text-decoration: underline;
}

.blogItems {
    display: flex;
    margin-bottom: 115px;
}

.blogItem {
    display: flex;
    box-shadow: 0px 1.6px 3.6px rgba(0, 0, 0, 0.132), 0px 0.3px 0.9px rgba(0, 0, 0, 0.108);
    border-radius: 8px;
    margin-right: 24px;
    min-height: 120px;
    overflow: hidden;
}

.blogItem:last-child {
    margin-right: 0;
}

a.blogItem:hover {
    text-decoration: none;
}

.blogItem img {
    object-fit: contain;
    background: #f5f8fa;
}

.blogItemTextArea {
    padding: 24px 23px 16px; 
    color: #323130;
    font-size: 14px;
    line-height: 19px;
    width: 298px;
}

.blogItemTextArea a:hover {
    text-decoration: none;
}

.blogItemTitle {
    font-weight: 600;
    margin-bottom: 16px;
}

.socialBar {
    padding: 54px 0;
    background-color: #EFF6FC;    
}

.socialMediaItems, .socialMediaItem {
    display: flex;
    font-size: 12px;
    line-height: 16px;
}

.socialMediaItem {
    border: 2px solid white;
    border-radius: 38px;
    align-items: center;
    margin-right: 16px;
    padding: 2px 20px 2px 2px;
    background-color: rgba(255, 255, 255, 0.5);
}

.socialMediaItem:last-child {
    margin-right: 0;
}

.socialMediaIcon {
    overflow: hidden;
    transform-origin: top left;
    width: 30px;
    height: 30px;
    margin-right: 12px;
}

.socialMediaIcon::after {
    content: url(https://claritystatic.azureedge.net/images/SocialMediaIcons.png);
    position: relative;
}

.socialMediaItem:nth-child(2) .socialMediaIcon::after {
    left: -32px;
}

.socialMediaItem:last-child .socialMediaIcon::after {
    left: -63px;
}

a.socialMediaItem:hover {
    text-decoration: none;
}

.socialMediaName {
    color: #323130;
}

.trackingCodeContainer .goBackInstallation,
.needHelpContainer .goBackInstallation {
    margin-bottom: 8px;
}

.thirdPlatformSprite.trackingCodeIcon::after {
    left: -160px
}

.needHelpSprite {
    position: absolute;
    overflow: hidden;
    transform-origin: top left;
}

.needHelpSprite::after {
    content: url(https://claritystatic.azureedge.net/images/needHelpSprite.png);
    position: relative;
}

.needHelpSprite.envelopeIcon {
    width: 50px;
}

.trackingCodeContainer .setupTitle > span {
    margin: 9px 0 0 70px;
}

.trackingCodeContainer .setupTitle {
    margin-bottom: 40px;
}

.thirdPlatformSprite.trackingCodeIcon {
    height: 58px;
}

.needHelpContainer .setupTitle {
    margin-bottom: 32px;
}

.needHelpContent .imageDiv {
    width: 420px;
    height: 380px;
    background: #EFF6FC;
    border-radius: 6px;
}

.needHelpSprite.sendEnvelope {
    width: 255px;
    margin-top: 95px;
}

.needHelpSprite.mailbox {
    bottom: 0px;
    right: 0px;
    width: 150px;
  }

.needHelpSprite.sendEnvelope::after {
    left: -48px;
}

.needHelpSprite.mailbox::after {
    left: -300px;
}

.needHelpContent {
    display: flex;
}

.step {
    margin: 32px 32px 0 32px;
}

.stepContent {
    max-width: 420px;
}

.emailTextField {
    margin: 25px 0 32px 0;
}

.needHelpImage {
    width: 600px;
    min-width: 400px;
}

.emojiDescription {
    margin-top: 115px;
    background-color: #2F9596;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-radius: 127.273px;
    padding: 2px 10px;
    color: white;
    max-width: fit-content;
}

.emojiDescription svg {
    margin-left: 6px;
}

.setupOptionTiles .loadingState {
    height: 376px;
}

.loadingState > :first-child {
    margin-bottom: 5px;
}

.loadingState .ms-Spinner-label {
    color: white;
}

.settingsVertical .checklist {
    background: white;
}

.settingsVertical .checklistTitle {
    display: none;
}

.settingsVertical .checklist .centered,
.settingsVertical .blogUpsell .centered {
    margin: 0;

}

.setupContainer.setupFRE {
    max-width: 100%;
}

.setupOptionTile.isSettingsPage {
    background-color: white;
    border: 1px solid #C4C4C4;
    box-shadow: none;
    width: 370px;
    height: 350px;
    min-width: 370px;
}

.setupOptionTile.isSettingsPage .setupButtonWrapper {
    margin-top: 0px;
}

.clarityInstalledInfo {
    color: white;
    padding-top: 37px;
    font-weight: 400;
    font-size: 18px;
    line-height: 20px;
}

.clarityInstalledHeader {
    cursor: pointer;
}

.clarityInfoExpandIcon {
    transform: rotate(-90deg);
    transition: transform 0.1s linear 0s;
}

.clarityInfoExpanded {
    transform: rotate(0deg);
}

.clarityInstalledTitle {
    padding-left: 10px;
}

.clarityInstalledInfoExpanded {
    padding: 26px 30px;
}

.clarityInfoStepNo {
    padding-right: 8px;
}

.clarityInstalledInfoExpanded {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
}

.clarityInstallTroubleShoot {
    padding-top: 36px;
}

.clarityInstallTroubleShootLink {
    color: white;
    text-align: center;
    text-decoration: underline;
    display: inline-block;
}

.clarityInstallTroubleShootLink:hover,
.clarityInstallTroubleShootLink:active,
.clarityInstallTroubleShootLink:active:hover,
.clarityInstallTroubleShootLink:focus {
    color: white;
    text-decoration: underline;
}

.clarityInstalledStep {
    padding-bottom: 22px;
}

.visitSiteButton {
    margin-left: 10px;
    border: 1px solid white;
    color: white;
    background: transparent;
}

.visitSiteButton:hover {
    background: rgb(0, 0, 0, 0.1);
    color: white;
}

.attestationContainerWrapper {
    max-height: 252px;
    border: 1px solid #D1D1D1;
    background: #FAFAFA;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
}

.attestationContainer {
    overflow-y: auto;
    padding: 16px 8px 16px 30px;
}

.attestationContainer p {
    margin-left: -14px;
}

.attestationContainer strong {
    text-decoration: underline;
}

.attestationContainer li::marker {
    font-weight: 600;
}

.attestationContainer .alphaList {
    list-style-type: lower-alpha;
    padding-left: 24px;
}

.attestationContainer .romanList {
    list-style-type: lower-roman;
    padding-left: 24px;
}

.attestationContainerWrapper .acceptTerms {
    width: 100%;
    background: #FFF;
    box-shadow: 0px -3.2px 7.2px 0px rgba(0, 0, 0, 0.08), 0px -0.6px 1.8px 0px rgba(0, 0, 0, 0.10);
    border-radius: 0 0 4px 4px;
    padding: 14px 24px;
    display: flex;
    justify-content: center;
}

.attestationContainerWrapper .acceptTerms label {
    align-items: center;
    gap: 0;
}

.attestationContainerWrapper .acceptTerms .ms-Checkbox-checkbox {
    margin-right: 0;
}

.platformsIconsSprite.msAdsIcon {
    background-position: -10px -210px;
}

.ga_header__\+sOA5 {
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
  line-height: 36px;
  color: #020057;
  margin-bottom: 44px;
}

.ga_gaInfoTitle__19LUF {
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  margin: 24px 0 40px;
}

.ga_siteConnect__vREkQ {
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px;
}

.ga_buttonMargin__YkQir {
  margin-left: 16px;
}

.ga_clemMoving__MOB-- > svg {
  width: 320px;
}

.eventSettingsContainer {
    display: flex;
    flex-direction: column;
    max-width: 932px;
}

.eventSettingsDescription {
    padding-bottom: 25px;
}

.eventSettingsFiltersHeader {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 80px;
}

.allEventsDropdown {
    box-sizing: border-box;
    width: 218px;
    height: 32px;
    background: #FFFFFF;
    border-radius: 2px;
    flex: none;
    align-self: stretch;
    flex-grow: 0;
}

.findEventTextbox {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    width: 217px;
    height: 32px;
    border-radius: 2px;
    flex: none;
    flex-grow: 0;
}

.findEventTextbox div {
    color: #616161;
}

.createEventButton {
    min-width: 116px;
    max-width: 130px;
    width: 100%;
}

.createEventButton :disabled {
    background: #F3F2F1;
}

.eventCounterRow > .ms-layer {
    position: absolute;
}

.eventSettingsFiltersGroup {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
}

.eventCounterRow {
    margin-top: 20px;
}

.eventCounterText {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #323130;
    padding: 13px 0px 9px 0px;
    float: left;
}

.eventsZeroState {
    display: flex;
    flex-direction: column;
    align-self: center;
    justify-content: center;
    text-align: center;
    margin-top: 16px;
}

.eventSettingsList {
    overflow: auto;
    height: 100%;
    width: 100%;
}

.eventSettingsList table {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.eventSettingsList thead {
    width: 100%;
}

.eventSettingsList tbody {
    width: 100%;
    max-height: calc(100vh - 400px);
    overflow-x: hidden;
    overflow-y: auto;
}

.eventSettingsList tr {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 9px;
    cursor: pointer;
}

.eventSettingsList tr:not(.eventSettingsListHeader):hover  {
    background-color: rgb(243, 242, 241);
}

.eventSettingsList th:first-child,
.eventSettingsList th:nth-child(2) {
    display: flex;
    flex-direction: row;
    padding: 13px 0px;
    align-items: center;
    color: #323130;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    width: 325px;
    overflow: hidden;
}

.eventSettingsList td:first-child,
.eventSettingsList td:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    width: 325px;
    height: 42px;
    overflow: hidden;
}

.eventSettingsListHeader th:first-child {
    display: flex;
    flex-direction: row;
    gap: 4px;
}

.eventSettingsListSort {
    color: #252423;
}

tr.clarityEvent, 
tr.disabledClarityEvent {
    border-bottom: 1px solid #EDEBE9;
    padding: 8px 0 8px 8px;
}

.eventIconContainer {
    display: flex;
    align-items: center;
}

.eventIconBackground {
    background-color: #EAEAFF;
    color: #9692FF;
    border-radius: 28px;
    height: 28px;
    width: 28px;
    justify-content: center;
    align-items: center;
    display: flex;
    margin-right: 12px;
}

.eventIconBackground svg {
    width: 25px;
}

.eventSettingsEventName {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    color: #0078D4;
}

.editEventSettingsColumn {
    width: 61%;
    height: 42px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-start;
}

.editEventSettingsColumn > .ms-layer {
    position: absolute;
}

.editEventSettingsColumn > .ms-TooltipHost {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.editEventSettings {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 160px;
    justify-content: center;
}

.eventEditButtonContainer {
    width: 75px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.eventEditButton {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    background: transparent;
    padding: 0;
}

.editEventDeleteButtonContainer {
    width: 75px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.editEventDeleteButton {
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
}

.editEventDeleteButton > span {
    justify-content: flex-start;
}

.editEventDeleteButton > span > i {
    margin-left: 0;
}

.eventState {
    width: 75px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #0078D4;
    cursor: pointer;
}

.eventState.disabled {
    color: rgb(210, 208, 206);
}

tr.disabledClarityEvent {
    color: #A19F9D;
    cursor: default;
}

.eventDetails {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 13px 12px;
    gap: 4px;
    width: 325px;
    height: 42px;
}

.eventManagerModal {
    overflow: hidden;
    background-blend-mode: color, luminosity;
    backdrop-filter: blur(120px);
    border-radius: 7px;
    max-width: 1100px;
    width: 100%;
    max-height: 658px;
    height: 100%;
}

.eventManagerModal > .ms-Modal-scrollableContent  {
    position: absolute;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.eventManagerHeader {
    max-width: 1100px;
    height: 60px;
    padding: 10px 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #EDEBE9;
}

.eventManagerEditHeader {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    float: left;
}

.eventManagerExitButton {
    align-self: center;
    color: #323130;
}

.eventManagerEditTitle {
    display: flex;
    flex-direction: row;
    gap: 7px;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    color: #323130;
}

.eventManagerEventName {
    font-weight: 600;
}

.eventManagerTextbox {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 320px;
    border: 1px solid #605E5C;
    border-radius: 2px;
}

.eventManagerTextbox .ms-TextField-wrapper {
    width: 100%;
}

.eventManagerTextbox .ms-TextField-fieldGroup {
    background: none;
    border: none;
    border-radius: 0;
}

.eventManagerTextboxInput {
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #252423;
}

.eventManagerEditIcon {
    margin: 4px;
    width: 36px;
    height: 42px;
    cursor: pointer;
    color: #252423;
}

.eventManagerContainer {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    height: calc(100% - 60px);
    background: rgba(255, 255, 255, 0.5);
    border-radius: 0px 0px 7px 7px;
}

.eventCatalogue {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding-right: 8px;
    gap: 4px;
    width: 50%;
    height: 100%;
    border-radius: 0px 0px 0px 7px;
}

.eventCatalogueContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    gap: 12px;
    width: 100%;
    height: 100%;
    flex-grow: 1;
}

.eventCataloguePivot {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0;
    gap: 8px;
    align-self: stretch;
}

.eventCataloguePivot [role='tabpanel'] {
    width: 0;
}

.eventCataloguePivotItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px 8px;
    width: 97px;
    height: 44px;
}

.eventCatalogueSearchBox {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 6px 8px;
    margin: 12px;
    max-width: 390px;
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #605E5C;
    border-radius: 2px;
}

.eventCatalogueSearchBox .ms-SearchBox-iconContainer {
    color: #616161;
}

.eventCatalogueDivider {
    width: 100%;
    height: 1px;
    background: #EDEBE9;
    align-self: stretch;
}

.eventCatalogueAddPrompt {
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: flex-end;
    color: #323130;
    align-self: stretch;
}

.eventCatalogueLoading {
    align-self: center;
}

.eventCatalogueDetailsList {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 22px;
    width: 100%
}

.eventSettingsDetailsLoading {
    width: 100%;
}

.eventSettingsDetailsContainer {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 50%;
    height: 100%;
    background: #F3F2F1;
    border: 1px solid #E1DFDD;
    box-shadow: inset -4px -4px 4px rgba(0, 0, 0, 0.05), inset 4px 4px 4px rgba(0, 0, 0, 0.05);
    border-radius: 0px 0px 7px 0px;
}

.eventSettingsDetailsContent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 20px;
    max-height: 540px;
    width: 100%;
    height: 100%;
}

.eventSettingsSelectedEventsLabel {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 24px;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #000000;
}

.eventSettingsAddFilterGroup {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 6px 20px;
    gap: 8px;
    width: 132px;
    height: 36px;
    border-radius: 2px;
    cursor: pointer;
}

.eventSettingsAddFilterLabel {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: flex-end;
    color: #0078D4;
}

.eventSettingsDetailsList {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.eventSettingsDetailsList.summary {
    width: 70%;
    height: 80%;
    align-items: center;
    justify-items: center;
}

.eventSettingsFooter {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 487px;
    height: 64px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.8);
    align-self: stretch;
}

.eventSettingsFooterActions {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
    height: 32px;
}

.eventSettingsButton {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 6px 20px;
    border-radius: 4px;
}

.eventSettingsNextButton {
    height: 32px;
    background: linear-gradient(280.75deg, #0078D4 0%, #9692FF 94.81%);
}

.eventSettingsNextButton.disabled {
    background-color: rgb(243, 242, 241);
    color: rgb(210, 208, 206);
}

.eventSettingsCancelButton {
    box-sizing: border-box;
    height: 32px;
    background: #FFFFFF;
    border: 1px solid #0078D4;
    color: #004578;
}

.eventDetailsBox {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #E1DFDD;
    border-radius: 4px;
}

.eventDetailsHeader {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    width: 100%;
    background: #EFF6FC;
}

.eventDetailsHeader.autoEvent {
    background: linear-gradient(307.31deg, #FAE9FF -9.47%, #DEECF9 75.93%);
}

.eventDetailsBody {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: baseline;
    padding: 12px 24px;
    gap: 10px;
    width: 100%;
    cursor: default;
}

.eventDetailsTitle {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.eventDetailsTitleCombo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.eventDetailsCategory {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    display: flex;
    align-items: center;
    color: #323130;
    cursor: default;
}

.eventDetailsLabel {
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    display: flex;
    align-items: center;
    color: #1B1A19;
    cursor: default;
}

.eventDetailsLabel > span {
    max-width: 360px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eventDetailsTooltip {
    background: transparent;
}

.eventDetailsTooltip:hover {
    background: transparent;
}

.eventDetailsButtonsCombo {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}

.eventDetailsChevron {
    cursor: pointer;
    color: #424242;
}

.eventDetailsChevron:hover {
    background-color: transparent;
}

.eventDetailsButton {
    display: flex;
    align-items: center;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.eventFilterRow {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: 10px;
    width: 511px;
    height: 32px;
    background: #FFFFFF;
}

.eventFilterDropdown {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: flex-end;
    color: #323130;
}

.eventFilterDropdown .ms-Dropdown-title {
    border: none;
}

.eventFilterDropdown .ms-Dropdown {
    width: 128px;
}

.eventFilterSearchBox {
    border: none;
    width: 312px;
}

.eventFilterSeparator {
    width: 1px;
    height: 16px;
    background: #C8C6C4;
}

.eventFilerAddSmallIcon { 
    margin-left: 3px;
}

.eventBadgeRow {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    width: 511px;
    height: 28px;   
    background: #C7E0F4;
    border-radius: 2px;
}

.eventBadgeText {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 4px 8px;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #004578;
}

.eventSummaryPage {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    overflow: hidden;
}

.eventSummaryHeaderBox {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px 8px 16px;
    gap: 4px;
    width: 100%;
    height: 68px;
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0px 4.800000190734863px 14.399999618530273px 0px #837EFF4D;
}

.eventSummaryNav {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.eventSummaryNavTitle {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 110px;
    padding: 6px 0px;
    gap: 10px;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    cursor: pointer;
}

.eventSummaryNavTitle:hover {
    font-weight: 600;
}

.eventSummaryChevron {
    padding: 12px 12px 7px;
    width: 12px;
    height: 12px;
}

.eventSummaryChevron:hover {
    background: none;
    cursor: default;
}

.eventSummaryChevron > span > i {
    font-size: 12px;
    color: #605E5C;
}

.eventSummaryNavSelected {
    display: flex;
    align-items: flex-end;
    text-align: center;
    cursor: default;
}

.eventSummaryNavAction {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 6px 20px;
    background: linear-gradient(280.75deg, #0078D4 0%, #9692FF 94.81%);
    border-radius: 8px;    
}

.eventSummaryContent {
    display: flex;
    flex-direction: row;
    height: 100%;
    background: #FAF9F8;
    border-radius: 8px;
}

.eventOverviewContainer {
    width: 100%;
    max-width: 400px;
    height: 100%;
    box-shadow: 0px 4.800000190734863px 14.399999618530273px 0px #837EFF4D;
    border-radius: 8px;
    background: #FFFFFF;
}

.smartEventSectionTitle {
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    color: #323130;
}

.smartEventSectionTitle:hover {
    color: #605E5C;
    text-decoration: none;
}

.eventOverviewAnalysis {
    display: flex;
    flex-direction: column;
    gap: 23px;
    margin: 0px 16px;
}

.eventOverviewTitle {
    padding: 22px 0px 15px 16px;
}

.eventOverviewBox {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #FFFFFF;
    border-radius: 8px;
    border: 1px solid #EAEAFF;
    box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
}

.eventAnalysisHeader {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    width: 100%;
    height: 100%;
}

.eventAnalysisHeaderText {
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: #323130;
}

.eventAnalysisSeparator {
    height: 1px;
    width: 100%;
    background: rgba(0, 0, 0, 0.1);
    mix-blend-mode: normal;
}

.eventAnalysisRow {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.eventAnalysisText {
    font-weight: 600;
    line-height: 20px;    
    color: #323130;
}

.eventAnalysisText.count {
    font-weight: 400;
}

.eventAnalysisDetails {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 16px 20px 16px;
    gap: 12px;
    width: 100%;
}

.eventSummaryBreakdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.eventWizardContent {
    height: 100%;
    background: linear-gradient(307.31deg, #FAE9FF -9.47%, #DEECF9 75.93%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 44px;
    gap: 24px;
    overflow-y: auto;
}

.eventWizardText {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
    color: #1B1A19;
}

.eventWizardGrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 25px;
}

.eventWizardSeparatorGroup {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 1012px;
}

.eventWizardSeparator {
    width: 50%;
    height: 0;   
    border: 1px solid #827DFF;
}

.eventWizardBox {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 16px;
    gap: 7px;
    width: 180px;
    max-height: 112px;
    background: #FFFFFF;
    border-radius: 8px;
}

.eventWizardBox:hover {
    cursor: pointer;
    border: 1px solid #827DFF;
    box-shadow: 0px 1.2px 3.6px rgba(0, 0, 0, 0.1), 0px 6.4px 14.4px rgba(0, 0, 0, 0.13);
}

.eventWizardBox.selected {
    border: 1px solid #827DFF;
}

.eventWizardBoxTop {
    display: flex;
    flex-direction: row;
    width: 80%;
    height: 55px;
    align-self: flex-end;
}

.eventWizardBoxCheckbox {
    box-sizing: border-box;
    width: 20px;
    border-radius: 2px;
    justify-content: flex-end;
}

.eventWizardBoxCheckbox.ms-Checkbox-label {
    margin-top: 0px;
    margin-bottom: 0px;
}

.eventWizardBoxEventIcon {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
}

.eventWizardBoxEventIcon > svg > path {
    color: #0078D4;
}

.eventWizardBoxEventIcon > .eventIconBackground {
    height: 40px;
    width: 40px;
}

.eventWizardBoxEventTitle {
    align-self: center;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    overflow-wrap: break-word;
    text-align: center;
}

.eventWizardRadioButton {
    position: relative;
    appearance: none;
    width: 15px;
    height: 17px;
    border: 1px solid #323130;
    border-radius: 50%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-self: flex-end;
}

.eventWizardRadioButton:checked {
    border: 1px solid #827DFF;
}

.eventWizardRadioButton::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: scale(0);
    transition: 80ms transform ease-in;
    box-shadow: inset 10px 10px #827DFF;
  }

.eventWizardRadioButton:checked::before {
    transform: scale(1);
}

.eventWizardBoxTop .eventWizardRadioButton {
    align-self: flex-start;
    width: 17px;
    height: 15px;
}

.eventWizardScratchOption {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    align-self: center;
    height: 70px;
}

.eventWizardAddEvent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 50px;
    width: 100%;
    height: 100%;
}

.eventWizardAddEventMessage {
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    display: flex;
    align-items: center;
    text-align: center;
}

.eventWizardFooter {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    gap: 487px;
    max-width: 1100px;
    max-height: 64px;
    border-radius: 0px 0px 7px 7px;
}

.eventWizardFooterActions {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
    height: 32px;
}

.eventWizardBackButton {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 6px 20px;
    width: 68px;
    height: 32px;
    border-radius: 2px;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #0078D4;
    cursor: pointer;
}

.eventDeletionModal {
    max-width: 560px;
    padding: 16px;
    max-width: 80%;
}

.eventDeletionModal > .ms-Modal-scrollableContent {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.eventDeletionHeader {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.eventDeletion {
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
}

.eventDeletionConfirmation {
    font-weight: 400;
    font-size: 14px;
    line-height: 19px;
    padding: 16px 0px;
}

.eventDeletionConfirmation + span {
    margin-top: -10px;
}

.eventDeletionFunnelContainer {
    width: 100%;
    border-radius: 4px;
    border: 1px solid #D1D1D1;
    background: #FAFAFA;
    padding: 8px 8px 8px 32px;
    margin-bottom: 22px;
    max-height: 124px;
    overflow-y: scroll;
}

.eventDeletionActions {
    display: flex;
    flex-direction: row;
    align-self: flex-end;
    gap: 10px
}

.eventSignalsContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 50%;
    height: 100%;
    background: #EFF6FC;
}

.eventSignals {
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
}

.eventSignalsOptions {
    display: flex;
    flex-direction: row;
    gap: 12px;
}

.eventNameContainer {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-height: 535px;
    height: 100%;
}

.eventNameBackground {
    position: absolute;
    width: 100%;
    height: 100%;
}

.eventName {
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
}

.eventNameContent {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
}

.eventNameTextField {
    width: 526px;
}

.eventNameTextField .ms-TextField-fieldGroup {
    background: transparent;
    border: 0px;
    border-bottom: 2px solid;
    border-color: #0078D4;
}

.eventNameTextField .ms-TextField-field {
    font-size: 18px;
}

.eventPageVisitsFilter {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: flex-end;
    justify-content: center;
}

.eventPageVisitsURLLabel {
    display: flex;
    width: max-content;
    height: 100%;
    align-items: center;
}

.eventPageVisitsDropdown {
    border-bottom: 1px solid;
}

.eventPageVisitsDropdown .ms-Dropdown-title {
    background: transparent;
}

.eventPageVisitsSearchBox {
    width: 220px;
    background: transparent;
    border-bottom: 1px solid;
}

.eventPageVisitsLoading {
    margin-bottom: 5px;
    width: 60px;
}

.eventPageVisitsAddButton {
    min-width: 60px;
    padding: 0;
    background: #FFFFFF;
    color: #323130;
    border: 1px solid;
}

.eventPageVisitsAddButton.disabled {
    background-color: rgb(243, 242, 241);
    color: rgb(210, 208, 206);
    border: transparent;
}

.eventPageVisitsAddButton:hover {
    background: #FFFFFF;
    color: #323130;
}

.eventCatalogueNoData {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 100%;
}

.eventCatalogueNoDataMessage {
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
}

@media only screen and (max-width: 840px) {
    .eventCataloguePivot .ms-FocusZone {
        display: flex;
        flex-direction: column;
    }

    .eventSignalsOptions {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
}

.projectsDeck .projHeader {
    padding: 6px 16px;
}

.projectsDeck .projHeader>button:first-child {
    margin-right: 12px;
}

.projectContent {
    background-color: #FAFAFA;
    overflow: auto;
    height: 100%;
    padding: 32px;
}

.projectContent table {
    overflow: visible;
    max-width: 1200px;
    background: #FFF;
    margin: auto;
    width: 100%;
}

.projectContent th, .projectContent td {
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid #EDEBE9;
    border-top: 0;
    height: 42px;
    max-width: 313px;
    min-width: 50px;
    padding: 2px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.projectContent td:nth-child(2) {
    width: 45%;
}

.projectContent td:first-child {
    width: 30%;
}

.projectContent tr:hover:nth-child(n+2) {
    cursor: pointer;
    background-color: rgb(243, 242, 241);
}

td.centerdColumn {
    justify-content: center;
    display: flex;
    align-items: center;
}

.disabledRow:hover:nth-child(n+2) {
    cursor: unset !important;
    background-color: unset !important;
}

.projectContent th {
    color: #323130;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    padding: 11px 12px;
}

.projectContent td button:first-child {
    width: 100%;
    display: flex;
}

.projectContent td button:hover,
.projectContent td button:active,
.projectContent td button:active:hover {
    text-decoration: none;
}

.projectContent .projectGridContainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(276px, 0fr));
    grid-gap: 32px;
}

.listViewCell {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    min-height: 20px;
    width: max-content;
}

.projectCard {
    background: #FFF;
    box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
    border-radius: 2px;
    width: 276px;
    height: 100%;
}

.projectCard:hover {
    box-shadow: 0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13);
}

.projectCard.isDisabled:hover {
    box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
}

.projectActions {
    justify-content: space-between;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0 12px;
    padding: 4px 0;
    border-top: 1px solid #EDEBE9;
    min-height: 42px;
}

.projectBody {
    color: #0078D4;
    width: 100%;
    font-weight: 600;
    font-size: 12px;
    padding: 0px 12px;
}

.projectBody>div {
    padding-top: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.projectBody>div:last-child {
    padding-bottom: 24px;
}

.projectTitleContainer {
    display: flex;
    vertical-align: middle;
}

.projectTitleContainer>div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.projectTitleContainer i {
    font-size: 16px;
    width: 32px;
    text-align: center;
    flex-shrink: 0;
}

.projectIcon {
    background: url(https://claritystatic.azureedge.net/images/projectTypes.png) no-repeat 0 0;
    width: 16px;
    height: 16px;
    background-position-y: center;
    margin-right: 8px;
}

.mobileIcon {
    background-position-x: -24px;
}

.projectCard.isDisabled .projectActions i {
    color: gray;
}

.projectCard.isDisabled .projectBody {
    color: gray;
}

.projectCard.isDisabled .projectTitle {
    color: gray;
}

.projectCard.isDisabled .projectBody:hover {
    cursor: unset;

}

.verifyEmailModal {
    border-radius: 2px !important;
    min-width: 560px;
    min-height: 172px;
    padding: 24px;
}

.verifyEmailModal .modalHeader {
    margin: 0 0 20px;
}

.verifyEmailModal .verifyingStatusContainer {
    padding: 8px 12px;
    background-color: rgb(243, 242, 241);
    display: flex;
    min-height: 32px;
}

.verifyEmailModal .verifyingStatusContainer span {
    margin-left: 8px;
    font-size: 12px;
}

.verifyEmailModal .verificationStatus {
    margin-top: 20px;
}

.verifyEmailModal .modalFooter {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.verifyEmailModal .modalFooter .ms-Button--primary{
    margin-right: 8px;
}

.verifyEmailLink {
    text-decoration: underline;
    font-size: 12px;
    margin-left: 4px;
}

.verifyCountDown {
    display: flex;
    flex-direction: row;
}

.verifyCountDown .ms-Spinner{
    margin-right: 8px;
}

.projectTitle {
    color: #323130;
}

.addNewProjectContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 121px;
}

.addNewProjectContainer:hover,
.projectBody:hover {
    cursor: pointer;
}

.addNewProjectText {
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
}

.addNewProjectIcon {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    width: 32px;
    height: 32px;
    color: #0078D4;
}

.welcomeBannerContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 100%;
}

.welcomeBannerDescription {
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    margin: 16px 0px;
}

.projectModalContainer{
    width: 480px;
    overflow: hidden;
}

.ms-Dialog-main.projectModalContainer {
    border-radius: 2px;
    min-height: 0;
}

.addProjectContainer {
    padding: 0 16px 16px;
}

.addProjectContainer .name,
.addProjectContainer .website,
.addProjectContainer .siteCategory {
    min-height: 62px;
    font-weight: 500;
    padding-bottom: 12px;
}

.addProjectContainer > span {
    line-height: 20px;
}

.confirmEmailContent:first-child {
    display: flex;
    margin: 0 40px 70px 40px;
}

.promoEmailsCard .checkEmailModal,
.confirmEmailContent .checkEmailModal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: 24px;
    margin-top: 70px;
}

.checkEmailModal .emailModalTitle {
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
}

.checkEmailModal .ms-Button--primary {
    max-width: fit-content;
}

.checkEmailModal .skipLink {
    margin-top: 24px;
    text-decoration: underline;
}

 
.deleteUETProjectWarning {
    margin-top: 16px;
}

.confirmEmailContainer .confirmEmailButton {
    color: white;
    border-color: #0078D7;
    background-color: #0078D7;
}

.addProjectButtonContainer,
.deleteProjectButtonContainer {
    display: flex;
    justify-content: center;
}

.addProjectButtonContainer {
    margin-top: 4px;    
}

.addProjectButtonContainerInstall {
    margin-top: 26px;
    margin-bottom: 18px;
    display: flex;
}

.addProjectButtonContainerInstall .loadingContainer {
    max-width: 145px;
}

.confirmEmailContainerInstall {
    overflow: hidden;
}

.deleteProjectButtonContainer {
    margin-top: 16px;
}

.addProjectButtonContainer > *:first-child,
.addProjectButtonContainerInstall > *:first-child,
.deleteProjectButtonContainer > *:first-child {
    margin-right: 8px;
}

.newProjectForm {
    overflow: hidden;
}

.webContentPivot {
    width: 100%;
}

.appContentPivot {
    margin-top: 16px;
    color: #605E5C;
}

.howtoInstallContainer {
    margin-top: 57px;
}

.howtoInstallContainer.gtm {
    margin-top: 134px;
}

.howtoInstallContainer .ms-Spinner {
    align-items: end;
    flex-flow: nowrap;
    justify-content: start;
    margin: 24px 0 32px 0;
}

.howtoInstallContainer .ms-Spinner div:first-child {
    margin-right: 8px;
}

.addProjHeaderInstall {
    margin-bottom: 16px;
    font-size: 24px;
    line-height: 32px;
    color: #323130;
}

.addProjHeaderInstall.confirmEmail {
    margin-top: 126px;
}   

.projectModalContainerInstall {
    width: 880px;
    overflow: hidden;
}

.mainContentInstall {
    display: flex;
    width: 370px;
}

.mainContentInstall.projectTypeContainer {
    flex-direction: column;
}

.mainContentInstall.confirmEmail {
    display: block;
}

.projectTypeContainer .projectCreationPivots {
    margin-top: 26px;
}

.projectTypeContainer>span {
    color: #605E5C;
}

.howtoInstallPivot {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.howtoInstallPivot .ms-FocusZone {
    display: flex;
    justify-content: center;
}

.newProjectFormContainer {
    display: flex;
    padding: 0 40px 40px 48px;
}

.projectModalContainerInstall {
    width: min-content;
}

.sideContentInstall {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 95px 0 37px 42px;
}

.sideContentInstall img {
    height: 310px;
    width: 380px;
}

.sideContentInstall.gtm {
    margin-top: 95px;
}

.websiteLabel {
    font-weight: 600;
    margin-top: 16px;
}

.webContentLabel {
    font-weight: 600;
    margin-top: 5px;
    margin-bottom: 5px;
}

.webContentPivot .name {
    margin-top: 24px;
}

.sideContentInstall > * {
    justify-content: center;
    display: flex;
}

.sideContentInstall span {
    font-weight: 600;
    margin-bottom: 16px;
}

.promoEmailsCardContainer,
.firstExperience {
    display: flex;
    align-content: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #E5E5E5;
}

.promoEmailsCard,
.firstExperienceWindow {
    width: min-content;
    height: min-content;
    background-color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 8px;
    box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
}

.promoEmailsCard {
    display: flex;
    padding: 0 40px 70px 40px;
}

.promoCardIllustration {
    margin: 95px 0 37px 42px;
    height: 310px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sideContentInstall.maxImage {
    margin: unset
}

.firstRunSide.maxImage {
    height: 300px;
    width: 350px;
}

.firstRunSide.sideContentInstall.maxImage img {
    position: relative;
    height: fit-content;
    width: fit-content;
    margin-right: -90px;
    z-index: -1;
}

.sideContentInstall.maxImage {
    height: 440px;
    width: 400px;
}

.newProjectSide.maxImage img {
    height: 100%;
    width: 100%;
    margin-right: -78px;
}

.newProjectSide {
    position: relative;
    height: 310px;
    width: 380px;
}

.newProjectSide img {
    width: 100%;
    height: 100%;
    position: absolute;
}

.newProjectSide .fadeIn {
    animation: fadeIn 1s;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }

.newProjectSide .fadeOut {
    animation: fadeOut 0.5s;
    opacity: 0;
}

@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
  }

/* Exit Survey */
.exitSurveyModal {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px 0px 24px;
    position: relative;
    width: 560px;
    background: #FFFFFF;
    box-shadow: 0px 4.8px 14.4px rgba(0, 0, 0, 0.18), 0px 25.6px 57.6px rgba(0, 0, 0, 0.22);
    border-radius: 2px;
    overflow-x: hidden;
}

.exitSurveyModal > .ms-Modal-scrollableContent  {
    width: 100%;
    overflow-x: hidden;
 }

.exitSurveyDeleteProjectTitle {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 16px 24px 20px;
    gap: 8px;
    width: 560px;
    height: 64px;
    background: #FFFFFF;
    order: 0;
    align-self: stretch;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: #323130;
}

.exitSurveyDeleteProjectPrompt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px 24px;
    height: 100%;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #323130;
    order: 1;
    align-self: stretch;
}

.exitSurveyContactSupport {
    margin-bottom: 0px;
}

.exitSurveyDeletionReasons {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 16px 24px;
    gap: 24px;
    order: 2;
}

.exitSurveyDeletionReason {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;
    width: 100%;
}

.exitSurveyDeletionReasonGroup {
    width: 100%;
}

.exitSurveyDeletionReasonCheckbox {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    height: 20px;
    border: 1px #323130;
    border-radius: 2px;
}

.exitSurveyDeletionReasonRow {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 8px;
    gap: 8px;
    width: 100%;
}

.exitSurveyDeletionAction {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #323130;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 36px;
}

.exitSurveyDeletionText {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.exitSurveyTechnicalIssuesDropdown {
    box-sizing: border-box;
    background: #FFFFFF;
    border: 2px solid #0078D4;
    border-radius: 2px;
    width: 100%;
}

.exitSurveyTextBox {
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px #605E5C;
    border-radius: 2px;
    width: 100%;
}

.exitSurveyActionButtonsContainer {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 0px 24px;
    gap: 8px;
    height: 48px;
    bottom: 24px;
}

.exitSurveyDeleteButton {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 6px 20px;
    width: 82px;
    height: 32px;
    background: #0078D4;
    border-radius: 2px;
}

.exitSurveyCloseButton {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 6px 20px;
    width: 75px;
    height: 32px;
    background: #FFFFFF;   
    border: 1px solid #8A8886;
    border-radius: 2px;
    flex: none;
    order: 1;
    flex-grow: 0;
}

.exitSurveyLinkText {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-decoration-line: underline;
    color: #0078D4;
}

.exitSurveyTroubleshootInstallation {
    display: flex;
    flex-direction: row;
    gap: 8px
}

.exitSurveyNoUnderline {
    text-decoration-line: none;
    text-decoration-line: underline;
}

.rebrandedLandingFooter_rebrandedLandingFooterContainer__EAD9C + div {
    background: url("data:image/svg+xml,<svg width=\"1440\" height=\"401\" viewBox=\"0 0 1440 401\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1440 228.36H0V60.4003C57.6 55.9003 400.2 49.4043 542.4 52.4043C684.6 55.4043 950.546 27.1758 1070 27.1758C1242.2 27.1758 1340.4 61.4043 1440 48.4043V228.36Z\" fill=\"url%28%23paint0_linear_292_25%29\"/><path d=\"M1440 248.414H0V64.9138C57.6 60.4138 322.8 24.1762 465 27.1762C607.2 30.1762 934.146 59.9138 1053.6 59.9138C1225.8 59.9138 1340.4 61.4132 1440 48.4132V248.414Z\" fill=\"url%28%23paint1_linear_292_25%29\"/><path d=\"M1440 400.176H0V51.1758C57.6 46.6758 397.2 52.6758 539.4 55.6758C681.6 58.6758 935.346 67.1758 1054.8 67.1758C1227 67.1758 1340.4 59.6758 1440 46.6758V400.176Z\" fill=\"url%28%23paint2_linear_292_25%29\"/><defs><linearGradient id=\"paint0_linear_292_25\" x1=\"725.5\" y1=\"58.1763\" x2=\"1805.5\" y2=\"80.1764\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"%2397C7FD\"/><stop offset=\"1\" stop-color=\"%23F3FCFF\"/></linearGradient><linearGradient id=\"paint1_linear_292_25\" x1=\"471\" y1=\"35.9043\" x2=\"1547.57\" y2=\"119.715\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"%23B8B6FF\"/><stop offset=\"1\" stop-color=\"%2383ADFF\"/></linearGradient><linearGradient id=\"paint2_linear_292_25\" x1=\"720\" y1=\"46.6758\" x2=\"720\" y2=\"260.176\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"%235AB2F1\"/><stop offset=\"0.5625\" stop-color=\"%23308ADB\"/><stop offset=\"1\" stop-color=\"%23025EC4\"/></linearGradient></defs></svg>");
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 86px;
    padding-top: 152px;

    button {
        color: black;
    }
}

.webTrafficExplorer {
  height: calc(100% - 49px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 100%;
}

.webTrafficExplorer .webTrafficExplorerContainer {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #ddefff 0%, #f2f9ff 100%);
  overflow: auto;
}

/* Initial view rules */

.webTrafficLandingView {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* gap: 60px; */
}

.webTrafficLandingView .bannerImg {
  height: calc(180 / 1024 * 100vw);
  max-height: 345px;
  min-height: 180px;
  margin-top: 60px;
}

.webTrafficTitleContainer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
  margin-top: 60px;
  padding: 0px 32px;
}

.webTrafficTitle {
  color: #323130;
  text-align: center;
  font-size: min(calc(0.0625 * 100vw), 123px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 5px;
}

.webTrafficSubtitle {
  color: #323130;
  text-align: center;
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
}

.webTrafficSearchBar {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 46px;
}

.webTrafficSearchBar.resultsView {
  transition: box-shadow 0.5s ease;
  transition: background-color 0.5s ease;
  box-shadow: 0px 4.800000190734863px 14.399999618530273px 0px
    rgba(131, 126, 255, 0.3);
  background-color: #faf9f8;
  margin-top: 0px;
}

.webTrafficSearchBar .searchBoxContainer {
  padding: 14px 0px;
}

.webTrafficSearchBox {
  margin-right: 16px;
  height: 40px;
}

.webTrafficSearchBox.error {
  border-color: #d13438;
}

.webTrafficSearchBar .errorMessage {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-top: 2px;
  font-size: 12px;
  color: #d13438;
  line-height: 16px;
}

.webTrafficSearchBar .searchButton {
  border-radius: 4px;
  background: linear-gradient(325deg, #0078d4 0%, #9692ff 100%);
  border: 1px solid transparent;
  padding: 9px 20px;
  height: auto;
}

.webTrafficSearchBar .searchButton.is-disabled {
  background: #edebe9;
}

.webTrafficExplorer .footer {
  margin-top: auto;
  width: 100%;
}

.webTrafficExplorer .webTrafficUpsell {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0px 32px 48px;
  font-size: 12px;
}

.webTrafficUpsell .collapsibleContentHeader {
  gap: 12px;
}

.webTrafficUpsell .collapsibleContentTitle {
  color: #323130;
  font-weight: 600;
  text-decoration-line: underline;
}

.webTrafficUpsell .webTrafficUpsellBody {
  padding-left: 16px;
}

.webTrafficUpsell .webTrafficUpsellBody li {
  color: #201f1e;
}

/* Results rules */

.webTrafficResultsView {
  margin-top: auto;
  display: flex;
  flex-direction: column;
}

/* No data rules */

.webTrafficResultsView .noData {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
  padding: 110px 0px;
  background-color: transparent;
}

.webTrafficResultsView .noData .errorMessage {
  max-width: 360px;
  text-align: center;
}

/* Analysis results rules */

.analysisResults {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 56px 60px;
}

.analysisCardsContainer {
  margin-left: auto;
  margin-right: auto;
}

.analysisCardsContainer .titleContainer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.analysisCardsContainer .title {
  color: #020057;
  font-size: 24px;
  font-weight: 600;
}

.analysisCardsContainer .beta {
  padding: 3px 8px;
  border-radius: 4px;
  background: #020057;
  color: white;
  font-size: 12px;
  font-weight: 600;
}

.analysisCardsContainer .subtitle {
  color: #605e5c;
  font-size: 12px;
  line-height: 16px;
  padding-top: 8px;
}

.analysisCardsContainer .siteCards {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 24px 0px;
  flex-wrap: wrap;
}

/* Individual cards rules */

.webAnalysisCard {
  border-radius: 8px;
  width: 444px;
  height: 474px;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: 0px 4.800000190734863px 14.399999618530273px 0px
    rgba(131, 126, 255, 0.3);
}

.webAnalysisCard .cardTitle {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.webAnalysisCard .cardBody {
  padding: 12px 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.webAnalysisCard .cardBody.grow {
  flex-grow: 1;
}

.webAnalysisCard .cardBody .bodyTitle {
  font-size: 12px;
  color: #605e5c;
}

.webAnalysisCard .cardBody .bodyFooter {
  font-size: 12px;
  color: #605e5c;
  margin-top: auto;
}

.webAnalysisCard .cardBody.trafficCard {
  padding-top: 0px;
}

.webAnalysisCard .cardBody.rankingCard {
  gap: 24px;
}

.webAnalysisCard .cardFooter {
  padding: 0px 32px;
}

.webAnalysisCard .webAnalysisUpsell {
  border: 1px solid #eaeaff;
  border-radius: 8px;
}

.webAnalysisCard .webAnalysisUpsell .upsellContent {
  display: flex;
  padding: 16px 10px;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}

.webAnalysisCard .webAnalysisUpsell .textContent {
  display: flex;
  flex-direction: column;
  max-width: 240px;
}

.webAnalysisCard .webAnalysisUpsell .upsellTitle {
  color: #323130;
  font-weight: 600;
  line-height: 20px;
}

.webAnalysisCard .webAnalysisUpsell .upsellDescription {
  color: #323130;
  font-size: 12px;
  font-weight: 400;
}

.webAnalysisCard .webAnalysisUpsell .upsellButton {
  border-radius: 4px;
  background: linear-gradient(281deg, #0078d4 0%, #9692ff 94.81%);
  border: 1px solid transparent;
  padding: 8px 12px;
  height: auto;
  color: white;
}

.webAnalysisCard .webAnalysisUpsell .sparkle:first-child {
  position: relative;
  width: 0px;
  height: 0px;
  top: -10px;
  left: -10px;
}

.webAnalysisCard .webAnalysisUpsell .sparkle:last-child {
  position: relative;
  width: 0px;
  height: 0px;
  bottom: 13px;
  left: 366px;
}

.trafficItem {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.trafficLabel,
.percentageLabel {
  font-size: 12px;
  line-height: 16px;
}

.percentageLabel .percentage {
  font-weight: 600;
}

.trafficValue {
  display: flex;
  gap: 4px;
}

.trafficBar {
  height: 20px;
  border-radius: 4px;
}

.trafficBar.site {
  background-color: #0078d4;
}

.trafficBar.page {
  background-color: #01a382;
}

.trafficBar.lastValue {
  background-color: transparent;
  border: 1px dashed #0078d4;
}

.trafficCount {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.trafficCount.red {
  color: #d40000;
}

.trafficCount.green {
  color: #008a00;
}

.regionItem {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.regionIcon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
}

.percentageItem {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-grow: 1;
}

.percentageBar {
  display: flex;
  gap: 2px;
}

.percentageBar .filledBar {
  height: 20px;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}

.percentageBar .emptyBar {
  height: 20px;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  background-color: #dbdbdb;
}

.emptyBar.default {
  background-color: #dbdbdb;
}

.filledBar.site {
  background-color: #0078d4;
}

.filledBar.page {
  background-color: #01a382;
}

.filledBar.otherWebsites,
.emptyBar.otherWebsites,
.trafficBreakdownLegendLabel .legendColor.otherWebsites {
  background-color: #837eff;
}

.filledBar.searchEngines,
.trafficBreakdownLegendLabel .legendColor.searchEngines {
  background-color: #ed36ff;
}

.rankItem {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.rankItem .title {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.rankCard {
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  border-radius: 8px;
  border: 1px solid #deecf9;
  width: 100%;
}

.rankCard .rankValue {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rankCard .rankValue .flag {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
}

.rankCard .rankValue .value {
  color: #020057;
  font-size: 28px;
  font-weight: 600;
}

.rankCard .label {
  color: #020057;
  text-align: center;
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
}

.otherWebsitesSection {
  display: flex;
  flex-direction: column;
  padding: 12px 0px;
  gap: 8px;
}

.otherWebsitesSection .otherWebsitesTitle {
  color: #1b1a19;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.otherWebsitesSection .otherWebsitesList {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 20px;
  border-radius: 8px;
  border: 1px solid #deecf9;
}

.trafficBreakdownLegend {
  display: flex;
  justify-content: space-between;
}

.trafficBreakdownLegendLabel {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trafficBreakdownLegendLabel .legendColor {
  width: 12px;
  height: 12px;
  border-radius: 8px;
}

.trafficBreakdownLegendLabel span {
  font-size: 12px;
}

.trafficBreakdownLegend .legendPercentage {
  color: #323130;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
}

/* Responsivness rules */

@media only screen and (min-width: 1033px) {
  .analysisCardsContainer {
    max-width: 912px;
  }
}

@media only screen and (min-width: 1501px) {
  .analysisCardsContainer.maxWidth {
    max-width: 1380px;
  }
}

@media only screen and (max-width: 1033px) {
  .analysisCardsContainer {
    max-width: 445px;
  }
}

@media only screen and (min-width: 781px) {
  .webTrafficSearchBox {
    width: 522px;
  }
}

@media only screen and (max-width: 780px) {
  .webTrafficSearchBox {
    width: 400px;
  }
}

@media only screen and (max-width: 600px) {
  .webTrafficSearchBar .searchBoxContainer {
    padding: 14px 32px;
    width: 100%;
  }

  .webTrafficSearchBox {
    max-width: 400px;
    flex-grow: 1;
  }
}

@media only screen and (max-width: 400px) {
  .webTrafficSearchBar .searchButton {
    display: none;
  }

  .webTrafficSearchBox {
    margin-right: 0px;
  }
}

/* antd styles */
html,
body {
  width: 100%;
  height: 100%;
}
input::-ms-clear,
input::-ms-reveal {
  display: none;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
@-ms-viewport {
  width: device-width;
}
body {
  font-variant: tabular-nums;
  font-feature-settings: 'tnum';
}
[tabindex='-1']:focus {
  outline: none !important;
}
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
input[type='text'],
input[type='password'],
input[type='number'],
textarea {
  -webkit-appearance: none;
}
b,
strong {
  font-weight: bolder;
}
a {
  color: #0078D7;
  text-decoration: none;
  background-color: transparent;
  outline: none;
  cursor: pointer;
  transition: color 0.3s;
  -webkit-text-decoration-skip: objects;
}
a:hover {
  color: #2494e3;
}
a:active {
  color: #005bb0;
}
a:active,
a:hover {
  text-decoration: none;
  outline: 0;
}
a:focus {
  text-decoration: none;
  outline: 0;
}
a:focus-visible[data-is-focusable='true'] {
  outline: auto;
}
img {
  vertical-align: middle;
  border-style: none;
}
svg:not(:root) {
  overflow: hidden;
}
a,
area,
button,
[role='button'],
input:not([type='range']),
label,
select,
summary,
textarea {
  touch-action: manipulation;
}
table {
  border-collapse: collapse;
}
::selection {
  color: #fff;
  background: #0078D7;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, textarea {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
	-webkit-tap-highlight-color: transparent;
    color: inherit;
    line-height: inherit;
}

.rowFlex {
    display: flex;
    flex-direction: row;
}

.columnFlex {
    display: flex;
    flex-direction: column;
}

.justifyCenter {
    justify-content: center;
}

.alignCenter {
    align-items: center;
}

.alignBaseline {
    align-items: baseline;
}

.flexAuto {
    flex: auto;
}

.textEllipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.collapsibleContentHeader {
    display: flex;
    cursor: pointer;
    user-select: none;
    align-items: center;
}

/* adding some unnecessary specification to make the selector stronger*/
html body .wholePage .hidden {
    display: none;
}

strong, .strong {
    font-weight: 600;
}

.info {
    white-space: pre-line;
}

.wholePage {
    width: 100%;
    line-height: 1.4;
    font-size: 14px;
}

::-webkit-scrollbar {
    width: 10px;
    height: 12px;
}

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

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: solid 2px #fff;
    background: #bcbab7;
    min-height: 40px;
}

::-webkit-scrollbar-thumb:hover {
    background: #99a3a6;
}

.separator {
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
}

.skipToContent {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    padding: 12px;
    box-sizing: border-box;
    z-index: 1001;
    transform: translate(-100%);
}

.skipToContent:focus {
    border: 2px black dashed;
    transform: translate(0);
}

.header {
    padding: 8px 16px;
    display: flex;
    align-items: center;
    font-size: 14px;
}

.darkHeader:not(.newHomepage .newHeader) {
    background-color: #0078D4;
    fill: #FFFFFF;
}

.header a {
    color: unset;
    position: relative;
}

.header i {
    color: #323130;
}

.header a.ms-Button:not(#feedbackButton):not(#blogLink a) {
    margin-left: 16px;
}

.darkHeader *,
.darkHeader i {
    background-color: transparent;
    color: #FFFFFF;
}

.header button {
    height: 32px;
}

.header.newHeader .ms-Button--commandBar {
    margin-right: 16px;
    margin-left: 16px;
}

.darkHeader.newHeader .ms-Button--commandBar {
    background: transparent;
}

.header a.ms-Button--commandBar .ms-Button-textContainer {
    height: 32px;
    color: #323130;
    display: flex;
    align-items: center;
}

.header #signInIdentity {
    margin-left: 32px;
}

.identity {
    overflow: hidden;
    white-space: nowrap;
}

.identity button:last-child {
    margin-left: 16px;
    overflow: hidden;
}

.identity button span {
    max-width: 200px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 18px
}

.identity button svg {
    margin: 0 8px 0;
}

.identity .menuSpacer {
    margin: 0 4px;
}

.profileSpacer {
    margin: 0 8px;
}

.leftSpacer8 {
    margin-left: 8px;
}

.header:not(.newHeader.darkHeader) #headerSignIn {
    color: #006abe;
    border-color: #006abe;
}

.clarityLogo span {
    padding-bottom: 2px;
}

.darkHeader:not(.newHeader) #headerSignIn:hover {
    background-color: rgba(255,255,255,0.1);
}

.newHeader.darkHeader #headerSignIn {
    border: none;
}

.newHeader.darkHeader #headerSignIn:not(:active):not(:hover) {
    background: white;
}

.newHeader.darkHeader #headerSignIn .ms-Button-label {
    color: #3A6BE4;
}

.darkHeader #headerGetStarted:not(:active):not(:hover) {
    background-color: rgb(0, 120, 212);
}

.darkHeaderButton ~ .ms-Button:hover,
.darkHeader .hamburger:hover {
    background-color: #106ebe;
    color: white;
}

.darkHeaderButton ~ .ms-Button:active,
.darkHeader ~ .hamburger:active  {
    background-color: #0f64ad;
}

.newHeader .darkHeaderButton ~.ms-Button i,
.newHeader .darkHeaderButton ~ .ms-Button:hover i {
    background: transparent;
    color: white;
}

.darkHeader .ms-TooltipHost .ms-Button:hover {
    background-color: #106ebe;
}

#headerProjects button:first-child > span,
.clarityLogo > span {
    position: relative;
}

#blogLink {
    margin-right: 24px;
}

#blogLink a:focus::after {
    outline: none;
    text-decoration: underline;
    border-bottom: 1px solid black; 
}

#blogLink a:first-child > span {
    position: relative;
}

#headerProjects {
    margin-left: 28px;
}

#headerProjects button:first-child > span:before,
#blogLink a:first-child > span:before,
.clarityLogo > span::before {
    background: black;
    content: "";
    display: none;
    height: 2px;
    position: absolute;
    width: 100%;
    bottom: -3px;
}

.darkHeader #headerProjects button:first-child > span:before,
.clarityLogo.darkHeaderButton > span::before  {
    background: #FFFFFF;
}

.header.darkHeader.selectedSession {
    display: none;
}

#headerProjects button:first-child:hover span:before,
#blogLink a:first-child:hover > span:before,
.clarityLogo:hover span::before {
    display: block;
}

.clarityLogo:hover span::before {
    bottom: -5px;
}

.clarityLogo:focus-visible {
    outline: 1px solid;
}

.msLogo{
    margin-right: 8px;
    width: 92px;
}

.msLogo img {
    display: block;
}

.msLogo:focus-visible {
    outline: 1px solid;
}

.flexSpacer {
    flex: 1 0 auto;
}

a.clarityLogo {
    font-size: 20px;
    color: black;
    margin: 0 8px;
    position: relative;
    line-height: 28px;
}

.clarityLogo.darkHeaderButton {
    color: white;
}

a.clarityLogo.darkHeaderButton:before {
    background-color: white ;
}

.hamburger {
    margin-right: 18px;
}

.hamburgerPanel .userInfo {
    width: calc(100% - 12px);
    overflow: hidden;
}

.hamburgerPanel .userInfo > * {
    overflow: hidden;
    text-overflow: ellipsis;
}

.hamburgerPanel .identityButton {
    width: 100%;
    margin-bottom: 9px;
}

.panelLogos {
    display: flex;
    align-items: center;
    flex: 1;
}

.panelLogos + button.ms-Panel-closeButton {
    margin: 0 4px 0;
    width: 24px;
    height: 24px;
    align-self: end;
}

.hamburgerPanel .ms-Nav-groupContent {
    margin-bottom: 0;
}

.hamburgerPanel .feedbackButton {
    line-height: 44px;
    cursor: pointer;
    width: 100%;

}

.hamburgerPanel .feedbackButton.leftPadding {
    padding-left: 32px;
}

.hamburgerPanel .feedbackButton:hover {
    background: rgb(243, 242, 241);
    color: rgb(0, 120, 212);
}

.confirmEmailModal{
    height: 394px;
    width: 480px;
    overflow: hidden;
    text-align: center;
}

.confirmEmailModal a {
    color: black;
    text-decoration: underline;
}

.confirmEmailModal .title {
    font-size: 32px;
    line-height: 42px;
    text-align: center;
    padding: 40px 32px;
}

.confirmEmailContainer {
    max-height: 213px;
    overflow: hidden;
    display: flex;
    text-align: center;
    flex-direction: column;
}

.confirmEmailContainer .email {
    min-height: 86px;
    padding: 0px 90px 32px 90px;
}

.acceptTOSContainer a, 
.content .setupLearnMore {
    margin-left: 4px;
}

.content .setupLearnMore {
    margin-right: 4px;
}

.content .setupUETWarning {
    margin: 16px 0;
}

.summary {
    height: 100%;
}

.confirmEmailContainer .acceptTOSContainer {
    padding: 0 125px;
    display: flex;
}

.confirmEmailButtonContainer {
    padding: 28px 24px;
}

.confirmEmailButtonContainer.confirmEmail {
    padding: 48px 0 16px 0
}

.confirmEmailContainerInstall .addProjHeaderInstall {
    margin-top: 134px;
}

.appsBeta {
    background-color: #0078D4;
    width: 48px;
    height: 16px;
    border-radius: 12px;
    color: white;
    font-size: 11px;
    line-height: 15px;
}

.mainContentInstall .email {
    margin-bottom: 11px;
}

.mainContentInstall .ms-TextField {
    height: 54px;
}

.acceptTOSContainer.confirmEmail a,
.promoConsentNotice a {
    color: #0078D4;
    text-decoration: underline;
}

.acceptTOSContainer.confirmEmail {
    display: flex;
}

.acceptTOSContainer.confirmEmail.withMargin {
    margin-bottom: 12px;
}

.announcementsBanner {
    position: fixed;
    bottom: 0;
    z-index: 100;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.viewTermsButton {
    height: 32px;
}

a.clarityLogo:before {
    height: 18px;
    width: 1px;
    background-color: black;
    content: "";
    display: block;
    position: absolute;
    left: -8px;
    top: 5px;
}

.ms-Callout-container > .ms-Callout {
    border: 1px solid lightgray;
    margin-top: 9px;
    z-index: 100;
}

.ms-Callout-container > .suggestionContainer.ms-Callout {
    margin-top: 0px;
}

.ms-ComboBox-optionsContainer > .ms-ComboBox-option:hover,
.ms-ComboBox-optionsContainer > div > .ms-ComboBox-option:hover {
    background: #f3f2f1;
}

.separate:before {
    background-color: lightgray;
    height: 1px;
    content: "";
    display: block;
    position: absolute;
    width: 90%;
    left: 5%
}

.separate i {
    color: #000000;
    margin-left: 16px;
}

.separate button {
    padding: 8px 0;
    height: fit-content;
}

.userInfo {
    margin: 12px 12px 12px 8px;
    display: grid;
    grid-template-columns: 45px;
    grid-column-gap: 12px;
    grid-template-rows: 25px 20px;
}
.userInfo #name {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#avatar,
.userIcon {
    grid-column: 1;
    grid-row-end: 3;
    grid-row-start: 1;
    border-radius: 45px;
    background: linear-gradient(130deg, #3A4fCE 0%, #3384AE 100%);
}

#avatar span {
    line-height: 45px;
    transform: scale(1) translateX(-50%);
    display: inline-block;
    left: 50%;
    position: relative;
    font-size: 18px;
    font-weight: 600;
    color: white;
}

#name {
    font-size: 16px;
    font-weight: 500;
    grid-column: 2;
}

#email {
    color: rgb(102, 102, 102);
    grid-column: 2;
}

.userSettingsContainer {
    margin: 12px 0;
}

.userSettingsContainer h2 {
    margin: 24px 0;
    font-weight: 600;
    font-size: 18px;
    line-height: 20px;
}

.basicSettingsContainer,
.preferencesContainer {
    margin-top: 12px;
    border-top: 1px solid #B3ADB2
}

.preferencesContainer {
    margin-top: 24px;
}

.basicSettingsContainer > *,
.preferencesContainer > * {
    margin-bottom: 16px;
    max-width: 600px;
}

.preferencesContainer .ms-Toggle {
    margin-top: 12px;
}

.userSettingsContainer .ms-TextField,
.userSettingsContainer .ms-Dropdown-container {
    width: 300px;
}

.userSettingsContainer .title {
    display: flex;
    justify-content: space-between;
}

.userSettingsContainer .closeIcon {
    border: none;
}

.userSettingsContainer .closeIcon i {
    border: none;
}

.userSettingsContainer .closeIcon span {
    flex-direction: row-reverse;
    font-weight: 400;
}

.projHeader {
    padding: 12px 16px;
    display: flex;
    align-items: center;
}

.projHeader,
.timelineHeader {
    border-bottom: 1px solid #EDEBE9;
}

.projHeader .title,
.timelineHeader {
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    color: #323130;
    font-weight: 600; 
}

.timelineHeader {
    padding: 16px;
    height: 45px;
}

.projHeader .tabs {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.ms-Pivot-link.is-disabled:hover {
    font-weight: normal;
}

.projHeader .ms-Pivot-link::before {
    height: 4px;
}

.caseStudyIllustration {
    margin: 24px;
    max-width: 389px;
}

.caseStudyButtons {
    margin: 0 24px 24px 24px;
    justify-content: flex-end;
    display: flex;
}

.confirmJoinCaseStudy {
    margin-right: 8px;
}

.caseStudyIllustration span {
    color: #605E5C;
}

.caseStudyIllustration svg {
    margin-bottom: 16px;
}

.wholePage .setup,
.wholePage .tos {
    padding: 24px;
    overflow: auto;
}

.wholePage.noScroll {
    overflow: hidden;
}

.markdownTutorials img {
    margin-top: 12px;
    margin-bottom: 12px;
    max-width: 100%;
}

.markdownTutorials {
    margin-left: 30px;
}

.markdownTutorials h2 {
    font-size: 20px;
    line-height: 32px;
    margin: 20px 0px;
}

.markdownTutorials a {
    cursor: pointer;
    color: #0078D4;
}

.markdownTutorials a:hover {
    color: #2494e3;
}

.markdownTutorials a:focus-visible {
    outline: 3px solid;
    color: #2494e3;
}

.project,
.projectsDeck {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 100%;
    height: calc(100% - 48px);
    background-color: #EFF6FC;
}

.tabs button {
    text-transform: capitalize;
}

.tabs button:hover {
    background-color: inherit;
    font-weight: 600;
}

/********************************************/
/***********      Settings     **************/
/********************************************/
.settingsVertical {
    display: flex;
    height: 100%;
}

.navContent {
    border-right: 1px solid rgb(237, 235, 233)
}

.settingsContent {
    width: 100%;
    min-height: 100%;
    overflow: auto;
}

.settingsContent.base {
    padding: 22px 48px;
}

.settingsContent .title,
.userSettingsContainer .title {
    font-weight: 600;
    font-size: 26px;
    line-height: 36px;
}

.overviewContainer {
    margin-top: 16px;
    max-width: 300px;
}

.overviewContainer > * {
    margin-bottom: 32px;
}

.overviewLabel {
    font-weight: 500;
    margin-bottom: 5px;
    user-select: none;
}

.overviewContainer .projectID > * {
    margin-right: 12px;
    vertical-align: middle;
}

.attestationCollapsible #attestationComplete {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: 4px;
}

.attestationCollapsible #attestationComplete .collapsibleContentExtra span {
    padding: 0;
}

.attestationCollapsible #attestationComplete .collapsibleContentExtra {
    background: unset;
    height: unset;
    width: unset;
}

.attestationCollapsible {
    margin-top: 8px;
} 

.attestationCollapsible.collapsed {
    margin-bottom: 36px;
}

.attestationCollapsible.expanded {
    margin-bottom: 12px;
}

.attestationModalContainer {
    max-width: 560px;
}

.attestationModalContainer .ms-Modal-scrollableContent {
    margin: 16px 24px 24px;
}

.attestationModalTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.attestationModalTitle h1 {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
}

.attestationModalBody {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.attestationModalFooter {
    margin-top: 36px;
    gap: 8px;
    display: flex;
    justify-content: end;
}

.attestationCompleteIndicator {
    display: flex;
    align-items: center;
    color: #707070;
}

.attestationCompleteIndicator i {
    height: 16px;
    margin-right: 4px;
}

.attestationTermsLink {
    margin-top: 16px;
}

.attestationTermsLink .ms-MessageBar-innerText span a:last-child {
    padding-left: 0;
}

.setupContainer.appsSetupContainer {
    max-width: 680px;
}

.appsSetupContainer .projectID {
    font-weight: 500;
    display: flex;
    line-height: 20px;
    padding-top: 5px;
}

.appsSetupContainer .projectID .ms-Button {
    width: 32px;
    height: 20px;
    margin-left: 8px;
}

.siteCategory .ms-Label.ms-Dropdown-label {
    color: black;
}

.radioButtonWrapper .radioButton {
    margin-right: 8px;
    width: 20px;
    height: 20px;
}

.actionsContainer {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.radioButtonWrapper {
    display: flex;
    margin: 8px 0;
}

.deleteConfirmationText {
    font-weight: 600;
    margin: 15px 0;
}

.surveyTextarea, 
.exitSurveyDropdown {
    margin-left: 24px;
}

.exitSurveyDropdown span {
    border-radius: 0;
    margin-bottom: 8px;
}

.actionsContainer .delete > button {
    background: white;
    border: none;
    cursor: pointer;
    color: #0078D4;
    padding-left: 0px;
}

.actionsContainer .disabled > button {
    color: #A79F9D;
    font-weight: 600;
}

.buttonsContainer,
.addUserButtonsContainer {
    margin: 24px;
    display: flex;
    justify-content: flex-end;
}

.buttonsContainer {
    margin-bottom: 16px;
}

.buttonsContainer .confirmDeleteButton.cancel {
    margin-left: 16px;
}

.buttonsContainer .gaModalButton {
    margin-left: 16px;
}

.connectGTMContainer{
    height: 100%;
    display: flex;
    flex-direction: column;
}

.gtmIntegartionPanel .ms-Panel-main {
    width: 380px;
}

.gtmIntegartionPanel .ms-Panel-content {
    height: 80%;
}

.gtmPanelFooter .ms-MessageBar{
    background: #EFF6FC;
    margin-bottom: 16px;
}

.gtmPanelButtonsContainer {
    padding: 16px;
    border-top: 1px solid #EDEBE9;
    display: flex;
    justify-content: start;
    align-items: center;
} 

.gtmPanelButtonsContainer .ms-Button {
    margin-right: 8px;
}

.gtmDialogStyles .ms-Dialog-main,
.hubspotDialogStyles .ms-Dialog-main{
    min-height: 151px;
    border-radius: 2px;
    min-width: 480px;
}

.loadingContainer {
    align-items: center;
    justify-content: center;
    display: flex;
    flex: 1 1 auto;
}

.overlaySpinner {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: rgba(128,128,128,0.4)
}

.overlayHeatmapSpinner {
    height: 100%;
}

.loadingCentered {
    position: absolute;
    left: 50%
}

.loadingIcon {
    font-size: 24px;
}

.loadingSmall {
    min-width: 12px;
    max-width: 12px;
}

.loadingSmall .ant-spin .anticon {
    font-size: 12px;
}
 
.deleteProjectContainer,
.connectGAContainer {
    margin: 0px 16px;
}

.connectGAContainer {
    margin-top: 25px;
}

.deleteProjectContainer {
    width: 480px;
}

.gaDatePickerContainer {
    margin: 6px 16px;
}

.gaDatePickerContainer .buttonRow {
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
}

.connectGTMContainer .optionsError {
    font-size: 12px;
    color: #A80000;
}

.connectGTMContainer .optionsErrorLink {
    font-size: 12px;
}

.connectGTMContainer .containerLabel {
    font-size: 12px;
    color: #106ebe;
}

.connectGTMContainer .linkingContainer {
    margin: auto;
}

.connectGTMContainer .linkingContainer > div {
    text-align: center;
}

.addingGAMessage {
    font-size: 13px;
    margin-top: 16px;
    margin-bottom: 16px;
}

.gaDocumentLink {
    font-size: 13px;
    margin-top: 6px;
    margin-bottom: 16px;
}

.manualGAInputLabel {
    font-weight: 500;
}

.manualGAInput {
    margin-top: 8px;
    margin-bottom: 20px;
}

.manualGAInputTextWrapper {
    height: 75px;
}

.deleteConfirmationContainer {
    margin: 0px 16px;
}

.panelHeader,
.modalHeader {
    display: flex;
    font-weight: 600;
    font-size: 20px;
    margin: 16px;
    justify-content: space-between;
}

.panelHeader {
    margin: 0 0 21px 0;
}

.panelSubHeader {
    margin-bottom: 21px;
    font-weight: 600;
}

.deleteModalHeader {
    align-items: baseline;
}

.deleteModalHeader .title,
.removeUserModalHeader .title {
    display: flex;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deleteModalHeader .title:focus,
.removeUserModalHeader .title:focus,
.actionsContainer .delete > button:focus,
.elementActionsContainer > button:focus,
.deleteProjectHeader .title:focus,
.noFocusBorder:focus,
.seeAllFAQ:focus {
    outline: none;
}

.deleteModalHeader .title:focus-visible,
.removeUserModalHeader .title:focus-visible,
.actionsContainer .delete > button:focus-visible,
.deleteProjectHeader .title:focus-visible,
.seeAllFAQ:focus-visible {
    outline: 3px solid;
}

.removeUserContainer {
    margin: 16px;
}

.removeUserContainer > span {
    height: 20px;
    display: inline-block;
}

.removeUserButtonsContainer,
.deleteProjectButtonsContainer,
.addElementButtonsContainer {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
}

.removeUserButtonsContainer > *,
.deleteProjectButtonsContainer > *,
.addElementButtonsContainer > * {
    margin-left: 8px;
}

.confirmDeleteButton.confirm .ms-Button-label {
    margin: 0px;
}

.instructions,
.maskingElementsContainer {
    margin-top: 16px;
    border-top: 1px solid #B3ADB2;
}

.maskElementsNameContainer {
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    max-width: 400px;
}

.setupContainer {
    max-width: 615px;
    margin-top: 24px;
}

.setupContainer .title > span {
    font-size: 18px;
}

.trackingCodeContent .collapsibleTitle .collapsibleContentHeader,
.setupContainer .collapsibleTitle .collapsibleContentHeader{
    margin-top: 10px;
}

.collapsibleContentHeaderEvents.event {
    border: 1px solid #EDEBE9;
}

.collapsibleSessionInfoContainer {
    border-bottom: 1px solid #EDEBE9;
    border-right:  1px solid #EDEBE9;
    border-left:  1px solid #EDEBE9;
    background-color: #FAF9F8
}

.collapsibleSessionInfoContainer .sessionInfoLine .eventText {
    padding-left: 20px;
}

.collapsibleSessionInfoContainer .sessionInfoLine .purpleIcon + .eventText {
    padding-left: 5px;
}

.collapsibleContentHeaderEvents .headerText {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 12px;
    cursor: pointer;
}

.collapsibleSessionInfoContainer .sessionInfoLine {
    padding-left: 36px;
}

.eventTimelineContainer.expanded .sessionInfoButton,
.sessionInfoDetails .sessionInfoButton {
    font-size: 12px;
    color: #0078D4;
    height: fit-content;
    margin: 8px 0px;
}

.eventTimelineContainer.expanded {
    margin-bottom: 0px;
}

.sessionInfoContainer .sessionInfoButton {
    color: #0078D4;
    transform: translateX(-8px);
}

.trackingCodeContent .collapsibleTitle > *,
.setupContainer .collapsibleTitle > * {
    font-size: 18px;
    line-height: 24px;
    cursor: pointer;
    color: #0078D4;
}

.trackingCodeContent .collapsibleTitle .ms-Icon,
.setupContainer .collapsibleTitle .ms-Icon {
    margin-right: 10px;
}

.setupContainer .instructions .content{
    font-size: 14px;
    font-weight: normal;
    line-height: 19px;
}

.setupOptionContainer {
    margin-bottom: 40px;
}

.copilotWaitlistContainer .setupOptionContainer {
    border-top: 1px solid #B3ADB2;
}

.setupOptionContainer.thirdParty {
    margin-bottom: 20px;
    display: inline-block;
}

.setupOptionContainer.manual {
    margin-top: 20px;
    margin-bottom: 20px;
}

.setupOptionContainer .expanded {
    font-weight: 600;
}

.setupOptionContainer .collapsibleContentTitle {
    margin-left: 32px;
    font-size: 16px;
    line-height: 22px;
}

.setupOptionContainer .advancedSettingsTitle {
    display: flex;
    align-items: center;
}

.setupOptionContainer .advancedSettingsTitle > span {
    font-weight: 600;
}

.setupOptionContainer .advancedSettingsTitle svg {
    margin-right: 8px;
    width: 20px;
    height: 20px;
}

.collapsibleContentTitle {
    display: flex;
}

.collapsibleContentExtra {
    background: #C7E0F4;
    color: #0078D4;
    height: 24px;
    width: 24px;
    font-weight: 600;
    margin-left: 8px;
    border-radius: 15px;
}

.collapsibleContentExtra span{
    padding-left: 7px;
    position: relative;
}

.setupContainer .setupSection {
    margin-left: 32px;
}

.setupSection .code {
    margin-top: 5px;
    display: inline-block;
}

.setupOptionContent {
    margin-left: 46px;
    margin-top: 12px;
    margin-bottom: 40px;
}

.setupOptionContent .content {
    cursor: pointer;
    color: #0078D4;
    margin-top: 8px;
}

.appsSetupContainer .instructions{
    font-weight: 600;
    padding-top: 10px;
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 20px;
    margin-top: 29px;
}

.trackingCodeContent .setupStep,
.appsSetupContainer .setupStep{
    margin-top: 29px;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
}

.trackingCodeContent .setupStep {
    margin-left: 32px;
}

.trackingCodeContent .setupStep:last-child {
    margin-bottom: 32px;
}

.trackingCodeContent .setupStep.noTitle .markdownCode,
.trackingCodeContent .setupStep.noTitle .setupStepCopy {
    margin-left: 0;
}

.setupStep .stepNumber{
    display: inline-flex;
    justify-content: center;
    width: 20px;
    border-radius: 10px;
    background-color: #C7E0F4;
    margin-right: 8px;
}

.setupStep .titleNoOrder{
    margin-left: 28px;
}

.sessionDetailsContainer {
    margin: 18px 16px;
}

.sessionDetailsContainer .sessionInfo{
    border-bottom: none;
}

.timeLineTabsWrapper {
    margin: 16px 16px 0;
}

.timeLineTabsWrapper .ms-Pivot {
    display: grid;
    grid-template-columns: 50% 50%;
    border-bottom: 1px solid #EDEBE9;
}

.timeLineTabsWrapper .ms-Button {
    line-height: 22px;
    font-size: 16px;
    margin-right: 0;
}

.setupStep .markdownCode{
    font-weight: 400;
    margin-left: 28px;
    max-width: 640px;
}

.setupStep .setupStepCopy{
    margin-left: 28px;
    margin-top: 12px;
    font-size: 12px;
    color: #0078D4;
    padding-left: 0;
}

.setupStepCopy {
    height: 28px;
    min-width: 32px;
}

.setupStep .setupStepCopy:hover{
    background-color: transparent;
}

.setupStep .setupStepCopy i{
    margin-left: 0;
}

.trackingCodeContent .appsSetupStepsContainer {
    margin: 32px;
}

.appsNeedHelpModal .setupOptions {
    min-height: unset;
}

.appsNeedHelpModal .needHelpContent .step {
    position: relative;
}

.appsNeedHelp,
.appsPrivacyStatement {
    margin-top: 32px;
    width: 628px;
    display: flex;
    flex-direction: column;
}

.appsPrivacyStatement {
    border-top: 1px solid #B3B0AD;
}

.appsNeedHelp .helpEnvelope,
.appsPrivacyStatement .privacyMonkey {
    position: relative;
    display: flex;
    font-size: 16px;
    line-height: 21px;
    font-weight: 600;
    margin: 8px 0;
    height: 21px;
}

.appsNeedHelp .ms-Button {
    margin-top: 16px;
    width: 200px;
}

.appsNeedHelp .helpEnvelope::before,
.appsPrivacyStatement .privacyMonkey::before {
    content: "";
    width: 44px;
    height: 44px;
}

.appsPrivacyStatement .privacyMonkey span,
.appsNeedHelp .helpEnvelope span {
    position: absolute;
    left: 30px;
}

.appsPrivacyStatement .privacyMonkey::before{
    background: url(https://claritystatic.azureedge.net/images/thirdPlatformSprite.png) no-repeat 0 0;
    transform: translate(0, -11px) scale(0.65);
    position: absolute;
    left: -10px;
    background-position-x: -36px;
}

.appsNeedHelp .helpEnvelope::before{
    background: url(https://claritystatic.azureedge.net/images/needHelpSprite.png) no-repeat 0 0;
    transform: translate(-13px, -11px) scale(0.5);
}

.appsSetupNpmLink {
    margin: 12px 28px 0;
}

.tutorial-Panel-header {
   width: 100%;
   padding: 0 0 12px 24px;
}

.tutorial-Panel-header .ms-Panel-header {
    padding: 0;
}

.collapsibleTutorial {
    margin-top: 12px;
}

.collapsibleTutorial .collapsibleContentHeader {
    color: #0078D4;
    padding-left: 0;
}

.collapsibleTutorial .ms-Icon {
    color: #0078D4;
    margin-right: 10px;
}

.recommendedTag {
    width: 112px;
    height: 20px;
    background-color: #004578;
    color: white;
    border-radius: 2px;
    padding: 0 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    line-height: 16px;
}

code {
    font-family: monospace;
    font-size: 12px;
}

.markdownCode {
    background: #EDEBE9;
    padding: 2px 8px 6px;
    margin-top: 4px;
    overflow: auto;
}

.code span {
    font-weight: 500;
}

.code .ms-Button {
    margin-top: 16px;
}

.privacyStatement {
    margin: 24px 0 8px;
}

.privacyStatement > h3 {
    font-weight: 600;
}

.privacyStatementButton {
    margin-bottom: 22px;
}

.analytics .action {
    font-size: 14px;
    line-height: 16px;
    color: #484644;
    margin: 0px 8px;
}

.settingsContent .content {
    margin-top: 16px;
}

.settingsContent.smartEvents {
    overflow: hidden;
}

.team thead {
    position: absolute;
    left: -999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.teamMember,
.maskingElements,
.ipElements {
    margin: 24px;
    align-items: center;
    white-space: nowrap; 
}

.teamLoading,
.smartEventsLoading {
    margin-top: 100px;
}

.teamMember {
    width: 100%;
}

.teamMember.mobileView {
    margin: 24px 0px;
}

.teamMember td {
    padding: 5px 24px 5px 0;
}

.teamMember > .ms-layer,
.maskingElements > .ms-layer,
.ipElements > .ms-layer {
    position: absolute;
}

.teamMember > * {
    border-bottom: solid 1px #F3F2F1;
    height: 33px;
    line-height: 32px;
    padding: 5px 24px 5px 0;
    box-sizing: content-box;
}

.teamMember > *:nth-child(5) {
    padding-right: 24px;
}

.teamMember > .status {
    text-align: center;
}

.teamMember .role,
.teamMember .inviteRole {
    text-align: right;
}

.role > button.ms-Button.is-disabled {
    background: white;
}

.userNameContainer > * {
    display: inline-block;
}

.actionContainer {
    text-align: end;
}

.membershipList {
    border: none;
}

.userNameContainer .name {
    margin-left: 12px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 90%;
    vertical-align: bottom;
}

.userNameContainer {
    max-width: 250px;   
}

.userIcon {
    width: 28px;
    height: 28px;
    background: #4F6BED;
    text-align: center;
    position: relative;
    top: 2px;
}

.userIcon > span {    
    color: white;
    font-size: 10px;
    font-weight: 600;
    position: relative;
    top: -3px;
}

.addUserContainer {
    margin: 16px 16px;
    width: 288px;
}

.addUserContainer .email {
    min-height: 82px;
}

.addUserContainer .email > span,
.addUserContainer .userRole > span {
    font-weight: 600;
}

.addUserButtonsContainer .confirmAddUser.cancel {
    margin-left: 16px;
}

.deleteModalHeader .title > i,
.deleteProjectHeader .title > i {
    margin-right: 8px;
}

.deleteModalHeader .title,
.deleteProjectHeader .title {
    display: flex;
    align-items: center;
}

.deleteSegmentContainer {
    margin: 24px 16px 20px;
}

.deleteProjectUserContainer {
    margin: 16px
}

.maskingNotice {
    background-color: #F3F2F1;
    margin-top: 16px;
    align-items: center;
    display: flex;
}

.maskingNotice .infoIcon {
    margin: 8px;
}

.maskingElementsContainer .title {
    font-size: 18px;
    font-weight: 600;
    margin-top: 5px;
    line-height: 31px;
}

.maskingElementsContainer .content {
    margin: 10px 0 16px;
}

.maskingInfoBubble {
    display: flex;
    padding: 10px 14px;
}

.addElementContainer {
    width: 448px;
    margin: 16px;
    height: 80px;
}

.addElementButtonsContainer {
    margin-top: 24px;
}

.addElementButtonsContainer {
    margin: 24px 16px 16px 16px;
}

.copilotWaitlistContainer,
.maskingContainer,
.ipExclusionContainer {
    max-width: 717px;
}

.copilotWaitlistContainer .checklistArea {
    flex-direction: column;
    max-width: 600px;
    margin: 24px 0;
}

.copilotWaitlistContainer li {
    margin-left: 32px;
}

.copilotChecklistTitle {
    font-size: 18px;
    font-weight: 600;
    line-height: 31px;
    margin-top: 16px;
}

.copilotGAContainer,
.copilotThirdPartyContainer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: 100%;
    gap: 4px;
}

.copilotThirdPartyContainer .ms-TextField {
    flex-grow: 1;
    margin-right: 24px;
}

.copilotThirdPartyContainer .ms-Button {
    margin-right: 24px;
    align-self: end;
}

.copilotWaitlistIntegrations {
    display: flex;
    align-items: center;
    gap: 16px;
}

.copilotWaitlistIntegrations .setupOptionTile {
    margin-right: 0;
}

.copilotWaitlistIntegrations .ms-TextField {
    width: 100%;
}

.copilotWaitlistIntegrations .setupButtonWrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.copilotWaitlistIntegrations .setupButtonWrapper .ms-Button--primary {
    margin-top: 24px;
}

.copilotPlatforms::after {
    content: url("https://claritystatic.azureedge.net/images/copilotPlatfromsTile.png");
}

.maskingAllContainer .title {
    font-size: 18px;
    border-top: 1px solid #B3ADB2;
    line-height: 31px;
    padding-top: 5px;
    margin: 16px 0;
}

.maskingElements {
    grid-template-columns: 470px auto auto;
}

.maskingElements,
.ipElements {
    margin-left: 0;
    width: 100%;
}

.maskingElements td,
.ipElements td {
    padding: 5px 8px 5px 16px;
}

.maskingElements > *,
.ipElements > * {
    border-bottom: solid 1px #F3F2F1;
    height: 33px;
    line-height: 32px;
    padding: 5px 5px 5px 0;
    box-sizing: content-box;
}

.maskingElements .status,
.maskingElements .maskElementActionContainer {
    display: flex;
    justify-content: flex-end;
}

.maskingElements .maskElementActionContainer {
    min-width: 67px;
}

.unmaskButton {
    width: 112px;
}

.maskButton {
    width: 99px; 
}

.maskingElements .status button.ms-Button.is-checked.is-disabled,
.maskingElements .status button.ms-Button.is-checked.is-disabled i.ms-Icon.ms-Button-icon {
    color: black;
}

.maskingElements .ms-Button.ms-Button--default.is-checked {
    background-color: #EFF6FC
}

.maskingTogg {
    width: 66px;
}

.unmaskingTogg {
    width: 82px;
}

.maskChoiceGroup .ms-ChoiceField-innerField {
    padding: 0;
}

.maskChoiceGroup img.ms-Image-image {
    padding: 16px 24px 16px 24px;
}

.maskChoiceGroup .ms-ChoiceField-labelWrapper div:first-child {
    font-weight: 500;
    line-height: 16px;
}

.maskChoiceGroup .ms-ChoiceField-labelWrapper {
    margin: 0 8px 10px;
}

.maskChoiceGroup .ms-ChoiceField-labelWrapper {
    min-height: 32px;
    height: unset;
}

.ms-Button--default.normal span.ms-Button-label {
    font-weight: 400;
}

.listElementsContainer {
    margin-top: 16px;
}

.ipActionSeparator {
    border-left: solid 1px #C8C6C4;
    height: 18px;
    align-items: center;
    margin-right: 8px;
    margin-left: 3px;
}

.ipNameModalContainer,
.ipAddressModalContainer,
.ipCurrentContainer {
    margin: 16px;
}

.ipNameModalContainer,
.ipAddressModalContainer {
    height: 80px;
    width: 308px;
}

.emptyMessage {
    text-align: center;
    max-width: 250px;
    margin-top: 16px;
    left: calc(50vw);
    position: absolute;
}

.ipAddressModalContainer .ms-Label {
    color: black;
}

/********************************************/
/***********      Project Page     **************/
/********************************************/

.projContent,
.tabContentWithFilter {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
    position: relative;
}

.projContentEmpty {
    padding-top: 100px;
}

.addSegmentHeader,
.saveEditSegmentHeader {
    color: #323130;
    display: flex;
    padding: 16px 20px 24px 24px;
    position: relative;
}

.addProjHeader {
    color: #323130;
    display: flex;
    justify-content: space-between;
    padding: 16px;
    position: relative;
}

.addProjHeader > span:first-child,
.addSegmentHeader .title,
.saveEditSegmentHeader .title {
    font-size: 20px;
    line-height: 28px;
    width: 100%;
    font-weight: 500;
}

.iconsContainer .ms-Button,
.closeIcon,
.segmentRemoveFilter .ms-Button {
    color: #666;
}

.segmentRemoveFilter .ms-Icon {
    color: #0078D4;
}

.filterArea > .numberInput,
.filterArea > .textInput {
    display: flex;
    padding-top: 12px;
}

.ipNameContainer {
    display: flex;
}

.ipName {
    font-weight: 600;
    max-width: 176px;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    width: 25%;
}

/********************************************/
/***********      Impressions    **************/
/********************************************/

.tabContentHeader {
    padding: 6px 16px;
    display: flex;
    border-bottom: 1px solid #ddd;
    align-items: center;
    position: relative;
}

.tabContentHeader.publicShare {
    padding-left: 2px;
}

.tabContentHeader .search {
    flex: 0 0 354px;
    margin-right: 40px;
}

.tabContentHeader .ms-Button {
    flex: 0 0 auto;
}

.tabContentHeader.hidden {
    display: none;
}

.filtersActions,
.filtersContent {
    display: flex;
}

.filtersActions {
    min-width: fit-content;
    align-items: center;
}

.filtersContent{
    display: flex;
    overflow: hidden;
}

.copilotInsightsButton {
    margin-left: auto;
}

/********************************************/
/***********      Segments     **************/
/********************************************/
.segments {
    display: flex;
    margin-left: 10px;
    max-width: fit-content;
}

.segmentsPanel {
    padding: 0 0 12px;
}

.segmentBadges,
.gaSegmentBadges {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: max-content;
}

.gaSegmentBadges {
    width: 100%;
}

.segmentPadding {
    padding-right: 36px;
}

.segmentsHeader {
    display: flex;
    justify-content: space-between;
    height: 44px;
    padding: 6px 12px 12px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid #ddd;
}

.segmentsHeaderLabel {
    padding-top: 6px;
}

.segmentsHeader > span {
    font-weight: 600;
}

.segmentsDropdown {
    max-width: 210px;
}

.segmentRow {
    display: flex;
    align-items: center;
    height: 44px;
    overflow: hidden;
    cursor: pointer;
}

.segmentRow.disabled {    
    opacity: 0.3;
}

.gaSegmentTooltip {
    overflow: hidden;
    display: inline;
}

.segmentRow.highlight {
    background-color: #f3f2f1;
    color: #000;
}

.segmentRow .segmentBadge {
    overflow: hidden;
}

.segmentRow.emptyList {
    height: 184px;
    justify-content: center;
}

.importGAContainer {
    display: flex;
    background-color: #EFF6FC;
    line-height: 32px;
    justify-content: space-between;
}

.importGAContainer .messageContainer {
    display: flex;
}

.importGAContainer .messageContainer .lightBulbIcon {
    margin: 8px 12px;
    display: flex;
}

.importGAContainer .messageContainer .importGAText {
    font-size: 12px;
}

.importGAContainer .importGAButton {
    height:24px;
    border-radius: 2px;
    margin: 4px 12px;
}

.noSegmentsTitle {
    display: flex;
    align-items: center;
}

.noSegmentsTitle .content {
    margin-left: 16px;
    width: 460px;
}

.createSegmentSteps {
    margin-top: 8px;
}

.createSegmentSteps span {
    font-weight: 600;
}

.createSegmentSteps ul {
    margin-top: 8px;
}

.createSegmentSteps li {
    line-height: 18px;
    margin: 0px 26px 8px;
}

.badgesSegmentWrapper {
    width: 100%;
    overflow: hidden;
    display: flex;
}

.segmentRow:hover {
    background-color:#f3f2f1;
}

.segments button.ms-Button {
    max-width: 210px;
}

.addSegmentContainer button.ms-Button {
    border: 1px solid #8A8886;
}

.segmentsDropdown .ms-Button-label {
    line-height: 1.2em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.addSegmentHeader {
    padding: 16px 16px 12px 16px;
}

.segmentRow .title {
    width: 180px;
    min-width: 180px;
    margin-right: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.segmentRow .iconsContainer {
    display: flex;
    margin: 10px 12px;
}

.addSegmentsContainer
.nameContainer {
    height: 73px;
}

.nameDropdownContainer {
    height: 138px;
}

.nameContainer, 
.badgesContainer,
.nameDropdownContainer {
    margin: 8px 16px;
    min-height: 72px;
}

.nameContainer > span,
.badgesContainer > span,
.nameDropdownContainer > span,
.dropdownContainer > span {
    font-weight: 600;
}

.addSegmentsContainer {
    height: auto;
    margin-bottom: 16px;
}

.dropdownContainer {
    margin-bottom: 12px;
}

.nameContainer .ms-TextField,
.dropdownContainer .ms-Dropdown-container,
.nameDropdownContainer .ms-TextField {
    margin-top: 5px;
}

.badgesContainer {
    max-height: 199px;
    height: auto;
}

.footerContainer {
    display: flex;
    align-items: baseline;
    margin-left: 16px;
    margin-right: 16px;
    justify-content: space-between;
}

.saveSegmentButtonContainer button.ms-Button--primary {
    margin-right: 8px;
}

.errorContainer > span {
    font-size: 12px;
    color: #A4262C;
}

.saveSegmentButtonContainer {
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.badgesContainer .badges {
    max-height: 173px;
    overflow-y: auto;
    box-sizing: border-box;
    border-radius: 2px;
}

.segmentBadge, 
.badgesError {
    margin-top: 12px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #EDEBE9;
    height: 32px;
}

.segmentBadge .segmentText {
    width: 100%;
    margin-left: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
}

.badges .badgesError {
    font-size: 12px;
} 

.addSegmentButton,
.moreDetailsHeaderButton,
.addTeamMemberButton {
    white-space: nowrap;
}

.saveEditSegmentHeader {
    padding: 16px 20px 12px 24px;
}

.saveEditSegmentContainer .text, 
.saveEditSegmentContainer .buttons {
    padding: 0 24px;
}

.saveEditSegmentContainer .buttons {
    padding-top: 29px;
    display: flex;
    justify-content: flex-end;
}

.saveSegmentButton.newSegment,
.saveSegmentButton.editSegment {
    padding: 0px 9px;
    width: 134px;
}

.saveSegmentButton.editSegment {
    margin-left: 8px;
}

.segmentsList span.ms-Button-textContainer {
    overflow: hidden;
}

.segmentsList .ms-Button-flexContainer,
.closeScreenshots  .ms-Button-flexContainer{
    flex-direction: row-reverse;
}

.segmentsList .ms-Icon,
.speedButton .ms-Icon {
    font-size: 12px;
}

.deleteSegmentButtonsContainer {
    display: flex;
    justify-content: flex-end;
    margin-top: 26px;
}

.deleteSegmentButtonsContainer .ms-Button.confirmDeleteButton {
    margin-right: 8px;
}

.segmentRow .errorTitle {
    color: #A4262C;
}

.segmentsNav {
    position: relative;
    background: rgba(255, 255, 255, 0.5); 
}

.segmentRow .iconsContainer span.ms-Button-flexContainer {
    color: #0078D4;
}

.secondary .deleteSegment span.ms-Button-flexContainer {
    color: #E3008C;
}

/********************************************/
/***********      filter badges     **************/
/********************************************/

.filterBadge,
.tagBadge,
.gaFilterBadge {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 3px 8px;
    flex: 0 0 auto;
    border-radius: 2px;
    line-height: 20px;
    margin-left: 16px;
    height: 32px;
}

.filterBadge,
.heatmapCompare .primary .heatmapMetrics .badge {
    background: #EFF6FC;
    color: #004578;
}

.blueFilterBadge {
    background: #004578;
    color: #FFF;
}

.gaFilterBadge {
    background: #FFE7DA;
    color: #952F15;
}

.gaFilterBadge span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filterBadge.inactive {
    background-color: #F3F2F1;
    color: #B3B0AD;
}

.filterBadgeNavWrapper {
    position: relative;
    overflow: hidden;
}

.heatmapCompare .filterBadges {
    margin-left: -12px;
}

.heatmapCompare .filterBadges.topLevel {
    margin-left: 0;
}

.filterBadges {
    overflow: hidden;
}

.scrollingBadges {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: max-content;
}

.badgesNav {
    font-size: 10px;
    line-height: 32px;
    padding: 0 8px;
    cursor: pointer;
    top: 0;
    user-select: none;
}

.filterNav {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
}

#next {
    right: 0;
    z-index: 10;
}

#prev {
    left: 0;
    z-index: 10;
}

.filterBadge i {
    color:#004578;
    font-size: 14px;
    line-height: 1em;
    cursor: pointer;
    margin-left: 10px;
}

.blueFilterBadge i {
    color:#fff;
}

.filterBadge .badgeClear,
.tagBadge .badgeClear,
.gaFilterBadge .badgeClear {
    padding: 10px 12px;
    margin: -3px -8px -3px 6px;
    font-size: 12px;
}

.filterBadge .filterBadgeIcon {
    padding: 8px 8px 8px 0;
    font-size: 12px;
    margin-left: 0;
}

.gaFilterText {
    padding: 10px 0px 10px;
    font-size: 14px;
}

.gaFilterSpacer {
    border: 1px solid #EDEBE9;
    margin-top: 20px;
}

.segmentSpacer {
    border: 1px solid #EDEBE9;
}

.segmentUpsellMessage {
    font-weight: 500;
}

.segmentUpsellImport {
    font-weight: normal;
    text-decoration: underline;
}

.filterBadgeLabel, 
.filterBadgeOp,
.segmentBadgeLabel {
    white-space: pre;
}

.filterBadgeLabel {
    flex: 1 0 auto;
}

.filterBadgeVal {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filterBadgeNavWrapper ~ .reset {
    margin-left: 10px;
}

.verticalLine {
    width: 1px;
    height: inherit;
    margin-left: 17px;
    background: #CCC;
}

.tabContent {
    display: flex;
    overflow-y: hidden;
    flex: 1;
}

.tabContentRecordingsVideo.publicShareView {
    top: 0px;
    height: 100%;
}

.scrollingImpressions {
    display: none;
}

.sortDivContainer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.sortDivContainer.withChildren {
    justify-content: space-between;
}

.recordingsPivotTab,
.sessionInfoPivotTab {
    padding-top: 8px;
}

.sessionInfoPivotTab {
    height: 100%;
}

.chatPivotTab,
.eventsPivotTab {
    padding: 8px 16px;
    height: 100%;
    overflow: auto;
}

.eventsV2PivotTab {
    height: 100%;
}

.sessionInfoPivotTab .staticMoreDetailsContainer {
    box-shadow: none;
}

.recordingsPivot .ms-Pivot-link,
.sessionInfoPivot .ms-Pivot button {
    width: 50%;
}

.recordingsPivot .ms-Pivot-link .favoritesTabHeader {
    width: 100%;
}

.favoritesTabinfoIcon {
    margin-left: 8px;
}

.sessionCount {
    padding: 8px 12px 8px 12px;
    display: flex;
    justify-content: flex-end;
    box-shadow: 0px 3.2px 7.2px 0px #837EFF1F;
    z-index: 1;
    color: rgb(50, 49, 48);
}

.impressionList {
    outline: none;
}

.impressionList.hidden {
    display: none;
}

.impressionList.scrollable {
    overflow-y: scroll;
    padding-right: 5px;
    padding-bottom: 12px;
}

.digestRecordings .impressionList.scrollable {
    height: calc(100vh - 180px);
}

.impressions {
    flex: 0 0 auto;
    border-right: 1px solid rgb(237, 235, 233);
    background-color: #FAF9F8;
}

.sessionSidebar,
.regionsPanel,
.heatmapSidebar {
    flex: 0 0 auto;
    border-right: 1px solid rgb(237, 235, 233);
    overflow: hidden auto;    
    padding: 12px 16px;
    background-color: #FAF9F8;
}

.heatmapSidebar.smallMargin{
    padding: 8px 16px 12px 16px;
}

.heatmapSidebarWrapper {
    flex: 0 0 auto;
    border-right: 1px solid rgb(237, 235, 233);
    background-color: #FAF9F8;
    width: 394px;
}

.heatmapSidebarWrapper .heatmapSidebar {
   height: 100%;
}

.heatmapSidebarWrapper .withEditArea {
   height: calc(100% - 90px);
}

.heatmapSidebarWrapper .withShadow {
    box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
    position: relative;
}

.heatmapSidebar .topNavbar {
    border-bottom: 1px solid #EDEBE9;
    padding-bottom: 15px;
    display: flex;
    align-items: center;
}

.heatmapSidebarClosed {
    flex: 0 0 auto;
    border-right: 1px solid rgb(237, 235, 233);
    overflow: hidden auto;    
    background-color: #FAF9F8;
    width: 29px;
}

.heatmapSidebarClosed .ms-Button {
    margin-top: 8px;
}

.sidebarPanelActionWrapper {
    padding: 10px 16px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
    background-color: #FAF9F8;
    border-bottom: 1px solid #EDEBE9;
    box-shadow: none;
}

.sidebarPanelTitleWrapper {
    margin-bottom: 12px;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebarPanelTitleWrapper.areaTitle {
    margin-top: 4px;
}

.screenSidebar .screenToggle,
.sidebarPanelTitleWrapper .screenToggle {
    margin-top: 12px;
    margin-bottom: 0;
}

.screenSidebar .screenToggle {
    margin-top: 4px;
}

.heatmapPanelTop {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
}

.panelTop.favoriteSession {
    margin-bottom: 6px;
    display: flex;
    flex-direction: row;
}

.impressions > div:not(.moreDetailsPanelActions) {
    overflow: hidden;    
    padding: 12px;
    background-color: #FAF9F8;
    height: 100%;
    width: 100%;
}

.impressions > .sessionsListContainer {
    padding: 12px 12px 0 12px;
}

.moreDetailsPanelActions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
}

.impressions.scrollable > .moreDetailsContainer { 
    display: flex;
    flex-direction: column;
    padding: 0;
    height: calc(100% - 38px);
}

.impressions.scrollable > .sessionInfoPivot { 
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    height: calc(100% - 38px);
}

.sessionInfoPivot div[role='tabpanel'] {
    height: calc(100% - 50px);
}

.sessionInfoPivotTab > .moreDetailsContainer { 
    display: flex;
    flex-direction: column;
    padding: 0;
    height: 100%;
}

.sortingContainer {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    text-align: end;
}

.sortingContainer.favoriteSession {
    align-self: flex-end;
    margin-left: auto;
}

.sortingContainer i,
.closeScreenshots i,
.backToScreenshots i,
.panelBack i,
.closePanelButton i {
    color: #0078D4;
}

.sortingContainer .is-disabled i {
    color: rgb(161, 159, 157);
}

.closeScreenshots i {
    padding-top: 1px;
}

.digestSessionBack,
.sortingContainer button:not(.highlightsToggle button),
.closeScreenshots,
.panelBack,
.closePanelButton {
    background: transparent;
    border: none;
    line-height: 20px;
    padding: 0 10px;
}

.closePanelButton {
    margin-top: 12px;
}

.digestSessionBack {
    margin-right: auto;
}

.panelBack {
    margin-top: 6px;
}

.impressions .heatmapSidebar .panelTop {
    margin-bottom: 18px;
}

.panelTitle {
    display: flex;
    justify-content: space-between;
}

.panelTitle,
.eventTimelineContainer .collapsibleContentTitle {
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
}

.scrollReachY {
    color: #0078D4;
}

.scrollReachY:hover {
    text-decoration: underline;
    cursor: pointer;
}

.eventTimelineContainer .collapsibleContentTitle {
    margin-bottom: 16px;
}


.eventTimelineContainer .toggleCollapseAll {
    display: flex;
    justify-content: space-between;
}

.toggleCollapseAll label:first-child {
    font-size: 16px;
}

.panelUrl {
    word-break: break-all;
}

.panelInfo {
    margin-top: 8px;
    font-size: 14px;
    line-height: 20px;
}

.panelInfoSub {
    margin-left: 40px;
}

.card {
    padding: 12px;
    border-radius: 4px;
    border: 1px solid #E1DFDD;
    background-color: white;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 12px;
    cursor: pointer;
    position: relative;
    color: 323130;
    font-size: 14px;
    line-height: 20px;
}

.card.actionCard {
    padding-bottom: 0px;
}

.cardRow {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.cardRow .heatmapElementMetaData{
    flex: 1;
}

.cardRow:last-child {
    margin-bottom: 0;
}

.cardRow.urlDate {
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
}

.cardRow.urlDate > *:first-child {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 12px;
}

.cardRow.urlDate > *:last-child {
    flex: 0;
}

.cardRow .badge,
.heatmapMetrics .badge {
    background-color: #F3F2F1;
    padding: 3px 8px;
    margin-right: 8px;
    flex: 0 1 auto;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    line-height: 16px;
}

.cardRow .badge:last-child {
    margin-right: 0;
    overflow: hidden;
}

.viewed .cardRow {
    opacity: 0.6;  
}

.card.selected {
    border: #0078D7 2px solid;
}

.card:hover {
    box-shadow: 0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13);
}

.favoriteIcon,
.filterIcon,
.shareIcon,
.sessionInsightsIcon,
.heatmapInsightsIcon {
    size: 16px;
}

.favoriteIcon.ms-Button,
.shareIcon.ms-Button,
.sessionInsightsIcon.ms-Button {
    min-width: unset;
    height: 32px;
}

.heatmapInsightsIcon.ms-Button {
    height: 32px;
    margin-left: 14px;
}

.heatmapInsightsIcon:hover {
    background-color: transparent;
}

.favoriteIcon.disabled *,
.sessionInsightsIcon.disabled * {
    fill: rgb(161, 159, 157);
}

.ms-Button-menuIcon.filterIcon {
    visibility: hidden;
    display: none;
}

.cardSeparator {
    height: 1px;
    margin-top: 12px;
    background-color: rgb(237, 235, 233);
}

.actionCardDetails{
    display: flex;
    align-items: center;
}

.seeDetails {
    color: #0078D4;
    font-size: 12px;
    line-height: 16px;
    float: right;
}

.seeDetails .ms-Button-label {
    margin: 0px;
}

.seeDetails.ms-Link {
    line-height: 40px;
    border-bottom: 0px;
    text-decoration: none;
    margin-right: 5px;
}

.noFavorites {
    font-size: 14px;
    line-height: 20px;
}

.noFavoritesIllustration {
    margin-top: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.favoritesErrorText {
    margin: 16px 0px;
}

/********************************************/
/***********      Video Player    **************/
/********************************************/

.replayHeader {
    display: flex;
    background: white;
    align-items: center;
}

.replayHeaderButtons {
    display: flex;
    padding: 6px 16px;
}

.replayHeaderMapButtons {
    display: flex;
}

.replayHeader > .shareButtonContainer {
    padding: 6px 16px 6px 0;
}

.replayHeaderBack {
    background-color: #FAF9F8;
    border-right: 1px solid rgb(237, 235, 233);
}

.replayHeader button {
    margin-right: 12px;
}

.replayHeader .shareIcon {
    margin-right: -8px;
}

.replay {
    min-width: 350px;
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
    position: relative;
    justify-content: center;
    flex-direction: column;
}

.expandingArea .titleArea {
    display: flex;
    cursor: pointer;
}

.expandingContent {
    margin-top: 12px;
    margin-left: 36px;
    text-align: left;
}

.titleArea i {
    margin-right: 22px;
}

.notFound {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

.errorWrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    min-height: 100%;
}

.errorFooter {
    margin-bottom: 0;
}

.fullScreen {
    height: calc(100% - 48px);
}

.shareError {
    height: 1100px;
}

.fullScreenMessage {
    text-align: center;
    align-self: center;
    font-size: 14px;
    line-height: 20px;
    max-width: 410px;
}

.errorSeparator {
    margin-bottom: 24px;
    margin-top: 24px;
    height: 1px;
    background-color: #E1DFDD;
    width: 100%;
}

.fullScreenMessage .expandingArea {
    margin-left: 10px;
}

.fullScreenMessage .fullScreenTitle {
    font-size: 20px;
    line-height: 28px;
}

.fullScreenMessage .fullScreenSubTitle {
    font-size: 14px;
    line-height: 20px;
    
}

.fullScreenMessage > *:not(.errorSeparator):not(.errorFooter) {
    margin-bottom: 16px;
}

.fullScreenMessage > button {
    margin-bottom: 36px;
}

.centeredFullScreenMessage {
    height: 100%;
    align-content: center;
}

.noData {
    display: flex;
    flex: 1;
    justify-content: center;
}

.videoWrapper,
.heatmapVisual,
.noData,
.replay,
.notFound,
.droppedFrame,
.errorWrapper {
    background-color: #F3F2F1;
}

.videoWrapper,
.selectorArea {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    position: relative;
}

.video {
    position: relative;
    margin: 0 auto;
    transform-origin: 0 0 0;
}

.appVideo {
    position: relative;
    margin: 0 auto;
    transform-origin: 0 0 0;
}

.videoHeatmap {
    position: absolute;
    overflow-y: scroll;
}

.cover {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 2;
    box-sizing: border-box;
}

.video iframe,
.videoHeatmap iframe {
    border: 1px solid #CCC;
    overflow: hidden;
}

.videoControlPanel {
    padding: 18px 16px 12px;
    background-color: white;
}

.videoControls {
    position: relative;
    display: flex;
    align-items: center;
    height: 40px;
}

.videoControls > *:not(.ms-layer) {
    width: max-content;
}

.newVideoControls .ms-Toggle,
.newVideoControls .ms-Button {
    margin-right: 20px;
}

@media (forced-colors: active) {
    .newVideoControls path {
        fill: highlight;
    }
}

.videoControls i {
    font-size: 16px;
}

.videoSettingsButton.ms-Button {
    color: #323130;
    margin-right: 0;
}

.hideAllMenuIcons .ms-ContextualMenu-icon,
.hideAllMenuIcons .ms-Icon-placeHolder {
    display: none;
}

.hideCheckPlaceholder .ms-Icon-placeHolder {
    display: none;
}

.hideIconPlaceHolder .ms-ContextualMenu-icon {
    display: none;
}

.videoTimestamp {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    margin-right: 20px;
    display: flex;
    align-items: center;
}

.playContainer {
    display: flex;
    align-items: center;
}

.disabledVideoControl path{
    fill: rgb(161, 159, 157);
}

.playerLegendInfoBubble,
.heatmapInfoBubbble {
    margin: 20px 24px;
    max-width: 524px
}

.playerInfoIcon i {
    color: #323130;
}

.playerLegendInfoTitle {
    font-weight: 400;
    line-height: 28px;
    font-size: 20px;
    display: grid
}

.keyboardShortcutsTitle,
.playerLegendInfoTitle span, 
.heatmapInfoBubbleTitle span {
    font-weight: 600;
    line-height: 20px;
    font-size: 14px;
    margin-top: 12px;
}

.keyboardShortcutsTitle {
    border-top: 1px solid #EDEBE9;
    padding-top: 20px;
}

.playerLegendItemsList {
    display: grid;
    justify-content: space-between;
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 138px);
    margin: 20px 0;
    gap: 12px;
}

.playerKeyboardControls {
    display: flex;
    flex-direction: column;
    max-height: 300px;
    flex-wrap: wrap;
    margin-top: 16px;
    gap: 12px;
}

.playerLegendItem {                   
    display: flex;
    align-items: center;
    min-width: 24px;
}

.playerLegendItem span:not(:first-child) {
    margin-left: 8px;
}

.playerLegendItemIcon {
    box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
    padding: 4px 8px;
}

.heatmapInfoBubbble {
    margin-top: 16px;
    border-top: solid 1px #EDEBE9;
}

.heatmapInfoBubbleTitle {
    justify-content: left;
}

.heatmapInfoBubbleTitle {
    margin: 16px 0 12px;
}

.heatmapInfoBubbleContent span:first-child {
    margin-right: 5px;
}

.heatmapInfoBubbleContent span:last-child {
    margin-left: 5px;
}

.heatmapInfoBubbleContent {
    display: flex;
    align-content: stretch;
    flex: 1;
    align-items: baseline;
}

.disableIcon {
    color: #C50F1F;
}

#playButton {
    cursor: pointer;
    height: 40px;
    width: 40px;
    border-radius: 40px;
    box-shadow: 0 6.4px 14.4px 0 rgba(0,0,0,.132), 0 1.2px 3.6px 0 rgba(0,0,0,.108);
    margin: 0 16px;
}

#playButton:hover {
    box-shadow: 0 25.6px 57.6px 0 rgba(0,0,0,.22), 0 4.8px 14.4px 0 rgba(0,0,0,.18);
}

.newVideoControls #playButton {
    margin-right: 20px;
    margin-left: 0;
}

.ms-Button.speedButton {
    border: unset;
    border-bottom: 1px solid #8A8886;
    padding: 0;
    min-width: 60px;
    margin-right: 12px;
}

.newVideoControls .ms-Button.speedButton {
    border-bottom: unset;
}

.speedButton .ms-Button-flexContainer {
    justify-content: space-around;
}

.speedButton .ms-Button-textContainer {
    flex-grow: 0;
}

.ms-BasePicker.basePickerListBelow {
    border-bottom: 1px solid #8A8886;
    border-radius: 0px;
}

.newSkipInactivity,
.skipInactivity {
    cursor: pointer;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    margin-right: 12px;
}

.newSkipInactivity .ms-Checkbox-checkbox{
    border: 1px solid #D2D0CE;
    background-color: transparent;
}   

.newSkipInactivity:hover .ms-Checkbox-checkbox{
    border: 1px solid #484644;
    background-color: transparent;
} 

.newSkipInactivity .ms-Checkbox-checkmark{
    color: #0078D4;
}

.newSkipInactivity:hover .ms-Checkbox-checkmark{
    opacity: 0;
} 

.is-checked.newSkipInactivity:hover .ms-Checkbox-checkmark{
    opacity: 1;
} 

.autoPlayControl {
    margin-bottom: 0;
}

.autoPlayControl .ms-Toggle-background {
    padding: 0 1px;
}

.autoPlayControl .ms-Toggle-thumb {
    background-image: url("https://claritystatic.azureedge.net/images/autoPlayIcons.png");
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: -24px;
    width: 18px;
    height: 18px;
}

.autoPlayControl.is-checked .ms-Toggle-thumb {
    background-position-x: 0;
}

.projectsLoading {
    width: 274px;
    height: 144px;
}

.recordingEndedWrapper {
    z-index: 3;
    display: flex;
    width: 100%;
    height: 100%;
    position: absolute;
    background: #11100F;
    justify-content: center;
}

.recordingEndedContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-direction: column;
    row-gap: 2px;
    width: 47%;
    max-width: 716px;
}

.recordingEndedHeader {
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    padding-bottom: 16px;
}

.recordingEndedContainer .ms-Button {
    background-color: transparent;
}

.recordingEndedContainer .ms-Button-label {
    color: white;
}

.recordingEndedContainer .dialogCard {
    padding: 16px;
    background: #3B3A39;
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.recordingEndedContainer > div:first-of-type {
    border-radius: 8px 8px 0px 0px;
}

.recordingEndedContainer > div:last-of-type {
    border-radius: 0px 0px 8px 8px;
}

.dialogCard.rowContainer {
    flex-direction: row;
    column-gap: 16px;
    margin-bottom: 2px;
}

.thumbsContainer .ms-Button:last-child {
    margin-left: 24px;
}

.rowContainer .ms-Button {
    background: #1B1A19;
    border-radius: 2px;
}

.rowContainer .ms-Button:hover {
    background: #292827;
}

.quickLabelsContainer {
    display: flex;
    flex-wrap: wrap;
    column-gap: 12px;
    row-gap: 8px;
    align-items: center;
    justify-content: center;
    min-height: 36px
}

.quickLabel {
    background: #1B1A19;
    border-radius: 2px;
    padding: 4px 8px;
    display: flex;
}

.quickLabel:hover {
    cursor: pointer;
    background: #292827;
}

.quickLabel .labelName {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.quickLabel i {
    margin-left: 16px;
}

.quickLabel.selectedLabel {
    background: #2899F5;
    color: #1B1A19;
}

.recordingEndFooter {
    width: 72%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 8px;
    padding-top: 24px;
}

.recordingEndFooter .ms-Button {
    flex-grow: 1;
    border-radius: 2px;
}

.recordingEndFooter .ms-Button--default {
    background: #292827;
}

.recordingEndFooter .ms-Button--primary .ms-Button-label{
    color: #092C47;
}

.recordingEndFooter .primaryControl.ms-Button {
    background: #2899F5;
}

.recordingEndFooter .nextDisabled.ms-Button {
    background: rgb(161, 159, 157);;
}

.nextCountDown.ms-Button {
    background: #C7E0F4;
}

.nextCountDown .ms-Button-label {
    position: relative;
    z-index: 2;
}

.nextCountDown.animation .ms-Button-flexContainer::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    height: 100%;
    background-color: #2899F5;
    animation: load 5s linear;
}

@keyframes load {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

@media only screen and (min-width: 1085px) {
    .playerInfoIcon.ms-Button {
        margin-right: 0;
    }
}

/********************************************/
/***********      Filters    **************/
/********************************************/

.filtersPanel,
.segmentsPanel,
.gaFilterPanel,
.heatmapURLPanel {
    background-color: white;
    z-index: 14;
    width: 100%;
    left: 0;
    box-shadow: 0px 1.2px 3.6px rgba(0, 0, 0, 0.1), 0px 6.4px 14.4px rgba(0, 0, 0, 0.13);
    max-height: calc(100vh - 138px);  /* hardcoded: this is the sum of three headers above the panel*/
    font-size: 14px;
    line-height: 20px;
}

.segmentsPanel,
.gaFilterPanel,
.heatmapURLPanel {
    padding: 0 16px 12px;
    position: absolute;
    overflow: auto;
    top: calc(100% + 1px);
}

.gaFilterPanel {
    width: 330px;
    height: fit-content;
}

.heatmapURLPanel {
    width: 50%;
    min-width: fit-content;
    height: fit-content;
    min-height: 330px;
    padding: 4px;
    gap: 24px;
    margin-left: 16px;
}

.filtersPanel {
    padding: 0;
    position: fixed;
    height: 80%;
    top: 93px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.filtersHeader {
    margin-bottom: 0;
    padding: 0 16px;
    display: flex;
    border-bottom: 1px solid #E2E2E2;
    line-height: 20px;
    align-items: center;
}

.filtersHeader > * {
    cursor: pointer;
}

.filtersHeader > *:not(:first-child) {
    margin-left: 12px;
}

.activeFilters {
    display: flex;
    padding: 0 16px 8px 0;
    border-bottom: 1px solid #EDEBE9;
    flex-wrap: wrap;
}

.activeFilters .filterBadge,
.activeFilters .gaFilterBadge {
    margin-top: 8px;
}

.panelOverlay,
.coachmarkOverlay,
.xRayOverlay {
    opacity: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.panelOverlay {
    background-color: #000;
    z-index: 10; /*filter panel is 14*/
    opacity: 40%;
}

.coachmarkOverlay {
    z-index: 10;
}

.maskButton.is-checked i.ms-Icon.ms-Button-icon,
.unmaskButton.is-checked i.ms-Icon.ms-Button-icon {
    font-weight: 600;
}

.hideHeatmapRanksButton {
    height: 32px;
    min-width: 32px;
}

.hideHeatmapRankToggle .ms-ContextualMenu-link {
    height: 100%;
    padding: 0 12px;
}

.hideHeatmapRanksButton .ms-Button-menuIcon {
    display: none;
}

.hideHeatmapRankToggle {
    height: 60px;
}

.hideHeatmapRankToggle .ms-Toggle {
    margin: 0 auto;
}

.hideHeatmapRankToggle .ms-Toggle-stateText {
    margin-right: 0;
}

.hideHeatmapRankToggle .ms-Label {
    font-weight: 400;
}

.hideHeatmapRankToggle .ms-Toggle-innerContainer {
    align-items: center;
}

.universalFilters {
    display: flex;
    height: 100%;
    overflow: hidden;
    flex: 1;
}

.filterPanelTitle {
    line-height: 44px;
    font-size: 14px;
    font-weight: 600;
}

.filterPanelNav {
    width: 206px;
    min-width: 206px;
    border-right: 1px solid #EDEBE9;
    margin-right: 32px;
    height: 100%;
    overflow: auto;
}

.filterPanelNav.dontShowChevron .ms-Nav-group:last-child i {
    display: none;
}

.filterPanelNav .ms-Nav-chevronButton {
    border-bottom: 0;
    font-size: 14px;
    line-height: 20px;
}

.filterPanelNav i {
    line-height: 20px;
    height: 20px;
}

.filterPanelNav .ms-Nav-groupContent {
    margin-bottom: 0;
}

.filterPanelNav .ms-Nav-compositeLink.is-selected a {
    border-left: none;
}

.filters {
    padding: 0 16px 12px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-column-gap: 48px;
    grid-row-gap: 36px;
    user-select: none;
    padding-top: 16px;
    padding-right: 16px;
    height: 100%;
    overflow: auto;
    min-width: 600px; /*TODO: support one column in the future*/
}

.filters:last-child {
     margin-bottom: 0;
}

.filter:last-child {
    padding-bottom: 48px;
}

.filters .ms-layer {
    position: absolute;
}

.filterCategoryTitle {
    grid-column: 1 / -1;
    margin-bottom: -20px;
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    display: flex;
}

.filterCategoryTitle:not(:first-child) {
    margin-top: -20px;
}

.filterCategoryNewBadge {
    margin-left: 10px;
    margin-top: 4px;
    color: #FAF9F8;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0px;
    text-align: left;
    background: linear-gradient(80.61deg, #3A6AD8 1.06%, #4094EB 98.23%);
    padding: 2px 10px;
    width: 44px;
    height: 20px;
    border-radius: 24px;
}

.filterHeader,
#dashboard_date .ms-Lable,
#recordings_date .ms-Label,
#heatmaps_date .ms-Label {
    font-weight: normal;
    margin-bottom: 12px;
    padding-bottom: 0;
}

#dashboard_date .ms-Lable,
#recordings_date .ms-Label,
#heatmaps_date .ms-Label {
    color: #0078D7;
}

#dashboard_date,
#recordings_date,
#heatmaps_date {
    padding: 6px 12px 12px 12px;
}

.filterHeader .ms-TooltipHost > * {
    vertical-align: middle;
}

.filterHeader .ms-FocusZone {
    display: inline-block;
}

a.filterLabel:focus {
    box-shadow: rgb(96 94 92) 0px 0px 0px 1px inset;
    outline: rgb(96, 94, 92) auto 1px;
}

a.filterLabel {
    color: #323130;
}

.customFilterZeroStateImg {
    margin-top: 18px;
    width: 100%;
}

.options {
    position: relative;
}

.options a:hover {
    color: #2494e3
}

#dashboard_location .options > div:not(:last-child),
#recordings_location .options > div:not(:last-child),
#heatmaps_location .options > div:not(:last-child) {
    margin-bottom: 8px;
}

.filterLabel {
    color: #323130;
    flex: 1 0 auto;
    cursor: default;
    margin-right: 12px;
    font-weight: 500;
    display: inline-block;
}

.filterBarButtonContainer {
    display: flex;
}

i + .filterLabel {
    margin-left: 8px;
    cursor: pointer;
}

.ms-DatePicker {
    margin-bottom: 12px;
}

.filterOptions {
    display: grid;
    grid-template-columns: 50% 50%;
    border: 1px solid rgb(96, 94, 92);
    border-radius: 2px;
    margin-top: 5px;
    cursor: pointer;
}

.filterOptions > * {
    padding: 2px 12px;
    opacity: 0.7;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.filterOptions > .selected {
    color: white;
    font-weight: 600;
    opacity: 1;
}

button.ms-Button.filtersBarButtons {
    border: none;
    padding: 2px;
    margin-left: 12px;
}

.filtersBarButtons .ms-Icon {
    color: #0078D4;
}

.filtersBarButtons.is-disabled .ms-Icon {
    color: #bcbab7;
}

.filtersBarButtons .ms-Button-label {
    font-weight: 400;
}

.filtersBarButtons button.ms-Button {
    border: 1px solid #8A8886;
}

.clearFiltersButton .ms-Button-textContainer {
    flex-grow: 0;
}

.filters .ms-SearchBox {
    margin-bottom: 12px;
} 

.filter.inline {
    display: flex;
    align-items: center;
}

.filter.inline .filterHeader {
    margin-bottom: 0;
}

.filter.inline .filterLabel {
    margin-right: 12px;
    width: 50px;
    text-transform: capitalize;
}

.filter.inline .options {
    flex: 1;
}

.option > * {
    display: inline-block;
}

.option > .ms-TooltipHost{
    margin-left: 10px;
}

.option .ms-Checkbox-label {
    align-items: center;
}

.filter.inline .ms-SearchBox {
    margin-bottom: 0;
}

.filter.range:not(:last-child) {
    margin-bottom: 24px;
}

.range .filterHeader {
    margin-bottom: 8px;
}

.chevron {
    transform: rotate(0);
    transform-origin: 50% 50%;
    transition: transform 0.1s linear 0s;
}

.downChevron {
    transform: rotate(90deg);
}

.upChevron {
    transform: rotate(-180deg);
}

.fromRightToUpChevron {
    transform: rotate(-90deg);
}

.filters .options .ms-Checkbox {
    margin-bottom: 5px;
}

.operators .ms-ChoiceField {
    margin-right: 12px;
}

.inputGroup {
    display: flex;
    margin-top: 8px;
}

.inputGroup span {
    font-size: 14px;
    line-height: 20px;
    color: #777674;
    margin-bottom: 0;
}

.filters .input input {
    border: 1px solid rgb(96, 94, 92);
    padding: 4px;
    box-sizing: border-box;
    margin-right: 16px;
}

.filters .input input,
.filters .ms-ComboBox::after,
.filters .ms-SearchBox,
.filters .ms-Dropdown-title {
    border-width: 0 0 1px 0;
    border-radius: 0;
}

.filters .input input[type=number] {
    width: 48px;
    display: block;
}

.filters .input input[type=text] {
    display: block;
}

.filters .input input[type=number] {
    width: 105px;
}

.filters .input input:focus {
    outline: 1px solid #177ecc;
}

.filters .invalidError {
    color: #ca1616;
    position: absolute;
    margin-bottom: 12px;
    margin-top: 4px;
}

.suggestionContainer {
    min-width: 351px;
    max-width: 1000px;
    margin-left: 8px;
}

.suggestionsLoading {
    padding: 8px;
}

.noUrlSuggestions {
    padding-left: 8px;
    margin: 8px;
}

.suggestionItem {
    padding: 0px 8px;
    font-size: 14px;
    cursor: default;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 26px;
}

.suggestionItem.topPath {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    line-height: 32px;
}

.suggestionItem:hover,
.suggestionItem:focus {
    background: rgb(237 235 233);
}

.suggestionCount {
    color: #0078D4;
}

.pageTargeting {
    border-top: 1px solid #DDD;
    margin-top: 8px;
    padding: 8px;
}

.pageTargeting span:first-child {
    margin-right: 16px;
    width: 60px;
    display: inline-block;
}

.pageTargeting > * {
    margin-bottom: 8px;
    display: block;
}

.noVariables {
    margin-bottom: 12px;
}

/********************************************/
/**********     share modal    ************/
/********************************************/
.shareModalContainer {
    min-height: 312px;
    max-height: 456px;
    width: 500px;
}

.ms-Dialog-main.shareModalContainer {
    border-radius: 2px !important;
}

.shareHeader {
    display: flex;
    position: relative;
    padding: 16px;
}

.shareHeader .title {
    font-size: 20px;
    line-height: 28px;
    width: 100%;
    font-weight: 500;
}

.shareHeader .closeIcon {
    color: #666;
}

.shareSettingsLabel {
    color: #323130;
    flex: 1 0 auto;
    cursor: default;
    margin-right: 12px;
    font-weight: 500;
    display: inline-block;
}

.shareSettingsGroup {
    display: inline-block;
}

.shareSettingsGroup .ms-ChoiceField {
    display: inline-block;
    padding-right: 8px;
}

.shareModalPivot {
    margin: 0px 10px 10px;
}

.shareModalPivotTab {
    width: 100%;
    padding: 10px 8px 8px 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.shareModalPivotTab > :not(:last-child) {
    margin-bottom: 8px;
}

.shareModalCloseButtonGroup {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    margin-left: auto;
    height: 48px;
    right: 0px;
    bottom: 16px;
}

.shareModalCloseButton {
    align-self: flex-end;
}

.shareModalSendEmailButton {
    margin-right: 16px;
}

.shareModalLinkDescription,
.shareModalToggleGroup {
    padding: 6px 0px;
}

.shareModalLinkContainer {
    display: flex;
    padding: 6px 0px;
}

.shareModalLinkContainer > div {
    display: inline-block;
    margin-right: 8px;
    flex-grow: 1;
}

.shareModalLinkContainer input:disabled {
    color: transparent;
    text-shadow: 0 0 2px rgb(161, 159, 157);
}

.shareModalEmailPivotTab {
    min-height: 200px;
}

.shareModalEmailRecipientTextField {
    margin: 8px 0px 0px;
    position: relative;
}

.shareModalEmailRecipientTextField::after {
    content: "*";
    color: rgb(164, 38, 44);
    position: absolute;
    top: -5px;
    right: -10px;
}

.shareRecipientCallout {
    width: 512px;
    max-width: calc(100vw - 20%);
}

.shareRecipientCallout .ms-Persona {
    width: 100%;
}

.shareRecipientCallout .ms-Persona-primaryText > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shareRecipientCallout .ms-Suggestions > div[role="status"] {
    display: none;
}

.shareModalEmailMessage {
    height: 72px;
    margin: 8px 0px;
    flex-grow: 1;
}

.shareModalEmailMessage .ms-TextField-fieldGroup {
    height: 72px;
}

.shareModalEmailExpirationMessage {
    padding: 5px 0px;
}

.shareModalEmailExpirationMessage .ms-MessageBar-icon {
    padding-top: 4px;
}

.shareModalEmailExpirationMessage .ms-MessageBar-text p:not(:last-child) {
    margin-bottom: 10px;
}   

.shareModalEmailExpirationMessage .ms-MessageBar-text p:last-child {
    margin-top: 10px;
}

.shareModalEmailExpirationMessage .ms-MessageBar-text p strong {
    font-weight: 700;
}

.shareModalEmailExpirationMessage .shareModalExpirationDropdown span {
    font-size: 12px;
}

.shareModalExpirationDropdown {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    /* To counteract the 1px border on the dropdown: */
    position: relative;
    top: -2px;
}

.shareModalLoadingSpinner {
    padding: 8px;
}


/********************************************/
/**********     sign in  page    ************/
/********************************************/

.signInModal {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1000;
}

.signInModal .overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
}

.signIn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-color: white;
    padding: 28px 0 38px;
    box-shadow: 0px 2.4px 7.2px rgba(0, 0, 0, 0.18), 0px 12.8px 28.8px rgba(0, 0, 0, 0.22);
    border-radius: 2px;
}

.closeSignIn {
    display: none;
}

.closeSignInUpsell {
    display: block;
    position: absolute;
    right: 8px;
    top: 0;
    color: black;
}

.signInTitle {
    font-size: 36px;
    line-height: 48px;
    margin-bottom: 8px;
}

.signInSubtitle {
    font-size: 13px;
    line-height: 17px;
    margin-bottom: 32px;
}

.signInButton {
    width: 240px;
    display: flex;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 30px;
    align-items: center;
    border-radius: 4px;
    cursor: pointer;
    margin: 0 122px 16px;
}

.signInButton.disabled {
    cursor: default;
    opacity: 0.4;
}

.signInButton.disabled .providerLogo,
.signInButton .providerLogo {
    margin-right: 16px;
}

.signInButton.disabled svg,
.signInButton svg {
    display: block;
}

#msSignIn {
    background-color: #235A9F;
    color: white;
}

#fbSignIn {
    background-color: #1671e5;
    color: white;
}

#googleSignIn {
    border: 1px solid #8a8886;
}

/********************************************/
/***********     recording    **************/
/********************************************/

.fullscreenRecording {
    display: flex;
    height: calc(100% - 48px);
    width: 100%;
    position: absolute;
}

.embeddedFullscreen {
    display: flex;
    height: 100%;
    width: 100%;
    position: absolute;
}

.slider {
    position: relative;
    display: flex;
    margin-bottom: 19px;
}

.sliderSlice {
    box-sizing: border-box;
    border-color: white;
    border-style: solid;
    border-width: 1px;
    display: inline-block;
    height: 8px;
    cursor: pointer;
}

.sliderSlice.isDead {
    border-radius: 6px;
}

.scrubber {
    position: absolute;
    top: -4px;
    width: 16px;
    height: 16px;
    border-radius: 20px;
    cursor: pointer;
    background-color: white;
    border: 2px solid #0078D7;
    z-index: 3;
}

.progress {
    height: 7px;
    position: absolute;
    border-color: white;
    border-style: solid;
    border-width: 0 0 1px 0;
}

.scrubberEvent {
    position: absolute;
}

.scrubberEventIndicator {
    height: 12px;
    width: 2px;
    border-radius: 1px;
    margin-top: -3px;
}

.comment {
    position: absolute;
    bottom: -2px;
}

.react-tabs {
    height: 50%;
}

.inactivityNotice {
    position: absolute;
    background: white;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    padding: 32px;
    box-sizing: border-box;
    border: 2px solid rgb(23, 126, 204);
    border-radius: 10px;
    box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.05);
    text-align: center;
    font-size: 16px;
}

.inactivityNoticeMobile {
    top: 20%;
    padding: 12px 16px;
    z-index: 100;
}

.droppedFrame {
    width: 100%;
    height: 100%;
    background: #F3F2F1;
    position: absolute;
}

.flexCenter {
    display: flex;
    align-items: center;
}

.noHeatmapModal {
    position: absolute;
    background: white;
    left: 50%;
    transform: translateX(-50%);
    top: 100px;
    width: 560px;
    padding: 24px;
    border-radius: 2px;
    box-shadow: 0px 4.8px 14.4px rgba(0, 0, 0, 0.18), 0px 25.6px 57.6px rgba(0, 0, 0, 0.22);
    font-size: 16px;
}

.noHeatmapModalTitle {
    margin-bottom: 20px;
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    color: #323130;
}

.noHeatmapModalMessage {
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filterBadgeValue {
    padding-left: 4px;
}

.filterBadgeSeparator {
    padding: 0 4px;
}

.noHeatmapModalIllustration {
    text-align: center;
    margin-bottom: 32px;
}

.clearFilterModalButton {
    float: right;
}

.deadSessionSnapshot {
    opacity: 0.5;
}

/********************************************/
/***********      graphs       **************/
/********************************************/
.chart {
    border: 1px solid #CCC;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
    background: #FFF;
    margin: 10px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.05);
}

.gradientChartBackround {
    background: rgb(60,83,197);
    background: linear-gradient(90deg, rgba(60,83,197,1) 0%, rgba(58,94,191,1) 25%, rgba(56,104,186,1) 50%, rgba(56,115,181,1) 75%, rgba(55,129,175,1) 100%);    
}

.graphsContainer {
    display: flex;
    flex-wrap: wrap;
}

.graphComponent {
    background: #f8f8f8;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}

.chartContainer {
    overflow: hidden;
    max-width: 100%;
}

.chartTitle {
    width: 100%;
    padding-left: 20px;
    padding-top: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #676767;
}

.lightChartTitle {
    color: #f8f8f8;
}

.popularPages {
    width: 100%;
    overflow: scroll;
    height: 300px;
    overflow-x: hidden;
    padding-top: 16px;
    padding-bottom: 20px;
}

.popularPages table {
    border-collapse: collapse;
    width: 100%;
  }
  
 .popularPages td, .popularPages th {
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
    border-right: 0px;
    border-left: 0px;
  }
  
.popularPages th {
    color: #54555a;
    background: #f4f7fe;
    font-weight: 600;
    font-size: 14px;
}

.popularPages tr>th:first-child {
    padding-left: 24px;
}

.popularPages tr>td:first-child {
    padding-left: 24px;
}

/********************************************/
/***********   Regex tester    **************/
/********************************************/
.regexTesterModal .ms-Dialog-main {
    border-radius: 2px;
}

.regexTesterHeader {
    padding: 16px 24px;
    display: flex;
    width: 560px;
    justify-content: space-between;
}

.regexTesterModal.mobile .regexTesterHeader {
    width: unset;
}

.regexTesterHeader .title {
    font-size: 20px;
    font-weight: 600;
    padding-right: 8px;
    padding-top: 4px;
}

.regexTesterInput {
    padding: 4px 24px 24px;
}

.regexTesterInput .ms-Label {
    font-weight: 400;
    font-size: 13px;
    line-height: 16px;
}

.regexTesterInput > *:not(:last-child) {
    margin-bottom: 16px;
}

.regexTesterInput textarea {
	width: 100%;
	font-size: 14px;
	height: 36px;
	line-height: 20px;
	border: 1px solid #323130;
	box-sizing: border-box;
	padding: 8px 12px;
    resize: none;
}

.regexTestStringValidation .noMatchIcon {
     color: #990000;
}

.regexTestStringValidation .matched {
    color: #107C10;
}

.regexTestStringValidation {
    font-weight: 400;
    font-size: 13px;
    line-height: 16px;
    display: flex;
    height: 32px;
    align-items: center;;
}

.regexTestStringValidation .stringValidationLabel {
    margin-left: 4px;
}

.regexTesterInput .reedmoreLink {
	font-size: 13px;
	line-height: 20px;
	text-decoration: none;
}

.regexTesterActions {
	display: flex;
	justify-content: flex-end;
	margin-top: 8px;
}


.regexTesterActions > *:first-child {
	margin-right: 12px;
}

.regexTesterActions {
	display: flex;
	justify-content: flex-end;
	margin-top: 8px;
}

.regexTesterActions > *:first-child {
	margin-right: 12px;
}

/********************************************/
/***********      feedback     **************/
/********************************************/

.feedbackModal .ms-Dialog-main {
    border-radius: 2px;
}

.feedbackHeader {
    padding: 16px;
    display: flex;
    width: 380px;
    justify-content: space-between;
}

.feedbackModal.mobile .feedbackHeader {
    width: unset;
}

.feedbackHeader .title {
    font-size: 20px;
    font-weight: 600;
    padding-right: 8px;
    padding-top: 4px;
}

.feedbackInput {
    padding: 4px 16px 16px;
}

.feedbackInput > *:not(:last-child) {
    margin-bottom: 12px;
}

.feedbackInput textarea {
	width: 100%;
	font-size: 13px;
	height: 120px;
	line-height: 20px;
	border: 1px solid #323130;
	box-sizing: border-box;
	padding: 8px 12px;
    resize: none;
}

.feedbackInput .privacyLink {
	font-size: 13px;
	line-height: 20px;
	text-decoration: none;
}

.feedbackInput .emailText {
    min-height: 53px;
}

.feedbackActions {
	display: flex;
	justify-content: flex-end;
	margin-top: 8px;
}


.feedbackActions > *:first-child {
	margin-right: 12px;
}

.feedbackOption {
	background-color: #F5F5F5;
	padding: 4px 16px;
	font-size: 13px;
	line-height: 20px;
	color: #666;
	margin-bottom: 16px;
	cursor: pointer;
	display: table;
}

.feedbackOption:hover,
.feedbackOption:focus,
.suggestionItemContainer:focus {
	background-color: #ececec;
	color: #111;
	border-color: #ccc;
}

.feedbackOption:last-child {
	margin-bottom: 0;
}

/********************************************/
/***********      timeline     **************/
/********************************************/

.eventTimelineContainer .collapsibleContentHeader,
.impressionTimeline .collapsibleContentHeader {
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 1px solid #DDD;
}

.impressionTimeline .collapsibleContentHeader {
    margin: 8px 10px;
}

.impressionTimeline {
    background-color: #FFF;
    margin-bottom: 4px;
}


.collapsibleContentHeader.event,
.eventTimelineContainer.expanded .collapsibleContentHeader {
    border: none
}

.collapsibleContentHeader.event .sessionInfoLine {
    max-width: 280px;
}

.eventTimelineContainer:not(:first-child) {
    margin: 16px 0;
}

.eventTimelineContainer i {
    color: #0078D4;
    font-size: 16px;
}

.sessionInfo, 
.taggingContainer {
    border-bottom: 1px solid #DDD;
}

.sessionInfo .loadingContainer {
    margin-bottom: 10px;
}

.sessionInfoContainer {
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    margin-bottom: 16px;
}

.sessionInfoContainer i {
    font-size: 16px;
    line-height:  14px;
    margin-right: 8px;
}

.timelineImpressionIconContainer {
    display: flex;
}

.timelineImpressionIconContainer i {
    color: #0078D4;
}

.timelineImpressionTime {
    font-weight: 600;
    margin-right: 12px;
}

.sessionInfoLine,
.sessionInfoLineDetails {
    display: flex;
    padding: 6px 0;
    align-items: center;
}

.sessionInfoContainer .sessionInfoLine {
    height: 32px;
}

.sessionInfoLine strong,
.sessionInfoLineDetails strong {
    margin-right: 8px;
}

.sessionInfoLine span,
.sessionInfoLineDetails span,
.sessionInfoLine a,
.sessionInfoLineDetails a {
    overflow: hidden;
    text-overflow: ellipsis;
}

.sessionInfoLine.oneLine strong:not(:first-child),
.sessionInfoLineDetails.oneLine strong:not(:first-child) {
    margin-left: 16px;
}

.sessionInfoLineDetails.oneLine.details {
    margin-left: 12px;
    white-space: nowrap;
}

.sessionInfoLineDetails.oneLine.details.customTagsDetails {
    display: block;
}

.customTagsDetailsContainer {
    display: flex;
    flex-wrap: wrap;
}

.sessionInfoLine.dashed {
    flex-wrap: wrap;
    height: fit-content;
}

.sessionInfoLine.dashed span {
    margin-right: 4px;
}

.sessionTimeline {
    overflow: auto;
    padding: 16px 4px 4px 12px;
}

.sessionTimeline .sessionInfoLine {
    padding: 8px 10px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.collapsibleSessionInfoContainer .sessionInfoLine {
    padding-bottom: 0;
    padding-top: 0;
}

.staticMoreDetailsContainer {
    box-shadow: 0 3.2px 7.2px 0 rgb(0 0 0 / 13%), 0 0.6px 1.8px 0 rgb(0 0 0 / 11%);
    z-index: 1;
    padding: 12px 16px 0;
}

.sessionInfoLine .lineDot {
    display: flex;
    align-content: center;
    padding-left: 12px;
    position: relative;
}

.sessionInfoLine .line {
    border-left: 2px solid #EDEBE9;
    height: 36px;
}

.sessionInfoLine .dot {
    z-index: 1;
    background-color:#323130;
    height: 8px;
    width: 8px;
    left: 9px;
    top: 35%;
    position: absolute;
    border-radius: 50%;
}

.sessionInfoLine .dot.purple {
    background-color: #A864CD;
}

.purpleIcon {
    color: #A864CD;
    font-size: 16px;
}

.sessionInfoLine .time {
    margin-left: 12px;
}

.sessionTimeline > .impressionTimeline:last-child {
    margin-bottom: 24px;
}

.impressionTimeline {
    width: 100%;
    background-color: #FFF;
    margin-bottom: 4;
}

.impressionTimeline:nth-child(2) {
    border-top-width: 1px;
}

.impressionTimeline:nth-child(2n) {
    background: white;
}

.activeImpression {
    outline: 2px solid #0078D7;
}

.activeImpression:nth-child(2) {  
    border-top: 1px solid rgba(221, 221, 221, 0.55);
}

.filterableInfoTooltip {
    display: inline-grid;
}

.truncatedLine {
    text-overflow: ellipsis;
    overflow: hidden;
}

.eventSelected {
    background-color: #0078D7;
    color: white;
    font-weight: 600;
}

.eventText {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}

.eventMetadata {
    flex: 1;
    margin-left: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.noteTitle {
    white-space: unset;
}

.taggingContainer {
    margin-top: 16px;
    margin-bottom: 4px;
}

.timelineTitle {
    font-size: 16px;
    margin-bottom: 8px;
}

.playbackContainer {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

.tagHeader {
    font-size: 16px;
    font-weight: 500;
    display: flex;
    margin: 5px;
}

.basePickerListBelow.error {
    border-bottom: 1px solid #A80000;
}

.inputTextError {
    color: #A80000;
    font-size: 12px;
}

.promoEmailToggles {
    margin-left: 16px;
}

.promoEmailToggles .digestProjectsList {
    max-height: 172px;
    overflow-y: scroll;
    margin: 8px 0;
}

.promoEmailToggles .digestProjectsList.overflowBorder {
    border: 1px solid #CCCCCC;
    padding: 0 16px;
}

.basePickerListBelow .ms-BasePicker-text{
    border: none;
}

.basePickerListBelow .ms-BasePicker-input {
    background-color: #FAF9F8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.taggingContainer .ms-SelectionZone {
    display: none;
}

.tagElement {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tagElement i {
    cursor: default;
}

.tagBadge {
    color: #004578;
    background: #EFF6FC;
    max-width: calc(100% - 2*4px);
    display: flex;
    justify-content: space-between;
    margin: 4px;
    width: fit-content;
}

.taggingContainer .ms-FocusZone {
    flex-wrap: wrap;
    display: flex;
}

.suggestedTagItem {
    line-height: 30px;
    margin: 6px 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 334px;
    max-width: 334px;
    text-align: left;
}

.suggestedTagItem span {
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tagBadge span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.taggingContainer .basePickerListBelowDisabled .ms-BasePicker-text, 
.taggingContainer .basePickerListBelowDisabled .ms-BasePicker-text:after {
    border-color: transparent;
}

.basePickerListBelowDisabled {
    background-color: #F3F2F1;
}

.basePickerListBelowDisabled input,
.selectedTagsContainer.empty,
.selectedTagsContainer.emptyerror {
    border: none;
}

.selectedTagsContainer {
    margin-top: 24px;
    border: solid 1px #605E5C;
    flex-wrap: wrap;
    background-color: #FFFFFF;
}

.selectedTagsContainer.error {
    margin-top: 8px;
}

.suggestedTagItem {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.createNewTag {
    align-items: baseline;
    color: #106EBE;
}

.createNewTagIcon {
    margin-right: 8px;
    color: #106EBE;
}

.newTaggingContainer > div {
    margin-top: 8px;
}

.newTaggingContainer .tagBadge {
    width: unset;
    border: 1px solid rgba(96, 94, 92, 1);
    margin: 12px 0;
    max-width: 100%;
}

/********************************************/
/***********      footer       **************/
/********************************************/

.footer {
    background-color: #F2F2F2;
    padding: 0 54px;
    color: #767676;
    font-size: 11px;
    line-height: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer > * {
    color: #6a6a6a;
}

.footerLink {
    cursor: pointer;
    color: #6a6a6a;
    text-decoration: none;
}

.footerLink:hover {
    text-decoration: none;
    color: #2494e3;
}

.footerLink:focus-visible {
    outline: 3px solid;
}

.footerNavContainer {
    max-width: 1540px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 77px 0;
}

.footerNavLinks {
    font-size: 16px;
    line-height: 21px;
    display: flex;
    flex-direction: column;
    row-gap: 8px
}

.footerNavTitle {
    font-size: 16px;
    line-height: 21px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.footerLinksContainer {
    display: flex;
    column-gap: 16px;
    padding: 26px 0;
    width: 100%;
    justify-content: flex-end;
}

.footerLinksContainer.compactFooter {
    padding: 10px 24px;
    justify-content: space-between;
    backdrop-filter: blur(6px);
}

.footerLinksContainer.compactFooter .rightFooterLinks{
    column-gap: 16px;
    display: flex;
}

.fontWeight600 {
    font-weight: 600;
}

.size14Text {
    font-size: 14px;
    line-height: 20px;
}

.size12Text {
    font-size: 12px;
    line-height: 16px;
}

.newFooterLinksContainer {
    justify-content: center;
}

.newFooterLinksContainer .userLanguage {
    display: flex;
    column-gap: 8px;
}

.footerSocials {
    display: flex;
    column-gap: 4px;
}

.footerSocials .ms-Link{
    height: 32px;
    padding: 0px;
    box-sizing: content-box;
}


@media only screen and (max-width: 900px) {
    .footerNavContainer {
        flex-direction: column-reverse;
        padding: 26px 0;
        row-gap: 24px;
    }

    .footerNavContainer #socialMedia {
        order: 1;
    }

    .footerNavContainer #resources {
        order: -1;
    }

    .footerLinksContainer {
        padding: 12px 24px;
        justify-content: center;
    }

    .newFooterLinksContainer {
        padding: 26px 0;
    }
}

@media only screen and (max-width: 600px) {
    .newFooterLinksContainer {
        flex-direction: column;
        row-gap: 16px;
        width: 100%;
    }

    .footerLinksContainer.compactFooter .rightFooterLinks {
        flex-direction: column;
        gap: 16px;
    }
}

@media only screen and (max-width: 400px) {
    #headerProjects {
        position: absolute;
        right: 2px;
    }
}
/* end of mobile header hack */ 


@media only screen and (max-width: 500px) {
    .signIn {
        border: none;
        box-shadow: unset;
        top: 48px;
        left: 0;
        transform: unset;
        width: 100vw;
        height: 100vh;
        overflow: auto;
        padding-bottom: 55px;
        border-radius: 0;
        border-top: 1px solid #EDEBE9;
    }

    .signInButton {
        margin-left: auto;
        margin-right: auto;
    }

    .signInModal .overlay,
    .signInModal ~ .wholePage .identity,
    .signInModal ~ .wholePage .feedbackIcon {
        display: none;
    }

    .closeSignIn {
        display: block;
        position: absolute;
        right: 8px;
        top: 0;
        color: black;
    }
}

.regionNaming {
    background: white;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #e5e5e5;
    box-shadow: 0 1px 24px rgba(0,0,0,0.5), 0 0 0 0.5px rgba(0,0,0,.2);
    font-size: 12px;
    background-color: white;
    box-sizing: border-box;
    margin-bottom: 12px;
    cursor: pointer;
    position: relative;
}

.regionNaming > *:not(button) {
    margin-bottom: 12px;
}

.regionNaming button {
    margin-right: 12px;
}

.regionsOverlay {
    display: flex;
    position: absolute;
    background: white;
    width: 100%;
    height: 100%;
    overflow: hidden;
    left: 0;
    top: 0;
    z-index: 3;
}

.selectorArea {
    justify-content: center;
    overflow: hidden auto;
    flex: 1 1 auto;
    align-items: unset;
}

.selectorArea > div {
    width: 100%;
}

.selectorArea iframe {
    border: 1px solid #cccccc;
}

.regionsPanel > button {
    width: 100%;
    margin-bottom: 12px;
}

.cardTitle {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    width: 90%;
    display: flex;
}

.cardTitle,
.heatmapUrl,
.sessionImpression span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cardInfo {
    margin-top: 12px;
    font-size: 13px;
    line-height: 18px;
}

.card3dots {
    position: absolute;
    right: 7px;
    top: 7px;
}

.card3dots i {
    color: #000;
    font-size: 16px;
}

.panelDescription,
.regionsPanel .separator {
    margin-bottom: 12px;
}
.regionsPanel .separator::before {
    background: #DDD;
}
.regionsPanel .separator > div {
    background: #FAFAFA;
}

.regionsPanel .cardInfo {
    word-break: break-word;
}

.regionNamingTitle {
    font-size: 16px;
    line-height: 1.4em;
    cursor: default;
}

.regionNaming .errorMessage {
    color: red;
}

.regionsPanel .loading {
    margin-bottom: 12px;
}

.spanFilter {
    grid-column: span 2;
}

.googleOptimizeFilterArea {
    margin-top: 20px;
}

.spanFilter .optionSection {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.spanFilter .options > .optionSection {
    margin-bottom: 12px;
}

.spanFilter .optionSection > * {
    flex: 1;
    margin-right: 12px;
}

.spanFilter .selectedOptions div:first-child {
    margin-right: 60px;
}

.googleOptimizeLearnMoreModal {
    width: 420px;
    display: flex;
    text-align: center;
    box-shadow: 0px 25.600000381469727px 57.599998474121094px 0px #00000038, 0px 4.800000190734863px 14.399999618530273px 0px #0000002E;
    border-radius: 2px;
}

.googleOptimizeLearnMoreModal > div {
    display: flex;
    flex-direction: column;
    justify-content: start;
}

.googleOptimizeLearnMoreModalHeader {
    padding: 16px 24px 16px 22px;
    display: flex;
    justify-content: start;
}

.googleOptimizeLearnMoreModalHeader h2 {
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: #323130;
    text-align: left;
    min-width: 350px;
}

.googleOptimizeLearnMoreModalBody a {
    color:rgb(0, 120, 212);
    margin: 0 3px;
    text-decoration: underline;
}

.googleOptimizeLearnMoreModalHeader .closeIcon {
    color: #666;
    margin-left: 3px;
}

.googleOptimizeLearnMoreModalBody {
    padding: 8px 24px;
}

.hasExperiments .googleOptimizeLearnMoreModalBody {
    padding-top: 4px;
}

.googleOptimizeLearnMoreModalBody h4 {
    font-size: 14px;
    font-weight: 600;
    line-height: 19px;
    letter-spacing: 0px;
    text-align: left;
    color: #333333;
    margin-top: 18px;
}

.googleOptimizeLearnMoreModalBody h4:first-of-type {
    margin-top: 3px;
}

.googleOptimizeLearnMoreModalBody h5 {
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0px;
    text-align: left;
    margin-top: 8px;
    color: #605E5C;
}

.googleOptimizeLearnMoreModalActionButtons {
    display: flex;
    justify-content: flex-end;
    margin: 20px;
}

.googleOptimizeLearnMoreModalActionButtons a {
    background: #0078D4;
    padding: 6px 20px;
    height: 32px;
    border-radius: 2px;
    color: #FFF;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: center;
    margin: 0 4px;
    margin-top: 7px;
}

.googleOptimizeLearnMoreModalActionButtons button {
    margin: 0 4px;
    margin-top: 7px;
}

.googleOptimizeLearnMoreModalActionButtons a:hover {
   text-decoration: none;
    background-color: #106ebe;
}

.spanFilter .optionSection button,
.spanFilter .iconPlaceholder {
    flex: 0;
    margin-right: 0;
}

.spanFilter .optionSection .multiSelectValue {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filterHeader button {
    height: 20px;
    color:rgb(0, 120, 212);
    padding-left: 0;
}

.learnMoreButton {
   margin-left: 0;
}

.learnMoreButton :hover {
    color:rgb(0, 120, 212);
    text-decoration: underline;
}

.spanFilter .iconPlaceholder {
    width: 32px;
}

.regionSetup .title {
    font-size: 17px;
    font-weight: 500;
    margin-top: 40px;
    margin-bottom: 12px;
    line-height: 1.4em;
}

.regionSetup .description {
    margin-bottom: 30px;
}

.regionRow {
    display: flex;
    margin-top: 20px;
    max-width: 1000px;
}

.regionRow > * {
    flex: 1;
    margin-right: 20px;
}

.regionRow > button {
    flex: 0;
}

.regionRow.newRegion > button:last-child {
    visibility: hidden;
}

.analytics,
.goSettings {
    font-size: 14px;
    line-height: 18px;
    color: #323130;
    margin: 8px 0px;
    border-top: 1px solid #B3ADB2;
}

.goActions {
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
    margin-top: 20px;
}

.goError {
    margin-top: 10px;
    display: block;
}

.goError .ms-Toggle {
    margin-top: 5px;
}

.gtmWrapper {
    border-bottom: 1px solid #B3ADB2;
}

.tutorialsContent > :first-child {
    border-bottom: 1px solid #B3ADB2;
    padding-bottom: 14px;
    margin-bottom: 19px;
}

.analytics .ms-MessageBar {
    margin-bottom: 24px;
}

.analytics .ms-MessageBar > div {
    margin-bottom: 0;
}

.analytics .gtmLabel {
    font-weight: 600;
    margin-right: 4px;
}

.analytics .heading,
.goSettings .heading {
    font-size: 18px;
    line-height: 20px;
    margin: 10px 0px;
    font-weight: 600;
}

.analytics .subheading,
.goSettings .subheading {
    color: #323130;
}

.analytics .subheading .ms-Link,
.goSettings .subheading .ms-Link {
    margin-right: 4px;
}

.analytics .heading > *,
.goSettings .heading > * {
    vertical-align: bottom;
    display: inline-block;
}

.analytics .action,
.goSettings .action {
    font-size: 14px;
    line-height: 16px;
    color: #484644;
    margin: 0px 8px;
}

.connectedLabel {
    font-weight: 600;
    margin-right: 6px;
    overflow: hidden;
    white-space: nowrap;
}

.connectedContainerFRE {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 39px;
}

.toggleContainerFRE {
    display: flex;
    justify-content: space-between;
}

.toggleContainerFRE span.ms-layer {
    position: absolute;
}

.toggleContainerFRE .gaRemove {
    color: #0078D4;
    cursor: pointer;
}

.settingsSubtitle {
    font-size: 26px;
    line-height: 32px;
    margin: 24px 0 40px 0;
    font-weight: 600;
}   

.googleContainer {
    margin-bottom: 24px;
}

.googleContainer > * svg {
    margin-right: 8px;
}

.googleContainer ~ div > * {
    margin-bottom: 24px;
}

.analytics .signInAgainLink {
    font-size: 12px;
    margin-left: 6px;
}

.analytics .gtmRemoving,
.analytics .gaRemove,
.analytics .hubspotRemoving {
    color: #0078D4;
    font-size: 14px;
}

.analytics .gtmRemove:hover,
.analytics .gtmRemove:focus,
.analytics .gaRemove:hover,
.analytics .gaRemove:focus {
    text-decoration: underline;
    cursor: pointer
}

.compatContent {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    top: 150px;
}

.compatBrowser {
    display: flex;
    align-items: center;
    padding: 8px;
}

.browserIcon {
    margin-right: 16px;
}

.browserLink {
    margin-left: 8px;
}

.browserGrid {
    display: flex;
    flex-direction: column;
}

.msoDel {
    display: none;
}

#wcpConsentBannerCtrl {
    position: fixed;
    bottom: 0;
    border-top: 1px solid #DDD;
    background-color: white !important;
}

#wcpConsentBannerCtrl > *:last-child {
    margin-right: 12px;
}

#wcpConsentBannerCtrl > *:first-child {
    padding-left: 5px;
}

.userViewError {
    padding: 16px;
    font-size: large;
    font-weight: 600;
}

.orAndOption {
    color: #323130;
    font-weight: normal;
    display: flex;
}

.orFilterLabel {
    margin-right: 63px;
}

.orAndFilterLabel {
    display: flex;
    align-items: center;
}

.orAndFilterRadio {
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    margin: 0 8px 0 0;
    font: inherit;
    color: #323130;
    width: 20px;
    height: 20px;
    border: 1px solid #323130;
    border-radius: 50%;
    display: grid;
    place-content: center;
}

.orAndFilterRadio:checked {
    border: 1px solid #0078D4;
}

.orAndFilterLabel:hover > .orAndFilterRadio {
    border-width: 1.5px;
    border-color: #0078D4;
}

.orAndFilterRadio::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: scale(0);
    transition: 80ms transform ease-in;
    box-shadow: inset 10px 10px #0078D4;
  }

.orAndFilterRadio:checked::before {
    transform: scale(1);
}

#ScriptErrorTextbox__JSError__,#ScriptErrorTextbox__ClickError__ {
    background-color: #F3F2F1;
    color: #323130;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    padding-left: 10px;
}

.jsFilterOptionHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
}

.hideJsError div[aria-labelledby="ScriptErrorTextbox__JSError__"] > .ms-ComboBox-option,
.hideClickError div[aria-labelledby="ScriptErrorTextbox__ClickError__"] > .ms-ComboBox-option {
    display: none;
}

.showJsError div[aria-labelledby="ScriptErrorTextbox__JSError__"] > .ms-ComboBox-option,
.showClickError div[aria-labelledby="ScriptErrorTextbox__ClickError__"] > .ms-ComboBox-option {
    display: flex;
}

.jsErrorExpandIcon {
    transition: transform 0.1s linear 0s;
}

.jsErrorCollapsed {
    transform: rotate(180deg);
}

/*OVERRIDING FLUENT UI PANEL BEHAVIOR*/
@media (min-width: 480px) {
    .hamburgerPanel .ms-Panel-main {
        width: 242px;
    }
}

.googleIntegrationsFRE {
    display: flex;
}

.googleIntegrationsFRE > :first-child {
    margin-right: 12px;
}

.connectedGTM > :last-child ,
.connectedGTMFRE > :last-child {
    margin-top: 16px;
}

.connectedGTMFRE .gtmLabel {
    font-weight: 600;
    margin-right: 5px;
}

.connectedGTMFRE .gtmLabelWrapper:last-child {
    margin-top: 8px;
}

.gtmFact {
    margin-top: 10px;
    position: relative;
}

.smallIconsSprite {
    position: absolute;
    overflow: hidden;
    transform-origin: top left;
}

.smallIconsSprite::after {
    content: url(https://claritystatic.azureedge.net/images/smallReactionsIcons.png);
    position: relative;
}

.emoji.smallIconsSprite {
    width: 20px;
}

.emoji.smaillLinkIcon::after {
    left: 0;
}

.emoji.smallEyesIcon::after {
    left: -22px;
}

.emoji.smallMonkeyIcon::after {
    left: -44px;
}

.gtmConnectButtonFRE > :last-child {
    margin: 135px 0 29px 0;
}

.gtmFact span {
    margin-top: 5px;
    margin-left: 30px;
}

.gtmConnectButtonFRE .gtmFact:first-child {
    margin-top: 31px;
}

.gtmConnectButtonFRE > :last-child {
    margin: 135px 0 29px 0;
    margin: 32px 0 29px 0;
}

.gtmConnectButtonFRE {
    border-bottom: solid 1px #B3B0AD;
    margin-bottom: 19px;
}

.gtmFact .ms-Link {
    margin-left: 4px;
}

.finishSetupGTMFRE {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 12px;
}

.hundredPercentHeight {
    height: 100%;
}

.excludeFilterCheckbox {
    margin-top: 12px;
}

@media (forced-colors: active) and (prefers-color-scheme: dark) {
    .msLogo {
        background-color: black;
    }

    .playerInfoIcon path {
        fill: white;
    }
}

@media (forced-colors: active) and (prefers-color-scheme: light) {
    .msLogo {
        background-color: white;
    }
}

#myProjectsInPanel {
    display: none;
    width: 100%;
}

#myProjectsInPanel>div,
#myProjectsInPanel>div>span{
    width: 100%;
}

#myProjectsInPanel .ms-Button:first-child {
    flex-grow: 1;
}

@media only screen and (-webkit-min-device-pixel-ratio : 4) {
    .projHeader.hiddenOnZoom{
        display: none;
    }

    #headerProjects{
        display: none;
    }

    #myProjectsInPanel {
        display: block;
    }
}

.appMaskCodeBlock {
    background-color: #EDEBE9;
    padding: 20px;
}

.liveRecordingContainer {
    display: flex;
    height: 64px;
    background-color: #2F95961A;
    border-radius: 4px;
    padding: 18px;
    margin-bottom: 12px;
    align-items: center;
    position: relative;
}

.liveRecordingContainer.clickable {
    cursor: pointer;
}

.liveRecordingContainer.expanded {
    margin-bottom: 0px;
}

.liveUserContentHeader {
    align-items: center;
    display: flex;
}

.liveUserHeader {
    height: 28px;
    background-color: #2F9596;
    color: white;
    font-weight: 600;
    border-radius: 2px;
    padding: 5px 12px;
    margin-left: 4px;
}

.liveUserHeaderZero {
    padding: 5px 12px;
    margin-left: 4px;
}

.liveUserHeaderZeroBold {
    font-weight: 600;
}

.liveRecordingContainer .ms-Icon {
    position:absolute;
    right: 24px;
}

.liveRecordingCardContainer {
    overflow-y: scroll;
    padding:0 8px;
    background-color: #2F95961A;
    height: 100%;
}

.liveRecordingsHeader {
    font-weight: 600;
}

.liveLabelContainer {
    display: flex;
    align-items: center;
    height: 16px;
}

.liveLabel {
    background-color: #2F9596;
    color: white;
    margin-left: 4px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 600;
    width: 48px;
    display: flex; 
    justify-content: center
}

.videoControlLiveIcon {
    align-items: center;
    display: flex;
    padding-right: 4px;
}

.liveButton {
    background-color: #2F9596;
    color: white;
    margin-left: 8px;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 600;
    width: 69px;
    text-align: center;
}

.goLiveButton {
    background-color: white;
    color: #2F9596;
    border-color: #2F9596;
    border-style: solid;
    border-width: 1px;
    margin-left: 8px;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 600;
    width: 69px;
    text-align: center;
    cursor: pointer;
}

.cardRow.urlDate > .flexAuto {
    flex: auto;
}

.filterUrlWrapper {
    display: flex;
    align-items: center;
    margin-right: 10px;
    flex: 0 0 auto;
    border:none;
}

.filterUrlWrapper.gap {
    gap: 16px;
}

.filterUrlWrapper .urlActionWrapper{
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 8px 0;
}
.filterUrlWrapper .urlActionWrapper.withPadding{
    padding-left: 16px;
}

.filterUrlWrapper .separator {
    height: 16px;
    width: 8px;
    padding: 8px;
    background-color: #fff;
}

.filterUrlWrapper .heatmapUrlSearchBox {
    border-width: 0 0 1px 0;
    border-radius: 0;
    flex-grow: 1;
}

.filterUrlWrapper .ms-SearchBox {
    margin-bottom: 0;
}

.filterUrlWrapper .ms-Dropdown {
    width: 132px;
    border-width: 0 0 1px 0;
    border-radius: 0;
}

.filterUrlWrapper .badgeView .ms-Dropdown {
    width: unset;
    min-width: 120px;
} 

.filterUrlWrapper .ms-Dropdown-title {
    border-width: 0 0 1px 0;
    border-radius: 0;
}

.filterUrlWrapper.badgeView {
    margin-right: 0px;
}

.filterUrlWrapper .badgeView .ms-Dropdown,
.filterUrlWrapper .badgeView .ms-Dropdown-title,
.filterUrlWrapper .badgeView.ms-SearchBox,
.filterUrlWrapper .badgeView .ms-Dropdown-caretDownWrapper {
    border:none;
    height: 24px;
}

.filterUrlWrapper .badgeView .ms-Dropdown-title,
.filterUrlWrapper .badgeView .ms-Dropdown-caretDownWrapper {
    display: flex;
    align-items: center;
}

.filterUrlWrapper .addURLButton {
    height: 32px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 6px;
    gap: 8px;
    line-height: 100%;
    border: none;    
    text-align: center;
}
.filterUrlWrapper .addURLButton .ms-Button-label {
    color: #323130;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    min-width: 54px;
}
.filterUrlWrapper .addURLButton i{
    color: #0078D4;
    font-size: 12px;
    font-weight: 900;
}

.filterUrlWrapper .deleteURLButton {
   margin-left: 2px;
}

.filterUrlWrapper .addURLButton.is-disabled,
.filterUrlWrapper .addURLButton.is-disabled .ms-Button-label,
.filterUrlWrapper .addURLButton.is-disabled i {
   color: #A19F9D;
   background-color: #fff;
}

.selectedurlsWrapper {
  margin-top: 16px;
}

.selectedURL {
    display: flex;
    align-items: center;
}

.selectedUrlRow {
    border-bottom: 1px solid #D9D9D9;
    margin-left: 34px;
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 8px;
}
.selectedUrlRow.firstRow{
    border-top: 1px solid #D9D9D9;
}
.selectedUrlRow .selectedPattern{
    color: #605E5C;
    width: 148px;
    vertical-align: center;
}

.selectedUrlRow .selectedValue{
    color: #605E5C;
    width: 460px;
}

.selectedUrlRow .actionButton{
    width: 24px;
    height: 32px;
    display: flex;
    align-items: center;
    background-color: #fff;
    margin-right: 12px;
}

.selectedUrlRow .actionButton i{
   font-size: 12px;
}

.goToVpButton {
    transform: translateY(-12px);
    display: flex;
    justify-content: space-between;
}

.goToVpButton .ms-Button {
    margin-top: 6px;
}

/* Adding this here for WebHeatmapPage rebrand background*/
.rebrandPage {
    min-height: 100%;
    background: #EFF6FC;
}

.embedZapier {
    padding: 24px 32px;
    min-height: 1000px;
}

.zapierContainer {
    visibility: hidden;
}

.zapierContainerLoading {
    visibility: hidden;
}

.homepageHeader {
    border: none;
    width: 100%;
    box-sizing: content-box;
    padding-right: 0;
    padding-left: 0;
    width: unset;
}

.centered,
.homepageHeader {
    max-width: 1340px;
    margin: 0 auto;
}

.homepage img {
    display: inline-block;
    width: 100%;
}

.homepage .banner {
    padding: 110px 80px;
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, #FDFEFF 0%, #F0F8FF 100%), #FFFFFF;
}

.banner .centered,
.valueProp {
    display: flex;
    align-items: center;
}

.bannerText:not(.newHomepage .bannerText) {
    width: 360px;
    flex: 1 0 auto;
}

.bannerTitle {
    font-size: 40px;
    line-height: 1.2em;
    margin-bottom: 24px;
}

.bannerDescription {
    font-size: 18px;
    line-height: 1.2em;
    margin-bottom: 60px;
}

.bannerButtons .liveDemoButton {
    color: #0078D7;
    border-color: #0078D7;
    background-color: transparent;
    margin-left: 16px;
}

.bannerButtons .liveDemoButton:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.jumplinks {
    width: max-content;
    padding: 20px 0 40px;
}

.jumplink,
.jumplink > * {
    display: inline-block;
    color: black;
    font-size: 14px;
    line-height: 19px;
    text-transform: uppercase;
    vertical-align: middle;
}

.jumplink:focus-visible {
    outline: 3px solid;
}

.jumplinkIcon {
    margin-right: 10px;
}

.jumplink:not(:last-child) {
    margin-right: 48px;
}

.valueProp {
    padding: 40px 0;
    cursor: default;
}

.valueProp:nth-child(2n) {
    flex-direction: row-reverse;
}

.valueProp > * {
    width: 50%;
}

.valueTextWrapper {
    display: flex;
    color: black;
    margin-right: 20px;
    flex: 1;
}

.valueProp:nth-child(2n+1) .valueTextWrapper {
    justify-content: flex-end;
    margin-left: 20px;
    margin-right: 0;
}

.valueImg {
    justify-self: center;
}

.valueImg img {
    max-width: 610px;
    display: block;
    margin: 0 auto;
}

.valueText {
    max-width: 470px;
}

.valueTitle {
    margin-top: 16px;
    font-size: 32px;
    line-height: 40px;
    font-weight: 600;
}

.valueSubtitle {
    margin-top: 8px;
    font-size: 18px;
    line-height: 28px;
    color: #737373;
}

.valueDescription {
    margin-top: 16px;
    font-size: 18px;
    line-height: 28px;
}

.clarityVideo {
    margin: 40px auto;
}

.clarityVideo .videoTitle {
    text-align: center;
    font-size: 32px;
    line-height: 42px;
    margin: 40px 0;
    font-weight: 600;
}

.clarityVideo iframe {
    margin: 0 auto;
    display: block;
    max-width: 100%;
}

.clarityVideoWrapper {
    margin: 0 auto;
    display: block;
    max-width: 100%;
    max-height: 475px;
}

.highlightedFaqs {
    background-color: #FAF9F8;
    padding: 24px 16px;
    margin-bottom: 80px;
    margin-top: 40px;
}

.highlightedFaq {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.highlightedFaqsTitle {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
}

.seeAllFAQ {
    font-size: 14px;
}

.seeAllLink:focus-visible {
    outline: 3px solid;
}

.seeAllLink {
    color: #3A6BE4;
}

.faqHeader {
    padding: 12px;
    font-weight: 600;
    color: #323130;
    cursor: pointer;
}

.faqHeader > * {
    display: inline-block;
}

.faqHeader .faqQuestion {
    margin-left: 12px;
}

.faqAnswer {
    padding: 12px;
    padding-left: 37px;
}

.getClarity {
    padding: 136px 0;
    background: linear-gradient(255.81deg, #55ADFF -6.3%, #3A6BE4 105.73%), #3A6BE4;
    color: white;
    text-align: center;
}

.getClarity button {
    color: #3A6BE4;
    border-color: #fff;
    border-radius: 2px;
}

.getClarity .centered {
    max-width: 350px;
}

.getClarityTitle {
    font-size: 34px;
    line-height: 40px;
    margin-bottom: 26px;
}

.getClarityText {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 26px;
}

.localizationDropdown {
    width: 110px;
    margin-right: 16px;
    margin-left: 24px;
}

.languageDropdownDivider {
    margin-left: 8px;
}

.localizationMenuDropdown {
    margin-bottom: 16px;
}

.darkHeader .localizationDropdown .ms-Dropdown:focus i,
.darkHeader .localizationDropdown .ms-Dropdown:focus span {
    color: white;
}

.localizationDropdown .ms-Dropdown:focus i,
.localizationDropdown .ms-Dropdown:focus span {
    color: black;
}

.myProjectsLoading {
    width: 180px;
    height: 72px;
}

.newHomepage .banner .newHeader .ms-Dropdown-title,
.homepageHeader .ms-Dropdown-title {
    border-width: 0;
    border-radius: 0;
}

.newHomepage .banner .newHeader .ms-Dropdown:hover {
    background-color: #106ebe;
}

.homepageHeader .ms-Dropdown-title:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.newHomepage .banner .newHeader .ms-Dropdown:hover i,
.newHomepage .banner .newHeader .ms-Dropdown:hover span {
    background: transparent;
    color: white;
}

.goToProjectsRow {
    border-top: 1px solid #EDEBE9;
    padding: 8px;
    cursor: pointer;
}

.header .projectsButton .ms-Button-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: normal;
}

@media only screen and (min-width: 1660px) {
    .homepageHeader.stickyHeader {
        padding-left: 80px;
        padding-right: 80px;
    }
}

@media only screen and (max-width: 1660px) {
    .homepageHeader,
    .valueProps {
        padding-left: 80px;
        padding-right: 80px;
        box-sizing: content-box;
    }

    .highlightedFaqs {
        margin-left: 80px;
        margin-right: 80px;
    }
}

@media only screen and (max-width: 798px) {
    .homepage .homepageHeader {
        padding-left: 0px;
        padding-right: 0px;
        justify-content: center;
    }
}

@media only screen and (max-width: 530px) {
    .homepage .banner,
    .homepage .homepageHeader,
    .homepage .valueProps {
        padding-left: 16px;
        padding-right: 16px;
    }

    .header .projectsButton .ms-Button-label {
        max-width: 100px;
    }

    .homepage .highlightedFaqs {
        margin-left: 26px;
        margin-right: 26px;
    }

    .homepage .bannerText {
        text-align: center;
        width: fit-content;
    }

    .homepage .bannerTitle {
        font-size: 32px;
        line-height: 40px;
    }

    .homepage .valueTitle,
    .homepage .clarityVideo .videoTitle {
        font-size: 24px;
        line-height: 32px;
    }

    .homepage .valueSubtitle {
        font-size: 16px;
        line-height: 22px;
    }
}

@media only screen and (max-width: 400px) {
    .homepage .banner,
    .homepage .homepageHeader,
    .homepage .valueProps {
        padding-left: 8px;
        padding-right: 8px;
    }
    .header .projectsButton .ms-Button-label {
        max-width: 70px;
    }
}


/* NEW HOMEPAGE */

.newHomepage {
    overflow: hidden;
}

.newHomepage .banner {
    height: calc(51vw + 397px);
    min-height: 1140px;
}

.banner.updatedHomePage {
    height: calc(57vw + 397px);
    min-height: 1340px;
}

.newHomepage .bannerShape {
    width: 100%;
    height: calc(51vw + 397px);
    position: absolute;
    background: #FAF9F8;
    z-index: -1;
    overflow: hidden;
    min-height: 1140px;
}

.banner.updatedHomePage .bannerShape {
    height: calc(57vw + 397px);
    min-height: 1340px;
}

.newHomepage .bannerShape>svg {
    width: 100%;
    height: 55vw;
    min-width: 1600px;
    min-height: 880px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -3px;
}

.newHomepage .banner .newHeader {
    position: absolute;
    width: 100%;
    box-sizing: border-box;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.newHomepage .banner .newHeader:not(.darkHeader) {
    background-color: white;
}

.newHomepage .bannerContent {
    height: 50vw;
    min-height: 800px;
    color: white;
}

.newHomepage .bannerTextArea {
    max-width: 823px;
    margin: 0 auto;
    padding-top: calc(17vw - 149px);
}

.newHomepage .bannerTitle {
    font-size: 48px;
    line-height: 52px;
}

.bannerTitleIcon {
    margin-right: 10px;
}

.newHomepage .bannerText {
    font-size: 22px;
    line-height: 30px;
    margin: 36px 0;
}

.newHomepage .pageBannerFeatures {
    margin-bottom: 50px;
}

.newHomepage .pageBannerFeature {
    color: white;
}

.newHomepage .bannerTextArea .ms-Button--default {
    border: none;
    color: #3A6BE4;
    margin-right: 12px;
}

.newHomepage .bannerTextArea .ms-Button--primary {
    border-color: white;
    background: transparent;
}

.newHomepage .bannerTextArea .ms-Button--primary:hover {
    background: rgba(0, 0, 0, 0.05);
}

.newHomepage .swoosh {
    position: absolute;
    top: calc(20vw - 446px);
    right: calc(79vw - 1557px);
}

.newHomepage .narrowSwoosh {
    position: absolute;
    width: 100%;
    height: 164vw;
    top: calc(-149vw + 729px);
    right: 50%;
    transform: translateX(50%);
}

.newHomepage .narrowSwoosh svg {
    height: 100%;
    min-width: 600px;
    min-height: 984px;
}

.newHomepage:not(.narrowPage) .phoneIllustration {
    position: absolute;
    left: 0;
    top: 192px;
    max-width: 38%;
}

.newHomepage .laptopIllustration {
    position: absolute;
    max-width: 38%;
    top: -97px;
    right: 0;
}

.newHomepage .laptopIllustration>svg,
.newHomepage:not(.narrowPage) .phoneIllustration>svg,
.newHomepage .narrowSwoosh>svg,
.newHomepage .freeIllustration svg {
    width: 100%;
}

.newHomepage.narrowPage .phoneIllustration>svg {
    display: block;
    margin: 0 auto;
}

.newHomepage .companiesUsingClarityTitle {
    width: 100%;
}

.newHomepage .companies {
    margin: 40px 0;
}

.newHomepage .learnMoreContainer {
    display: flex;
    justify-content: space-between;
}

.selectedTitleContainer span {
    padding: 8px;
}

.newHomepage .learnMore {
    font-size: 16px;
    line-height: 20px;
    text-decoration: underline;
    color: #005A9E;
}

.newHomepage .subBannerContainer {
    padding-left: 80px;
    background: #DEECF9;
    width: 100%;
}

.newHomepage .subBannerCentered {
    display: flex;
    align-items: center;
    max-width: 1512px;
    margin: 0 auto;
}

.subBannerTextArea {
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.subBannerTextArea .landingSectionTitle {
    text-align: left;
    margin-bottom: 16px;
}

.subBannerTextArea .landingTemplatePageHeaderSubtitle {
    margin-bottom: 0;
}

.subBannerTextArea .ms-Button {
    max-width: 128px;
    border-color: #0078D4;
    color: #0066b4;
    margin-top: 48px;
}

.subBannerTextArea .topAction {
    margin-top: 8px;
}

.subBannerTextArea .bottomAction {
    margin-top: 40px;
}

.newHomepage .freeIllustration {
    flex: 1;
    margin-left: 152px;
}

.newHomepage .subBannerIllustration {
    flex: 1;
    min-height: 594px;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: center;
}


.newHomepage .subBannerIllustration.free {
    background-image: url("https://claritystatic.azureedge.net/images/PricingBanner.png");
}

.newHomepage .subBannerIllustration.extension {
    background-image: url("https://claritystatic.azureedge.net/images/extension.png");
}

.subBannerContainer.liveExtensionBanner {
    background-color: #FFFFFF;
}

.subBannerContainer.freeBanner {
    padding: 80px;
}

.stickyHeader {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background: white;
    z-index: 1000;
    border-bottom: 1px solid lightgray;
}

.homepageHeader.stickyHeader {
    max-width: initial;
}

.newHomepage .platformsRatingWrapper {
    background-color: #FAF9F8;
    width: 100%;
}

.newHomepage .platformsRatingContainer {
    display: flex;
    justify-content: space-around;
    max-width: 1165px;
    margin: 0 auto;
    width: 100%;
    background-color: #FAF9F8;
    padding-bottom: 32px;
}

.platformsRatingContainer .platform {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    max-width: 244px;
}

.platformsRatingContainer .platform img {
    position: relative;
}

.platformsRatingContainer .capterraLogo {
    left: 90px;
}

.platformsRatingContainer .g2Logo {
    left: -168px
}

.platform .ratingContainer {
    display: flex;
    margin: 26px 0 8px;
    align-items: baseline;
    font-weight: 600;
    font-size: 28px;
    line-height: 36px;
    column-gap: 24px;
}

.ratingContainer .ms-Link {
    color: #106EBE;
}

.platform .ms-Rating-button {
    margin-right: 12px;
}

.platform .ms-Rating-star .ms-RatingStar-back {
    color: #A19F9D;
}

.platform .ms-Rating-star .ms-RatingStar-front {
    color: #F2C811;
}

@media only screen and (max-width: 1600px) {
    .newHomepage .bannerTextArea {
        padding-top: 109px;
    }
}

@media only screen and (min-width: 1101px) {
    .newHomepage .companiesUsingClarityContainer {
        padding-top: 0;
        margin-top: -25px;
        background-color: transparent;
    }
}

@media only screen and (max-width: 1100px) {
    .newHomepage .banner {
        height: fit-content;
        min-height: unset;
    }

    .banner.updatedHomePage .bannerShape,
    .newHomepage .bannerShape,
    .newHomepage .bannerContent {
        min-height: unset;
        height: calc(-30vw + 1150px);
    }

    .newHomepage .narrowSwoosh {
        top: unset;
        height: unset;
        bottom: 0;
        min-width: 600px;
        left: 50%;
        transform: translateX(-50%);
    }

    .newHomepage .phoneIllustration {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .newHomepage .subBannerContainer {
        padding: 80px;
    }
}

@media only screen and (max-width: 750px) {
    .platform .ratingContainer {
        font-size: 24px;
        column-gap: 14px;
    }

    .platformsRatingContainer .platform img {
        transform: scale(0.75);
    }

    .platformsRatingContainer .capterraLogo {
        left: 68px;
    }

    .platformsRatingContainer .g2Logo {
        left: -130px
    }
}

.maxHomePageBanner .bannerContent {
    position: relative;
}

.maxHomePageBanner .bannerContent ,
.maxHomePageBanner .bannerContent .pageBannerFeature {
    color: #343434;
}

.maxHomePageBanner .bannerContent .pageBannerFeature {
    font-weight: 600;
}

.maxHomePageBanner .bannerTextArea .ms-Button--primary {
    margin-right: 12px;
}

.maxHomePageBanner .bannerContent .bannerTextArea {
    padding-top: calc(5vw + 52px);
    padding-left: calc(5vw + 52px);
    max-width: 823px;
    margin: unset;
}

.maxBannerShape {
    height: 100%;
    width: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
}

.maxBannerShape img {
    position: absolute;
    width: 100%;
    object-fit: contain;
    bottom: 0;
    right: 0;
}

#corkImg {
    top: 0;
    padding-top: 48px;
}  

.maxHomePageBanner .bannerContainer {
    background: linear-gradient(90.33deg, #F1F1F1 -1.13%, #C2BEB2 103.38%);
    position: relative;
}

.maxHomePageBanner .maxHomePageBanner .bannerTitle {
    font-weight: 350;
}

.maxHomePageBanner .landingSection.newCompaniesUsingClarity {
    background-color: #FAF9F8;
    padding-top: 80px;
    position: relative;
}

.maxHomePageBanner #firstContentItem {
    border: 1px solid rgb(0, 120, 212);
    background-color: rgb(0, 120, 212);
}

@media only screen and (max-width: 500px) {
    .newHomepage .featureImage img {
        border-radius: 5px;
    }

    .newHomepage .platformsRatingContainer {
        flex-direction: column;
        row-gap: 52px;
        align-items: center;
    }

    .responsiveFeatures .featureImage img {
        border-radius: 5px;
    }

    .newHomepage .companiesUsingClarityBody {
        margin-top: -120px;
    }

    .newHomepage .companiesUsingClarityTitle {
        width: 240px;
        margin: 0 30px;
    }

    .newCompaniesUsingClarity .companiesUsingClarityTitle {
        width: unset;
    }
}


@media only screen and (max-width: 1200px) {
    .maxHomePageBanner .bannerContent .bannerTextArea {
        max-width: 1000px;
    }
}

@media only screen and (min-width: 2881px) {
    .maxHomePageBanner .bannerContent .bannerTextArea {
        margin-left: 391px;
        padding-left: 0;
    }
}

@media only screen and (max-width: 900px) {
    .newHomepage .bannerTextArea {
        padding-right: 30px;
        padding-left: 30px;
    }

    .newHomepage .bannerTitle {
        text-align: center;
        font-size: 42px;
        line-height: 52px;
    }

    .newHomepage .bannerText {
        font-size: 20px;
        line-height: 28px;
        margin: 24px 0 20px;
    }

    .newHomepage .pageBannerFeatures {
        width: fit-content;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 36px;
    }

    .newHomepage .buttonArea {
        text-align: center;
        position: static;
    }

    .newHomepage .featureImage img {
        border-radius: 10px;
    }

    .maxHomePageBanner .bannerContent .bannerTextArea {
        margin: 0 61px auto;
        padding-left: unset;
        padding-top: calc(5vw + 82px);
        max-width: 817px;
    }
    .jumplinkTitle {
        display: none;
    }

    .valueProps {
        margin: 40px 0 48px;
    }

    .valueProp {
        flex-wrap: wrap;
        padding: 0;
    }

    .valueProp > * {
        width: 100%;
        margin-bottom: 48px;
    }

    .valueImg {
        max-width: unset;
    }

    .valueProps .valueProp .valueTextWrapper {
        justify-content: center;
        margin-left: 0;
        margin-right: 0;
        text-align: center;
    }

    .responsiveFeatures .featureImage img {
        border-radius: 10px;
    }
}

@media only screen and (max-width: 600px) {
    .maxHomePageBanner .bannerContent .bannerTextArea {
        margin: 0 61px 0 61px;
        padding-right: unset;
        padding-left: unset;
    }

    .maxHomePageBanner .bannerContainer .buttonArea {
        display: flex;
        justify-content: center;
    }

    .maxHomePageBanner .bannerTextArea {
        padding: 0 61px;
    }

    #desktopImg {
        padding-top: 510px;
    }

    .newHomepage .narrowSwoosh,
    .newHomepage .phoneIllustration {
        left: 0;
        transform: unset;
    }

    .newHomepage .pageBannerFeature {
        font-size: 19px;
        line-height: 22px;
        margin: 5px 0;
    }

    .newHomepage .companiesUsingClarityContainer {
        padding-bottom: 40px;
    }

    .newHomepage .companiesUsingClarityBody {
        margin: 0 auto;
    }
}

@media only screen and (max-width: 375px) {
    .maxHomePageBanner .bannerContent .bannerTextArea {
        margin: 0 41px 0 41px;
        padding-right: unset;
        padding-left: unset;
    }
}

.maxHomePageBanner .homepageHeader {
    max-width: unset;
}

@media only screen and (min-width: 1800px) {
    .maxHomePageBanner .header.newHeader.homepageHeader {
        padding-left: 10%;
        padding-right: 10%;
    }
}

@media only screen and (max-width: 700px) {
    .maxHomePageBanner .bannerContainer {
        height: 880px;
        max-height: 880px;
    }

    .newHeader.homepageHeader {
        padding: 8px;
    }

    .subBannerTextArea,
    .subBannerTextArea .landingSectionTitle,
    .subBannerTextArea .landingTemplatePageHeaderSubtitle {
        text-align: center;
        align-items: center;
    }

    .subBannerTextArea .ms-Button {
        align-self: center;
    }
}

/* features container */
.responsiveFeatures {
    overflow: hidden;
}

.responsiveFeatures .features {
    padding: 60px;
    max-width: 1776px;
    box-sizing: content-box;
    margin: 0 auto;
    position: relative;
}

.highlightContainer .responsiveFeatures .features {
    padding: 60px 0;
}

.responsiveFeatures .features .landingSectionTitle {
    text-align: start;
    margin-bottom: 40px;
}

.highlightContainer .responsiveFeatures .features .featuresArea .landingSectionTitle {
    margin-bottom: 40px;
    color: white;
    /* below should come from landingPageTitle */
    font-size: 32px; 
    line-height: 42px;
    font-weight: 500;
}

/* featuresStack */
.featuresStack {
    text-align: center;
}

.featuresStack .featureImage {
    position: relative;
    width: 100%;
    margin-bottom: 44px;
}

.featuresStack img {
    width: 100%;
    max-width: 770px;
}

.featuresStack .featureTitle {
    font-size: 28px;
    line-height: 1.2em;
}

.featuresStack .featureText {
    margin: 24px auto 32px;
    font-size: 18px;
    line-height: 24px;
    max-width: 460px;
}

.featureStack:not(:last-child) {
    margin-bottom: 112px;
}

/* features */
.subBannerTextArea .landingSectionTitle {
    text-align: left;
    margin-bottom: 16px;
}

.responsiveFeatures .featuresArea {
    display: flex;
    width: 100%;
    color: black;
}

.responsiveFeatures .featuresArea .featureImage {
    flex: 1 1 1190px;
}

.responsiveFeatures .featuresArea img {
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    position: relative;
}

.responsiveFeatures .featuresList {
    margin-right: 130px;
}

.responsiveFeatures .featuresListWithRightTiles {
    margin-left: 130px;
}

.responsiveFeatures .feature {
    padding: 24px;
    border: 1px solid #E1DFDD;
    border-radius: 4px;
    margin-top: 24px;
    cursor: pointer;
    width: 456px;
    min-height: 169px;
    display: flex;
    flex-direction: column;
}

.responsiveFeatures .feature.selected {
    background: #EFF6FC;
    box-shadow: 0px 0.6px 1.8px rgb(0 0 0 / 10%), 0px 3.2px 7.2px rgb(0 0 0 / 13%);
}

.responsiveFeatures .learnMoreContainer {
    display: flex;
    justify-content: space-between;
    height: 20px;
    margin-top: auto;
}

.selectedTitleContainer {
    margin-left: auto;
}

.selectedTitleContainer span {
    padding: 8px;
}

/* common */
.responsiveFeatures .featureTitle {
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
}

.responsiveFeatures .featureText {
    margin-top: 8px;
}

.responsiveFeatures .learnMore {
    font-size: 16px;
    line-height: 20px;
    text-decoration: underline;
    color: #0072c9;
}

.responsiveFeatures .featureImage img {
    border-radius: 21px;
    box-shadow: 0 25.6px 57.6px 0 rgb(0 0 0 / 22%), 0 4.8px 14.4px 0 rgb(0 0 0 / 18%);
}

/* General */
.centeredElement {
  margin: 0 auto;
  color: inherit;
}

.landingSection {
  padding-top: 80px;
  padding-bottom: 80px;
}

.rebrand .landingSectionTitle {
	background-image: linear-gradient(90deg, #8F58AB -8.93%, #3D60E0 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
    margin: 20px 0;
    width: 100%;
}

.landingSectionTitle {
  font-size: 32px;
  line-height: 42px;
  font-weight: 500;
  text-align: center;
}

.boldText {
  font-weight: 500;
}

.bolderText {
  font-weight: 600;
}

.focusSection {
  background: linear-gradient(42.14deg, #3A6AD8 0.64%, #3D7FDB 51.71%, #4094EB 98.69%),
    linear-gradient(42.14deg, #3C70E6 0.64%, #53A7FD 98.69%);
  color: #fff;
  text-align: center;
  width: 100%;
}

.focusSection h3 {
  color: #fff;
}

.focusSectionLight {
  background-color: #deecf9;
  color: #fff;
  text-align: center;
  width: 100%;
}

.flexContainer {
  display: flex;
  justify-content: center;
  align-items: center;
}

.columnFlexContainer {
  flex-direction: column;
}

.mediumText {
  font-size: 16px;
  line-height: 22px;
}

.normalText {
  font-size: 18px;
  line-height: 24px;
}

/* Page Header */
.rebrand .landingTemplatePageHeader {
    background: linear-gradient(280.24deg, #A0D6FF 0%, #C2E3FF 36.46%, #DFF0FF 50%, #F5FBFF 77.08%);
}

.landingTemplatePageHeader {
  padding: 90px 10vw;
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, #fdfeff 0%, #f0f8ff 100%), #fff;
}

.landingTemplatePageHeader svg {
  display: inline-block;
  width: 44%;
  max-width: 800px;
}

.landingTemplatePageHeaderContent {
  width: 58%;
  max-width: 760px;
}

.animatedText {
  font-family: monospace;
  font-weight: 400;
}

.landingTemplatePageHeaderContent h1 {
  font-size: 42px;
  font-weight: 600;
  line-height: 52px;
  margin-bottom: 20px;
}

.landingTemplatePageHeaderContent h2 {
  font-size: 20px;
}

.landingTemplatePageHeaderSubtitle {
  font-size: 20px;
  line-height: 28px;
  margin-bottom: 18px;
}

.landingTemplatePageHeaderContent a,
.landingTemplatePageHeaderContent button {
  margin: 0;
  margin-right: 15px;
  width: max-content;
  min-width: 113px;
  text-align: center;
  height: 31px;
  border-radius: 2px;
}

.rebrand .landingTemplatePageHeaderContent a, 
.rebrand .landingTemplatePageHeaderContent button {
    border-radius: 47px;
    background: #0078D4;
    box-shadow: 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.13), 0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.10);
    min-width: 156px;
    min-height: 38px;
}

.rebrand .landingTemplatePageHeaderContent .extraButtons a, 
.rebrand .landingTemplatePageHeaderContent .extraButtons button {
    border-radius: 47px;
    color: #0078D4;
    background-color: #fff;
    border: 1px solid #005493;

    box-shadow: 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.13), 0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.10);
}

.landingTemplatePageHeaderContent a:focus-visible,
.landingTemplatePageHeaderContent button:focus-visible {
  outline: 2px solid #0078D4;
}

.landingTemplatePageHeaderContent a {
  background: #0078D4;
  color: white;
  padding: 5px 16px;
  font-weight: 600;
}

.landingActionButtons a:hover {
  background-color: #106ebe;
  border-color: #106ebe;
}

.extraButtons .ms-Button {
  border-color: #0078D4;
  color: #0078D4;
  min-width: 132px;
}

.extraButtons a {
  background-color: #fff;
  border: 1px solid #0078D4;
}

.extraButtons a:hover {
  background-color: #0000000d;
}

.landingTemplatePageHeaderBody {
  min-height: 320px;
}

.landingTemplatePageHeaderBody img {
  height: 320px;
}

.mobileFeaturesSectionRebrand,
.mobileWorksWithSectionRebrand {
    display: none;
}

.landingActionButtons {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.landingActionButtons .ms-Button {
  margin-top: 30px;
}

.landingActionButtons a {
  margin-top: 30px;
}

.pageBannerFeature {
  display: inline-flex;
  align-items: center;
  margin-right: 36px;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
}

.pageBannerFeatureIcons {
  display: inline-block;
  padding-left: 12px;
}

.pageBannerFeatureIconsList {
  display: flex;
  gap: 8px;
}

.pageBannerFeatureIconsList img {
  height: 24px;
}

.pageBannerFeature:last-child {
  margin-right: 0;
}

.pageBannerFeature i {
  margin-right: 4px;
}

/* Highlights */
.keyFeatures {
  margin: 80px 40px;
  font-size: 28px;
  line-height: 36px;
}

.keyFeatures i {
  font-size: 50px;
  line-height: 50px;
  margin-bottom: 24px;
}

.keyFeatures h4 {
  width: 200px;
  color: #fff;
}

.highlightContainer {
  text-align: left;
}

.highlightContainer .highlight,
.highlightContainer .responsiveFeatures {
	padding: 60px 10vw;
}

.highlightContainer:nth-child(odd) .highlight {
  flex-direction: row-reverse;
}

.highlightContainer:nth-child(even) .highlight {
	color: #fff;
	padding: 110px 81px;
}

.rebrand .highlightContainer:nth-child(even) .highlightTextWrapper {
	padding: 0 40px;
}

.highlightContainer:nth-child(odd) .highlightTextWrapper,
.highlightContainer:nth-child(even) .highlightMedia {
  padding-right: 40px;
}

.highlightContainer:nth-child(odd) .highlightMedia,
.highlightContainer:nth-child(even) .highlightTextWrapper {
  padding-left: 40px;
}

.highlightContainer:nth-child(even) .highlight {
  margin: auto;
}

.rebrand .highlight {
	color:#323130;
}

.highlight {
  justify-content: center;
  cursor: default;
  color: white;
}

.highlightMedia {
  justify-self: center;
  width: 55%;
  max-width: 800px;
}

.highlightMedia > div {
  display: flex;
  align-items: center;
}

.highlightMedia img {
  width: 100%;
  display: block;
  margin: 0;
  border-radius: 10px;
  filter: drop-shadow(0px 4.8px 14.4px rgba(0, 0, 0, 0.18));
}

.landingSection .responsiveFeatures .featureImage img {
  border-radius: 10px;
  filter: drop-shadow(0px 4.8px 14.4px rgba(0, 0, 0, 0.18));
  box-shadow: none;
}

.rebrand .highlightContainer h4 {
	color: #323130;
}

.highlightContainer h4 {
  margin: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: white;
  text-align: center;
}

.rebrand .highlightTextWrapper {
	color: #323130;
}

.highlightTextWrapper {
  align-items: flex-start;
  color: white;
  flex: 1;
  max-width: 670px;
}

.highlightTextWrapper ul {
  padding: 20px 0px;
  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap: 17px;
  font-size: 16px;
  line-height: 26px;
}

.highlightTextWrapper .ms-Link {
  color: white;
}

.highlightTextWrapperDarkerText {
  color: black;
}

.rebrand .paragraph .highlightContainer h3 {
	font-size: 38px;
} 

.highlightContainer h3 {
  font-size: 28px;
  line-height: 34px;
  font-weight: 700;
  color: inherit;
  text-align: left;
}

.highlightText {
  font-size: 20px;
  line-height: 26px;
  margin-top: 8px;
  color: inherit;
}

.highlightsSubtitle {
  margin: 16px 0;
}

.rebrand .paragraph .highlightPointsList {
	list-style-type: none;
	margin: 32px 1px 4px;
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.highlightPointsList {
  margin: 16px;
}

.rebrand .paragraph .highlightPoint {
	font-size: 16px;
}

.highlightPoint {
  font-size: 20px;
  line-height: 26px;
  margin: 6px;
}

.rebrand .paragraph .highlightPoint span {
	display: block;
	font-weight: 600;
}

.highlightPoint span {
  font-weight: 700;
  margin-right: 5px;
}

.highlightLineSeparator {
  max-width: 1000px;
  width: 80%;
  height: 0;
  border: 3px solid #fff;
  opacity: 0.25;
  margin: 120px auto;
}

.largeRebrandedFaqs {
  padding: 0 95px !important;
  flex-direction: row !important;
}

.largeRebrandedFaqsContainer {
  width: 50%;
  row-gap: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.rebrand .landingFaqs {
	background-image: url("https://claritystatic.azureedge.net/images/faqBG1920.png");
	background-repeat: no-repeat;
	background-color: transparent;
	background-size: contain;
	flex-direction: column;
	justify-content: center;
	background-position: center center;
	min-height: 650px;
	padding: 20px;
}

.landingFaqs {
  flex-wrap: wrap;
  padding: 75px 22vw 75px 15vw;
  background-color: #FAF9F8;
}

.rebrand .landingFaq {
	padding: 15px;
	margin-bottom: 10px;
	border-radius: 8px;
}

.landingFaq {
  background-color: #fff;
  box-shadow: 0 0.3px 0.9px rgba(0, 0, 0, 0.1), 0 1.6px 3.6px rgba(0, 0, 0, 0.13);
  margin: 15px 0;
  padding: 10px 12px;
}

.landingFaqsTitle {
  margin: 75px 0;
  margin-right: 70px;
  width: 32%;
  max-width: 404px;
}

.rebrand .landingFaqsTitleLarge {
  margin: unset !important;
  max-width: 404px;
}

.landingFaqsTitle .mediumText {
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  margin-top: 10px;
  color: #72716f !important;
}

.landingFaqsTitle .faqIllustration {
  margin: 20px 0;
  max-width: 400px;
  width: 100%
}

/* Benefits */
.mergeBenefitsandFeatures {
  flex-wrap: wrap;
  align-items: stretch;
}

.mergeBenefitsandFeatures .centeredElement {
  position: relative;
  flex: 1;
  min-width: 620px;
  min-height: 600px;
}

.verticalSeparator {
  width: 4px;
  opacity: 0.25;
  margin: 80px 0;
  background-color: #fff;
}

.benefitsGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 10px;
}

.benefit {
  font-size: 24px;
  line-height: 32px;
  margin: 30px;
}

.benefit svg {
  margin: 25px;
}

/* FeaturesList */
.featuresContainer table {
  margin: 50px auto 0;
  font-weight: 500;
  max-width: 1180px;
  box-shadow: 0px 0.6px 1.8px rgb(0 0 0 / 10%), 0px 3.2px 7.2px rgb(0 0 0 / 13%);
  border-radius: 4px;
  overflow: hidden;
}

.featuresContainer tr>* {
  padding: 12px 24px;
}

.featuresContainer th {
  background-color: #F0EEEE;
  color: #62605F;
}

.featuresContainer td {
  background-color: #fff;
  color: #484644;
}

.featuresContainer th:nth-child(even) {
  text-align: center;
  width: 100px;
}

.featuresContainer td:nth-child(odd) {
  text-align: left;
  width: 480px;
}

.standaloneFeaturesContainer td:nth-child(odd) {
  width: 100%;
}

.featuresContainer i {
  color: #55B17E;
}

/* Free Text */
.freeText {
  background-color: #FAF9F8;
  padding-right: 10%;
  padding-left: 10%;
}

.freeText h3 {
  text-align: left;
  margin-bottom: 30px;
}

.freeText p {
  margin: 15px 0;
  font-size: 18px;
}

.landingBanner {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height: 320px;
  flex-grow: 1;
}

.freeBanner {
  background-image: url("https://claritystatic.azureedge.net/images/PricingBanner.png");
}

.gaBanner {
  background-image: url("https://claritystatic.azureedge.net/images/gaBanner.png");
}

.heatmapsBanner {
  background-image: url("https://claritystatic.azureedge.net/images/heatmapsBanner.png");
}

.sessionRecordingsBanner {
  background-image: url("https://claritystatic.azureedge.net/images/sessionRecordingsBanner.png");
}

.insightsBanner {
  background-image: url("https://claritystatic.azureedge.net/images/insightsBanner.png");
}

.liveExtensionBanner {
  background-image: url("https://claritystatic.azureedge.net/images/liveExtensionBanner.png");
}

.integrationsBanner {
  background-image: url("https://claritystatic.azureedge.net/images/integrationsBanner1.png");
}

.shopifyBanner {
  background-image: url("https://claritystatic.azureedge.net/images/shopifyBanner.png");
}

.softrBanner {
  background-image: url("https://claritystatic.azureedge.net/images/softrBanner.png");
}

.mobileBanner {
  background-image: url("https://claritystatic.azureedge.net/images/mobileBanner.png");
}

.copilotBanner {
  background-image: url("https://claritystatic.azureedge.net/images/copilotBanner.png");
}

.bubbleBanner {
  background-image: url("https://claritystatic.azureedge.net/images/bubbleBanner.png");
}

.privacyBanner {
    background-image: url("https://claritystatic.azureedge.net/images/privacyBanner.png");
}

.faqIllustration {
  width: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height: 320px;
  flex-grow: 1;
  background-image: url("https://claritystatic.azureedge.net/images/faqIllustration2.png");
}

.gaPanelLogo {
  background-image: url(https://claritystatic.azureedge.net/scripts/client/0e2a679974bb6b5e6a25.png);
  width: 20px;
  height: 20px;
  background-position: left;
  background-size: cover;
  background-repeat: no-repeat;
}

/* ClarityOffers */
.clarityOffersContainer {
  padding: 40px 14vw;
  align-items: flex-start;
}

.rebrand .clarityOfferInstance {
    max-width: calc(100% - 40px);
}

.clarityOfferInstance {
  width: 33%;
  max-width: 630px;
  margin: 20px;
}

.clarityOfferImage {
  max-width: 100%;
  max-height: 350px;
  min-width: 250px;
  width: auto;
  margin: 20px 0;
}

.denseOffers {
  min-width: 170px;
}

.clarityOfferText {
  min-height: 150px;
}

.clarityOfferText h3 {
  font-size: 32px;
  line-height: 42px;
  font-weight: 500;
  text-align: center;
}

.clarityOfferInstance p {
  width: 100%;
  max-width: 320px;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  margin: 10px auto 0;
}

.clarityOfferLearnMore {
  margin: 24px 0;
  color: #000;
  border: 1px solid #000;
  border-radius: 2px;
  padding: 6px 20px;
  font-size: 14px;
  line-height: 24px;
}

.clarityOfferLearnMore:hover {
  background-color: #0000000d;
  color: #000;
}

.privacyHighlightsButtonGrpContainer {
  margin: 15px 0 30px;
  display: flex;
  gap: 8px;
}

.privacyHighlightsButtonContainer {
	margin: 15px 0 30px;
}

.privacyHighlightsButton {
	font-size: 14px;
	line-height: 20px;
	padding: 12px;
	font-weight: 600;
	color: #020057;
	border-radius: 4px;
	border: 1px solid var(--Accent-Tropical-Indigo-Primary, #827DFF);
	background: rgba(255, 255, 255, 0.30);
}

.privacyHighlightsButton:hover {
	background: #F5F5F5;
	text-decoration: none;
}
/* FAQ */
.landingFaqQuestion {
  justify-content: space-between;
  cursor: pointer;
}

.selectedQuestion i,
.landingFaqQuestion i:hover,
.selectedQuestion h1 {
  color: #0078D4;
}

.viewAllFAQ a {
  color: #0072c9;
}

.rebrand .landingFaqsContent {
    max-width: unset;
    width: 100%;
    margin: 0 auto;
    display: grid;
    display: flex;
    column-gap: 10px;
    max-width: 1300px;
}

.rebrand .landingFaqsContentRebradedLarge {
  width: 50% !important;
}

.landingFaqsContent {
  max-width: 720px;
  width: 42%;
  margin-left: 70px;
}

.rebrand .landingFaqsCol {
  width: 100%;
}

.rebrand .faqRow {
	display: flex;
	gap: 20px;
}

.viewAllFAQNewLarge {
  padding: 5px 12px;
  width: 248px;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid #827DFF;
  border-radius: 4px;
}

.viewAllFAQNewLarge a {    
  width: 224px;
  font-weight: 600;
  display: flex;
  color: #020057;
}

.viewAllFAQ {
  font-size: 12px;
  margin-top: 25px;
  text-decoration: underline;
}

.viewAllFAQ a:focus-visible,
.clarityOfferLearnMore:focus-visible {
  outline: 1px solid;
}

.rebrand .landingFaqHeader {
    padding: 0 12px;
}

.landingFaqHeader {
  padding: 12px;
  color: #323130;
  cursor: pointer;
}

.landingFaqHeader>* {
  display: inline-block;
}

.rebrand .faqAnswer {
	padding: 12px 0 0 20px;
}

.faqAnswer {
  padding: 12px 0;
}

.faqAnswer a {
  text-decoration: underline;
}

/* Testimonials */

.paginationIndicator {
	width: 4px;
	height: 4px;
	border-radius: 4px;
	background-color: #0078D4;
	margin-right: 12px;
}

.paginationIndicator.selected {
	width: 6px;
	height: 6px;
	border-radius: 6px;
}

.horizontalCenteredFlex {
	display: flex;
	justify-content: center;
	align-items: center;
}

button.paginationChevron {
	margin-right: 40px;
	padding: 22px;
}

.mobilePaginationChevron.previous,
.paginationChevron.previous {
	transform: rotate(180deg);
}

.mobilePaginationChevron {
	margin-left: auto;
	display: none;
}

.mobilePaginationChevron.previous {
	margin-left: 0;
	margin-right: auto;
}

.paginationChevron.previous {
	margin: 0 0 0 40px;
}

.mobilePaginationChevron svg,
.mobilePaginationChevron i,
.paginationChevron i,
.paginationChevron svg {
	width: 40px;
	height: 40px;
}

.mobilePaginationChevron path,
.paginationChevron path {
	fill: #A7A5F5;
}

.testimonialsContainer {
	overflow: hidden;
	padding: 96px 60px;
}

.testimonialsContainer h2 {
	font-size: 36px;
	font-weight: 600;
	text-align: center;
	background: linear-gradient(90deg, #8F58AB -8.93%, #3D60E0 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.testimonialsWrapper {
	max-width: 1032px;
	min-height: 380px;
	margin: 50px auto;
	display: flex;
	justify-content: center;
	gap: 120px;
}

.testimonialRebrand {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 264px;
	min-width: 180px;
	min-height: 136px;
}

.testimonialRebrand img {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 48px;
}

.testimonialRebrand h3 {
	color: #605E5C;
	font-size: 16px;
}

.testimonialRebrand h3::after,
.testimonialRebrand h3::before {
	content: '"';
}

.testimonialRebrand p {
	align-self: flex-start;
	margin-top: 24px;
}

.whatUsersSay {
  background: #deecf9;
}

.whatUsersSayBody {
  overflow: hidden;
  position: relative;
  margin: auto;
}

.whatUsersSayBody .testimonialIllustration {
  position: absolute;
  width: 17%;
  height: auto;
}

.howToConnect {
  background: #deecf9;
}

.howToConnectBody {
  overflow: hidden;
  position: relative;
  margin: auto;
}

.howToConnectContainer {
  flex-wrap: wrap;
  max-width: 1000px;
  margin: auto;
}

.howToConnectImgContainer {
  margin: auto;
}

.howToConnectImg {
  height: 100px;
  margin-left: -13px;
}

.howToConnectCardHeadline {
  margin-top: 16px;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: #323130;
}

.howToConnectCardDescription {
  color: #484644;
  margin-top: 12px;
  margin-bottom: 41px;
}

.howToConnectCardSignInText {
  font-size: 16px;
  line-height: 20px;
  text-decoration-line: underline;
  color: #0078D4;
}

.howToConnectCardContainer {
  display: flex;
  flex-flow: row nowrap;
  width: auto;
  height: auto;
  box-sizing: border-box;
}

.howToConnectCardNumber {
  width: 13px;
  height: 40px;
  left: 24px;
  top: 24px;
  font-weight: 600;
  font-size: 32px;
  line-height: 40px;
  color: #000000;
}

.alreadyACustomerContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 0px;
  gap: 12px;
  text-align: center;
}

.alreadyACustomerSectionTitle {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  padding: 0px 10px;
}

.alreadyACustomerSectionSubtitle {
  font-size: 14px;
  padding: 0px 10px;
  max-width: 536px;
}

.alreadyACustomerActionButtons {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20px 0px 0px;
  gap: 16px;
}

.alreadyACustomerActionButtons .linkButton {
  color: #0078D4;
  border: 1px solid #0078D4;
}

.whatUsersSayBody .testimonialIllustration:first-of-type {
  bottom: -4px;
  left: 1vw;
}

.whatUsersSayBody .testimonialIllustration:last-of-type {
  bottom: 169px;
  right: -30px;
  width: 12%;
}

.whatUsersSayBody .pagination i:not([data-icon-name=StatusCircleOuter]) {
  color: #0066b4;
}

.whatUsersSayContainer {
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 40px auto;
}

.testimonial {
  background-color: white;
  border-radius: 5px;
  max-width: 240px;
  height: 260px;
  min-height: 260px;
  margin: 15px;
  padding: 41px 10px 15px 28px;
}

.howToConnectCard {
  background-color: white;
  border-radius: 8px;
  max-width: 300px;
  height: 300px;
  min-height: 300px;
  margin: 15px;
  padding: 24px;
}

.howToConnectCard.centered {
  text-align: center;
}

.howToConnect a {
  text-decoration-line: underline;
  color: #0072cc;
}

.howToConnect a:active,
.howToConnect a:hover {
  text-decoration: none;
  outline: 0;
}

.testimonial h3 {
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  max-height: 200px;
  text-align: center;
}

.testimonialSource {
  margin: 10px;
}

.quotations {
  display: block;
  position: relative;
  left: -10px;
  top: -3px;
}

.testimonialSource img {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background-color: transparent;
	margin-bottom: 20px;
}

.testimonialSource p {
  color: #8a8886;
  font-size: 11px;
}

.pagination {
  margin-bottom: 5px;
}

.paginationChevron:hover {
  background-color: transparent;
}

.paginationButton {
  height: 12px;
  width: 12px;
  border: 1px solid #605e5c;
  margin: 4px;
  padding: 0;
  color: transparent;
  border-radius: 50%;
}

.selectedPaginationButton {
  color: #005a9e;
}

/* Companies Using Clarity */
.companiesUsingClarityContainer {
  background-color: #FAF9F8;
}

.companiesUsingClarityBody {
  justify-content: space-around;
  align-items: flex-start;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 40px auto;
  padding: 0 10px;
}

.newCompaniesUsingClarity .companiesUsingClarityBody {
  max-width: 1150px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.companiesUsingClarityTitle {
  margin: 0;
}

.companies {
  align-items: flex-start;
  max-height: 160px;
  flex-wrap: wrap;
  min-width: 200px;
}

.newCompaniesUsingClarity .companies {
  column-gap: 20%;
  row-gap: 32px;
  margin: 40px 60px 0;
  max-height: unset;
  width: 100%;
}

.newCompaniesUsingClarity .companies div {
  min-width: 60px;
  width: 100%;
  max-width: 120px;
  height: 78px;
  overflow: hidden;
}

.newCompaniesUsingClarity .companies img {
  position: relative;
}

.company {
  border-left: 4px solid #0078D4;
  padding: 10px 20px;
}

/* Integrations */
.integrationsContainer {
  padding: 66px 15.7vw;
  display: flex;
  flex-direction: column;
  background-color: #DEECF9;
  align-items: center;
}

.lightBackgroundOverride {
  background-color: white;
}

.IntegrationsSection {
  padding: 24px 0px;
}

.IntegrationsSection h2,
.integrationTitle {
  line-height: 40px;
  font-size: 32px;
  font-weight: 600;
  padding-top: 20px
}

.integrationSubtitle {
  font-size: 20px;
  padding: 12px 0px;
}

.platformGridContainer {
  display: grid;
  gap: 40px;
  padding-top: 36px;
  grid-template-columns: repeat(auto-fill, 320px);
  min-width: 1400px;

}

.paddingTopOverride {
  padding-top: 40px !important;
}

.platformCard {
  width: 320px;
  border-radius: 4px;
  background-color: #FFFFFF;
  box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
}

.platformCard:hover {
  box-shadow: 0px 4.8px 14.4px rgba(0, 0, 0, 0.18), 0px 25.6px 57.6px rgba(0, 0, 0, 0.22);
  cursor: pointer;
}

.platformCardSmaller {
  width: 280px;
  height: 64px;
  border-radius: 4px;
  background-color: #FFFFFF;
  box-shadow: 0px 0.3px 0.9px rgb(0 0 0 / 10%), 0px 1.6px 3.6px rgb(0 0 0 / 13%);
  display: flex;
  flex-flow: row nowrap;
  box-sizing: border-box;
  align-items: center;
}

.platformCardSmaller img {
  width: 40px;
  margin-left: 12px;
}

.platformCardSmaller:hover {
  box-shadow: 0px 4.8px 14.4px rgba(0, 0, 0, 0.18), 0px 25.6px 57.6px rgba(0, 0, 0, 0.22);
  cursor: pointer;
}

.platformLogo {
  height: 160px;
  border-bottom: 1px solid #EDEBE9;
  display: flex;
  justify-content: center;
  align-items: center;
}

.platformLogoSmaller {
  border-bottom: 1px solid #EDEBE9;
  justify-content: center;
  align-items: center;
}

.platformLogo .platformsIcons {
  position: absolute;
  overflow: hidden;
  transform-origin: top left;
  height: 100px;
  width: 110px;
  min-width: 100px;
}

.platformLogo .platformsIcons::after {
  content: url(https://claritystatic.azureedge.net/images/allIntegrationsIcons5.png);
  position: relative;
}

.platformLogo .abtastyIcon::after {
  top: -538px;
}

.platformLogo .bubbleIcon::after {
  left: -130px;
}

.platformLogo .GAIcon::after {
  left: -250px;
}

.platformLogo .GOIcon::after {
  left: -370px;
}

.platformLogo .optimizelyIcon::after {
  left: -500px;
}

.platformLogo .adobeIcon::after {
  top: -138px;
}

.platformLogo .clickFunnelsIcon::after {
  top: -138px;
  left: -122px;
}

.platformLogo .gatsbyIcon::after {
  top: -138px;
  left: -250px;
}

.platformLogo .gtagIcon::after {
  top: -138px;
  left: -385px;
}

.platformLogo .joomlaIcon::after {
  top: -138px;
  left: -515px;
}

.platformLogo .shopifyIcon::after {
  top: -275px;
}

.platformLogo .squarespaceIcon::after {
  top: -275px;
  left: -112px;
}

.platformLogo .unbounceIcon::after {
  top: -275px;
  left: -245px;
}

.platformLogo .webflowIcon::after {
  top: -275px;
  left: -370px;
}

.platformLogo .aitocIcon::after {
  top: -413px;
  left: -260px;
}

.platformLogo .analyzifyIcon::after {
  top: -413px;
  left: -130px;
}

.platformLogo .softrIcon::after {
  top: -412px;
}

.platformLogo .wordpressIcon::after {
  top: -413px;
  left: -390px;
}

.platformLogo .sharePointIcon::after {
  top: -538px;
  left: -130px;
}

.platformLogo .kameleoonIcon::after {
  top: -538px;
  left: -256px;
}

.platformLogo .wixIcon {
  width: 155px;
}

.platformLogo .wixIcon::after {
  top: -410px;
  left: -520px;
}

.platformLogo .weeblyIcon {
  width: 135px;
}

.platformLogo .weeblyIcon::after {
  top: -275px;
  left: -508px;
}

.platformLogo .zapierIcon::after {
    top: -538px;
    left: -390px;
}

.platformLogo .hubspotIcon::after {
  top: -530px;
  left: -520px;
}

.platformInfo {
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 12px;
}

.platformName {
  color: #0078D4;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}

.platformNameSmaller {
  color: rgba(0, 0, 0, 0.83);
  font-weight: 600;
  line-height: 20px;
  text-align: left;
  margin-left: 12px;
}

.platformDescription {
  font-size: 12px;
  color: black;
}

@media only screen and (max-width: 1920px) {
  .integrationsContainer {
    padding: 66px 13vw;
  }
	.rebrand .landingFaqs {
		background-image: url("https://claritystatic.azureedge.net/images/faqBG1440.png");
	}
}

@media only screen and (max-width: 1660px) {
  .platformGridContainer {
    min-width: 1040px;
  }
}

@media only screen and (max-width: 1300px) {
  .platformGridContainer {
    min-width: 680px;
  }

	.rebrand .landingFaqs {
		padding: 40px;
	}
}

@media only screen and (max-width: 1000px) {
	.rebrand .landingFaqs {
		background-image: url("https://claritystatic.azureedge.net/images/faqBG1000.png");
	}
}

@media only screen and (max-width: 767px) {
  .platformGridContainer {
    min-width: 320px;
    justify-content: center;
  }

  .rebrand .landingFaqsContent {
    flex-wrap: wrap;
		padding: 0;
  }
}

@media only screen and (max-width: 440px) {
	.rebrand .landingFaqs {
		background-image: url("https://claritystatic.azureedge.net/images/faqBG440.png");
	}
}

@media only screen and (max-width: 320px) {

  .integrationTitle,
  .integrationSubtitle {
    padding: 0px 20px;
  }

  .platformCard {
    width: 280px;
    margin: auto;
  }
}

/* Footer */
.rebrand .focusSection.landingFooter {
  background: url("data:image/svg+xml,<svg width=\"1440\" height=\"401\" viewBox=\"0 0 1440 401\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1440 228.36H0V60.4003C57.6 55.9003 400.2 49.4043 542.4 52.4043C684.6 55.4043 950.546 27.1758 1070 27.1758C1242.2 27.1758 1340.4 61.4043 1440 48.4043V228.36Z\" fill=\"url%28%23paint0_linear_292_25%29\"/><path d=\"M1440 248.414H0V64.9138C57.6 60.4138 322.8 24.1762 465 27.1762C607.2 30.1762 934.146 59.9138 1053.6 59.9138C1225.8 59.9138 1340.4 61.4132 1440 48.4132V248.414Z\" fill=\"url%28%23paint1_linear_292_25%29\"/><path d=\"M1440 400.176H0V51.1758C57.6 46.6758 397.2 52.6758 539.4 55.6758C681.6 58.6758 935.346 67.1758 1054.8 67.1758C1227 67.1758 1340.4 59.6758 1440 46.6758V400.176Z\" fill=\"url%28%23paint2_linear_292_25%29\"/><defs><linearGradient id=\"paint0_linear_292_25\" x1=\"725.5\" y1=\"58.1763\" x2=\"1805.5\" y2=\"80.1764\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"%2397C7FD\"/><stop offset=\"1\" stop-color=\"%23F3FCFF\"/></linearGradient><linearGradient id=\"paint1_linear_292_25\" x1=\"471\" y1=\"35.9043\" x2=\"1547.57\" y2=\"119.715\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"%23B8B6FF\"/><stop offset=\"1\" stop-color=\"%2383ADFF\"/></linearGradient><linearGradient id=\"paint2_linear_292_25\" x1=\"720\" y1=\"46.6758\" x2=\"720\" y2=\"260.176\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"%235AB2F1\"/><stop offset=\"0.5625\" stop-color=\"%23308ADB\"/><stop offset=\"1\" stop-color=\"%23025EC4\"/></linearGradient></defs></svg>");
  background-repeat: no-repeat;
  color: #fff;
  padding: 110px 0 81px;
  background-size: cover;
}

.landingFooter {
  padding: 120px 0;
}

.landingFooter .centeredElement {
  padding: 0 40px
}

.landingFooter button {
  color: #3a6be4;
  border: none;
  border-radius: 2px;
  margin: 10px;
}

.landingFooter button:hover {
  color: #3a6be4;
  background-color: #eee;
}

.landingFooterTitle {
  margin-bottom: 24px;
  font-size: 32px;
  line-height: 42px;
  font-weight: 500;
  text-align: center;
}

.landingFooterText {
  margin-bottom: 30px;
}

.gaLandingPanel .ms-Panel-footer {
  height: 64px;
  border-top: 1px solid #EDEBE9;
}

.gaLandingPanel .ms-Panel-footerInner {
  display: flex;
  align-items: center;
  height: 100%;
  margin-left: 24px;
  padding: 0;
}

.gaLandingPanel .ms-Panel-footerInner .ms-Button:not(:last-child) {
  margin-right: 8px;
}

.gaLandingPanel .ms-Panel-header {
  margin-bottom: 26px;
}

.gaLandingPanelSection {
  border-top: 1px solid #B3B0AD;
}

.gaLandingPanelSection:not(:last-child) {
  margin-bottom: 14px;
}

.gaLandingPanelSection .sectionTitle {
  margin: 12px 0 16px 0;
  color: #323130;
  font-weight: 600;
  font-size: 18px;
  line-height: 21px;
  display: flex;
  align-items: center;
}

.gaLandingPanelSection .sectionTitle span {
  margin-left: 12px;
}

.gaLandingPanelSection .displayEmail,
.gaLandingPanelSection .name,
.gaLandingPanelSection .website,
.gaLandingPanelSection .siteCategory {
  min-height: 62px;
  font-weight: 500;
  padding-bottom: 12px;
}

.gaLandingPanelSection .ms-TextField {
  margin-top: 5px;
}

.gaLandingPanelSection .termsOfServiceContainer {
  display: flex;
  align-items: center;
  margin-top: 12px;
  margin-bottom: 16px;
}

.gaLandingPanelSection .termsOfServiceContainer a {
  margin-left: 4px;
}

.gaLandingPanelSection .gaManualEnterContainer .collapsibleContentHeader {
  color: #0078D4;
  font-weight: 500;
}

.gaLandingPanel .gaSuccessWrapper .collapsibleContentTitle,
.gaLandingPanelSection .gaManualEnterContainer .collapsibleContentTitle {
  margin-left: 8px;
}

.gaLandingPanelSection .gaManualEnterContainer .gaManualEnter {
  margin-left: 26px;
}

.gaLandingPanelSection .gaManualEnterContainer .manualGAInputTextWrapper {
  height: unset;
}

.gaLandingPanelSection .gaManualEnterContainer .ms-TextField:not(:first-child) {
  margin-top: 17px;
  margin-bottom: 0;
}

.gaLandingPanelSection .gaManualEnterContainer .ms-TextField:first-child {
  margin-top: 12px;
  margin-bottom: 0;
}

.gaLandingPanelSection .cannotAddGAMessage {
  font-size: 13px;
  margin: 16px 0;
}

.gaLandingPanelSection .GaLoading {
  min-height: 150px;
}

.gaLandingPanelSection .noWebPropertiesFound {
  color: #A4262C;
  font-size: 12px;
  margin-top: 8px;
}

.gaLandingPanelSection .webPropertiesError {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-weight: 600;
}

.gaLandingPanelSection .webPropertiesError span {
  max-width: 80%;
  font-weight: normal;
  margin-top: 8px;
}

.gaLandingPanelSection .webPropertiesError .ms-Link {
  margin-right: 4px;
}

.gtmSectionWrapper .collapsibleContentHeader {
  margin: 10px 0px;
  font-weight: 600;
  color: #0078D4;
  display: flex;
}

.gtmSectionWrapper .collapsibleContentHeader div {
  margin-left: 8px;
}

.gtmSectionWrapper .gtmContent {
  margin-left: 24px
}

.gtmSectionWrapper .gtmSubHeader {
  margin-bottom: 24px;
}

.gtmSectionWrapper .gtmButtonMargin {
  margin-top: 8px;
}

.creatingAndLinkingContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.creatingAndLinkingContainer img {
  padding-bottom: 36px;
}

.creatingAndLinkingTitle {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  margin-bottom: 16px;
  align-self: flex-start;
}

.creatingAndLinkingContainer svg {
  margin-bottom: 36px;
}

.gaLandingPanel .gaSuccessWrapper .collapsibleContentHeader {
  font-weight: 500;
  display: flex;
  align-items: center;
}

.gaLandingPanel .gaSuccessWrapper {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
}

.gaLandingPanel .gaSuccessWrapper .nextSteps {
  margin-top: 40px;
  font-weight: 600;
}

.gaLandingPanel .gaSuccessWrapper img {
  align-self: center;
  margin-top: 18px;
}

.manualInstallWrapper .collapsibleContentHeader {
  font-weight: 600;
  margin-bottom: 10px;
  padding-top: 8px;
  color: #0078D4;
  display: flex;
}

.manualInstallWrapper .manualInstallContent {
  margin-left: 24px;
}

.manualInstallWrapper .collapsibleContentHeader div {
  margin-left: 8px;
}

.manualInstallWrapper .manualInstallMessage{
  margin-bottom: 17px;
}

.gaPanelErrorWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gaPanelErrorWrapper div {
  margin-top: 16px;
  text-align: center;
}

.gaPanelErrorWrapper>div:first-of-type {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
}

.gaLandingPanelSection .gtmContent .ms-MessageBar {
  background: #EFF6FC;
  margin: 16px 0;
}

.gaLandingPanelSection .gtmLabel {
  font-weight: 600;
  margin-right: 4px;
}

.gaLandingPanelSection .gtmSubHeader .ms-Link {
  margin: 0 4px;
}

.gaLandingPanelSection .privacyLink {
  text-decoration: underline;
}

.gaLandingPanelSection .privacyLink:hover {
  color: #005A9E;
}

.gaLandingPanelSection .privacyLink:focus {
  border: 1px solid #605E5C;
  box-sizing: border-box;
}

.rebrand .footer {
  padding: 0;
}

.rebrand .footerNavContainer {
  background: #EAEAFF;
  color: #323130;
  padding: 80px 54px;
}

.rebrand .footerLink {
  color: #323130;
}

.rebrand ~ .footer {
	background-color: #EAEAFF;
}

@media only screen and (min-width: 1920px) {
	.rebrand .landingFaqs {
		background-size: cover;
	}
}

@media only screen and (max-width: 1300px) {
  /* Benefits & FeatureList */
  .verticalSeparator {
    display: none;
  }

  .standaloneFeaturesContainer table {
    margin: 50px 60px 60px;
  }

  .mergeBenefitsandFeatures .featuresContainer table {
    width: 90%;
    max-width: 550px;
  }
}

@media only screen and (max-width: 1700px) {
  .rebrand .clarityOfferText {
  	min-height: 110px;
  }

  .clarityOfferText {
    min-height: 180px;
  }
}

@media only screen and (max-width: 1400px) {
  .clarityOfferText {
    min-height: 130px;
  }
}

@media only screen and (max-width: 900px) {

	.testimonialsContainer {
		padding: 80px 38px;
	}

	.testimonialsContainer {
		padding: 80px 38px;
	}

	.paginationChevron {
		display: none;
	}

	.mobilePaginationChevron {
		display: block;
	}

  .howToConnectBody img.howToConnectImg {
    display: inherit;
  }

  .howToConnectBody img {
    display: none;
  }

  .whatUsersSayBody img {
    display: none;
  }

  /* Page Header */
  .landingTemplatePageHeader {
    padding: 110px 80px;
  }

  .landingTemplatePageHeaderContent {
    margin-right: 15px
  }

  .landingTemplatePageHeaderContent h1 {
    font-size: 36px;
    line-height: 40px;
  }

  .landingTemplatePageHeader svg {
    margin-left: 15px;
  }

  .landingTemplatePageHeaderSubtitle,
  .pageHeaderFeature {
    font-size: 18px;
  }

  .landingTemplatePageHeaderSubtitle {
    margin-bottom: 16px;
  }

  .pageBannerFeature {
    display: block;
    margin: 8px 0;
    white-space: nowrap;
  }

  .landingTemplatePageHeaderContent button,
  .landingTemplatePageHeaderContent a {
    margin-right: 8px;
  }

  .landingActionButtons .ms-Button {
    margin-top: 24px;
  }

  /* Highlights */
  .highlightContainer:first-child {
    padding-top: 0;
  }

  .highlight {
    flex-wrap: wrap;
    padding: 0;
  }

  .highlightContainer h3 {
    font-size: 24px;
    line-height: 30px;
    margin-bottom: 12px;
    margin-top: 4px;
    text-align: center;
  }

  .highlightsSubtitle {
    margin: 14px 0
  }

  .highlightPointsList {
    margin: 4px 0;
  }

  .highlightMedia {
    width: 100%;
  }

  .rebrand .highlightMedia img {
    width: 100%;
    min-width: 300px;
    max-width: 500px;
 }

 .rebrand .highlightContainer:nth-child(even) .highlight {
    padding: 20px;
 }

 .highlightMedia img {
    order: 2;
  }

  .highlightContainer:nth-child(odd) .highlightTextWrapper,
  .highlightContainer:nth-child(even) .highlightTextWrapper,
  .highlightContainer:nth-child(odd) .highlightMedia,
  .highlightContainer:nth-child(even) .highlightMedia {
    padding: 0;
  }

  .highlightTextWrapper {
    text-align: center;
    align-items: center;
    width: 90%;
    margin: auto;
    margin-top: 40px;
    max-width: 550px;
  }

  .highlightText,
  .highlightPoint {
    font-size: 18px;
    line-height: 24px;
    text-align: start;
  }

  /* Free Text */
  .freeText,
  .freeText h3 {
    text-align: center;
  }

  /* ClarityOffers */
  .clarityOfferInstance {
    width: 90%;
  }

  .clarityOffersContainer {
    flex-wrap: wrap;
  }

  .clarityOfferText {
    min-height: unset;
  }

	.clarityOfferInstance p {
    max-width: 450px;
  }

  .standaloneFeaturesContainer table {
    margin: 50px 30px 60px;
  }

  /* Companies Using Clarity */
  .companiesUsingClarityTitle {
    width: 100%;
    margin-bottom: 20px;
  }

  .companies {
    margin: 20px 0;
  }

  /* Benefits */
  .benefitsTitle {
    position: static;
  }

  /* FAQs */
  .landingFaqs {
    padding: 0 0 75px;
    flex-direction: column;
    justify-content: center;
  }

  .landingFaqsContent {
    max-width: 660px;
    width: 90%;
    padding: 0 10vw;
    margin: 0;
  }

  .landingFaqsTitle {
    font-size: 28px;
    line-height: 36px;
    margin: 70px 0 40px 0;
    width: 90%;
  }

  .landingFaqsTitle p {
    font-size: 18px;
    line-height: 28px;
  }

  .landingFaqsTitle .faqIllustration {
    order: -1;
  }

  /* Testimonials */
  .testimonial {
    width: 100%;
  }
}

@media only screen and (max-width: 700px) {

  /* Page Header */
  .landingTemplatePageHeader {
    padding: 70px 16px;
  }

  .landingTemplatePageHeaderContent a {
    margin: 30px auto;
  }

  .landingTemplatePageHeaderContent {
    text-align: center;
    width: fit-content;
    margin: 0;
    padding: 0 20px;
  }

  .landingTemplatePageHeaderSubtitle {
    text-align: left;
    max-width: 480px;
    margin: 0 auto;
    margin-bottom: 16px;
  }

  .pageBannerFeatures .pageBannerFeature {
    margin: 8px auto;
    width: 220px;
    text-align: left;
  }

  .landingTemplatePageHeaderContent button {
    margin: 20px auto;
  }

  .landingTemplatePageHeader .landingBanner,
  .landingTemplatePageHeader svg,
  .extraButtons {
    display: none;
  }
}

@media only screen and (max-width: 750px) {
  .newCompaniesUsingClarity .companies {
    margin: 28px 8% 0;
    column-gap: 17%;
  }

  .newCompaniesUsingClarity .companies div {
    max-width: 90px;
  }

  .newCompaniesUsingClarity .companies img {
    transform: scale(.75);
  }
}

@media only screen and (max-width: 600px) {

  /* General */
  .landingSectionTitle {
    font-size: 28px;
    line-height: 36px;
  }

  /* FAQ */
  .landingFaqsTitle .faqIllustration {
    display: none;
  }

  .mergeBenefitsandFeatures .centeredElement {
    min-width: auto;
  }

  /* Features */
  .featuresContainer {
    margin: 0 20px;
  }

  /* Testimonials */
  .quote {
    width: 90%;
    height: 300px;
    min-height: 300px;
    margin: 10px;
    padding: 20px;
  }

  .companies {
    width: 40%;
    min-width: unset;
  }

  /* ClarityOffers */
  .clarityOfferInstance p {
    max-width: 315px;
  }

  /* Footer */
  .landingFooter {
    padding: 65px 10px;
  }
}

@media only screen and (max-width: 500px) {
  .newCompaniesUsingClarity .companies img {
    transform: scale(.5);
  }

  .newCompaniesUsingClarity .companies {
    column-gap: 8%;
  }
}

@media only screen and (max-width: 400px) {

  /* Page Header & Highlights */
  .landingTemplatePageHeader,
  .landingSection {
    padding-left: 8px;
    padding-right: 8px;
  }

  .benefitsGrid {
    margin: 0;
  }

  .newCompaniesUsingClarity .companies {
    column-gap: 12px;
  }

  .rebrand .highlight {
    padding: 40px 20px;
  }
}

.freeFeaturesSectionRebrand {
  display: none;
}
.heatmapContainer,
.emptyHeatmapContainer {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow: auto;
}

.heatmapContent,
.heatmapCompare {
    display: flex;
    overflow: hidden;
    flex: 1;
}

.heatmapShareDownloadStack {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    gap: 8px;
}

.heatmapCompareButton {
    margin-left: auto;
    margin-right: 12px;
    flex: 0 0 auto;
}

.heatmapCompare .heatmapSidebarWrapper {
    float: inline-end;
    padding-top: 0;
    position: absolute;
    z-index: 1000000;
    transition: 0.2s;
    height: 100%;
}

.heatmapCompare .heatmapSidebarWrapper .topNavbar {
    padding-top: 12px;
}

.heatmapCompare .sidebarClosed,
.heatmapSidebarWrapper.sidebarClosed.canClose {
    transform: translateX(-100%);
}

.heatmapSidebarWrapper.sidebarClosed.canClose .sidebarPanelActionWrapper,
.heatmapSidebarWrapper.sidebarClosed.canClose .sidebarPanelTitle{
    visibility:hidden;
}

.heatmapSidebarWrapper.sidebarClosed.canClose {
    padding: 0;
    width: 0;
    visibility:hidden;
}

.heatmapSidebarWrapper.canClose {
    padding-top: 0;
}


.heatmapSidebar.appsHeatmapSidebar {
    height: 100%;
    overflow: hidden;
}

.heatmapCompareResizer {
    width: 2px;
    cursor: col-resize;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    background: #E1DFDD;
    margin-top: 143px;
}

.heatmapCompareResizer .resizerButton {
    background: #0078D4;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 0 4px;
    z-index: 1;
}

.heatmapCompareResizer .resizerButton .dragerIcon {
    width: 12px;
    height: 12px;
    color: #FFF;
    background: #0078D4;
    cursor: pointer;
}

.dragerIcon .ms-Icon{
    color: #FFF;
}

.heatmapCompare .secondary .sidebarClosed {
    transform: translateX(100%);
}

.heatmapCompare .secondary .heatmapSidebarWrapper {
    border-left: 1px solid rgb(237, 235, 233);
}

.heatmapCompare .tabContentHeader {
    flex-direction: column;
    border: hidden;
    padding: 0;
}
.heatmapCompare .filterBadgeNavWrapper {
    width: 100%;
}

.heatmapCompare .heatmapContent{
    position: relative;
}

.changingScreenshots .heatmapPanelTop {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 18px;
}

.changingScreenshots .panelTitle {
    padding-bottom: 12px;
}

.changingScreenshots .screenshotsListWrapper {
    display: grid;
    gap: 12px;
}

.heatmapScreenshotIframeWrapper {
    margin: 0 2.5px;
    width: 328px;
    height: 213px;
    border: 1px solid #C8C6C4;
    box-sizing: border-box;
    cursor: pointer;
    overflow: hidden;
    background-color: #F3F2F1;
}

.changingScreenshots .heatmapScreenCard {
    margin: 0 2.5px;
    width: 150px;
    border: 1px solid #C8C6C4;
    box-sizing: border-box;
    cursor: pointer;
    overflow: hidden;
    background-color: #F3F2F1;
}


.changingScreenshots .screenshotsLoading {
    justify-content: center;
    margin-top: 137px;
}

.heatmapCompare .secondary .heatmapContent,
.heatmapCompare .primary .heatmapFooter,
.heatmapCompare .secondary .heatmapSidebarWrapper .heatmapPanelTop { 
    flex-direction: row-reverse;
}

#heatmapSidebarPortal {
    overflow: hidden;
    padding: 0 0 12px 0;
    margin-top: 12px;
}

#heatmapSidebarPortal .panelTop{
    overflow: hidden;
    padding: 0 16px;
}

#heatmapSidebarPortal .heatmapSidebar {
    height: calc(100% - 95px);
}

#heatmapSidebarPortal .withEditArea {
    height: calc(100% - 150px);
}

#heatmapSidebarPortal .withShadow {
    box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
    position: relative;
    z-index: 10;
}

#heatmapSidebarPortal .panelTopWrapper {
    padding-bottom: 12px;
    border-bottom: 1px solid #EDEBE9;
}

#heatmapSidebarPortal .sidebarPanelActionWrapper {
    border: none;
    padding-bottom: 0;
}

#heatmapSidebarPortal:focus-visible {
    outline: 1px solid;
}

.heatmapCompare .secondary .cardOrder,
.heatmapCompare .secondary .heatmapElements .elementRank,
.heatmapCompare .secondary .ms-Button--primary,
.heatmapCompare .secondary .is-checked .ms-Checkbox-checkbox,
.calloutStylesSecondary .is-checked .ms-Checkbox-checkbox {
    background-color: #E3008C;
}

.heatmapCompare .secondary .heatmapElements .heatmapElement {
    outline-color: #E3008C;
}

.heatmapCompare .secondary .filtersBarButtons .ms-Icon, 
.heatmapCompare .secondary .seeDetails,
.heatmapCompare .secondary .cardAction i {
    color: #E3008C;
}

.heatmapSidebar .cardAction .ms-Button {
    margin: 1px;
}

.moneymapMetadataActions {
    padding: 0px 12.5px 8px;
}

@media screen and (-ms-high-contrast: active) { 
    .heatmapSidebar .cardAction .ms-Button:focus-visible {
        outline: windowtext solid 1px;
    }
}

@media screen and (prefers-contrast: more) {
    .xRaySliderContainer .ms-Button path {
        fill: white;
    }
}

.heatmapCompare .secondary .ms-Button--primary,
.heatmapCompare .secondary .is-checked .ms-Checkbox-checkbox,
.heatmapCompare .secondary .is-checked::before,
.heatmapCompare .secondary .is-checked::after,
.calloutStylesSecondary .is-checked .ms-Checkbox-checkbox {
    border-color: #E3008C;
}

.heatmapCompare .secondary .filterBadge,
.heatmapCompare .secondary .heatmapMetrics .badge {
    background: rgba(227, 0, 140, 0.1);
    color: #E3008C;
}

.heatmapCompare .tabContentWithFilter {
    min-width: 720px;
}

.heatmapCompare .primary {
    flex: none; 
    max-width: calc(100% - 720px);  
}

.heatmapCompare .secondary {
    flex: 1 1 0%;
}

.heatmapCompare .heatmapSidebar .heatmapPanelTop,
.canClose .heatmapPanelTop {
   position: sticky;
   top: 0;
   background-color: #FAF9F8;
   z-index: 10;
   padding: 0 5px;
   margin-top: 12px;
   max-width: 100%;
}

.heatmapPanelTop.noMargin {
    margin-top: 8px;
}

.heatmapCompare .filtersActions,
.heatmapCompare .filtersContent {
    width: 100%;
    display: flex;
    overflow: hidden;
    align-items: flex-start;
    padding: 6px 16px;
}

.heatmapCompare .heatmapZeroState {
    height: 100%;
}

.heatmapCompare .filtersActions {
    padding-bottom: 6px;
    min-width: unset;
}

.heatmapCompare .heatmapZeroState {
    height: 100%;
    overflow: hidden;
    padding-bottom: 124px;
}

.heatmapCompare .heatmapFooter {
    border-top: 1px solid #CCC;
}

.heatmapCompare .filtersActions .cancelIconContainer {
    border: 1px solid #D83B01;
    box-sizing: border-box;
    border-radius: 2px;
    margin-left: auto;
}

.heatmapCompare .filtersActions .closeIcon {
    color: #D83B01;
    width: 30px;
    height: 30px;
}

.urlActionWrapper .grayIcon:hover {
    color: #666;
}

.heatmapCompare .filtersContent {
    padding-top: 8px;
}

.heatmapCompare .filtersBarButtons:first-child {
    margin-left: 0px;
}

.emptyHeatmapContainer {
    font-size: 20px;
    text-align: center;
    padding-top: 250px;
}

.heatmapCompare .heatmapUrlSearchBox {
    width: 50%;
    max-width: 351px;
    min-width: 230px;
}

.heatmapCompare .heatmapURLPanel {
    width: 95%;
    overflow: scroll;
    top: calc(50% + 1px);
}

.heatmapCompare .heatmapURLPanel .heatmapUrlSearchBox{
    width: 50%;
    min-width: 50%;
}

.heatmapCompare .secondary .heatmapCompareFilterButton {
    background-color: #E3008C;
}

.heatmapCompare .heatmapCompareFilterButton {
    color: white;
    background-color: #0078D4;
    width: 56px;
}

.heatmapUrlSearchBox.urlPathFilter.withNoRightMargin {
    margin-right: 0;
}

.heatmapUrlSearchBox {
    width: 351px;
    margin-right: 10px;
    flex: 0 0 auto;
}

.heatmapUrlSearchBox.urlPathFilter.withRightMargin {
    margin-right: 16px;
}

.heatmapUrlSearchBox.urlPathFilter.badgeView .ms-SearchBox-clearButton,
.heatmapUrlSearchBox.urlPathFilter.badgeView .ms-SearchBox-iconContainer {
    display: none;
}

.heatmapUrlSearchBox.urlPathFilter.badgeView {
    width: unset;
    margin-right: 0;
}

.heatmapUrlFilterHeaderWrapper {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 24px;
    align-items: center;
    padding: 6px 20px;
    line-height: 20px;
}

.heatmapURLPanel .heatmapUrlFilterHeader {
   font-size: 18px;
   font-weight: 600;
   line-height: 24px;
}

.heatmapURLPanel .filtersActionHeader {
 display: flex;
 line-height: 20px;
 align-items: center;
}

.heatmapURLPanel .filter {
    padding: 6px 20px;
}

.filtersActionHeader > * {
    cursor: pointer;
}

.filtersActionHeader > *:not(:first-child) {
    margin-left: 12px;
}

.pathFilterAddorEditButton {
    margin-right: 10px;
}

.heatmapUrlWrapper .urlActionWrapper{
    display: flex;
    align-items: center;
    margin-right: 10px;
    flex: 0 0 auto;
    border: 1px solid #605E5C;
    border-radius: 2px;
}

.heatmapUrlWrapper .separator {
    height: 16px;
    width: 1px;
    background-color: #C8C6C4;
}

.heatmapUrlWrapper .heatmapUrlSearchBox {
    flex: 0 0 auto;
    border: none;
}

.heatmapUrlWrapper .heatmapUrlDropDown {
    width: 128px;
    border: none;
}
.heatmapUrlWrapper .ms-Dropdown-title {
    border: none;
}

.heatmapSidebar .card {
    width: 100%;
    white-space: nowrap;
    padding: 0;
}

.heatmapSidebar .cardSingleRow {
    padding: 12px;
}

.heatmapSidebar .cardOrder {
    background-color: #0078D4;
    color: white;
    flex: 0 0 auto;
    height: 32px;
    width: 32px;
    border-radius: 32px;
    text-align: center;
    line-height: 32px;
    margin-right: 10px;
}

.heatmapSidebar .cardBody {
    display:  flex;
    white-space: nowrap;
    padding-bottom: 8px;
    border-bottom: 1px solid #EDEBE9;
    margin: 12px 12px 0;
}

.heatmapSidebar .cardAction {
    justify-content: space-between;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 8px 0 4px;
}

.heatmapSidebar .card div {
    text-overflow: ellipsis;
    overflow: hidden
}

.heatmapSidebar .ms-DetailsHeader-cellTitle {
    padding: 0;
}

.heatmapSidebar .ms-DetailsHeader,
.heatmapSidebar .ms-DetailsRow {
    background-color: #FAF9F8;
}

.heatmapSidebar .ms-DetailsHeader {
    color:#323130
}

.heatmapSidebar .ms-DetailsRow {
    color:#605E5C
}

.heatmapSidebar .ms-DetailsRow:hover,
.heatmapSidebar .ms-DetailsHeader-cell:hover {
    background-color: #FAF9F8;
}

.heatmapSidebar .ms-DetailsRow:hover {
    color: #605E5C;
}

/*Heatmap header begin */
.heatmapHeader {
    display: flex;
    padding: 10px 16px;
    border-bottom: 1px solid #ddd;
    align-items: center;
}

.heatmapHeader > .heatmapButtonGroup {
    display: flex;
}

.heatmapHeader > :first-child {
    margin-right: 24px;
}

.heatmapHeader > .ms-TooltipHost {
    margin-left: 9px;
}

.heatmapHeader .ms-Button-label {
    margin-left: 8px;
    float: left;
}

.heatmapCompare .heatmapDeviceButton .ms-Button-label{
    margin: 0;
}

.heatmapChangeScreenshotButtonDisabled {
    background-color: #FFF;
    border-width: 1px;
    border-color: rgb(220, 220, 219);
}

.clickMapButton {
    padding: 0 0 0 16px;
}

.heatmapHeaderInfoIcon {
    font-size: 18px;
    color: #0078D7;
}

.heatmapHeaderInfoIcon:hover {
    color: #627B8E;
}

.heatmapHeaderInfoBubble {
    padding: 8px;
}

.heatmapHeaderInfoBubble > *:not(:last-child) {
    border-bottom: 1px solid #EEE;
    padding-bottom: 13px;
}

.clickMenuHighlight, .moneyMenuHighlight {
    background-color: #f3f2f1;
}

.heatmapInfoTitle {
    font-size: 20px;
    font-weight: 600;
    display: flex;
    justify-content: center;
}

.listItem {
    display: flex;
    padding-top: 13px;
}

.listItem > :first-child {
    width: 15%;
    padding-top: 3px;
}

.listItem > :last-child {
    width: 85%;
}

.listItem svg {
    margin-left: -5px;
}

.listItemTitle {
    color: #333;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
}

.listItemsClickmap {
    margin-left: 15px;
}

.listItemDescription,
.listItemDescriptionBold {
    margin-top: 9px;
    font-size: 13px;
    line-height: 18px;
    color: #666;
}

.listItemDescriptionBold {
    color: #333;
    font-weight: 600;
}

/*Heatmap header end */

.heatmapVisual {
    overflow:  hidden auto;
    display: flex;
    position: relative;
    justify-content: center;
    flex: 1;
}

.noHeat {
    flex: 1;
    display: flex;
    justify-content: center;
    background-color: #F3F2F1;
    position: relative;
}

.noHeat .fragmentsNoResults {
    position: absolute;
    left: 0;
    padding: 24px 0 0 32px;
}

.fragmentsNoResults .urlParamToggle {
    padding: 16px 0;
}

.unscaledHeatmapArea {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.heatmap-wrapper iframe {
    position: relative;
    border: 1px solid #CCC
}

.app-heatmap-wrapper iframe {
    position: relative;
}

.heatmapElements {
    position: absolute;
    z-index: 2;
}

.heatmapElements .heatmapElement {
    position: absolute;
    border: 1px solid white;
    outline: 1px solid #0078D4;
}

.heatmapElements .elementRank {
    position: absolute;
    width: 36px;
    height: 36px;
    background: #0078D4;
    color: white;
    border: 1px solid #FFFFFF;
    border-radius: 32px;
    text-align: center;
    line-height: 32px;
    filter: drop-shadow(0px 1.2px 3.6px rgba(0, 0, 0, 0.1));
    cursor: default;   
}

.heatmapElements .missingElement {
    padding: 24px;
    background: white;
    font-size: 16px;
    line-height: 22px;
    position: relative;
    left: 50%;
    top: 250px;
    display: inline-block;
    box-shadow: 0px 4.8px 14.4px rgba(0, 0, 0, 0.18), 0px 25.6px 57.6px rgba(0, 0, 0, 0.22);
    border-radius: 2px;
    transform-origin: left;
}

.elementMetadata {
    padding: 8px 8px 8px 20px;
    display: flex;
    align-items: center;
}

.elementMetadata .metadataText{
    margin-right: 12px;
    line-height: 30px;
}

.moneymapMetadata .elementMetadata {
    padding-bottom: 0px;
}

#disclaimerIcon {
    font-size: 32px;
    color: #2c2c2c;
    position: fixed;
    right: 20px;
}

.scrollmap-canvas{
    position: absolute;
    z-index: 2;
}

.scrollMarker {
    width: 100%;
    position: absolute;
    text-align: center;
    z-index: 3;
}

.scrollMarkerIndicatorWrapper {
    position: absolute;
    display: flex;
    width: 100%;
    z-index: 3;
    align-items: center;
}

.scrollMarkerIndicator {
    height: 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5px;
    font-size: 12px;
    font-family: Arial;
    background: #fff;
    font-weight: 500;
    color: #323130;
}

.scrollMarkerIndicator.avgFoldMarker {
    width: 84px;
}

.scrollMarkerIndicator.percentageMarker {
    width: 35px;
}

.scrollMarkerLine {
    width: 100%;
    height:2px;
    display:inline-block;
    background:repeating-linear-gradient(90deg, #323130, transparent 2px 3px);
  }

.scrollMarkerInfo {
    display: inline-block;
    width: 230px;
    padding: 8px;
    font-size: 12px;
    background: #fff;
    font-weight: 700;
    text-transform: uppercase;
    color: #323130;
    border: 1px solid #323130;
    border-radius: 2px;
}

.scrollMarkerInfo::before,
.scrollMarkerInfo::after {
    content: "";
    border-top: 1px solid #323130;
    margin: auto;
    display: block;
    width: calc((100% - 230px)/2);
    position: absolute;
    left: 0;
    top: 16px;
}

.scrollMarkerInfo::after {
    right: 0;  
    left: auto;
}

.heatmapFooter {
    position: relative;
    display: flex;
    padding: 9px 20px;
    height: 44px;
    background-color: #FFF;
    color: #323130;
    align-items: center;
    min-height: 44px;
}

.heatmapZeroState{
    padding: 24px 32px 44px;
}

.heatmapZeroState .showMore,
.heatmapZeroState .showLess {
    color: #0078D4;
    text-decoration: underline;
}

.heatmapZeroState .paginationLoading {
    margin-top: 10px;
}

.heatmapZeroState .projectContent {
    background-color: #FFF;
    overflow: unset;
    height: 100%;
    padding: 0;
}

.heatmapZeroState .projectContent table {
    min-width: 100%;
}

.heatmapZeroState .projectContent td {
    width: auto;
    max-width: 730px;
}

.heatmapZeroState .projectContent td:first-child{
    width: 80%;
}

.heatmapZeroState .projectContent tr:hover {
    cursor: pointer;
    background-color: rgb(243, 242, 241);
}

.heatmapZeroStateTitle {
    font-size: 18px;
    line-height: 20px;
    margin-bottom: 10px;
    font-weight: 600;
}

.heatmapZeroState .urlParamToggle {
    padding: 16px 0;
}

.heatmapZeroState .viewHeatmapAction {
    color: #0078D4;
    font-size: 16px;
    line-height: 31px;
    display: flex;
    width: max-content;
}

.heatmapZeroState .urlColoumn {
    display: flex;
}

.heatmapZeroState .urlColoumn span:first-child{
    min-width: 40px;
}

.heatmapZeroState tr td:last-child {
    padding-left: 5px;
}

.heatmapMetrics {
    display: flex;
    cursor: default;
}

.heatmapTooltipBadge {
    border: none;
}

.backToScreenshots {
    background: transparent;
    border: none;
    padding-left: 0;
}

.heatmapColorScale,
.heatmapColorScaleScroll {
    width: 100px;
    height: 8px;
    border-radius: 1px;
    margin: 0 13px;
}

.heatmapColorScale {
    background: linear-gradient(to right, red 0%, yellow 25%, lime 50%, cyan 75%, blue 100%);
}

.heatmapColorScaleScroll {
    background: linear-gradient(to right, hsla(0, 100%, 50%, 0.6) 10%, hsla(30, 100%, 50%, 0.6) 20%, hsla(60, 100%, 50%, 0.6) 30%, hsla(90, 100%, 50%, 0.6) 0% 40%, hsla(120, 100%, 50%, 0.6) 0% 50%, hsla(150, 100%, 50%, 0.6) 0% 60%, hsla(180, 100%, 50%, 0.6) 0% 70%, hsla(210, 100%, 50%, 0.6) 0% 80%, hsla(240, 100%, 50%, 0.6) 0% 90%);
}

.xRaySliderContainer {
    background-color: white;
    display: flex;
    position: absolute;
    flex-direction: column;
    height: 272px;
    bottom: 35px;
    right: 33px;
    justify-content: center;
    box-shadow:  0px 0.6px 1.8px rgb(0 0 0 / 10%), 0px 3.2px 7.2px rgb(0 0 0 / 13%);
    border-radius: 2px;
}

.xRaySliderContainer .ms-Slider {
    margin-right: 0;
}

.xRaySliderContainer .ms-Slider-thumb {
    border: 2px solid rgb(0, 90, 158);
}

.xRaySliderContainer .ms-Slider-active {
    background-color:rgb(0, 120, 212);
}

.xRaySliderContainer .ms-Slider-inactive {
    background-color: rgb(222, 236, 249);
}

.ms-Callout-container > .xrayCallout.ms-Callout {
    border: none;
    box-shadow: 0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13);
}

.ms-Callout-container > .xrayCallout .ms-Slider {
    margin: 0;
}

.heatmapPage {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.createButtonContainer {
    padding: 20px;
}

.createHeatmapButton {
    width: 100%;
    margin-bottom: 10px;
}

/* Heatmap cards begin */

.heatmapsList {
    overflow-y: scroll;
	padding: 0 10px 0 20px;
}

.heatmapsList .cardTitle svg {
    margin-right: 9px;
}

.heatmapMenuItem {
    min-width: max-content;
}

.heatmapInfo > div {
    display: flex;
}

.heatmapInfo > div > span:first-child  {
    width: 33%;
    color: #333;
}

.heatmapInfo > div > span:last-child {
    width: 67%;
    color: #666;
}

/* Heatmap cards end */
/* Heatmap creation modal begin */

.ms-Dialog-main {
    border-radius: 6px;
}

.createHeatmapLabel {
    margin-left: 4px;
}

.createHeatmapClose {
    position: absolute;
    top: 22px;
    right: 24px;
    color: #666;
}

.createHeatmapClose:hover {
    color: #000;
}

.createHeatmapClose i {
    font-size: 18px;
}

.createHeatmapBody {
    display: flex;
    width: 650px;
    height: 450px;
    position: relative;
}

.createHeatmapBody .ms-Label,
.createHeatmapBody .ms-Checkbox-text,
.createHeatmapInfoTitle,
.createHeatmapdefinitionHeader {
    font-weight: 400;
    color: #000;
}

.createHeatmapForm {
    width: 60%;
    padding: 23px;
}

.createHeatmapForm > *:not(:last-child) {
    margin-bottom: 15px;
}

.createHeatmapInfo {
    width: 40%;
    background-color: #F5F5F5;
    border-left: 1px solid #B5AFAF;
    padding: 23px;
    overflow-y: scroll;
}

.heatmapTitleLabel {
    font-size: 24px;
}

.createHeatmapForm .dateControl {
    width: 150px;
    margin-bottom: 0;
}

.createHeatmapSubmitButton {
    display: flex;
    margin: 25px auto 0;
}

.createHeatmapInfo {
    padding: 30px 20px;
}

.createHeatmapInfoTitle {
    font-size: 18px;
    margin-bottom: 10px;
}

.createHeatmapdefinition {
    color: #666;
}

.createHeatmapdefinitionHeader {
    padding: 10px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.createHeatmapdefinitionHeader i {
    font-size: 12px;
    margin-right: 15px;
    color: #999;
}

/* Heatmap creation modal end */

@media (forced-colors: active) {
    .heatmapColorScale {
        forced-color-adjust: none;
    }
}

/* Heatmap screen sidebar start */

.screenSidebar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 0px;
    gap: 12px;
    position: absolute;
    height: 100%;
}

.screenPanelTop {
    width: 394px;
    height: 44px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.backToElementsWrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    position: absolute;
    width: 146px;
    height: 32px;
    cursor: pointer;
}

.backToElementsButton {
    width: 16px;
    height: 16px;
    font-family: 'Fabric MDL2 Assets';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    display: flex;
    align-items: center;
    text-align: center;
    color: #0078D4;
    cursor: pointer;
}

.backToElementsText {
    width: 106px;
    height: 20px;
    font-family: 'Segoe UI';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: flex-end;
    color: #323130;
}

.screenStatsWrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    height: 50px;
}

.screensListWrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 374px;
    overflow-y: scroll;
    margin-bottom: 100px;
    height: 100%;
}

.screenWrapper {
    display: flex;
    flex-direction: row;
    gap: 80px;
    padding: 12px;
    height: 261px;
}

.screenCardLoading {
    padding-top: 15px;
    padding-left: 60px;
    height: 100%;
}

.heatmapScreenCard {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 362px;
    height: 261px;
    background: #FFFFFF;
    border: 1px solid #D2D0CE;
    border-radius: 2px;
    cursor: pointer;
}

.heatmapScreenCard.selected {
    border: #0078D4 2px solid;
}

.screenIndex {
    width: 32px;
    height: 32px;
    border-radius: 30px;
    background: #0078D4;
    font-family: 'Segoe UI';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    display: inline-flex;
    color: #FFFFFF;
    align-items: center;
    justify-content: center;
}

/* Heatmap screen sidebar end */

/* Heatmap screen navigator start */

.screenNavigator {
    position: absolute;
    width: 216px;
    height: 104px;
    left: 16px;
    top: 14px;
    background: #FFFFFF;
    box-shadow: 0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13);
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.screenNavigatorGroup {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.screenNavigator .screenNavigatorGroup {
    justify-content: center;
    gap: 8px;
}

.screenNavigator .screenNavigatorGroup {
    flex-direction: column;
    width: 184px;
    height: 72px;
}

.inPanelScreenNav {
    padding-bottom: 8px;
    border-bottom: 1px solid #EDEBE9;
}

.screenNavigationOptions {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    height: 32px;
}

.screenChevron {
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.screenTextField {
    height: 32px;
    width: 32px;
    border-radius: 2px;
}

.screenTextField .ms-TextField-field {
    text-align: center;
}

.showScreensButton {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 168px;
    height: 32px;
    border: 1px solid #8A8886;
    border-radius: 2px;
    cursor: pointer;
    justify-content: center;
}

.showScreensText {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #323130;
}

/* Heatmap screen navigator end */

.heatmapContainer.appHeatmapContainer .heatmapFooter{
    margin-top: auto;
}
.downloadContainer {
    margin-left: auto;
}

.downloadButton {
    color: #0078D4;
    min-width: auto;
    width: fit-content;
    padding: 0px;
    box-shadow: 0px transparent;
    border: 0px solid transparent;
    text-shadow: 0px transparent;
}

.downloadButton.disabled * {
    fill: rgb(161, 159, 157);
}

.downloadButton > span {
    justify-content: right;
}

.csvDownloadSpin {
    margin-right: 12px;
}

.csvDownloadOption {
    line-height: 36px;
    display: flex;
    justify-content: left;
    flex-direction: row;
    cursor: pointer;
}

.csvDownloadOption:hover {
    background-color: rgb(239, 239, 239);
}

.csvDownloadOptionText {
    padding:0px 12px;
    width: 100%;
}

.csvDownloadOptionText > a {
    color: rgb(50, 49, 48);
}

.csvDownloadOptionText:hover > a {
    color: rgb(50, 49, 48);
}

.csvDownloadDropdownText {
    padding: 5px 4px;
}

.csvDownloadDropdownText > span {
    margin: 8px;
}

.csvDownloadDropdownText.title > div {
    font-weight: 600;
    color: #323130;
    font-size: 14px;
    padding: 0 4px;
}


.downloadRecordingsButton {
    color: #000000;
}

.downloadRecordingsButton.disabled {
    color: rgb(161, 159, 157);
}

.downloadRecordingsList {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.csvDropdownContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 2px;
}

.csvDropdownContainer .ms-ContextualMenu-list {
    width: 100%;
}

.cvsDownloadDropdownActions {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 5px 12px 12px;
}

.downloadCSVButton {
    width: 105px;
    height: 32px;
    background: #0078D4;
    border-radius: 2px;
    color: #FFFFFF;
    text-align: center;
}

.downloadCSVButton > a {
    color: #FFFFFF;
}

.downloadErrorModal {
    width: 545px;
    height: 430px;
    display: flex;
    text-align: center;
    box-shadow: 0px 1.2px 3.6px rgb(0 0 0 / 10%), 0px 6.4px 14.4px rgb(0 0 0 / 13%);
    border-radius: 2px;
}

.downloadErrorModal > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.downloadErrorModalHeader {
    position: absolute;
    width: 100%;
    height: 9px;
    left: 0px;
    top: 0px;  
    background: #C43E1C;
}

.downloadErrorModalSubHeader {
    position: absolute;
    left: 92.52%;
    right: 4.98%;
    top: 5.61%;
    bottom: 90.65%;
}

.downloadErrorModalSubHeader .closeIcon {
    color: #666;
}

.downloadFailTitle {
    font-size: 28px;
    line-height: 36px;
    padding-bottom: 15px;
}

.downloadFailCaption {
    font-size: 18px;
    line-height: 24px;
    padding-bottom: 38px;
}

.downloadFailOptions {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.downloadErrorModalCancel {
    margin-right: 12px;
}

.downloadHeatmap {
    margin-right: 16px;
}

/********************************************/
/**********     GA Dashboard    ************/
/********************************************/
.gaCardHeader {
    display: flex;
    width: 100%;
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.gaCardTitle {
    padding: 11px 0px 8px 16px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.gaCardHeader .ms-Dropdown-container {
    position:absolute;
    right: 16px;
    top: 4px;
}

.gaPivotHeader {
    padding: 10px;
}

.gaCardHeader .ms-Dropdown-title {
    border-width: 0 0 1px 0;
    border-radius: 0;
    width: 100%;
    min-width: 120px;
}

.gaCard,
.gaCardLarge {
    display: inline-table;
    margin-bottom: 24px;
    margin-right: 24px;
}

.gaCard {
    width: 432px;
    min-height: 350px;
}

.gaCardLarge {
    width: 660px;
    height: 490px;
}

.gaChart {
    min-height: 350px;
}

.gaPageColumn {
    width: 265px;
}

.gaCardPivotHeader {
    height: 25px;
}

.gaCardPivotBody {
    font-size: 28px;
    height: 50px;
}

.gaCardFooter {
    height: 40px;
    line-height: 40px;
    padding-left: 16px;
    background-color: #0078D4;
    position: relative;
    display: flex;
    align-items: center;
}

.gaCardFooter .ms-Button {
    display: flex;
    width: 100%;
}

.gaCardFooter .ms-Button:hover {
    background-color: #106ebe;
}

.gaCardFooterText {
    display: inline-block;
    color: white;
    margin-right: 10px;
}

.gaCardFooter .bold {
    font-weight: 600;
}

.gaCardFooter * .ms-Icon {
    color: white;
}

.gaCardFooter .badgeClear {
    font-size: 12px;
    color:white;
    cursor: pointer;
    position: absolute;
    right: 12px;
}

.wideChart {
    font-size: 12px;
    line-height: 20px;
}

.centerDiv {
    width: 644px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.gaChartHeight {
    height: 345px;
}

.gaShortChartHeight {
    height: 316px;
}

.gaHintDiv {
    padding-top: 11px;
}

@media only screen and (min-width: 1920px) {
    .gaCardLarge {
        width: 886px;
        height: 490px;
    }
}
/********************************************/
/***********      Footer     **************/
/********************************************/

.mobileFooter {
    display: flex;
    justify-content: space-around;
    cursor: pointer;
    min-width: 320px;
    height: 57px;
    border-top: 1px solid #EDEBE9;
}

.footerNavButton {
    text-align: center;
    width: 100%;
    height: 100%;
    margin: 8px;
}

.footerNavButton.selected div {
    font-weight: 600;
}

/********************************************/
/***********      Dashboard     **************/
/********************************************/

.projContent.mobile .fullScreenMessage.welcomeMessage {
    margin: 0 24px;
}

.dashboardContent.mobile {
    overflow-x: hidden;
    min-width: 352px;
    padding: unset;
}

.dashboardContent.mobile .dashboardMasonry {
    width: 100%;
    min-width: 288px;
    padding: 16px 0;
}

.dashboardContent.mobile .chartCard {
    width: 100%;
    min-width: 288px;
}

.mobile .frustrationArea .topChart {
    padding-right: 8px;
}

.dashboardContent.mobile .cardFocus {
    width: 100%;
    min-width: 320px;
}

.dashboardContent.mobile .dashboardColumn {
    width: 100%;
    margin-right: unset;
}

.dashboardContent.mobile .dashboardScroll {
    width: 100%;
    min-width: 288px;
    padding: 24px 16px;
}

.dashboardContent.mobile .cardFocusContent.metricSection.pageMetricSection,
.dashboardContent.mobile .cardFocusContent.metricSection.sessionMetricSection,
.dashboardContent.mobile .sessionsCard {
    width: 100%;
}

.dashboardContent.mobile .sessionMetricContent {
    width: 100%;
    display: block;
}

.mobile .sessionMetricContent .sessionMetricGroup:not(:last-child) {
    margin-bottom: 25px;
}

.dashboardContent.mobile .sessionMetricGroup:not(:last-child) {
    border: none;
}

.impressions.mobile {
    width: 100%;
}

.impressions.mobile .loadingContainer {
    margin: 8px 0;
}

.noRecordingsFound {
    margin-top: 8px;
}

.impressions.mobile .actionCardDetails {
    margin-bottom: 12px;
}

.mobile .card.impression.actionCard:first-child {
    margin-top: 8px;
}

.mobile .recordingsPivotTab {
    padding-top: 0;
}

.impressions.mobile .shareIcon i {
    font-size: 20px;
    margin-top: 6px;
}

.tabContentHeader.mobile.noHeader {
    display: none;
}

.mobile .sessionMetricSectionHeader {
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
}

/********************************************/
/***********      Player     **************/
/********************************************/

.closeMobilePlayer {
    position: absolute;
    z-index: 100;
    width: fit-content;
    top: 0;
    right: 0;
    background-color: rgba(250, 250, 250, 0.1);
}

.closeMobilePlayer i {
    color: #212121;
    font-weight: 600;
}

.closeMobilePlayer .closeIcon {
    height: 45px;
    width: 45px;
}

.projContent.mobile .slider,
.fullscreenRecording .mobile .slider {
    margin: 0px;
    height: 8px;
}

.mobile .sliderSlice,
.mobile .progress {
    border: 0;
}

.projContent.mobile .videoControlPanel {
    width: 100%;
    padding: unset;
    border-bottom: solid 1px #EDEBE9;
    z-index: 101;
    position: absolute;
    bottom: 0;
}

.projContent.mobile .impressionList.scrollable.live {
    height: calc(100vh - 245px);
}

.fullscreenRecording .mobile .videoControlPanel {
    padding: unset;
}

.mobile .slider {
    background-color: rgb(210, 208, 206);
}

.projContent.mobile .scrubber,
.fullscreenRecording .mobile .scrubber {
    position: absolute;
    top: unset;
    width: unset;
    height: unset;
    border-radius: unset;
    cursor: pointer;
    border: none;
    z-index: 3;
}

.playbackContainer.mobile {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
}

.overlayWrapper {
    width: 100%;
    height: 100%;
    position: relative;
    transition: "transform 0.2s";
}

.mobile .videoWrapper {
    height: 100%;
}

.mobileOpaqueCover {
    position: absolute;
    z-index: 10;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fullscreenRecording .mobile .mobileOpaqueCover {
    margin-bottom: 100px;
}

.mobileOpaqueCover.stopped {
    background-color: #484644;
    opacity: 0.5;
}

.mobileReplayHeader {
    display: grid;
    position: absolute;
    right: 0;
    z-index: 100;
    bottom: 0;
    padding-bottom: 22%;
    margin-right: 20px;
    gap: 12px;
}

.mobileReplayHeader.landscape {
    display: grid;
    display: flex;
    position: absolute;
    padding-bottom: 10%;
    gap: 8px;
}

.mobileReplayHeader .favoriteIcon.ms-Button,
.mobileReplayHeader .shareIcon.ms-Button,
.mobileReplayHeader button {
    background-color: white;
    min-width: unset;
    height: 56px;
    width: 56px;
    border-radius: 40px;
    box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, .132), 0 1.2px 3.6px 0 rgba(0, 0, 0, .108);
}

.mobile .noFavorites {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 8px;
}

.mobileReplayHeader i {
    height: 20px;
    width: 20px;
    font-size: 20px;
    line-height: 20px;
}

.mobileControlers {
    position: absolute;
    display: flex;
    align-items: center;
    left: 50%;
    z-index: 101;
    transition: "transform 0.2s";
}

.mobileControlers .is-disabled.disabledVideoControl {
    background-color: transparent;
}

.mobileControlers .ms-Button--icon:hover {
    background-color: transparent;
}

#mobilePlayButton {
    align-items: center;
    height: 50px;
    width: 50px;
    margin: 0 21px;
}

#mobilePlayButton svg {
    top: -7px;
    left: -15px;
    position: relative;
}

.mobile .videoTimestamp {
    height: 42px;
    min-height: 42px;
    display: flex;
    align-items: center;
    margin-left: 12px;
    background-color: white;
    margin-right: 5px;
}

.panelOverlayTimeline {
    height: 100%;
    z-index: 100;
    width: 100%;
    position: absolute;
}

.mobileTimelineEvent.timeline {
    padding: 3px;
    margin-top: 0;
}

.mobileTimelineEvent.timeline strong {
    margin: 3px;
}

.rewindTenMobile {
    margin-left: 21px;
}

.forwardTenMobile {
    margin-right: 21px;
}

.rewindTenMobile:active,
.rewindTenMobile:hover,
.is-disabled.rewindTenMobile,
.forwardTenMobile:active,
.forwardTenMobile:hover,
.is-disabled.forwardTenMobile {
    background-color: transparent;
}


/********************************************/
/***********     Timeline      **************/
/********************************************/

.mobileTimeline {
    width: 100%;
    height: 75%;
    bottom: 0;
    z-index: 101;
    position: absolute;
    padding: 32px 24px 0;
    background: #FAF9F8;
    box-shadow: 0px -2px 4px rgb(0 0 0 / 4%);
    border-radius: 14px 14px 0px 0px;
    display: flex;
    flex-direction: column;
    transition: "transform 0.2s";
}

.mobileTimelineTitle {
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
    margin-bottom: 12px;
}

.mobileTimelinePages {
    overflow: auto;
}

.mobileTimelinePage {
    background-color: white;
    padding: 8px 8px 10px 8px;
    margin-bottom: 12px;
    border: 1px solid #E1DFDD;
}

.mobileTimelineURL {
    display: flex;
    gap: 6px;
    align-items: flex-start;
}

.mobileTimelineURL span {
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.mobileTimelineURL.desktop span {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}

.eventTag {
    font-size: 12px;
    overflow: hidden;
    display: flex;
    padding-left: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobileTimelineURL strong {
    margin-right: 4px;
}

.mobileTimelineEvent {
    margin-top: 12px;
    padding: 3px 8px;
    margin-right: 8px;
    display: inline-block;
}

.mobileTimelineEvent strong {
    margin-left: 8px;
}

.closeTimeline {
    position: absolute;
    right: 10px;
    top: 10px;
}

.mobileTimelineDuration {
    background-color: #F3F2F1;
    border-radius: 2px;
    font-size: 12px;
    line-height: 16px;
    padding: 1px 8px 3px;
    font-weight: 600;
}

/********************************************/
/***********   Projects Page   **************/
/********************************************/

.projectGridContainer.mobile .projectCard {
    width: 100%;
    height: 100%;
    margin-bottom: 16px;
}

.mobile .projectActions {
    justify-content: end;
}

.projectGridContainer.mobile {
    display: block;
}

.firstExperienceWindow.mobile {
    width: 90%;
}

.firstExperienceWindow.mobile .confirmEmailContent:first-child {
    margin: 0 24px 80px 24px;
}

.firstExperienceWindow.mobile .mainContentInstall {
    width: 100%;
}

.firstExperienceWindow.mobile .confirmEmailContainerInstall .addProjHeaderInstall {
    margin-top: 134px;
    margin-top: 80px;
}

.sliderSlice.highlight {
    display: block;
}

@media only screen and (-webkit-min-device-pixel-ratio : 4) {
    .projContent.mobile .impressionList.scrollable.live {
        height: unset;
    }

    .impressionList.scrollable {
        overflow-y: unset;
    }

    .impressions > div:not(.moreDetailsPanelActions) {
        overflow: auto;
        padding: 4px 4px 0 4px;
    }
}

@keyframes swipDownAnimation {
    0% {
        top: 0px;
    }

    50% {
        top: 50%;
    }

    100% {
        top: 100%;
    }
}

@keyframes swipUpAnimation {
    0% {
        top: 0px;
    }

    50% {
        top: -50%;
    }

    100% {
        top: -100%;
    }
}
.dashboardVertical {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.dashboardContent {
    background-color: #FAFAFA;
    width: 100%;
    padding: 22px 48px;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
    color: #323130;
}

.dashboardScroll {
    display: flex;
    flex-direction: column;
}

.dashboardCard {
    background-color: white;
    box-shadow: 0px 1.6px 3.6px rgba(0, 0, 0, 0.132), 0px 0.3px 0.9px rgba(0, 0, 0, 0.108);
}


:focus > .cardFocusContent {
    box-shadow: 0 0 1px 1px black;
}
.upsellDismissLink {
    color: #0078D4;
}

.bold {
    font-weight: 500;
}

.metricValue {
    line-height: 36px;
    font-size: 28px;
    font-weight: 500;
}

.hintButton * {
    color: #0078D4;
}

.hintButton {
    background-color: white;
    height: 21px;
    transform: translateY(1px);
}


.dashboardMasonryHorizontal {
    padding: 24px 0;
    width: 1368px;
}

.chartContentLoading {
    height: 350px;
}


.pieChart {
    width: 100%;
    height: 176px;
    display: flex;
    justify-content: center;
}


.pieToolTip {
    display: flex;
    padding: 10px;
}

.pieChartToolTipLegend {
    width: 4px;
    margin-right: 8px;
}

.pieToolTipLabel {
    font-size: 12px;
    line-height: 16px;
}

.topChart {
    padding: 9px 8px 0 0;
    font-size: 12px;
    line-height: 20px;
}

.topListGrid {
    display: grid;
    width: 100%;
    align-items: center;
    grid-auto-flow: row;
    padding-left: 16px;
}

.topListItemLabel {
    grid-column: span 4;
}

.topListBar {
    height: 16px;
    border-bottom: 16px solid #0078D4;
}

.topListCount {
    margin: 0 16px 0 12px;
}

.dashboardButton * {
    color: #0078D4;
}

.dashboardButtonLight {
    color: white;
}

.topListButtons {
    padding: 0 8px;
}

.topListButton {
    height: 28px;
}

.urlParamToggle {
    padding: 8px 16px 8px 16px;
}

.chartEmpty {
    padding: 24px 0 32px;
    text-align: center;
}

.distChart {
    display: flex;
    flex-direction: column;
    padding: 21px 0 24px 0;
}

.listChart {
    display: flex;
    flex-direction: column;
    padding-top: 21px;
}

.pieTable {
    display: grid;
    align-items: center;
    padding: 0px 16px;
    grid-template-columns: auto repeat(3, max-content);
}

.listTable {
    display: grid;
    align-items: center;
    padding: 0 16px 0;
    grid-template-columns: auto repeat(3, max-content);
    font-size: 12px;
}

.listTable h5 {
    font-weight: 600;
}

.listTableActionHeader {
    grid-column: span 3 / 6;
    text-align: center;
}

.listTableSessions {
    text-align: right;
    color: rgba(0, 0, 0, 0.6);
    margin-right: 10px;
}

.pieTable5Column {
    grid-template-columns: auto repeat(4, max-content);
}

.distTableItemBorder {
    grid-column: span 4;
    border-bottom: 1px solid #F4F4F4;
}

.distTableItemBorder5Column {
    grid-column: span 5;
}

.distTableSubItem {
    font-size: 12px;
    line-height: 14px;
}

.distTablePercentItem {
    margin-right: 24px;
    text-align: right;
}

.distTableSessions {
    margin-right: 39px;
    color: rgba(0, 0, 0, 0.6);
}

.distColorLegend {
    display: inline-block;
    margin-right: 8px;
    height: 12px;
    width: 12px;
}

.pieCalloutHost {
    display: inline-block;
    height: 177px;
    width: 177px;
}

.break-long-words {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.livePopupArea {
    padding: 20px 24px;
    width: 343px;
    color: #323130;
}

.livePopupTitle {
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 12px;
}

.livePopupInfo {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 20px;
}

.livePopupButton {
    width: fit-content;
    align-self: end;
    background-color: #2F9596;
}

.livePopupButton:hover {
    background-color: #226a6b;
}

.livePopupTitle > span {
    margin-left: 4px;
}

.sessionsToolTip {
    padding: 12px;
}

.sessionToolTipTitle {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 12px;
}


@media only screen and (min-width: 1920px) {
    .dashboardMasonryHorizontal {
        width: 1826px;
    }
}

@media only screen and (min-width: 1440px) {
    .dashboardScroll {
        align-items: center;
    }
}

@media only screen and (max-width: 1440px) {
    .dashboardScroll {
        min-width: 1392px;
    }
}

@media only screen and (-webkit-min-device-pixel-ratio : 4) {
    .dashboardScroll {
        min-width: unset;
    }

    .dashboardMasonryHorizontal {
        width: unset; 
        flex-direction: column;
    }
    .filtersActions #dashboard_FiltersButton .ms-Button-textContainer{
        display: none;
    }
}


/*# sourceMappingURL=client.3a06334934823c1cf702.css.map*/