body {
    font-family: "Noto Sans", "NotoSans", "Helvetica", "Arial";
}

.bg-icon_active {
    background-color: rgb(13, 117, 176);
}

.menu_Bar-active {
    display: none;
    content: "";
    position: absolute;
    background-color: #10689d;
    left: 6px;
    width: 3px;
    height: 28px;
    border-radius: 2px;
}

.moduleContentButton:hover {
    background-color: #f0f2f4;
}

.modulesContent-frame {
    background-color: #fff;
    transform: translateX(0);
    pointer-events: all;
    min-width: 276px;
    position: relative;
    z-index: 1;
    color: black;
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    transition: transform 0.25s ease-in-out 0s;
    max-width: 100%;
    width: max-content;
    padding-left: 19px;
    padding-right: 19px;
}

.moduleContentText {
    color: #394754 !important;
    font-size: 14px;
    line-height: 32px;
    flex-grow: 1;
    white-space: nowrap;
    text-align: left;
}

.moduleContentButton {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 4px 0 12px;
    gap: 7px;
    cursor: pointer;
    text-decoration: none;
    border-radius: 6px;
    background: transparent;
    border: none;
}

.moduleContent-frame {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.moduleContent-body {
    flex-wrap: wrap;
    display: flex;
    flex-direction: column;
    gap: 16px 32px;
    height: 100%;
    overflow: auto;
    padding-inline: 8px;
    padding-top: 0;
}

.module_Header-frame {
    padding-inline: 8px;
    font-size: 16px;
    margin: 4px 0px 10px;
    flex-grow: 1;
    line-height: 32px;
    color: #607184;
    font-weight: 300;
}

.module_Header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.modulesContent-list {
    display: none;
    min-width: 276px;
    height: 100%;
    flex-shrink: 0;
    flex-direction: column;
    max-width: 100%;
    width: fit-content;
}

.megaMenu_button {
    display: block;
    width: 10px;
    height: 19px;
    opacity: 0.1;
}

.module_Title {
    color: #162029;
    font-size: 14px;
    line-height: 32px;
    flex-grow: 1;
    white-space: nowrap;
    text-align: left;
}

.subMenu_Group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.menu_Bar:hover {
    background-color: #fff;
}

.menu_Bar {
    border-radius: 8px;
    padding: 11px 16px;
    display: flex;
    align-items: center;
    position: relative;
    gap: 7px;
    color: black;
    cursor: pointer;
    text-decoration: none;
    background: transparent;
    border: none;
}

.sub_Menu {
    flex-wrap: wrap;
    display: flex;
    flex-direction: column;
    gap: 16px 32px;
    height: 100%;
    overflow: auto;
    padding-inline: 8px;
    padding-top: 0;
}

.menu-Header_Frame {
    padding-inline: 8px;
    color: #162029;
    font-size: 16px;
    font-weight: 400;
    margin: 4px 0px 10px;
    flex-grow: 1;
    line-height: 32px;
}

.menu_Header {
    width: 100%;
    height: 42.175px;
    flex-shrink: 0;
}

.modulesList {
    display: flex;
    min-width: 276px;
    height: 100%;
    flex-shrink: 0;
    flex-direction: column;
    max-width: 100%;
    width: fit-content;
}

#usageStatsTable-Page_filter, #usageStatsTable-Retailer_filter, #usageStatsTable-User_filter {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

#usageStatsTable-Page_wrapper > .row:nth-child(1) > .col-md-7, #usageStatsTable-Retailer_wrapper > .row:nth-child(1) > .col-md-7, #usageStatsTable-User_wrapper > .row:nth-child(1) > .col-md-7 {
    padding-top: 1rem;
    min-width: 250px;
}

#usageStatsTable-Page_wrapper > .row:nth-child(1) > .col-md-5, #usageStatsTable-Retailer_wrapper > .row:nth-child(1) > .col-md-5, #usageStatsTable-User_wrapper > .row:nth-child(1) > .col-md-5 {
    padding-top: 1rem;
}

.navBar-extended {
    display: flex;
    width: 200px;
    height: 68px;
    align-items: flex-start;
    flex-shrink: 0;
}

.logo-text__frame {
    display: flex;
    width: 132px;
    height: 60px;
    padding: 19px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    flex-shrink: 0;
}

.logo-frame {
    width: 300px;
    height: 61px;
}

.dropdown_button {
    border-radius: 9999px;
    border: 1px solid var(--Line-color-line-reversed-muted, #909FAE) !important;
    background: var(--Background-color-bg-transparent, rgba(255, 255, 255, 0.00));
}

.navMenuLink:hover {
    background-color: rgba(45, 127, 173, 0.45);
}

.navBarIcon-container:hover .navMenuLink-expanded {
    background-color: rgba(45, 127, 173, 0.45);
}

.navBarIcon {
    padding: 8px;
    border-radius: 8px;
    flex-shrink: 0;
}

:has(#announcementBar) * #editRetailerTabContent .tab-content > .active {
    max-height: calc(100vh - 177px);
    overflow: auto;
}

:has(#announcementBar) * #editCentreTabContent .tab-content > .active {
    height: calc(100vh - 177px);
    overflow: auto;
}

:has(#announcementBar) * #editRetailerContent {
    overflow: auto;
    max-height: calc(100vh - 130px);
}

:has(#announcementBar) * #editCentreContent {
    overflow: auto;
    max-height: calc(100vh - 130px);
}

#editRetailerTabContent * .tab-content > .active {
    height: calc(100vh - 139px);
    overflow: auto;
}

#editCentreTabContent .tab-content > .active {
    height: calc(100vh - 139px);
    overflow: auto;
}

#editRetailerContent {
    overflow: auto;
    max-height: calc(100vh - 92px);
}

#editCentreContent {
    overflow: auto;
    max-height: calc(100vh - 92px);
}

#content:has(#editRetailerTabContent * .active) {
    min-height: 100%;
    max-height: 100%;
}

#content:has(#editCentreTabContent * .active) {
    min-height: 100%;
    max-height: 100%;
    height: auto !important;
}

.navBarBottomFrame {
    display: flex;
    padding: 8px 0 35px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.navBarDivider {
    width: 32px;
    height: 1px;
}

.navBarDivider-expanded {
    width: 185px;
    height: 0px;
}

.navBarIconsFrame {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.navBarIcon-container {
    display: flex;
    width: 185px;
    align-items: center;
    gap: 8px;
}

.navBarTopFrame {
    display: flex;
    padding: 8px 0px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    flex: 1 0 0;
}

#newNavigationBar-expanded {
    display: flex;
    position: relative;
    float: left;
    width: 200px;
    height: 100%;
    padding: 0px 8px;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.navBarTopFrame-expanded {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.navBarBottomFrame-expanded {
    display: flex;
    width: 185px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 15px;
}

.dividerBar-expanded {
    width: 185px;
    height: 0px;
}

.dividerBar {
    width: 32px;
    height: 1px;
    background: #0582C3;
}

#newNavigationBar {
    display: flex;
    position: relative;
    float: left;
    width: 60px;
    height: 100%;
    padding: 0px 8px;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

    #newNavigationBar .navMenuLink, #newNavigationBar-expanded .navMenuLink {
        cursor: pointer;
    }

.masterIcons {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 0 0;
}

.masterIcons-expanded {
    display: flex;
    width: 180px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex: 1 0 0;
}

.h-1 {
    height: 1px !important;
}

#collapseButton {
    display: flex;
    width: 20px;
    height: 20px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 12.5px;
    flex-shrink: 0;
    border-radius: 20px;
    background: var(--White, #FFF);
    box-shadow: 0px 0px 4.8px 0px rgba(0, 0, 0, 0.25);
    position: absolute;
    bottom: 15px;
    right: -10px;
    transform: rotate(180deg);
}

    #collapseButton svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

#expandButton svg, .filterExpandCollapseBtn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

#expandButton {
    display: flex;
    width: 20px;
    height: 20px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 12.5px;
    flex-shrink: 0;
    border-radius: 20px;
    background: var(--White, #FFF);
    box-shadow: 0px 0px 4.8px 0px rgba(0, 0, 0, 0.25);
    position: absolute;
    left: 50px;
    bottom: 15px;
}

.filterExpandCollapseBtn {
    display: flex;
    width: 20px;
    height: 20px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 12.5px;
    flex-shrink: 0;
    border-radius: 20px;
    background: var(--White, #FFF);
    box-shadow: 0px 0px 4.8px 0px rgba(0, 0, 0, 0.25);
    position: absolute;
    left: calc(28%);
    top: 80px;
}


#mainMenuButton, #mainMenuButton-expanded, .accountButton, #favoriteButton, #libraryButton, #homeButton, #helpButton, #dataexportButton, #chartsButton, #analyserButton, #livecountingButton, #eventCalendarButton {
    display: flex;
    padding: 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
}

.navBarIcon-text {
    color: var(--Text-color-text-reversed, #FFF) !important;
    font-family: "Noto Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

#mriLogoButton {
    width: 43px;
    height: 43px;
    flex-shrink: 0;
}

.mobile-dialog {
    width: 360px;
    max-height: 740px;
    flex-direction: column;
    align-items: flex-start;
}

.previewImg-frame {
    height: 223px;
    justify-content: flex-end;
    align-items: flex-start;
    align-self: stretch;
}

.headerBorder-top-radius {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.removeLogo {
    margin-bottom: .4rem;
}

.searchContainer {
    position: relative;
}

    .searchContainer .searchBox {
        position: absolute;
        top: 25%;
        right: 10px;
        transform: rotate(90deg);
    }

.img-container {
    width: 200px;
    flex-direction: column;
    gap: 16px;
}

.img-frame {
    padding: 10px;
    gap: 10px;
    flex-shrink: 0;
    align-self: stretch;
    border-radius: 4px;
    border: 1px solid var(--Line-color-line-dark-muted, #909FAE);
    background: #FFF;
}

.distribution-container {
    padding: 9px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 1 0 0;
    min-height: 240px;
    max-height: 240px;
    overflow: auto;
    border-radius: 4px;
    border: 1px solid var(--Line-color-line-dark-muted, #909FAE);
    background: var(--Background-color-bg-primary, #FFF);
}

.distribution-frame {
    display: block;
    padding: 9px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.mri-page-header {
    min-height: 92px !important;
    grid-row-gap: 0;
    grid-template-rows: 0;
    border-bottom: 1px solid var(--Line-color-line-dark-faint, #C6CED5);
    background: var(--Background-color-bg-primary, #FFF);
}

.mri-page-header__title-new {
    color: var(--Text-color-text-muted, #394754);
}

.distribution-container > hr:nth-last-child(1):nth-child(n+7) {
    display: none;
}

.font-size-20 {
    font-size: 20px !important;
}

.overlay_z-index {
    z-index: 50 !important;
}

.footer_z-index {
    z-index: 45 !important;
}

.overflow-visible {
    overflow-x: visible !important;
    overflow-y: visible !important;
}

#usersAutoComplete + .autocomplete-suggestions {
    position: fixed !important;
    z-index: 9999 !important;
}

.overflow-x {
    overflow-x: visible !important;
}

.overflow-y {
    overflow-y: visible !important;
}

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

button {
    font-family: "Noto Sans", "NotoSans", "Helvetica", "Arial";
}

a[href^="tel:"] {
    color: inherit;
}

hr.divider-grey {
    display: block;
    border-width: 1px;
    border: rgba(198, 206, 213, 1);
}

div:has(> span.text-danger) {
    position: relative;
}

span.text-danger {
    background-color: #FFE3E6;
    width: max-content;
    border-radius: 4px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    display: block;
    bottom: -28px;
    line-height: 28px;
    z-index: 0;
    padding-left: 4px;
    padding-right: 4px;
}

    span.text-danger span {
        padding: 0 5px;
    }

#centreSelection, #analysercentredropdown, #singleCentreDropdown, .standardDropdown {
    min-width: 340px;
}

#centreSelection li .dropdown-menu,
#analysercentredropdown li .dropdown-menu,
#singleCentreDropdown li .dropdown-menu,
.standardDropdown li .dropdown-menu {
    min-width: 340px;
    width: 100%;
}

#centreSelection li .dropdown-menu a.nav-link, #centreSelection li .dropdown-menu .dropdown-header,
#analysercentredropdown li .dropdown-menu .dropdown-header,
#singleCentreDropdown li .dropdown-menu a.nav-link, #singleCentreDropdown li .dropdown-menu .dropdown-header,
.standardDropdown li .dropdown-menu a.nav-link, .standardDropdown li .dropdown-menu .dropdown-header {
    padding: 0.4rem 0;
    overflow: hidden;
}

#changeCentreAutoComplete {
    font-size: 14px;
}

#dashboardCentreToggle, #singleCentreToggle, .standardDropdownCentreToggle {
    height: 20px;
    width: auto;
    display: block;
}

#dashboardCentreToggle svg, #singleCentreToggle svg, .standardDropdownCentreToggle svg {
    color: white
}

.navbar-gradient {
    flex-shrink: 0;
    background: linear-gradient(180deg, #07182F 0%, #044D66 100%) !important;
    z-index: 1000 !important
}

.mriLogoFrame {
    display: flex;
    width: 60px;
    height: 60px;
    padding: 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

#menuHamburger {
    stroke: white;
    display: block;
    margin: auto;
    height: 100%;
}

#menuButtonDiv {
    background-color: #0093DD;
}

#menuWindow .menuGroup .menuItem {
    font-size: 20px !important;
}

#menuWindow .menuGroup .subMenuGroup .menuGroup .menuItem {
    font-size: 14px !important;
}

.mri-toast-container {
    z-index: 9999;
    flex-flow: column-reverse wrap;
    left: unset !important;
    transform: translateX(50%);
    margin-left: unset !important;
    min-height: auto;
    margin-top: 2.5rem;
    gap: 16px;
}

.mri-alertToast-frame {
    flex-direction: column;
    align-items: flex-start;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.30), 0px 8px 16px 0px rgba(0, 0, 0, 0.30);
}

.mri-toast-frame {
    padding: 8px 16px;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.announcement-bar {
    height: 38px;
    z-index: 60;
    background-color: #FFE9C3;
    padding: 7px 16px;
    border-bottom: 2px solid #D34501;
}

    .announcement-bar span {
        font-weight: 400;
        font-size: 14px;
        line-height: 24px;
        color: #B33706;
    }

.borderRightNone {
    border-right: none !important;
}

.minWidth-100 {
    min-width: 100% !important;
}

.w-5 {
    width: 5% !important;
}

.w-10 {
    width: 10% !important;
}

.w-15 {
    width: 15% !important;
}

.w-20 {
    width: 20% !important;
}

.w-25 {
    width: 25% !important;
}

.w-65 {
    width: 65% !important;
}

.w-35 {
    width: 35% !important;
}

#content:has(#editCentreForm) {
    padding-bottom: 0rem !important;
}

button.mri-button:not(:last-child) {
    margin-right: 5px;
}

.btn-primary.active {
    border-color: rgba(144, 159, 174, 1)
}

.detailsContainer-small {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
    align-self: stretch;
}

.detailsContainer-medium {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
}

.detailsContainer {
    align-items: flex-start;
    align-self: stretch;
}

.detailsContainer-large {
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
    border-left: 1px solid var(--Line-color-line-dark-faint, #C6CED5);
    background: var(--Background-color-bg-primary, #FFF);
}

.pe-medium {
    padding-right: 12px;
}

.salesTableHeader-height {
    height: 5rem !important;
}

.nav-item .nav-link {
    border: 0;
    margin-right: 4px;
}

    .nav-item .nav-link:hover {
        background-color: rgb(255, 255, 255, 0.5);
        border: 0;
    }

.asterisk-container {
    position: relative;
}

    .asterisk-container .fieldRequired {
        position: absolute;
        top: 30%;
        color: royalblue;
        right: 10px;
    }

    .asterisk-container .datefieldRequired {
        position: absolute;
        top: 30%;
        color: royalblue;
        right: 35px;
    }

.deleteQuestion-frame {
    align-items: flex-start;
    align-self: stretch;
    background: var(--Background-color-bg-critical, #FFE3E6);
}

.deleteQuestion-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
}
.temporaryDisable-frame {
    align-items: flex-start;
    align-self: stretch;
    background: var(--Background-color-bg-critical, #FFFF00);
}


.overlay-text {
    position: absolute;
    top: 70%;
    transform: translateY(-50%);
    left: 7px;
    pointer-events: none;
}

.white-space-break {
    white-space: break-spaces;
}

.dialog-max-height {
    max-height: 80vh;
}

.input-width {
    width: 570px;
}

.delete-frame {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.delete-outline {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
}

.inline-container {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    border-radius: 8px;
    background: var(--Background-color-bg-critical, #FFE3E6);
}

.notes-input-container {
    width: 98% !important;
    margin-left: 12px !important;
}

.notes-error-message {
    margin-left: 12px;
}

.input-frame .field-required {
    position: absolute;
    top: 30%;
    color: royalblue;
    right: 30px;
}

.input-frame {
    position: relative;
}

.input-container {
    padding-left: 80px !important;
}

.mri-modal-dialog {
    z-index: 1600;
    overflow-y: visible;
}

.mri-notes-frame {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}

.mri-frame-medium {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.mri-frame-small {
    display: flex;
    padding: 8px 10px;
    align-items: center;
    gap: 2px;
    align-self: stretch;
    border-radius: 6px;
    border: 1px solid #C6CED5;
}

.mri-labels-small {
    font-family: "Noto Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}


/* mobile groups and centre Subscriptions */
.mri-groups-container-large {
    display: flex;
    width: 100%;
    min-width: 100%;
    height: auto;
    min-height: 100%;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
    border-right: 1px solid var(--Line-color-line-dark-faint, #C6CED5);
    background: var(--Background-color-bg-primary, #FFF);
}

.mri-groups-image {
    display: flex;
    justify-content: center;
}

.mri-image-label {
    color: #394754;
    font-size: 18px;
    font-family: Noto Sans;
    font-weight: 300;
    line-height: 28px;
    word-wrap: break-word;
    display: flex;
    justify-content: center;
}

.mri-section {
    display: flex;
    padding: 0;
    gap: 2px;
    align-self: stretch;
}

.mri-section-small {
    display: flex;
    margin-left: auto;
}
/* mobile groups and centre Subscriptions */
.mri-groups-container-medium, .rad-rightContent-container {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.mri-container-heading {
    color: #394754;
    font-size: 24px;
    font-family: Noto Sans;
    font-weight: 300;
    line-height: 32px;
    word-wrap: break-word;
    line-height: 25px;
}

.mri-groups-image {
    display: flex;
    justify-content: center;
}

.mri-image-label {
    color: #394754;
    font-size: 18px;
    font-family: Noto Sans;
    font-weight: 300;
    line-height: 28px;
    word-wrap: break-word;
    display: flex;
    justify-content: center;
}

.mri-container-heading {
    color: #394754;
    font-size: 24px;
    font-family: Noto Sans;
    font-weight: 300;
    line-height: 32px;
    word-wrap: break-word;
    line-height: 25px;
}

.mri-section-small {
    display: flex;
    margin-left: auto;
}

.mri-labels-small {
    font-family: "Noto Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

.mri-section {
    display: flex;
    padding: 0;
    gap: 2px;
}

.mri-frame-small {
    display: flex;
    padding: 8px 10px;
    align-items: center;
    gap: 2px;
    align-self: stretch;
    border-radius: 6px;
    border: 1px solid #C6CED5;
}

.mri-frame-medium {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.mri-labels-x-small {
    font-size: 10px;
}

.mri-labels-small {
    font-family: "Noto Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

/* mobile groups and centre Subscriptions */
.mri-groups-container-medium {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

/* mobile groups and centre Subscriptions */
.mri-groups-container-large {
    display: flex;
    width: 100%;
    min-width: 100%;
    height: auto;
    min-height: 100%;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
    border-right: 1px solid var(--Line-color-line-dark-faint, #C6CED5);
    background: var(--Background-color-bg-primary, #FFF);
}

.account-menu {
    padding-right: 14px;
    width: 100% !important;
    display: none;
}

.account-submenu {
    position: absolute;
    left: 60px;
    top: 0;
    bottom: 0;
    z-index: 55;
    pointer-events: none;
    transition: width 0.25s ease-in-out 0s;
    overflow: hidden;
}

.account-submenu_context {
    border-radius: 8px;
    bottom: 40px;
    height: auto;
    position: absolute;
    left: 13px;
    filter: drop-shadow(0px 2px 15px rgba(0, 0, 0, 0.25));
    background-color: #fff;
    padding: 4px;
    transform: translateX(0);
    pointer-events: all;
    min-width: 260px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: max-content;
}

.signout_button {
    display: none;
    align-items: center;
    position: relative;
    padding: 0 4px 0 12px;
    padding-inline: 16px;
    background-color: #f0f2f4;
    color: black;
    cursor: pointer;
    text-decoration: none;
    border-radius: 6px;
}

.blankPageContainer {
    overflow-y: auto;
    height: calc(100% - 40px);
    display: none;
    position: absolute;
    top: 0;
    left: 38px;
    width: 650px;
    height: 100%;
    overflow: hidden;
    overflow-y: visible;
    background-color: white;
    z-index: 999; /* Adjust z-index as needed to ensure it's above other elements */
}

#content {
    height: calc(100% - 92px);
    width: 100%;
    overflow-x: inherit;
    overflow-y: auto;
    text-align: left;
    padding: 0;
}

.content-resize {
    height: calc(100vh - 130px) !important;
}

#mriStart {
    top: 7px;
    position: relative;
}

#logout {
    display: flex;
    align-items: center;
    margin: 0;
    color: white;
    line-height: 30px !important;
    padding-inline: 16px;
    border-radius: 6px;
}

    #logout:hover {
        background-color: #f0f2f4 !important;
    }

.autocomplete-suggestions {
    border: 1px solid #666;
    background: #FFF;
    overflow: auto;
    width: auto !important;
}

.autocomplete-suggestion {
    padding: 2px 5px;
    white-space: nowrap;
    overflow: hidden;
}

.autocomplete-selected {
    background: rgba(58, 157, 210, 0.1);
    color: #10689d;
}

/* controls */
.mri-select-width-medium {
    width: 130px
}

.mri-select-width-maximum {
    width: 270px
}

.mri-select-height-medium {
    height: 38px
}

.mri-p-6 {
    padding: 6px;
}


/* Datatables */
.dataTables_wrapper button {
    margin: 0 auto;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:active {
    background: none;
    box-shadow: none;
}

.dataTables_length select {
    padding-top: 0;
    padding-bottom: 0;
    height: 32px;
}

.mri-table__header-row {
    border: none !important;
}

.mri-table__cell:first-child {
    padding-left: 0;
}

.mri-table__body-row:last-child {
    border-bottom: 1px solid #C2CFD3 !important;
}

.mri-table__column-header--clickable:hover {
    background-color: transparent;
    color: #162029;
}

.mri-table__header, .mri-table__row {
    display: table-header-group;
}

.dataTables_wrapper > .row {
    --bs-gutter-x: 0;
}

    .dataTables_wrapper > .row:nth-child(1) {
        padding: 0 16px;
    }

.dataTables_wrapper .dataTables_info {
    padding-left: 16px;
}

.dataTables_wrapper .dataTables_paginate {
    padding-right: 16px;
}

.dataTables_wrapper * .dt-buttons {
    padding-left: 3rem !important;
    height: 32px;
}

table.dataTable {
    width: 100% !important;
    display: inline-table;
    border-collapse: collapse;
}

    table.dataTable thead {
        background-color: #E2E6EA;
    }

        table.dataTable thead tr {
            font-weight: 700;
            line-height: 20px;
        }

            table.dataTable thead tr th {
                white-space: break-spaces;
                font-size: 14px;
                width: auto;
                min-width: 20px;
                vertical-align: middle;
                padding: 8px 12px 8px 16px;
                border: 0;
                border-right: 1px solid #909FAE;
            }

                table.dataTable thead tr th:last-child {
                    border: 0;
                }

    table.dataTable tbody tr {
        height: 40px;
        border-bottom: 1px solid #C6CED5;
    }

        table.dataTable tbody tr td {
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            padding: 8px 12px 8px 16px;
            vertical-align: middle;
        }

    table.dataTable.no-footer tr:last-child {
        border-bottom: 1px solid #C6CED5 !important;
    }

    table.dataTable thead .sorting {
        background-image: url("../../img/sort_ascending_inactive.svg");
        background-size: 14px;
        background-position: calc(100% - 8px) center;
    }

    table.dataTable thead .sorting_desc {
        background-image: url("../../img/sort_decending_active.svg");
        background-size: 14px;
        background-position: calc(100% - 8px) center;
    }

    table.dataTable thead .sorting_asc {
        background-image: url("../../img/sort_ascending_active.svg");
        background-size: 14px;
        background-position: calc(100% - 8px) center;
    }

#retailersTable tbody tr td {
    text-wrap: nowrap;
}

.action-icons {
    height: 20px;
    width: 20px;
}

.action-icons-sm {
    height: 14px;
    width: 14px;
    margin-right: 8px;
    color: #10689D;
}

.mri-bg-modal-header, .nav-tabs-bg {
    background-color: #E2E6EA;
}

.content {
    min-height: 150px;
}

.mri-select {
    height: 100%;
}

.account-details {
    display: none;
    align-items: center;
    position: relative;
    padding: 5px 30px 5px 30px;
    padding-inline: 16px;
    background-color: #f0f2f4;
    color: black;
    text-decoration: none;
    pointer-events: none;
    border-radius: 6px;
    line-height: 30px !important;
}

.login-page {
    background-image: url("https://welcomeemea.saas.mrisoftware.com/MarketingImage/LargeImage");
    background-color: #fff;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
}

.login-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    color: #fff;
    text-align: center;
    padding: 10px 0;
}

.login-p {
    color: var(--Text-color-text-faint, #607184);
    font-family: "Noto Sans", "NotoSans", "Helvetica", "Arial";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-align: center;
    margin: 10px;
}

.login-panel {
    display: flex;
    width: 429px;
    padding: 50px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    flex-shrink: 0;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.10);
    position: fixed;
    top: 50%;
    left: calc(50% + 0px);
    transform: translate(-50%, -50%);
    z-index: 100;
}

.login-logo {
    max-width: 305px;
    max-height: 70px;
    margin-bottom: 6px;
    margin-top: 6px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.content-container {
    display: grid;
    gap: 40px;
}

.welcome-text {
    display: flex;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    color: #10689D;
    font-size: 20px;
    font-weight: 400;
    line-height: 22px;
    margin-left: auto;
    margin-top: auto;
    width: 100%;
    text-align: center;
}

.welcome-container {
    display: grid;
    gap: 16px;
}

.menu-text {
    color: #162029;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    width: 100%;
    text-align: center;
}

.accountMenu-text {
    display: flex;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
}

.signin-button {
    width: 306px;
    height: 48px;
    border-radius: 4px;
    border: 0;
    background: #10689D;
    margin-top: 38px;
    text-align: center;
}

    .signin-button:hover {
        background: #0582C3;
    }

.signintext {
    font-family: "Noto Sans", "NotoSans", sans-serif;
    color: white;
    fill: white;
    font-size: 1rem;
    font-weight: normal;
    float: left;
    margin: 9px;
    text-align: center;
    padding: 0 105px;
}

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

.close-icon {
    vertical-align: baseline;
}

.news-card {
    border: 1px solid #C6CED5;
    background-color: #FFFFFF;
}

.background-color-light-gray {
    background-color: #F0F2F4 !important;
}

.line-icon {
    margin: 5px;
}

.edit-icon-button:hover,
.delete-icon-button:hover,
.mobile-icon-button:hover {
    background-color: #F0F2F4;
    cursor: pointer;
}

.news-card-text {
    text-align: justify;
    font-size: 14px;
}

.toolbar-icons {
    height: 24px;
    width: 24px;
}

.popup-header {
    background-color: #E2E6EA;
}

div.announcement-content > div.DraftEditor-root {
    max-height: 192px;
    width: 100%;
    overflow: hidden;
    border: none;
    padding: 0;
}

div.announcement-content .public-DraftEditor-content {
    height: 192px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #909FAE;
    border-radius: 3px;
    padding: 5px;
}

.announcement-add-image-label {
    height: 64px;
    padding: 15px;
    font-size: 16px;
}

.announcement-edit-image {
    height: 300px;
}

.save-btn input {
    padding: 4px 20px 4px 33px;
}

.save-btn svg {
    top: 8px;
    left: 13px;
    cursor: pointer;
    position: absolute
}

.news-card-header {
    height: 48px;
    font-size: 14px;
}

    .news-card-header label {
        line-height: 48px;
    }

    .news-card-header .delete-icon-button,
    .news-card-header .edit-icon-button,
    .news-card-header .mobile-icon-button {
        padding: 12px 0;
    }

a.mri-color-green-55 {
    color: #008466 !important;
}

a.color-neutral {
    color: #e7c33d !important;
}

a.mri-color-red-55 {
    color: #D02323 !important;
}

a.color-neutral:hover, a.color-neutral:active, a.color-neutral:visited :hover, a.color-neutral:active :hover {
    color: #e7c33d !important;
    cursor: pointer;
    opacity: 70% !important;
}

a.mri-color-red-55:hover, a.mri-color-red-55:active, a.mri-color-red-55:visited :hover, a.mri-color-red-55:active :hover {
    color: #D02323 !important;
    cursor: pointer;
    opacity: 70% !important;
}

a.mri-color-green-55:hover, a.mri-color-green-55:active, a.mri-color-green-55:visited :hover, a.mri-color-green-55:active :hover {
    color: #008466 !important;
    cursor: pointer;
    opacity: 70% !important;
}

.action-icons:hover, .btn-hover-white:hover {
    cursor: pointer;
    opacity: 70%;
}

.rst__moveHandle {
    background-image: none !important;
    padding: 10px;
    text-align: center;
    background-color: #E6F4F5 !important;
    border: 1px solid #3A9DD2 !important;
    box-shadow: none !important;
}

.rst__node {
    /*height: 48px !important;*/
    width: calc(100% - 75px);
    min-width: 80% !important;
}

.rst__nodeContent {
    width: 100%;
}

.rst__rowWrapper:not(:first-child) .rst__rowContents {
    width: 100% !important;
}

.rst__lineHalfHorizontalRight::before,
.rst__lineFullVertical::after,
.rst__lineChildren::after,
.rst__lineHalfVerticalTop::after,
.rst__lineHalfVerticalBottom::after {
    background-color: #c6ced5 !important;
}

.rst__rowContents {
    border: 1px solid #c6ced5 !important;
    box-shadow: none !important;
    border-radius: 0 4px 4px 0 !important;
}

.folder .rst__rowContents {
    width: 100%
}

.folder .rst__moveHandle {
    border-radius: 4px 0px 0px 4px !important;
}

.rst__collapseButton,
.rst__expandButton,
.rst__filterExpandCollapseBtn {
    box-shadow: 0 0 0 1px #c6ced5 !important;
}

    .rst__collapseButton:hover {
        background: #fff url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCI+PGNpcmNsZSBjeD0iOSIgY3k9IjkiIHI9IjgiIGZpbGw9IiNGRkYiLz48ZyBzdHJva2U9IiM5ODk4OTgiIHN0cm9rZS13aWR0aD0iMS45IiA+PHBhdGggZD0iTTQuNSA5aDkiLz48cGF0aCBkPSJNOSA0LjV2OSIvPjwvZz4KPC9zdmc+') no-repeat center;
    }

    .rst__expandButton:hover, .rst__filterExpandCollapseBtn:hover {
        background: #fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCI+PGNpcmNsZSBjeD0iOSIgY3k9IjkiIHI9IjgiIGZpbGw9IiNGRkYiLz48ZyBzdHJva2U9IiM5ODk4OTgiIHN0cm9rZS13aWR0aD0iMS45IiA+PHBhdGggZD0iTTQuNSA5aDkiLz48L2c+Cjwvc3ZnPg==) no-repeat center;
    }

        .rst__collapseButton:hover:not(:active),
        .rst__expandButton:hover:not(:active), .rst__filterExpandCollapseBtn:hover:not(:active) {
            height: 16px !important;
            width: 16px !important;
        }

.rst__row {
    padding-right: 16px;
    height: 48px !important;
}

.rst__rowTitle {
    color: #162029;
    font-size: 14px;
    font-weight: 400 !important;
}

.folder .rst__moveHandle::before {
    content: url("../../img/folder-blue.svg");
}

.document > .rst__moveHandle::before {
    content: url("../../img/file-blue.svg");
}

.link > .rst__moveHandle::before {
    content: url("../../img/insert-link.svg");
}

.right-container {
    border-left: 1px solid #c6ced5;
}

.mri-pl-28 {
    padding-left: 28px;
}

.center-img {
    margin: 0 auto
}

.transparent-input {
    border: 1px#8CA0AC solid !important;
    background-color: #fff !important;
    opacity: 1 !important;
}

.asterisk-container .required {
    position: absolute;
    top: 30%;
    color: royalblue;
    right: 5px;
}

.select-container {
    position: relative;
}

    .select-container .required {
        position: absolute;
        top: 30%;
        color: royalblue;
        right: 30px;
    }

.mri-table__cell--4x-small {
    min-width: 65px;
    width: 65px;
    flex-basis: 65px;
    flex-grow: 1;
}

.mri-table__cell--5x-small {
    min-width: 40px;
    width: 40px;
    flex-basis: 40px;
    flex-grow: 0;
}

.mri-table__cell--6x-small {
    min-width: 60px;
    width: 60px;
    flex-basis: 60px;
    flex-grow: 0;
}

.mri-check-label {
    color: #162029;
    font-size: 14px;
    font-family: Noto Sans;
    font-weight: 400;
    word-wrap: break-word;
}

.mri-sales-btn {
    flex: auto;
    padding: 6px 16px;
    margin: 0;
    border: 1px solid #909FAE;
    background-color: transparent;
    color: black;
    font-size: 14px;
    cursor: pointer;
}

    .mri-sales-btn:first-child {
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
    }

    .mri-sales-btn:last-child {
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
    }

    .mri-sales-btn.active {
        background-color: rgba(58, 157, 210, 0.2);
        color: black;
    }

.btn-outline-primary:hover {
    background-color: rgba(58, 157, 210, 0.1);
    border: 1px solid rgba(144, 159, 174, 1);
}

.colored-column {
    background-color: #d3d3d3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
}

.full-height {
    height: 100%;
    align-items: center;
    padding: 0;
    margin: 0;
}

.h-small-100 {
    height: 100px;
}

.full-width {
    width: 100%;
}

.mri-label-black {
    color: black !important;
}

.vertical-col-scroll {
    height: calc(100vh - 92px);
    overflow-y: auto;
    overflow-x: auto;
}

.no-sales {
    /*height: calc(100vh - 350px);*/
    overflow-y: auto;
    overflow-x: hidden;
}

.sales-checkbox {
    transform: scale(1.5)
}

#retailerKeyContactTableContainer {
    max-height: 35vh;
    overflow: auto;
}

#collectionGridContainer .collectionCell input {
    padding: 5px;
}

#collectionGridContainer .collectionCol {
    border-left: 0;
}

.select-container .required {
    position: absolute;
    top: 30%;
    color: royalblue;
    right: 30px;
}

#messagingContainer .nav-item .active {
    border-bottom: 2px solid rgba(58, 157, 210, 1);
}

#messagingContainer .nav-item .nav-link:hover {
    color: #162029;
}

.active-chat {
    background-color: #E6F4F5 !important;
    border: 1px solid rgba(96, 113, 132, 1);
}

.inactive-chat {
    border: 1px solid rgba(198, 206, 213, 1);
}

#chat-view-section {
    height: calc(100vh - 230px) !important;
    min-height: calc(100vh - 230px) !important;
}

.font-weight-600 {
    font-weight: 600;
}

.left-messages-container,
.left-commentary-container {
    border-right: 1px solid #c6ced5;
    height: calc(100vh - 127px);
}

.add-border-bottom {
    border-bottom: 1px solid #c6ced5;
}

.add-border-right {
    border-right: 1px solid #c6ced5;
}

.add-border-left {
    border-left: 1px solid #c6ced5;
}

.mri-label-small {
    font-size: 12px;
}

.mri-label-normal {
    font-size: 14px;
}

.mri-cursor-pointer:hover {
    cursor: pointer;
}

.messages-top-nav {
    padding: 8px 0px;
}

#messageTabs .nav-item .nav-link {
    padding: 16px 8px;
}

.chat-item {
    border-radius: 16px 16px 16px 0px;
    padding: 12px 16px 12px 16px;
}

.message-input {
    resize: none;
    padding: 8px 16px;
}

    .message-input:focus {
        outline: none;
    }

.send-btn {
    padding: 5px 50px;
    margin-right: 15px;
    width: 130px !important;
}

.send-btn-container {
    align-items: end;
    margin-bottom: 10px;
}

.mri-brand-blue-background {
    background-color: #0D75B0;
}

.chat-form {
    border-top: 1px solid #C6CED5;
}

.file-upload-btn {
    max-width: max-content;
}

    .file-upload-btn label {
        align-items: end;
        padding-bottom: 14px;
    }

#participantsTable tr:last-child {
    border-color: #c2cfd3;
}

.participants-table-header {
    justify-content: space-between;
    padding-right: 16px !important;
}

.message-title {
    text-overflow: ellipsis;
    overflow: hidden;
}

mri-icon:hover {
    background-color: transparent;
}

.mri-icon-medium {
    height: 16px;
    width: 16px;
}

#participantsTable tbody .mri-table__cell:first-child {
    padding-left: 8px;
}

.participants-action {
    height: 24px;
    width: 49px;
}

    .participants-action::after {
        margin-top: 2px;
    }

.noRecords-frame {
    flex-direction: column;
    gap: 10px;
}

.noAlertSetupRecords-frame,
.noAlertHistoryRecords-frame {
    flex-direction: column;
    gap: 10px;
}

.alert-text-decoration {
    color: #BA2121 !important;
}

#retailer-data-table_filter {
    margin-right: -12px;
}

.bg-danger-light {
    background-color: #FFE3E6 !important;
}

.bg-danger {
    background-color: #BA2121;
    color: #FFFFFF;
}

.mri-table__cell--xx-large {
    min-width: 1425px;
    width: 1425px;
    flex-basis: 1425px;
    flex-grow: 1;
}

.mri-portfolio-text {
    color: #044D66;
    font-size: 14px;
    font-family: Noto Sans;
    font-weight: 400;
    line-height: 20px;
    word-wrap: break-word
}

.mri-groups-eventcontainer-medium {
    width: 100%;
    align-self: stretch;
    flex-direction: column;
}

.mri-calevents-btn {
    flex: 1;
    padding: 0 10px;
    margin: 0;
    border: 1px solid #0D75B0;
    background-color: transparent;
    color: black;
    font-size: 14px;
    cursor: pointer;
    box-sizing: border-box;
    display: inline-block;
    height: 40px;
}

    .mri-calevents-btn:hover {
        background-color: rgba(58, 157, 210, 0.2);
    }

    .mri-calevents-btn:first-child {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        border-right-width: 1px;
    }

    .mri-calevents-btn:last-child {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        border-left-width: 0;
        margin-left: -4px;
    }

    .mri-calevents-btn.active {
        background-color: #0D75B0;
        color: white;
    }

.updateeventlogo {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

.no-events {
    text-align: center;
    font-style: normal;
    color: gray;
    padding: 20px;
}

.mri-event-header {
    color: #162029;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    margin-top: 26px;
    width: 100%;
}

.mri-even-daterange {
    color: #10689D;
    font-size: 12px;
    font-family: Noto Sans;
    font-weight: 400;
    line-height: 16px;
    word-wrap: break-word
}

.mri-event-date {
    color: #044D66;
    font-size: 16px;
    font-family: Noto Sans;
    font-weight: 400;
    line-height: 24px;
    word-wrap: break-word;
}

.mri-event-container {
    display: block;
    margin-bottom: 5px;
}

.mri-event-header,
.mri-labels-small,
.mri-even-daterange {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 10px;
}

.event-with-image {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.image-container {
    flex-shrink: 0;
    margin-right: 1px;
}

.event-details {
    flex-grow: 1;
}

.event-image {
    border-radius: 50%;
    background-color: #E6F4F5;
    padding: 8px;
    width: 40px;
    height: 40px;
}

#eventFormContainer .label-required::after {
    content: none !important;
}

.background-color-white {
    background-color: #FFE3E6
}

.loader {
    border: 3px solid #bddfec;
    border-top: 3px solid #10689D;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    animation: spin 1s linear infinite;
    transform: translate(-50%, -50%);
    margin: auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loader.fade {
    display: none;
}

#loader-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 900;
    margin-top: -92px;
}

#loading-text {
    color: #383939;
    font-weight: 500;
    font-size: 14px;
    padding-top: 2px;
}

#loader-wrapper .mri-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 800;
}

.loader-content-wrap {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 900;
    width: 120px;
    height: 120px;
    background: rgb(255 255 255);
    padding: 24px;
    text-align: center;
    line-height: 28px;
    border-radius: 8px;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
    margin-left: -30px;
}

.Helpheading {
    color: #044D66;
    font-size: 32px;
    font-family: Noto Sans;
    font-weight: 300;
    line-height: 40px;
    word-wrap: break-word;
    text-align: center !important;
    display: block;
}

.helpcontainer {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.supportcontainer {
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;    
    box-sizing: border-box;
}

.border-bottom-gray {
    border-bottom: 1px solid #c6ced5
}

#benchmarkProCommentaryTabs .nav-link:hover {
    cursor: pointer;
    color: #162029;
}

.dataTables_filter {
    float: left;
    margin-left: 4px;
}

.commentary-input {
    border: 1px solid #909FAE;
}

    .commentary-input:read-only {
        border: 1px solid #C6CED5;
        background-color: #F0F2F4;
        opacity: unset;
    }

.create-bp-btn:hover {
    background-color: #fff
}

.csv-export-btn {
    border-top-right-radius: 9999px !important;
    border-bottom-right-radius: 9999px !important;
}

.news-input {
    border: 1px solid #909FAE;
}

    .news-input:read-only {
        border: 1px solid #C6CED5;
        background-color: #F0F2F4;
        opacity: unset;
    }

#retailerTabs .nav-link:hover,
#editContactTabs .nav-link:hover {
    cursor: pointer;
    color: #162029;
}

.mri-opacity-100 {
    opacity: 1 !important;
}

.wrap-single-word {
    overflow-wrap: anywhere;
}
/***Dashboard***/
.dashboardTile_wrapper .dashboard-tile .mri-dashboard-panel {
    position: relative;
}

    .dashboardTile_wrapper .dashboard-tile .mri-dashboard-panel .mri-dashboard-panel__header {
        align-items: normal;
    }

    .dashboardTile_wrapper .dashboard-tile .mri-dashboard-panel .mri-dashboard-tile-image {
        right: 16px;
        position: absolute;
        width: 60px;
        height: 60px;
        background: #F0F2F4;
        border-radius: 85px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .dashboardTile_wrapper .dashboard-tile .mri-dashboard-panel .mri-dashboard-tile-image svg {
            width: 30px;
            height: 30px;
        }

.mri-dashboard-list-items {
    padding: 0 26px;
}

    .mri-dashboard-list-items li::marker {
        color: rgba(16, 104, 157, 1);
    }

.dashboard-tile a {
    color: #10689D;
}

/***Header styles***/
.mri-dialog .mri-dialog__header h3 {
    margin-bottom: 0;
}

.mri-dialog__footer {
    padding-top: 0 !important;
}

/***Colors***/
.color-disabled {
    color: #C6CED5;
}

.color-white {
    color: #fff;
}

.color-gray {
    color: #A8A8A8;
}

.color-warning {
    color: #d44700;
}

.color-neutral {
    color: #e7c33d;
}

.color-162029 {
    color: #162029;
}

.color-black {
    color: #162029 !important;
}

.color-text_muted {
    color: #394754 !important;
}

.color-text_landmark {
    color: #044D66 !important;
}

.color-blue {
    color: #10689D !important;
}

.color-bg-transparent-active {
    background-color: #3A9DD233 !important;
}

/***Events page***/
#events-calendar .fc-header-toolbar .fc-toolbar-chunk .fc-button-group button,
#analyserCalendar .fc-header-toolbar .fc-toolbar-chunk .fc-button-group button {
    background-color: transparent;
    border: none;
    color: #394754;
}

#events-calendar .fc-header-toolbar .fc-toolbar-chunk .fc-today-button,
#analyserCalendar .fc-header-toolbar .fc-toolbar-chunk .fc-today-button {
    line-height: 20px;
    height: 30px;
    width: 73px;
    padding: 5px 17px;
    border-radius: 30px;
    border: 1px solid #909FAE;
    background-color: transparent;
    color: #162029;
    font-size: 14px;
    font-weight: 400;
    text-transform: capitalize;
}

#events-calendar .fc-header-toolbar .fc-toolbar-chunk .fc-button-group .fc-dayGridMonth-button,
#analyserCalendar .fc-header-toolbar .fc-toolbar-chunk .fc-button-group .fc-dayGridMonth-button {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}

#events-calendar .fc-header-toolbar .fc-toolbar-chunk .fc-button-group .fc-dayGridWeek-button,
#analyserCalendar .fc-header-toolbar .fc-toolbar-chunk .fc-button-group .fc-listWeek-button {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}

#events-calendar .fc-header-toolbar .fc-toolbar-chunk .fc-button-group .fc-dayGridMonth-button,
#events-calendar .fc-header-toolbar .fc-toolbar-chunk .fc-button-group .fc-dayGridWeek-button,
#analyserCalendar .fc-header-toolbar .fc-toolbar-chunk .fc-button-group .fc-dayGridMonth-button,
#analyserCalendar .fc-header-toolbar .fc-toolbar-chunk .fc-button-group .fc-listWeek-button {
    line-height: 20px;
    font-size: 14px;
    font-weight: 400;
    border: 1px solid #909FAE;
}

#analyserCalendar .fc-header-toolbar .fc-toolbar-chunk .fc-button-group .fc-dayGridWeek-button {
    line-height: 20px;
    font-size: 14px;
    font-weight: 400;
    border-top: 1px solid #909FAE;
    border-bottom: 1px solid #909FAE;
}

#analyserCalendar .fc-header-toolbar .fc-toolbar-chunk .fc-button-group .fc-listMonth-button {
    line-height: 20px;
    font-size: 14px;
    font-weight: 400;
    border-top: 1px solid #909FAE;
    border-bottom: 1px solid #909FAE;
    border-left: 1px solid #909FAE;
}

.fc .fc-button-primary:not(:disabled).fc-button-active {
    background: rgba(58, 157, 210, .2) !important;
}

    .fc .fc-button-primary:focus, .fc .fc-button-primary:not(:disabled).fc-button-active:focus,
    .fc .fc-button-primary:not(:disabled):active:focus {
        box-shadow: none !important;
    }

.fc .fc-scroller-harness {
    overflow: visible !important;
}

.fc-scroller-harness > .fc-scroller {
    overflow: visible !important;
}

table.fc-scrollgrid.fc-scrollgrid-liquid {
    overflow: auto !important;
}

.fc-dayGridMonth-view.fc-daygrid.fc-view, .fc-dayGridWeek-view.fc-daygrid.fc-view {
    width: 100% !important;
}

.fc-daygrid.fc-dayGridMonth-view.fc-view, .fc-daygrid.fc-dayGridWeek-view.fc-view {
    overflow-x: auto !important;
    overflow-y: hidden;
}

.fc-col-header thead {
    height: 56px;
}

    .fc-col-header thead tr th {
        padding: 16px;
    }

        .fc-col-header thead tr th div a {
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
            color: #607184;
            text-decoration: none;
        }

.fc-h-event {
    background-color: transparent !important;
    border: 0 !important;
}

#events-calendar .fc-event-title-container {
    height: 32px;
    padding: 6px 16px;
    background-color: #0D75B0;
    border-radius: 24px;
    overflow: hidden;
    min-width: 0;
}

.fc-daygrid-day-number {
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    text-align: right !important;
    text-decoration: none !important;
    color: #607184 !important;
    cursor: pointer;
}

.fc-h-event .fc-event-main-frame {
    padding: 0 2px;
}

.fc-toolbar-chunk:last-child {
    padding-right: 16px;
}

.fc-toolbar-title {
    font-size: 18px !important;
}

.mri-insights__body--default {
    width: 41rem;
}

/***Tabs***/
.tab-content {
    height: calc(100% - 40px);
}

#reportCheckingTable_processing {
    display: none !important;
}

#reportCheckingHistoryTable_processing {
    display: none !important;
}

}

/**analyser**/
.Livebreadcrumb-container {
    background-color: #E2E6EA;
    padding: 0;
    margin: 0;
    line-height: 1;
    width: 100%;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.Livebreadcrumb {
    margin: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-color: #e9ecef;
    border-bottom: 10px solid white;
    padding: 6px 16px;
}

.Livebreadcrumb-item {
    font-size: 14px;
    color: #007bff;
    line-height: 1;
    margin: 0;
    padding: 0 3px;
}

    .Livebreadcrumb-item + .Livebreadcrumb-item::before {
        content: " > ";
        color: #6c757d;
        padding: 0 2px;
    }

    .Livebreadcrumb-item.active {
        color: #6c757d;
        pointer-events: none;
    }

.vertical-divider {
    border-left: 2px solid #C6CED5;
    height: 50px;
    margin: 0 1rem;
}

.d-flex.align-items-center {
    height: auto;
}

.border-dotted {
    border-style: dotted !important;
}

/*ODOMETER*/
.odometer.odometer-auto-theme, .odometer.odometer-theme-default {
    display: -moz-inline-box;
    -moz-box-orient: vertical;
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    position: relative;
}

.odometer.odometer-auto-theme, .odometer.odometer-theme-default {
    *display: inline;
}

    .odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-default .odometer-digit {
        display: -moz-inline-box;
        -moz-box-orient: vertical;
        display: inline-block;
        vertical-align: middle;
        *vertical-align: auto;
        position: relative;
    }

    .odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-default .odometer-digit {
        *display: inline;
    }

        .odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer {
            display: -moz-inline-box;
            -moz-box-orient: vertical;
            display: inline-block;
            vertical-align: middle;
            *vertical-align: auto;
            visibility: hidden;
        }

        .odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer {
            *display: inline;
        }

        .odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-default .odometer-digit .odometer-digit-inner {
            text-align: left;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow: hidden;
        }

        .odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-default .odometer-digit .odometer-ribbon {
            display: block;
        }

        .odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-default .odometer-digit .odometer-ribbon-inner {
            display: block;
            -webkit-backface-visibility: hidden;
        }

        .odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-default .odometer-digit .odometer-value {
            display: block;
            -webkit-transform: translateZ(0);
        }

            .odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-default .odometer-digit .odometer-value.odometer-last-value {
                position: absolute;
            }

    .odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up .odometer-ribbon-inner {
        -webkit-transition: -webkit-transform 2s;
        -moz-transition: -moz-transform 2s;
        -ms-transition: -ms-transform 2s;
        -o-transition: -o-transform 2s;
        transition: transform 2s;
    }

    .odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    .odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down .odometer-ribbon-inner {
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    .odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
        -webkit-transition: -webkit-transform 2s;
        -moz-transition: -moz-transform 2s;
        -ms-transition: -ms-transform 2s;
        -o-transition: -o-transform 2s;
        transition: transform 2s;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }

.odometer.odometer-auto-theme, .odometer.odometer-theme-default {
    font-family: "Helvetica Neue", sans-serif;
    line-height: 1.1em;
}

    .odometer.odometer-auto-theme .odometer-value, .odometer.odometer-theme-default .odometer-value {
        text-align: center;
    }

/*Real Time Occupancy Chart*/
#percentageChart {
    width: 100% !important;
    height: 100% !important;
}

.greenAlert {
    color: #38AB4B;
}

.amberAlert {
    color: #f9b234;
}

.redAlert {
    color: #c71719;
}

.legend-body_container, .salesYoYCategoriesRetailersFrame {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.legend-frame {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.legend-content_frame, .salesYoYCategoryRetailerHeaderFrame {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.hourlydatacontainer {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.hourlydataFrame {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.HourlyDataPanel {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 12px 1px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Line-color-line-dark-muted, #909FAE);
    background: var(--Background-color-bg-primary, #FFF);
}

.hourlydataheadingContainer {
    display: flex;
    padding: 0px 16px;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
}

.hourly-filter-container {
    display: flex;
    margin: 0;
    padding: 0;
}

.hourlydataFrame {
    display: flex;
    align-items: stretch;
    gap: 16px;
    width: 100%;
}

.weatherchartframe {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-self: stretch;
    gap: 16px;
}

.weatherContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 1px;
    border-radius: 8px;
    border: 1px solid var(--Line-color-line-dark-muted, #909FAE);
    background: var(--Background-color-bg-primary, #FFF);
}

.hourlychartContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    padding: 12px 1px;
    flex: 1;
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--Line-color-line-dark-muted, #909FAE);
    background: var(--Background-color-bg-primary, #FFF);
    box-sizing: border-box;
}

.chart-container {
    width: 100%;
    height: 100%;
}

.tab-content {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.tab-pane {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.apexcharts-canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
}

#hourly-chart-page .mri-tab-view {
    width: 100%;
    padding: 0;
    margin: 0;
}

#hourly-chart-page .mri-tab-view {
    width: 100%;
    padding: 0;
    margin: 0;
}

#hourly-chart-page .nav-tabs {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    border: none;
    margin-inline: 0 !important;
}

#hourly-chart-page .nav-item {
    margin: 0;
    padding: 0;
}

#hourly-chart-page .nav-link {
    padding: 10px 16px;
    font-size: 14px;
    border: none;
}

    #hourly-chart-page .nav-link.active {
        border-bottom: 2px solid #007bff;
    }

#hourly-chart-page .nav-tabs {
    border-bottom: 1px solid #ddd;
}

#hourly-chart-page .chart-container {
    padding: 0;
    margin: 0;
}

.Livecountingcontainer {
    display: flex;
    padding: 16px;
    align-items: center;
    align-self: stretch;
}

.livecountingrowlayout {
    display: flex;
    align-items: center;
    flex: 1 0 0;
}

.mri-centre-btn {
    flex: auto;
    padding: 6px 16px;
    margin: 0;
    border: 1px solid #909FAE;
    background-color: transparent;
    color: black;
    font-size: 14px;
    cursor: pointer;
}

    .mri-centre-btn:first-child {
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
    }

    .mri-centre-btn:last-child {
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
    }

.controlBar {
    display: flex;
    padding: 10px 16px;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    background: var(--Background-color-bg-secondary, #E2E6EA);
}

.centreSelectionBar, .reportFilterContainer {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 0 0;
}

.centre-dropdown {
    display: flex;
    padding: 9px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 4px;
    border: 1px solid var(--Line-color-line-dark-muted, #909FAE);
    background: var(--Background-color-bg-primary, #FFF);
}

.noCentreFrame, .noEventFrame {
    display: flex;
    padding: 16px;
    justify-content: center;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}

.noCentreContainer, .noEventContainer, .noTabsContainer, .noFiltersContainer {
    display: flex;
    width: 280px;
    padding: 40px 0px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.noIconFrame {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.singleCentreContainer, .multiCentreContainer, .salesDataContainer {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.singleCentreFrame, .multiCentreFrame {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.salesDataFrame {
    display: flex;
    align-items: stretch;
    gap: 16px;
    align-self: stretch;
}

.centreLocationsPanel, .radHeadlinesContentPanel {
    display: flex;
    padding: 16px 1px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Line-color-line-dark-muted, #909FAE);
    background: var(--Background-color-bg-primary, #FFF);
}

.dataAggregationTimeFrame {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
}

.siteDropdown {
    display: flex;
    width: 344px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.headingContainer {
    display: flex;
    padding: 0px 16px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.locationsFrame, .centresFrame {
    display: flex;
    padding: 0px 16px 0px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.border-dashed {
    border-style: dashed;
    border-width: 1px;
    border-color: #C6CED5;
}

.locations-container, .hourlyComparisonFilterFormFrame, .locationComparisonFilterFormFrame, .monthlyPerformanceFilterFormFrame, .quarterlyPerformanceFilterFormFrame {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.locations-frame {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    flex-wrap: wrap;
}

.locationsButton-frame {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    flex-wrap: wrap;
}

.locationsButton-container {
    display: flex;
    flex-direction: row;
    gap: 12px;
}

.dataAggregationContainer {
    display: flex;
    padding: 16px 1px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Line-color-line-dark-muted, #909FAE);
    background: var(--Background-color-bg-primary, #FFF);
}

.dataAggregationSalesContainer {
    display: flex;
    flex-grow: 1;
    padding: 16px 1px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Line-color-line-dark-muted, #909FAE);
    background: var(--Background-color-bg-primary, #FFF);
}

.dataAggregationFrame {
    display: flex;
    padding: 0px 16px;
    align-items: center;
    flex: 1 0 0;
    gap: 8px;
}

.radio-list, .footfallWeatherFrame, .hourlyComparisonFilterGroupFrame, .locationComparisonFilterGroupFrame, .monthlyPerformanceFilterGroupFrame, .quarterlyPerformanceFilterGroupFrame {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}

.timeFrameContainer {
    display: flex;
    padding: 16px 1px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Line-color-line-dark-muted, #909FAE);
    background: var(--Background-color-bg-primary, #FFF);
}

.timeFrame, .salesLocationsContainer, .salesDateContainer, .dataAggregationDropdownFrame, .additionalMetricsContainer {
    display: flex;
    padding: 0px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

    .timeFrame .col-6 {
        flex: 1;
    }

.dateFrame {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.hourFrame {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    flex-direction: column;
}

#slider-range {
    border-radius: 4px;
    background: rgba(13, 117, 176, 0.30);
}

.ui-slider-range.ui-corner-all.ui-widget-header {
    border-radius: 4px;
    background: var(--Background-color-bg-landmark, #0D75B0);
}

.ui-state-default, .ui-widget-content .ui-state-default {
    border: none !important;
    background: none !important;
    color: none !important;
}

.ui-state-default, .ui-widget-content .ui-state-default {
    top: -0.5em !important;
    margin-left: -0.87em !important;
}

#calendarMonth-slider-hourRange .ui-state-default,
#monthly-slider-hourRange .ui-state-default,
#slider-hourRange .ui-state-default,
#calendarQuarter-slider-hourRange .ui-state-default,
#quarterPerformance-slider-hourRange .ui-state-default,
#quarterly-slider-hourRange .ui-state-default,
#quarterPerformanceFilter-slider-hourRange .ui-state-default,
#monthPerformance-slider-hourRange .ui-state-default,
#monthPerformanceFilter-slider-hourRange .ui-state-default {
    top: -0.6em !important;
}

.right-handle {
    left: 99%;
}

.day-checkbox-container label {
    padding-left: 16px;
}

    .day-checkbox-container label:first-child {
        padding-left: 8px;
    }

.legend-body_container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.legend-frame {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.legend-content_frame, .salesSaveSettingsDataFrame, .salesSaveSettingsDataExtendedFrame, .salesSaveSettingsMetricsFrame {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.confirmExport-container, .calendarModal-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}

.confirmDataContainer {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.confirmDataGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    list-style-type: none;
    padding: 0;
}

.chosenLocation::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #162029;
}

.daysOfWeekFrame {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
}

#multiCentreDropdown * .css-1s2u09g-control,
#multiCentreDropdown * .css-1pahdxg-control,
#multiCentreDropdown * .css-1insrsq-control,
#regionsCentreDropdown * .css-1s2u09g-control,
#regionsCentreDropdown * .css-1pahdxg-control,
#regionsCentreDropdown * .css-1insrsq-control,
#centreDropdown * .css-1s2u09g-control,
#centreDropdown * .css-1pahdxg-control,
#centreDropdown * .css-1insrsq-control {
    display: flex;
    width: 344px;
    gap: 8px;
}

.dataExportMultiCentre__indicators > .dataExportMultiCentre__clear-indicator {
    display: none;
}

.multiCentresListFrame {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.multiGroupDataType, .metric-item, .salesSettingsMetricItem, .radioSitesFrame {
    display: flex;
    gap: 8px;
}

.dataExportMultiCentre__value-container {
    max-height: 85px;
    overflow-y: auto !important;
}

.mt-36 {
    margin-top: 36px;
}

ul.multiCentresListFrame {
    margin-bottom: 0;
}

:has(#multiCentreContainer) * .centresFrame {
    gap: 12px !important;
}

.centresSubFrame {
    display: flex;
    gap: 8px;
    flex-direction: column;
}

#multiCentreDropdown * .css-1s2u09g-control,
#multiCentreDropdown * .css-1pahdxg-control,
#multiCentreDropdown * .css-1insrsq-control,
#Stores * .css-1s2u09g-control,
#Stores * .css-1pahdxg-control,
#Stores * .css-1insrsq-control,
#regionsCentreDropdown * .css-1s2u09g-control,
#regionsCentreDropdown * .css-1pahdxg-control,
#regionsCentreDropdown * .css-1insrsq-control,
#centreDropdown * .css-1s2u09g-control,
#centreDropdown * .css-1pahdxg-control,
#centreDropdown * .css-1insrsq-control {
    display: flex;
    width: 344px;
    gap: 8px;
}

.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open > .dropdown-toggle.btn-default.focus, .open > .dropdown-toggle.btn-default:focus, .open > .dropdown-toggle.btn-default:hover {
    color: #333;
    background-color: #d4d4d4;
    border-color: #8c8c8c;
}

.btn-group.open .dropdown-toggle {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}

.btn-group .dropdown-toggle:active, .btn-group.open .dropdown-toggle {
    outline: 0;
}

.btn-group > .btn:first-child {
    margin-left: 0;
}

.btn-group-vertical > .btn.active, .btn-group-vertical > .btn:active, .btn-group-vertical > .btn:focus, .btn-group-vertical > .btn:hover, .btn-group > .btn.active, .btn-group > .btn:active, .btn-group > .btn:focus, .btn-group > .btn:hover {
    z-index: 2;
}

.btn-default.active, .btn-default:active, .open > .dropdown-toggle.btn-default {
    background-image: none;
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

.btn-group-vertical > .btn-check:checked + .btn, .btn-group-vertical > .btn-check:focus + .btn, .btn-group-vertical > .btn.active, .btn-group-vertical > .btn:active, .btn-group-vertical > .btn:focus, .btn-group-vertical > .btn:hover, .btn-group > .btn-check:checked + .btn, .btn-group > .btn-check:focus + .btn, .btn-group > .btn.active, .btn-group > .btn:active, .btn-group > .btn:focus, .btn-group > .btn:hover {
    z-index: 1;
}

.btn-group-vertical > .btn, .btn-group > .btn {
    position: relative;
    float: left;
}

.dropdown-toggle:focus {
    outline: 0;
}

.btn-default:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

.btn-default.focus, .btn-default:focus {
    color: #333;
    background-color: #e6e6e6;
    border-color: #8c8c8c;
}

.btn.focus, .btn:focus, .btn:hover {
    color: #333;
    text-decoration: none;
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.btn-check:focus + .btn, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}

.btn:hover {
    color: #212529;
}

button:hover {
    cursor: pointer;
    background: #ADA9B2;
}

.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc !important;
}

.btn.multiselect, .btn.multiselect-clear-filter {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.btn .caret {
    margin-left: 0;
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 8px dashed;
    border-top: 4px solid\9;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
}

.open > .dropdown-menu {
    display: block;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.multiselect-container > li {
    padding: 0;
}

.input-group-addon:first-child {
    border-right: 0;
}

.input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.input-group-addon, .input-group-btn {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}

.input-group .form-control, .input-group-addon, .input-group-btn {
    display: table-cell;
}

.glyphicon {
    position: relative;
    top: 1px;
    display: flex;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.glyphicon-search:before {
    content: url("../../img/search.svg");
}

.input-group .form-control:not(:first-child):not(:last-child), .input-group-addon:not(:first-child):not(:last-child), .input-group-btn:not(:first-child):not(:last-child) {
    border-radius: 0 !important;
}

.input-group-btn {
    position: relative;
    font-size: 0;
    white-space: nowrap;
}

.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
}

.input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group {
    z-index: 2;
    margin-left: -1px;
}

    .input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:first-child > .btn-group:not(:first-child) > .btn, .input-group-btn:first-child > .btn:not(:first-child), .input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group > .btn, .input-group-btn:last-child > .dropdown-toggle {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

.input-group-btn > .btn {
    position: relative;
}

.dropdown-menu > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}

.multiselect-container .checkbox input[type=checkbox], .multiselect-container .checkbox-inline input[type=checkbox], .multiselect-container .radio input[type=radio], .multiselect-container .radio-inline input[type=radio] {
    position: absolute;
    margin-top: 4px \9;
    margin-left: -20px;
}

.multiselect-container > li > a > label > input[type=checkbox], .multiselect-container > li > a > label > input[type=radio] {
    margin: 4px 0 0;
    margin-top: 1px \9;
    line-height: normal;
}

.multiselect-container > li > a > label > input[type=checkbox], .multiselect-container > li > a > label > input[type=radio] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
    color: #fff;
    text-decoration: none;
    background-color: #337ab7;
    outline: 0;
}

:has(#multiCentreDropdown) * .dropdown-toggle::after,
:has(#Stores) * .dropdown-toggle::after,
:has(#calendarMultiSiteDropdown) * .dropdown-toggle::after,
:has(#regionsCentreDropdown) * .dropdown-toggle::after,
:has(#centreDropdown) * .dropdown-toggle::after {
    display: none;
}

.input-group .form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
}

:has(#multiCentreDropdown) * ul.multiselect-container.dropdown-menu,
:has(#centreDropdown) * ul.multiselect-container.dropdown-menu {
    max-height: 400px;
    overflow: hidden auto;
    z-index: 899 !important;
    width: auto !important;
}

:has(#Stores) * ul.multiselect-container.dropdown-menu {
    max-height: 400px;
    overflow: hidden auto;
    z-index: 2001 !important;
    width: 400px !important;
    overflow-x: auto;
}

:has(#calendarMultiSiteDropdown) * ul.multiselect-container.dropdown-menu {
    max-height: 400px;
    overflow: hidden auto;
    z-index: 899 !important;
    width: 100% !important;
    overflow-x: auto;
}

:has(#regionsCentreDropdown) * ul.multiselect-container.dropdown-menu {
    max-height: 400px;
    overflow: hidden auto;
    z-index: 899 !important;
    width: 155px !important;
    overflow-x: auto;
}

.glyphicon-remove-circle:before {
    content: url("../../img/cancel.svg");
}

button.multiselect.dropdown-toggle.btn.btn-default {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 0;
}

:has(#multiCentreDropdown) * .btn-group,
:has(#centreDropdown) * .btn-group {
    width: 344px !important;
}

:has(#Stores) * .btn-group:not(.dt-buttons) {
    width: 400px !important;
}

:has(#calendarMultiSiteDropdown) * .btn-group {
    width: 100% !important;
}

#regionsCentreDropdown + .btn-group {
    width: 100% !important;
}

span.input-group-addon {
    height: 28px;
}

:has(#multiCentreDropdown) * input.form-control.multiselect-search,
:has(#Stores) * input.form-control.multiselect-search,
:has(#calendarMultiSiteDropdown) * input.form-control.multiselect-search,
:has(#regionsCentreDropdown) * input.form-control.multiselect-search,
:has(#centreDropdown) * input.form-control.multiselect-search {
    height: 28px;
}

button.btn.btn-default.multiselect-clear-filter {
    height: 28px;
    padding: 0;
}

:has(#multiCentreDropdown) * span.input-group-addon,
:has(#Stores) * span.input-group-addon,
:has(#calendarMultiSiteDropdown) * span.input-group-addon,
:has(#regionsCentreDropdown) * span.input-group-addon,
:has(#centreDropdown) * span.input-group-addon {
    padding: 0 !important;
}

:has(#multiCentreDropdown) * hr:not([size]),
:has(#Stores) * hr:not([size]),
:has(#calendarMultiSiteDropdown) * hr:not([size]),
:has(#regionsCentreDropdown) * hr:not([size]),
:has(#centreDropdown) * hr:not([size]) {
    margin: 0 0 5px 0;
}

.salesDropdownContainer, .salesDateRangeContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}

.salesLocationFrame, .salesDateFrame, .footfallTodayLocationsListFrame {
    display: flex;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}

.centreDropdownFrame, .categoryDropdownFrame, .retailerDropdownFrame,
.salesStartDateFrame, .salesEndDateFrame, .additionalMetricsList, .calendarDateFrame,
.salesComplianceFrame {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
}

.addSalesFilterButtonFrame {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

    .addSalesFilterButtonFrame > button.mri-icon-button {
        margin-top: 28px;
    }

.dataExportModalWidth {
    width: 740px !important;
}

.salesDataAggregationDropdown {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.additionalMetricsListFrame {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.additionalMetricsFrame {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.saveSettingsYesNoFrame {
    display: flex;
    width: 220px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
}

.saveSettingInputFrame {
    display: flex;
    width: 280px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.salesSaveCancelFrame, .multiCentreSaveCancelFrame {
    display: flex;
    height: 75px;
    align-items: flex-end;
    gap: 8px;
    flex: 1 0 0;
}

.salesSaveSettingsContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
}

.salesSaveSettingsFrame {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-radius: 6px;
    border: 1px solid var(--Line-color-line-dark-faint, #C6CED5);
    padding: 16px;
    width: 100%;
}

.radio-column, .delete-column {
    width: 19px;
}

.empty-space {
    visibility: hidden;
}

.showLessInformationButton {
    cursor: pointer;
}

.salesSettingsMetricsContainer {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
}

#salesControlBar:not(:has(.centreSelectionBar)) {
    height: 36px;
}

.button-width-fixed {
    min-width: 185px;
}

#retailAnalyticsContent {
    overflow: auto;
    max-height: calc(100vh - 92px);
}

.hourFrame {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    flex-direction: column;
}

#slider-range {
    border-radius: 4px;
    background: rgba(13, 117, 176, 0.30);
}

.ui-slider-range.ui-corner-all.ui-widget-header {
    border-radius: 4px;
    background: var(--Background-color-bg-landmark, #0D75B0);
}

.ui-state-default, .ui-widget-content .ui-state-default {
    border: none !important;
    background: none !important;
    color: none !important;
}

.ui-state-default, .ui-widget-content .ui-state-default {
    top: -0.5em !important;
    margin-left: -0.87em !important;
}

.div-with-title {
    border: 1px solid #909FAE;
    border-radius: 8px;
    padding: 10px;
    position: relative;
    display: inline-block;
}

.div-with-title-text {
    position: absolute;
    top: -10px;
    left: 10px;
    background-color: white;
    padding: 0 5px;
    color: #10689D
}

.filter-container-width {
    min-width: 430px !important;
    max-width: 430px !important;
}

.eventCompareControlBar, .comparisonChartControlBar {
    display: block;
    padding: 16px;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    background: var(--Background-color-bg-primary, #FFF);
}

.eventCompareControlBarContainer {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 0 0;
}

.eventDateContainer {
    display: flex;
    min-width: 170px;
    flex: 1 1 auto;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.comparisonChartSiteDropdown, .useroccupancydropdown {
    display: flex;
    width: 300px;
    align-items: center;
}

#eventStartDate, #eventEndDate, #eventCompareStartDate, #eventCompareEndDate {
    align-items: center;
    flex: 1 0 0;
    align-self: stretch;
}

.eventDateLabel {
    display: flex;
    padding-top: 9px;
    flex-direction: column;
    align-items: flex-end;
}

.eventComparefilterDivider {
    width: 1860px;
    height: 1px;
    background: #C6CED5;
}

.eventCompare-noSiteFrame {
    display: flex;
    padding: 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}

.eventCompare-placeholderFrame {
    display: flex;
    width: 280px;
    padding: 40px 0px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.eventCompare-noIconFrame {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.legend-body_container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.legend-frame {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.legend-content_frame, .salesSaveSettingsDataFrame, .salesSaveSettingsDataExtendedFrame, .salesSaveSettingsMetricsFrame {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

td.text-end.poor {
    background-color: #FFE3E6;
}

td.text-end.good {
    background-color: #E1F6F5;
}

td.text-end.fair {
    background-color: #FFEB9C;
}

td.text-end.forecasted {
    background-color: #DDD;
}

#eventCategory .dataTables_wrapper * .dt-buttons, #eventRetailer .dataTables_wrapper * .dt-buttons,
#eventSite .dataTables_wrapper * .dt-buttons, #eventLocation .dataTables_wrapper * .dt-buttons,
#eventLocationGroup .dataTables_wrapper * .dt-buttons {
    margin-left: 4rem !important;
}

.custom-button-retailer-container button, .custom-button-category-container button,
.custom-button-site-container button, .custom-button-location-container button,
.custom-button-locationGroup-container button {
    margin-right: 16px !important;
}

    .custom-button-retailer-container button:first-child, .custom-button-category-container button:first-child,
    .custom-button-site-container button:first-child, .custom-button-location-container button:first-child,
    .custom-button-locationGroup-container button:first-child {
        margin-left: 16px !important;
    }

    .custom-button-retailer-container button:last-child, .custom-button-category-container button:last-child,
    .custom-button-site-container button:last-child, .custom-button-location-container button:last-child,
    .custom-button-locationGroup-container button:last-child {
        margin-right: 0 !important;
    }

.legend-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
}

.legend-header_frame {
    display: flex;
    padding: 8px;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    background: var(--Background-color-bg-transparent-active, rgba(58, 157, 210, 0.20));
}

.legend-header_text {
    color: #162029;
    font-family: "Noto Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
}



/*day parts*/

.controlBar {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 16px;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    background: var(--Background-color-bg-secondary, #E2E6EA);
}

.centreSelectionBar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    flex: 1 0 0;
}

#daypartslocationDropdown {
    width: 175.833px !important;
    height: 38px !important;
}

.comparision-period-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .comparision-period-container input[type="date"] {
        max-width: 150px;
    }

.config-box {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 8px 12px;
    background-color: #fff;
    width: 100%;
}

    .config-box button {
        border: none;
        background: none;
        width: 100%;
        text-align: left;
    }

.noCentreFrame {
    display: flex;
    padding: 16px;
    justify-content: center;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}

.noCentreContainer {
    display: flex;
    width: 280px;
    padding: 40px 0px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.noIconFrame {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.bootstrap-select .dropdown-menu li {
    font-size: 12px;
    padding-left: 10px;
}

.bootstrap-select .btn {
    font-size: 12px;
}

    .bootstrap-select .btn .filter-option-inner-inner {
        padding-left: 10px;
    }

#DaypartResultContainer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#results-table {
    display: table !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.mri-daypart-btn {
    flex: none;
    padding: 5px 17px;
    margin: 0;
    border: 1px solid #909FAE;
    background-color: transparent;
    color: black;
    font-size: 14px;
    cursor: pointer;
    line-height: 20px;
    align-items: center;
    justify-content: center;
}

    .mri-daypart-btn:first-child {
        border-top-left-radius: 20px !important;
        border-bottom-left-radius: 20px !important;
    }

    .mri-daypart-btn:last-child {
        border-top-right-radius: 20px !important;
        border-bottom-right-radius: 20px !important;
    }

    .mri-daypart-btn.active {
        background-color: rgba(58, 157, 210, 0.2);
        color: black;
    }

    .mri-daypart-btn:hover {
        background-color: rgba(58, 157, 210, 0.1);
    }

.active-btn {
    background-color: #3A9DD233 !important;
}

.export-buttons {
    flex: none;
    padding: 5px 17px;
    margin: 0;
    border: 1px solid #909FAE !important;
    background-color: transparent;
    color: black;
    font-size: 14px;
    cursor: pointer;
    line-height: 20px;
    align-items: center;
    justify-content: center;
}

.legend-body_container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.legend-frame {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.legend-content_frame {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

#daypartslocationDropdown::after,
.multiselect::after {
    content: none !important;
    display: none !important;
}

:has(#daypartslocationDropdown) * .btn {
    background-color: white;
    border-color: #8CA0AC !important;
    border-style: solid;
    border-radius: 4px;
}

. DayPartChartContainer {
    display: flex;
    width: 1828px;
    height: 374px;
    padding: 16px 0px 16px 16px;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
}

.DayPartChartFrame {
    display: flex;
    padding: 16px;
    align-items: flex-start;
    gap: 60px;
    align-self: stretch;
}

.chart-container {
    width: 100%;
    height: 100%;
}

#daypart-chart {
    width: 100% !important;
    margin: 0 auto;
}

.calendarTabControlBar {
    display: flex;
    padding: 16px;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}

.calendarTabSiteDropdown {
    display: flex;
    width: 260px !important;
    align-items: center;
    gap: 8px;
}

.calendarContainer {
    display: flex;
    width: 100%;
}

    .calendarContainer:has(.fc-dayGridMonth-view),
    .calendarContainer:has(.fc-dayGridWeek-view) {
        height: 694px;
    }

#analyserCalendar .fc-scrollgrid-section-header .fc-col-header,
#analyserCalendar .fc-scrollgrid-section-body .fc-daygrid-body,
#analyserCalendar .fc-scrollgrid-section-body .fc-scrollgrid-sync-table {
    width: 100% !important;
    height: 100% !important;
}

#analyserCalendar .fc-header-toolbar {
    margin-top: 1.5em;
}

#analyserCalendar .fc-toolbar-chunk:first-child {
    display: flex;
    padding-left: 16px;
}

#analyserCalendar .fc-today-button {
    align-self: center;
}

#analyserCalendar .fc-daygrid-event {
    display: flex;
    padding: 6px;
    align-items: flex-end;
    gap: 6px;
    align-self: stretch;
    border-radius: 24px;
    border: 1px solid var(--Line-color-line-dark-muted, #909FAE) !important;
    background: var(--Background-color-bg-tertiary, #F0F2F4) !important;
    overflow: hidden;
}

#analyserCalendar .fc-daygrid-event-dot {
    border-width: 8px !important;
    border-radius: 8px !important;
}

#analyserCalendar .fc-event-title {
    color: #162029 !important;
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    font-weight: 700;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.labelAsteriskWrapper {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

:has(#analyserCalendar) * .fc .fc-list-empty {
    background-color: #fff !important;
    align-items: normal !important;
}

:has(#analyserCalendar) * .fc .fc-list-empty-cushion {
    margin: 0 !important;
}

:has(#analyserCalendar) * .fc-list-day-text, :has(#analyserCalendar) * .fc-list-day-side-text {
    color: #162029 !important;
    text-decoration: none !important;
}

:has(#analyserCalendar) * .fc-list-day-side-text {
    float: left;
}

:has(#analyserCalendar) * .fc .fc-list-event-title a {
    color: #10689D !important;
}

:has(#analyserCalendar) * .fc-theme-standard .fc-list-day-cushion {
    border-radius: 4px 4px 0px 0px;
    border-top: 1px solid #C6CED5;
    border-right: 1px solid #C6CED5;
    border-left: 1px solid #C6CED5;
    background: #E2E6EA !important;
    gap: 12px;
    display: flex;
    width: 100%;
}

:has(#analyserCalendar) * .fc .fc-scroller-liquid {
    height: auto !important;
}

:has(#analyserCalendar) * .fc-view-harness .fc-view-harness-active:has(.fc-list-table),
:has(#analyserCalendar) * .fc-view-harness .fc-view-harness-active:has(.fc-list-empty) {
    height: auto !important;
}

:has(#analyserCalendar) * .fc .fc-view-harness-active > .fc-view:has(.fc-list-table),
:has(#analyserCalendar) * .fc .fc-view-harness-active > .fc-view:has(.fc-list-empty) {
    position: relative !important;
    padding: 16px;
    border-bottom: none;
}

:has(#analyserCalendar) * .fc .fc-view-harness:has(.fc-list-table),
:has(#analyserCalendar) * .fc .fc-view-harness:has(.fc-list-empty) {
    height: auto !important;
}

:has(#analyserCalendar) * .fc .fc-view-harness-active > .fc-view:has(.fc-list-empty) {
    border-bottom: none;
}

.gap-10 {
    gap: 10px;
}

.eventTypesFrame {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
}

.eventTypesSubFrame, .hourlyComparisonFilterSubFrame, .locationComparisonFilterSubFrame, .monthlyPerformanceFilterSubFrame, .quarterlyPerformanceFilterSubFrame {
    display: flex;
    align-items: center;
    gap: 6px;
    align-self: stretch;
}

:has(#analyserCalendar) * tr.fc-list-day:not(:first-child) th[id^="fc-dom"] {
    padding-top: 16px;
}

:has(#analyserCalendar) * tr.fc-list-event {
    display: block;
    width: auto;
    border-bottom: 1px solid #C6CED5;
    border-right: 1px solid #C6CED5;
    border-left: 1px solid #C6CED5;
}

    :has(#analyserCalendar) * tr.fc-list-event:last-child {
        border-radius: 0px 0px 4px 4px;
    }

:has(#analyserCalendar) * .fc-theme-standard tbody tr.fc-list-event td,
:has(#analyserCalendar) * .fc-theme-standard tbody tr.fc-list-day th {
    border: 0 !important;
}

:has(#analyserCalendar) * tr.fc-list-event:has(+ tr.fc-list-day) {
    border-radius: 0px 0px 4px 4px;
}

:has(#analyserCalendar) * td.fc-list-event-graphic {
    padding-left: 16px !important;
}

:has(#analyserCalendar) * td.fc-list-event-title {
    padding-left: 12px !important;
    width: 100%;
}

#analyserCalendar .fc-header-toolbar .fc-toolbar-chunk .fc-button-group .fc-dayGridMonth-button,
#analyserCalendar .fc-header-toolbar .fc-toolbar-chunk .fc-button-group .fc-dayGridWeek-button,
#analyserCalendar .fc-header-toolbar .fc-toolbar-chunk .fc-button-group .fc-listMonth-button,
#analyserCalendar .fc-header-toolbar .fc-toolbar-chunk .fc-button-group .fc-listWeek-button {
    padding: 5px 17px;
    gap: 8px;
    display: flex;
    align-items: center;
}

#analyserCalendar * .fc-list-event-dot {
    border-width: 6px;
    border-radius: 6px;
}

#analyserCalendar * .fc-event .fc-event-main {
    width: 100%;
}

/*Analyser*/

.Analyserpagecontrol {
    display: flex;
    padding: 16px;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}

.AnalyserFilerLayout {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 0 0;
}

.AnalyserFilerLayout {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 1rem;
}

.getdata-container {
    margin-left: auto;
}

.noAnalyserCentreContainer {
    display: flex;
    width: 1860px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.blue-ball {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #007AC6;
    border-radius: 50%;
}

.red-ball {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #FAA41A;
    border-radius: 50%;
}

.calendar-scroll-wrapper {
    overflow-x: hidden;
    width: 100%;
    padding: 16px;
}

.calendar-table {
    width: max-content;
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}

.calendar-day {
    min-width: 200px;
    max-width: 200px;
    text-align: left;
    white-space: nowrap;
    border-right: none;
}

.calendar-table th,
.calendar-table td {
    font-family: "Noto Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    color: #162029;
    text-align: center;
}

.AnalyserSelectionFrame {
    display: flex;
    padding: 8px 16px;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    border-left: 5px solid var(--Background-color-bg-landmark, #0D75B0);
}

.analyserselectedtoolbar {
    display: flex;
    width: 80px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    background-color: black;
}

#calendarDetails {
    position: relative;
    top: -1px;
    display: inline-block;
}

.calendar-separator {
    height: 35px;
    background-color: #27333E;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: left;
    padding: 0 12px 0 0;
}

.bluebar {
    width: 5px;
    height: 35px;
    flex-shrink: 0;
    background-color: #0D75B0;
    padding-left: 0px !important;
}

.year-label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
}

#regionsCentreDropdown + .btn-group > button.multiselect.dropdown-toggle.btn.btn-default {
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 3px;
    padding-right: 3px;
}

.left-news-container {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.news-filter-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.news-filter-frame, .salesCategoryChartContainer {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.news-dropdown-frame {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
    align-self: stretch;
}

.right-news-container {
    border-left: 1px solid #c6ced5;
}

.news-container-divider {
    width: 100%;
    height: 1px;
    background: #C6CED5;
}

.news-infoFrame {
    display: flex;
    padding: 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    align-self: stretch;
    border-radius: 6px;
    border: 1px dashed var(--Line-color-line-dark-faint, #C6CED5);
}

.news-infoContainer {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}

.news-dropdown-frame .dropdown-toggle {
    width: 100% !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.insightsSavedRegions {
    overflow-wrap: anywhere;
}

/*retail analytics*/
.RADChartContainer {
    display: flex;
    padding: 0px 16px 16px 16px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.chart-and-table {
    background-color: #fff;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

:has(#CustomerConversionChartTable) .table {
    font-size: 0.875rem;
}

:has(#CustomerConversionChartTable) .table-responsive {
    max-height: 250px;
    overflow-y: auto;
}

#retailAnalyticsTabContent.expanded {
    flex: 1 1 100%;
    max-width: 100%;
}

#chartsWrapper {
    width: 100%;
}

    #chartsWrapper .col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

@media (max-width: 768px) {
    #chartsWrapper .col-lg-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.filter-toggle-btn {
    position: absolute;
    top: 80px;
    left: calc(28%);
    width: 24px;
    height: 24px;
    background-color: #ddd;
    border: 1px solid #aaa;
    border-radius: 4px;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    z-index: 10000;
    user-select: none;
    transition: left 0.3s;
}

#entrancecountComparisonChartTable th,
#entrancecountComparisonChartTable td,
#flowcountComparisonChartTable th,
#flowcountComparisonChartTable td,
#salesquantityComparisonChartTable th,
#salesquantityComparisonChartTable td,
#salesvalueComparisonChartTable th,
#salesvalueComparisonChartTable td {
    padding: 0 !important;
    text-align: center;
}

#entrancecountComparisonChartTable thead th,
#flowcountComparisonChartTable thead th,
#salesquantityComparisonChartTable thead th,
#salesvalueComparisonChartTable thead th {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

#flowcountComparisonChartTable.dataTable tbody tr td,
#entrancecountComparisonChartTable.dataTable tbody tr td,
#salesquantityComparisonChartTable.dataTable tbody tr td,
#salesvalueComparisonChartTable.dataTable tbody tr td {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    padding: 4px 8px;
    vertical-align: middle;
}

#flowcountComparisonChartTable.dataTable thead tr th,
#entrancecountComparisonChartTable.dataTable thead tr th,
#salesquantityComparisonChartTable.dataTable thead tr th,
#salesvalueComparisonChartTable.dataTable thead tr th {
    font-size: 12px;
    line-height: 16px;
    padding: 4px 8px !important;
    vertical-align: middle;
}

#entrancecountComparisonChartTable tbody td:first-child,
#flowcountComparisonChartTable tbody td:first-child,
#salesquantityComparisonChartTable tbody td:first-child,
#salesvalueComparisonChartTable tbody td:first-child {
    padding-left: 10px !important;
    text-align: left;
}

.comparisonDateFrame {
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
    border-radius: 6px;
    background-color: rgba(58, 157, 210, 0.10);
}


/*Dashboard*/
/* Reset default tab link styles */
.custom-tabs .nav-link {
    border: none !important;
}

    .custom-tabs .nav-link.active {
        color: #495057 !important;
        background-color: transparent !important;
        border: none !important;
        border-bottom: 3px solid #3A9DD2 !important;
    }

.action-icons-large {
    height: 32px;
    width: 32px;
}

#calendar-container th.week-header:hover, #calendar-container th.month-header:hover,
#calendar-container th.quarter-header:hover, #calendar-container .year-header:hover,
#calendar-container td.day-cell:hover {
    text-decoration: underline;
    cursor: pointer;
}

multi-line-header {
    max-width: 100px;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-height: 1.2em;
    max-height: 3.6em;
}

#salesLiveByRetailerList {
    table-layout: auto !important;
    width: 100% !important;
    overflow-x: hidden !important;
}

#table-footfallByLocation {
    table-layout: auto !important;
    width: 100% !important;
    overflow-x: hidden !important;
}

#table-salesLiveByCategory {
    table-layout: auto !important;
    width: 100% !important;
    overflow-x: hidden !important;
}

.footfallTablePadding td, .eventComparePadding td {
    padding: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.footfallByLocationTableAlignment td {
    padding: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    text-align: right;
}

.footfallByLocationTableAlignment .left-align {
    text-align: left !important;
}

.footfallByLocationGroupTableAlignment td {
    padding: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    text-align: right;
}

.footfallByLocationGroupTableAlignment .left-align {
    text-align: left !important;
}

.salesLiveByCategoryTableAlignment td {
    padding: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    text-align: right;
}

.salesLiveByCategoryTableAlignment .left-align {
    text-align: left !important;
}

.footfallByWeekTableAlignment td {
    padding: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    text-align: right;
}

.footfallByWeekTableAlignment .left-align {
    text-align: left !important;
}

.footfallByQuarterTableAlignment td {
    padding: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    text-align: right;
}

.footfallByQuarterTableAlignment .left-align {
    text-align: left !important;
}

table.custom-no-break.dataTable thead th {
    white-space: normal !important;
}

#calendar-container .table {
    margin-bottom: 0;
}

hr.calendar-divider {
    margin: 0.05rem 0 !important;
    color: #fcfeff !important;
    background-color: currentColor !important;
    border: 0 !important;
    height: 1px !important;
    opacity: 0.5 !important;
}

#analysercentredropdown .dropdown-menu, #singleCentreDropdown .dropdown-menu, .standardDropdown .dropdown-menu {
    min-width: auto !important;
    width: 100% !important;
    left: -16px !important;
    top: 10% !important;
    border-radius: 4px;
}

#analysercentredropdown, #singleCentreDropdown, .standardDropdown {
    border-radius: 4px;
}

#editDashboardDropdownContainer.dropdown-menu[data-popper-placement] {
    transform: translate(16px, 30px) !important;
}

#editDashboardDropdownContainer .autocomplete-suggestions {
    left: auto !important;
    right: 0 !important;
}

#table-footfallByHourAndByDayOfWeek thead tr:nth-child(2) th {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

table#footfallbydayList thead.FootfalldayTablePadding tr th {
    padding: 0 !important;
    text-align: center;
    padding-bottom: 8px !important;
    padding-top: 8px !important;
}

.dashboardTabContent-mainFrame, .footfallTodayCommentaryContainer {
    display: flex;
    padding: 16px;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.footfallContent-subFrame, .footfallTodayCommentary-subFrame,
.salesContent-subFrame, .salesFootfallYTDContent-subFrame {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
}

.footfallYTDContent-subFrame {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.flex-1-0-0 {
    flex: 1 0 0 !important;
}

.performanceSummaryFrame, .footfallWeatherTempContainer, .salesByWeekComplianceContainer {
    display: flex;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}

.performanceSummaryContainer {
    display: flex;
    padding: 8px 16px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 6px;
}

.dashboardHeadlinesFrame, .footfallBusiestDayHourFrame {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.performanceSummaryText {
    font-variant-numeric: lining-nums tabular-nums;
    font-family: "Noto Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.performanceSummaryTextSales {
    font-variant-numeric: lining-nums tabular-nums;
    font-family: "Noto Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.chartHeightsalesfootfallFrameBox {
    min-height: 365px;
}

.totalVisitorsSummary {
    background: var(--Background-color-bg-transparent-hover, rgba(58, 157, 210, 0.10));
}

.footfallChartFrame, .footfallTodayCommentaryFrame, .footfallLastMonthWeatherFrame, .footfallBusiestDayHourFrame {
    border-radius: 6px;
    border: 1px solid var(--Line-color-line-dark-faint, #C6CED5);
}

.dashboardModalLinkFrame {
    display: flex;
    padding: 12px;
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
    border-radius: 6px;
    border: 1px solid var(--Line-color-line-dark-faint, #C6CED5);
}

.dashboardModalLinkTextFrame {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2px;
    flex: 1 0 0;
}

.footfallWeatherTempFrame {
    display: flex;
    padding: 8px 16px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
    border-radius: 6px;
    border: 1px solid var(--Line-color-line-dark-faint, #C6CED5);
}

.footfallWeatherText, .footfallTempVal {
    font-family: "Noto Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    white-space: nowrap;
}

.salesfootfallTempVal, .editDashboardSubHeaderText {
    font-family: "Noto Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    white-space: nowrap;
}

.locationSection {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.footfallTempFrame {
    display: flex;
    align-items: center;
    gap: 6px;
}

.salesYoYCategoryRetailerHeaderContainer {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footfallTempText {
    font-family: "Noto Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    white-space: nowrap;
}

.salesfootfallTempText {
    font-family: "Noto Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    white-space: nowrap;
}

.footfallWeatherTempDivider {
    display: flex;
    padding: 10px 6px;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}

.footfallDivider {
    width: 1px;
    height: 24px;
    background: #C6CED5;
}

.footfallTodayLocationsFrame {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 6px;
    border: 1px solid var(--Line-color-line-dark-faint, #C6CED5);
}

.footfallYTDLocationsFrame {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    align-self: stretch;
    border-radius: 6px;
    border: 1px solid var(--Line-color-line-dark-faint, #C6CED5);
}

#dashboardFootfallTodayLocations-chart * svg.apexcharts-svg {
    width: 100%;
}

.footfallTodayLocationsHeaderFrame, .footfallSubHeaderFrame, .salesComplianceOverviewData {
    display: flex;
    padding: 6px 8px;
    gap: 10px;
    border-radius: 6px;
    background: var(--Background-color-bg-transparent-hover, rgba(58, 157, 210, 0.10));
}

.footfallTodayLocationTopBottom {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .footfallTodayLocationTopBottom:first-child, .foofallDayHourFrame:first-child {
        flex: 1;
        justify-content: flex-start;
    }

    .footfallTodayLocationTopBottom:last-child, .foofallDayHourFrame:last-child {
        flex: 1;
        justify-content: flex-start;
    }

.footfallTodayCommentaryHeader, .dashboardFootfallHeader, .salesComplianceHeader,
.salesYoYCategoriesRetailersText {
    font-family: "Noto Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: 28px;
}

#dashboardFootfallYesterdayLocations-chart .apexcharts-legend.apexcharts-align-center.apx-legend-position-left,
#dashboardFootfallTodayLocations-chart .apexcharts-legend.apexcharts-align-center.apx-legend-position-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    max-height: 192px;
    align-self: center;
    max-width: 300px;
}

.pb-6px {
    padding-bottom: 6px;
}

.chartHeightFrame {
    min-height: 478px;
}

.chartHeightFrameBox {
    min-height: 580px;
}

.chartHeightsalesFrameBox {
    min-height: 420px;
}

.WeekBlock {
    display: flex;
    padding: 6px 8px;
    gap: 10px;
    border-radius: 6px;
    background: var(--Background-color-bg-transparent-hover, rgba(58, 157, 210, 0.10));
    align-self: stretch;
}

.spacebox {
    display: flex;
    align-items: center;
    gap: 70px;
    align-self: stretch;
}

.weatherheaderformat {
    font-family: Noto Sans;
    font-weight: 300;
    font-size: 20px;
    color: #044D66;
    line-height: 28px;
    font-style: normal;
}

.weatherheaderformatchart {
    font-family: Noto Sans;
    font-weight: 300;
    font-size: 18px;
    color: #044D66;
    line-height: 28px;
    font-style: normal;
}

.weatherWidget {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 6px;
    border: 1px solid var(--Line-color-line-dark-faint, #C6CED5);
}

.top5Container {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 6px;
    border: 1px solid var(--Line-color-line-dark-faint, #C6CED5);
    /*  padding-top: 10px !important;
    padding-bottom: 0px !important;*/
}

    .top5Container .header-row {
        margin-bottom: 4px !important;
    }

    .top5Container .funnel-container {
        margin-top: -6px;
    }

.footfallLastWeekLocationsFrame {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 6px;
    border: 1px solid var(--Line-color-line-dark-faint, #C6CED5);
}

.footfallYTDBenchmarksLocationsFrame {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    align-self: stretch;
    border-radius: 6px;
    border: 1px solid var(--Line-color-line-dark-faint, #C6CED5);
}

#dashboardFootfallLastWeekLocations-chart * svg.apexcharts-svg {
    width: 100%;
}


.portfolioContentLeft {
    width: 65%;
}

.portfolioContentRight {
    width: 35%;
}

.portfolioChartHeightFrame {
    min-height: 580px;
}

.portfolioLWSiteVolumesLabel {
    height: 22px;
    align-self: stretch;
    color: var(--Text-color-text-landmark, #044D66);
    text-align: center;
    font-family: "Noto Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: 28px;
}

.portfolioLWSiteRankingLabel {
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
}

.portfolioSiteRankingFrame {
    /*min-height: 38%;*/
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    /*gap: 6px;*/
    align-self: stretch;
    border-radius: 6px;
    border: 1px solid var(--Line-color-line-dark-faint, #C6CED5);
}

.portfolioSiteRankingHeading {
    display: flex;
    align-items: center;
    gap: 6px;
    /*//flex: 1 0 0;*/
}

.portfolioSiteRankingRBFrame {
    display: flex;
    align-items: center;
    gap: 10px;
}

.portfolioSiteRankingRBFonts {
    color: var(--Text-color-text, #162029);
    font-family: "Noto Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

.portfolioSiteRankingSideFrame {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 6px;
    flex: 0 0 auto;
    width: 100%;
}

.onLocationMothlyCommentryContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.onLocationMothlyCommentryFrame {
    display: flex;
    padding: 10px;
    align-items: flex-start;
    /*gap: 6px;*/
    /*flex: 1 0 0;*/
    align-self: stretch;
    border-radius: 6px;
    border: 1px solid var(--Line-color-line-dark-faint, #C6CED5);
}

.onLocationMothlyCommentryImgFrame {
    width: 230.224px;
    align-self: stretch;
    aspect-ratio: 207.22/130.00;
    background: url("../../img/MonthlyCommentry.png") lightgray -10.478px -55.493px / 111.61% 177.91% no-repeat;
}

.onLocationMothlyCommentryText {
    color: var(--Text-color-text, #162029);
    font-family: "Noto Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    align-self: stretch;
}

.footfallDashboardSubHeaderText, .footfallLastMonthWeatherText, .salesComplianceHeaderText {
    font-family: "Noto Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.salesByWeekFrame, .complianceOverviewFrame {
    display: flex;
    padding: 12px;
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
    border-radius: 6px;
    border: 1px solid var(--Line-color-line-dark-faint, #C6CED5);
}

.salesByWeekFrame {
    height: 231px;
}

.salesComplianceOverviewList {
    display: flex;
    padding: 0 8px;
    align-items: center;
    gap: 16px;
    flex: 1 0 0;
    align-self: stretch;
}

.salesComplianceDataText, .hourlyComparisonFilterText, .locationComparisonFilterText, .calendarMonthFilterText, .monthlyPerformanceFilterText, .calendarQuarterFilterText, .quarterlyPerformanceFilterText, .monthPerformanceFilterText, accessdeniedlinkText, .quarterPerformanceFilterText {
    font-family: "Noto Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.salesYoYCategoriesRetailersSubFrame {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    flex: 1;
    min-height: 0;
    border-radius: 6px;
    border: 1px solid var(--Line-color-line-dark-faint, #C6CED5);
}

.salesContent-subFrame {
    min-width: 37%;
    height: 804.8px;
    justify-content: space-between !important;
}

.salesFootfallYTDContent-subFrame {
    min-width: 37%;
    height: 888.8px;
    justify-content: space-between !important;
}

    .salesContent-subFrame > .salesYoYCategoriesRetailersFrame,
    .salesFootfallYTDContent-subFrame > .salesYoYCategoriesRetailersFrame {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

.salesYoYCategoriesRetailersSubFrame > .d-flex.flex-column.h-100.w-100 {
    flex: 1;
    min-height: 0;
}

#dashboardSalesCategories-chart,
#dashboardYoYCategories-chart,
#dashboardSalesRetailers-chart,
#dashboardYoYRetailers-chart {
    flex: 1;
    min-height: 0;
    height: 100% !important;
}

.funnel-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 7px 0;
    font-size: 12px;
    column-gap: 40px;
}

.funnel-label {
    color: #044D66;
    font-weight: 500;
    white-space: nowrap;
}

.funnel-value {
    color: #007AC6;
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
    margin-left: 10px;
}

.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
    margin-bottom: 18px;
}

.left-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.site-rank-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rank-label {
    font-size: 12px;
    color: #162029;
    font-weight: 500;
    margin-right: 2px;
}

.footfallDashboardSubHeaderText, .footfallLastMonthWeatherText {
    font-family: "Noto Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}


#dashboardPortfolioYoYRanking-chart,
#dashboardPortfolioYoYRanking-chart .apexcharts-canvas {
    min-height: 0 !important;
    height: auto !important;
}


.salesYTDChartHeightFrame {
    min-height: 534px !important;
}

.SalesYTDContentLeft {
    width: 65%;
}

.SalesYTDContentRight {
    width: 35%;
}

.salesByYearChartFrame {
    display: flex;
    padding: 12px;
    gap: 6px;
    flex: 1 0 0;
    align-self: stretch;
    flex-direction: column;
    align-items: flex-start;
}

.salesByCategoryRetailerYTDContentFrame {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 6px;
    border: 1px solid var(--Line-color-line-dark-faint, #C6CED5);
}

.salesByCategoryRetailerYTDChartFrame {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.salesByCategoryRetailerYTDHeader {
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 28px;
}

.salesByCategoryRetailerYTDHeading {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 0 0;
}

.salesByYearYTDFrame, .reportLibraryControlBar, .proReportsLibraryControlBar {
    display: flex;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}

.salesByYearYTDChartFrame {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.benchmarktext {
    color: var(--Text-color-text-muted, #394754);
    font-variant-numeric: lining-nums tabular-nums;
    font-family: "Noto Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

.benchmark-title, .userapi-rbtext, .map-viewType {
    color: var(--Text-color-text, #162029);
    font-family: "Noto Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.benchmarkperctext {
    color: var(--Text-color-text, #162029);
    font-family: "Noto Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
}

.benchmark-metric {
    display: flex;
    align-items: center;
    gap: 8px;
}

.benchmark-bar {
    width: 4px;
    height: 100%;
    border-radius: 33554400px;
}

.yoy-bar {
    background: var(--chart-top-5-darker-5, #093E56);
}

.ytd-bar-green {
    background: var(--Green-palette-color-green-40, #00AD82);
}

.ytd-bar-orange {
    background: var(--Gold-palette-color-gold-40, #F28100);
}

.wow-bar {
    background: var(--Green-palette-color-green-40, #00AD82);
}

.chartheightFLW {
    min-height: 645px;
}

.chartheightFLM {
    min-height: 516px;
}

.chartHeightFrameYest {
    min-height: 620px;
}

.portfolioYTDchartbox {
    min-height: 580px;
}

.benchmarkTile {
    flex: 1 1 calc(50% - 1rem);
    background: var(--Background-color-bg-tertiary, #F0F2F4) !important;
    box-sizing: border-box;
}

.footfallYTDChartFrame, .salesYTDChartFrame {
    min-height: 358px;
}

#dashboardSalesYTD-chart .apexcharts-zoomable, #dashboardFootfallYTD-chart .apexcharts-zoomable {
    width: 100% !important;
}

#dashboardSalesFootfallLWTable td,
#dashboardSalesFootfallLWTable th {
    padding-right: 0 !important;
    padding-left: 0 !important;
    text-align: center !important;
}

.bg-success-light {
    background-color: #E1F6F5 !important;
}

.reportFilterFrame {
    display: flex;
    align-items: center;
    gap: 16px;
}

.reportFilters {
    display: flex;
    width: 290px;
    align-items: center;
    gap: 8px;
}

.reportFilterDropdown {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.chartHeightYTD {
    min-height: 401px;
}

#dashboardTabs .nav-link {
    cursor: pointer;
}

    #dashboardTabs .nav-link:hover {
        color: #41639a !important;
    }


.analyserchartDropdown, .proReportTypeDropdown {
    display: flex;
    width: 160px;
    align-items: center;
}

.analyserchartHeightFrame {
    min-height: 387px;
}

#AnnualPerformanceBRCYear {
    width: 200px !important;
}

.AnnualPerformanceFilterContainer, .hourlyComparisonFilterContainer, .locationComparisonFilterContainer, .monthlyPerformanceFilterContainer, .quarterlyPerformanceFilterContainer {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid #909FAE;
}

#AnnualPerformanceBRCYear + .btn-group button.multiselect {
    min-height: 40px;
    line-height: 1.25;
}

#slider-range.chartSlider .ui-slider-handle {
    top: -4px !important;
    margin-left: -6px !important;
    border: none !important;
    background: transparent !important;
    width: 12px !important;
    height: 12px !important;
    padding: 0 !important;
}

#hourly-date-picker, #daily-date-picker, #location-date-picker {
    border-color: #8CA0AC;
    background-color: white;
}

#hourlyLocationGroupsDivider, #hourlyFactoringDivider, #hourlyCountTypeDivider, #AnnualFactoringdivider, #Annualcountdivider, #dailyfactordivider, #counttypedivider,
#monthlyFactoringDivider, #monthlyCountTypeDivider, #quarterlyFactoringDivider, #quarterlyCountTypeDivider, #quarterlyGroupByDivider, #Annuallocationdivider, #Dailylocationdivider {
    width: 1px;
    height: 18px;
    background: #C6CED5;
}

#daily-slider-hourRange .ui-slider-handle {
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    border: none !important;
    background: transparent !important;
    width: 24px !important;
    height: 24px !important;
    margin-left: 0 !important;
    padding: 0 !important;
}

.module_Header-Subframe {
    color: #044D66;
    font-family: "Noto Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}

.module_SubHeader {
    display: flex;
    height: 40px;
    padding: 18px 0 12px 0;
    justify-content: flex-start;
    align-items: center;
    align-self: stretch;
}

.rolesSubHeadDetails {
    display: flex;
    padding: 16px;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    background: var(--Background-color-bg-primary, #FFF);
}

.rolesUseremail, .accessDeniedmsgDiv, .mapDateLabel{
    color: var(--Text-color-text, #162029);
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.rolesCanvas {
    gap: 16px;
    border-bottom: 1px solid var(--Line-color-line-dark-faint, #C6CED5);
}

.claimsSearch {
    background: white url("../../img/search.svg") right no-repeat;
}

.claimSelectionBotton {
    display: flex;
    height: 30px;
    width: 30px;
    padding: 3px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 15px;
    background: var(--Background-color-bg-landmark, #0D75B0);
}

.claimsSelectionHeight {
    height: 220px !important;
}

.claimSelectionContainer {
    background-image: none !important;
}

#DivPerformanceTabContent {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.tile-icon-img {
    display: flex;
    width: 32px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    align-self: stretch;
    aspect-ratio: 1/1;
}

.metric-number {
    color: var(--Text-color-text, #162029);
    text-align: center;
    font-family: "Noto Sans";
    font-size: 38px;
    font-style: normal;
    font-weight: 300;
    line-height: 40px;
    flex: 1 0 0;
    display: block;
}

.metricLabel {
    color: var(--Text-color-text, #162029);
    font-family: "Noto Sans";
    font-size: 24px;
    font-style: normal;
    font-weight: 300;
    line-height: 32px;
}

.arrowspacing {
    padding-bottom: 10px;
    padding-top: 10px;
}

.linestyling {
    border: 0;
    border-top: 2px dotted;
    background: none;
    opacity: 1;
    color: #C6CED5;
}

.performance-scroll {
    width: 100%;
    overflow-x: auto;
}

#performanceTable {
    white-space: nowrap;
}

    #performanceTable th,
    #performanceTable td {
        min-width: 120px;
        white-space: nowrap;
    }

.dataTables_scrollHead table {
    min-width: max-content;
}

#SFLMContainerSalesCategory .apexcharts-yaxis {
    transform: translateX(-5px);
}

#SFLMContainerYoYCategory .apexcharts-yaxis {
    transform: translateX(-5px);
}

#ContainerSalesCategory .apexcharts-yaxis {
    transform: translateX(-5px);
}

#ContainerYoYCategory .apexcharts-yaxis {
    transform: translateX(-5px);
}

#SFLMContainerSalesRetailer .apexcharts-yaxis {
    transform: translateX(-5px);
}

#SFLMContainerYoYRetailer .apexcharts-yaxis {
    transform: translateX(-5px);
}

#ContainerSalesRetailer .apexcharts-yaxis {
    transform: translateX(-5px);
}

#ContainerYoYRetailer .apexcharts-yaxis {
    transform: translateX(-5px);
}

#salesByRetailerYTD-chart .apexcharts-yaxis {
    transform: translateX(-5px);
}

#salesByRetailerYOYYTD-chart .apexcharts-yaxis {
    transform: translateX(-5px);
}

#salesFootfallYearToDateSalesRetailers-chart .apexcharts-yaxis {
    transform: translateX(-5px);
}

#salesByRetailerYTD-chart .apexcharts-yaxis {
    transform: translateX(2px);
}

#salesFootfallYearToDateYoYCategories-chart .apexcharts-yaxis {
    transform: translateX(0px);
}

#salesFootfallYearToDateSalesRetailers-chart .apexcharts-yaxis {
    transform: translateX(3px);
}

#salesFootfallYearToDateYoYRetailers-chart .apexcharts-yaxis {
    transform: translateX(7px);
}

#dashboardYoYCategoriesFLW-chart .apexcharts-yaxis {
    transform: translateX(2px);
}

#dashboardYoYRetailersFLW-chart .apexcharts-yaxis {
    transform: translateX(2px);
}

#dashboardSalesCategories-chart .apexcharts-yaxis {
    transform: translateX(-5px);
}

#dashboardYoYCategories-chart .apexcharts-yaxis {
    transform: translateX(-5px);
}

#dashboardYoYRetailers-chart .apexcharts-yaxis {
    transform: translateX(-5px);
}

#dashboardSalesRetailers-chart .apexcharts-yaxis {
    transform: translateX(-5px);
}

#salesByCategoryYTD-chart .apexcharts-yaxis {
    transform: translateX(-5px);
}

#salesByCategoryYOYYTD-chart .apexcharts-yaxis {
    transform: translateX(-5px);
}

#dashboardSalesCategoriesFLW-chart .apexcharts-yaxis {
    transform: translateX(-5px);
}

#salesFootfallYearToDateSalesCategories-chart .apexcharts-yaxis {
    transform: translateX(-5px);
}

#funnelContainerYoY .apexcharts-yaxis {
    transform: translateX(-5px);
}

.radiosize {
    width: 16px !important;
    height: 16px !important;
    border-width: 1px;
}

.accessDeniedFrame {
    display: flex;
    width: 280px;
    padding: 40px 0;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.accessDeniedImageDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.accessDeniedMessageDiv {
    color: var(--Text-color-text-muted, #394754);
    text-align: center;
    font-family: "Noto Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 28px;
    align-self: stretch;
}

.editDashboardHeaderContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
    flex: 1 0 0;
}

.editDashboardHeader, .radPortfolioLabel {
    font-family: "Noto Sans";
    font-size: 24px;
    font-style: normal;
    font-weight: 300;
    line-height: 32px;
}

.noTabsIconText {
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.accessDeniesErrorMessageDiv {
    color: var(--Text-color-text-muted, #394754);
    text-align: center;
    font-variant-numeric: lining-nums tabular-nums;
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.accountinfo_container {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-bottom: 1px solid var(--Line-color-line-dark-faint, #C6CED5);
}

.Useradminframe {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

    .Useradminframe > div {
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex: 1;
    }

    .Useradminframe input {
        width: 100%;
    }

.calendarMonthSiteDropdown, .calendarSliderWidth, .calendarQuarterSiteDropdown, .monthPerformanceSiteDropdown, .quarterPerformanceSiteDropdown, .annualPerformanceSiteDropdown, .dailyComparisonSiteDropdown, .hourlyPerformanceSiteDropdown, .siteDropdownContainer {
    width: 245px;  
}

.calendar-icon-only,
.calendar-icon-only svg {
    pointer-events: none !important;
    cursor: default !important;
}

#table-footfallByHour_info,
#table-footfallByHourAndByDayOfWeek_info {
    display: none !important;
}

.access-denied-text, .userApi-Heading {
    color: var(--Text-color-text-landmark, #044D66);
    text-align: center;
    font-family: "Noto Sans";
    font-size: 24px;
    font-style: normal;
    font-weight: 300;
    line-height: 32px;
}

    .access-denied-text a {
        color: #10689D;
    }

.access-denied-img-bg {
    width: 500px;
    height: 270px;
    aspect-ratio: 50/27;
    background: cover no-repeat;
}

.userApi-container {
    border-bottom: 1px solid var(--Line-color-line-dark-faint, #C6CED5);
}

.userApi-accessText {
    color: var(--Text-color-text-muted, #394754);
}

.userapi-apicontainer {
    border-radius: 6px;
    border: 1px solid var(--Line-color-line-dark-faint, #C6CED5);
}

.userapi-apicontainer-minheight {
    min-height: 424px;
}

.userApi-label {
    /* Labels / Default */
    font-family: "Noto Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}

.userApi-labelText {
    color: var(--Text-color-text, #162029);
}

.userApi-headerText {
    width: 110px;
    color: var(--Text-color-text-landmark, #044D66);
    font-variant-numeric: lining-nums tabular-nums;
    /* Form fields/Default */
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 125% */
}

.userApi-apilabel {
    /* Labels / Small */
    font-family: "Noto Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
}

.userApi-headerapidevider {
    background: #C6CED5;
    width: 430.667px;
    height: 1px;
}

.benchmarking-img {
    width: 371px;
    height: 270px;
    aspect-ratio: 180/131;
    background: cover no-repeat;
}

.coming-soon-title {
    color: var(--Text-color-text-landmark, #044D66);
    text-align: center;
    font-family: "Noto Sans";
    font-size: 24px;
    font-style: normal;
    font-weight: 300;
    line-height: 32px;
}

.coming-soon-heading {
    color: var(--Text-color-text, #162029);
    text-align: center;
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.coming-soon-text {
    color: var(--Text-color-text, #162029);
    text-align: center;
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin: 0;
}

.backbutton {
    display: flex;
    width: auto;
    padding: 5px 17px;
    justify-content: center;
    align-items: center;
    border-radius: 9999px;
    border: 1px solid var(--Background-color-bg-transparent, rgba(255, 255, 255, 0));
    background: #0D75B0;
    text-decoration: none;
}

.coming-soon-image {
    display: block;
    width: 371px;
    height: 270px;
    aspect-ratio: 180/131;
}

.coming-soon-wrap {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}

thead th.th-last-padding {
    padding-right: 38px !important;
    background-position: calc(100% - 16px) center !important;
}

#analyserCalendar .fc-event-main {
    overflow: hidden;
    min-width: 0;
}

.dashboardcenterwidth {
    width: 500px !important;
}

.eventCompareDatePicker {
    padding-right: 36px !important;
}

.eventCompareSiteDropdown, .dayPartsSiteDropdown {
    display: flex;
    width: 200px;
    min-width: 200px;
    align-items: center;
}

#CalendarYearDropdown + .btn-group .multiselect {
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 12px !important;
}

.salesLiveByRetailerTablePadding td {
    padding: 0 !important;
    padding-left: 5px !important;
    padding-right: 0 !important;
}

#salesLiveByRetailerList td:last-child {
    padding-right: 16px !important;
}

#salesLiveByRetailerList td:first-child {
    padding-left: 16px !important;
}

.radConfirmFiltersFrame {
    display: flex;
    padding: 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}

.rad-HeadlinesCard-Frame {
    display: flex;
    padding: 0 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.radTabContentGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.accinfoframe {
    display: flex;
    width: 599px;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border-radius: 6px;
    border: 1px solid var(--Line-color-line-dark-faint, #C6CED5);
}

.accinfoaccessinfo {
    display: flex;
    width: 236px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.accessinfooptions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    flex: 1 0 0;
}

.accessinfoicon {
    width: 20px;
    align-self: stretch;
    aspect-ratio: 1/1;
}

.mri-radio-button::after {
    width: 8px;
    height: 8px;
}

.mri-radio-button {
    width: 16px;
    height: 16px;
    border-width: 1px;
}

.mri-radio-button {
    border-color: #8CA0AC;
    border-style: solid;
    color: #162029;
    background-color: white;
    vertical-align: middle;
}


#newNavigationBar-expanded.d-none {
    display:none !important;
}

.widget-holder {
    width: 59px;
    min-height: 59px;
    display: inline-block;
}

.standardDropdownContainer .autocomplete-suggestions {
    width: auto !important;
    white-space: nowrap;
}

#dashboardDropdownContainer .autocomplete-suggestions {
    left: auto !important;
    right: 0 !important;
}

#eventCompareCentreDropdown .standardDropdownCentreToggle,
#centreNewsWeekCentreDropdown .standardDropdownCentreToggle,
#centreNewsMonthCentreDropdown .standardDropdownCentreToggle,
#dashboardCentreDropdown .standardDropdownCentreToggle,
#daypartsCentreSelection .standardDropdownCentreToggle,
#editDashboardCentreDropdown .standardDropdownCentreToggle,
#calendarTabCentreDropdown .standardDropdownCentreToggle,
#salesDataExportCentresList .standardDropdownCentreToggle {
    display: flex !important;
    align-items: center;
    width: 100%;
    overflow: hidden;
}

#eventCompareCentreDropdown .standardDropdownCentreToggle .left,
#centreNewsWeekCentreDropdown .standardDropdownCentreToggle .left,
#centreNewsMonthCentreDropdown .standardDropdownCentreToggle .left,
#dashboardCentreDropdown .standardDropdownCentreToggle .left,
#daypartsCentreSelection .standardDropdownCentreToggle .left,
#editDashboardCentreDropdown .standardDropdownCentreToggle .left,
#calendarTabCentreDropdown .standardDropdownCentreToggle .left,
#salesDataExportCentresList .standardDropdownCentreToggle .left {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
}

.divider-top-gray {
    border-top: 1px #A8A8A8 solid
}
.commentaryheader {
    color: var(--Text-color-text-landmark, #044D66);
    font-family: "Noto Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: 28px;
}

.commentaryauthor {
    color: var(--Text-color-text-muted, #394754);
    font-variant-numeric: lining-nums tabular-nums;
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.commentarybody p {
    color: var(--Text-color-text, #162029);
    font-family: "Noto Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.chartheader {
    color: var(--Text-color-text-landmark, #044D66);
    font-family: "Noto Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: 28px;
}

#chart-year-comparison {
    color: var(--Text-color-text-muted, #394754);
    font-variant-numeric: lining-nums tabular-nums;
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.radiocountry, .benchmarkMapLabel{
    color: var(--Text-color-text, #162029);
    font-family: "Noto Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

#freeReportsTabs .nav-link {
    cursor: pointer;
}

.commentaryborder {
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 6px;
    border: 1px solid var(--Line-color-line-dark-faint, #C6CED5);
}

.country-period-wrap {
    gap: 8px;
}

.country-period-select {
    padding: 2px 28px 2px 10px;
    border-radius: 4px;
    border-radius: 4px;
    border: 1px solid var(--Line-color-line-dark-muted, #909FAE);
    background: var(--Background-color-bg-primary, #FFF);
    display: flex;
    width: 180px;
    height: 30px;
    align-items: center;
    gap: 8px;
    color: var(--Text-color-text, #162029);
    font-family: "Noto Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.benchmarkperiod {
    color: var(--Text-color-text-muted, #394754);
    text-align: right;
    font-family: "Noto Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.chartsubheader {
    color: var(--Text-color-text-muted, #394754);
    font-variant-numeric: lining-nums tabular-nums;
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.commentaryborder .headertext {
    color: var(--Text-color-text-landmark, #044D66);
    font-family: "Noto Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
    width: 1762px;
}

.paratext {
    color: var(--Text-color-text-muted, #394754);
    font-family: "Noto Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

.paraborder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
    border-radius: 6px;
    border: 1px solid var(--Line-color-line-dark-faint, #C6CED5);
}

.chart-loader {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    z-index: 2;
}

.benchmark-dropdown {
    display: flex;
    /*flex-direction: column;*/
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 5px 17px;
    border-radius: 9999px;
    border: 1px solid var(--Line-color-line-dark-muted, #909FAE);
    background: var(--Background-color-bg-transparent, rgba(255, 255, 255, 0.00));
    flex-direction: row;
    cursor: pointer;
    width: auto;
    min-width: fit-content;
}

.benchmark-centre-dropdown {
    padding: 5px 17px;
    border-radius: 9999px;
    border: 1px solid var(--Line-color-line-reversed-muted, #909FAE);
    background: var(--Background-color-bg-transparent, rgba(255, 255, 255, 0.00));
}

.benchmark-standard-data-content-border {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    align-self: stretch;
    border-radius: 6px;
    border: 1px solid var(--Line-color-line-dark-faint, #C6CED5);
}

.benchmark-standard-data-content-header {
    color: var(--Text-color-text-landmark, #044D66);
    font-family: "Noto Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 133.333% */
    width: 1762px;
}

#proReportsTabs .nav-link {
    cursor: pointer;
}

    #proReportsTabs .nav-link:hover {
        color: #41639a !important;
    }

.sales-rank-panel {
    display: flex;
    width: 100%;
    padding: 16px;
    flex-direction: column;
    align-items: stretch;
    border-radius: 6px;
    border: 1px solid var(--Line-color-line-dark-faint, #C6CED5);
}

.sales-rank-section {
    width: 100%;
}

    .sales-rank-section + .sales-rank-section {
        border-top: 2px dotted #AAB7C2;
    }

.sales-rank-header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
}

.sales-rank-sites-label {
    margin-left: auto;
    color: #394754;
    font-family: "Noto Sans";
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.sales-rank-chart {
    width: 100% !important;
    min-height: 130px;
}
.salesFootfallYTDContent-subFrame {
    display: flex;
    flex-direction: column;
}

    .salesFootfallYTDContent-subFrame .sales-rank-panel {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        height: 100%;
    }

        .salesFootfallYTDContent-subFrame .sales-rank-panel .funnel-container {
            flex: 1 1 0;
            min-height: 120px;
        }
.sales-rank-stretch {
    align-self: stretch;
    display: flex;
}

    .sales-rank-stretch > .sales-rank-panel {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

        .sales-rank-stretch > .sales-rank-panel > .funnel-container.sflm-chart-align {
            flex: 1 1 0;
            min-height: 0;
        }
        .sales-only-rank-stretch {
    display: flex;
    align-self: stretch;
}

.sales-only-rank-stretch > .sales-rank-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.sales-only-rank-stretch > .sales-rank-panel > .header-row,
.sales-only-rank-stretch > .sales-rank-panel > hr.linestyling {
    flex: 0 0 auto;
}

.sales-only-rank-stretch > .sales-rank-panel > .funnel-container {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    align-items: center;
}

.sales-only-rank-stretch .apexcharts-canvas,
.sales-only-rank-stretch .apexcharts-canvas svg {
    width: 100% !important;
}
    

.benchmark-map-container {
    display: flex;
    padding: 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    background: var(--Background-color-bg-transparent, rgba(255, 255, 255, 0.00));
}

.gap-32px {
    gap: 32px !important;
}
.gap-6px {
    gap: 6px !important;
}

.benchmark-map-contents {
    display: flex;
    padding: 16px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 6px;
    border: 1px solid var(--Line-color-line-dark-faint, #C6CED5);
}

.benchmark-map-regiondata-container {
    display: flex;
    padding: 16px 0 16px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
    /*flex: 1 0 0;*/
    align-self: stretch;
    border-radius: 6px;
    background: var(--Background-color-bg-tertiary, #F0F2F4);
}

.benchmark-map-devider {
    border-radius: 33554400px;
    background: var(--Green-palette-color-green-50, #009170);
    width: 4px;
    height: 45.5px;
}

.benchmark-map-datalabel1 {
    color: var(--Text-color-text-muted, #394754);
    font-variant-numeric: lining-nums tabular-nums;
    /* Form fields/Small */
    font-family: "Noto Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
}

.benchmark-map-datalabel2 {
    color: var(--Text-color-text, #162029);
    font-family: "Noto Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px; /* 140% */
}

.map-layer {
    position: relative;
    width: 80%;
    margin: 0 auto;
    padding: 8px;
}

.map-img {
    width: 100%;
    max-height: 680px;
    display: block;
}

.map-hotspots {
    position: absolute;
    inset: 16px;
    pointer-events: none;
}

.hotspot {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    background: #ffffff;
    border: 2px solid #167ea5;
    color: #0b5775;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease,
        background-color 0.25s ease, border-color 0.25s ease,
        color 0.25s ease, font-size 0.25s ease;
    -webkit-tap-highlight-color: transparent;
    font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    white-space: nowrap;
}

.hotspot:active {
    transform: translate(-50%, -50%) scale(1.02);
}

.hotspot.active {
    background: #00ad82;
    border-color: #00ad82;
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(22, 126, 165, 0.3);
    font-size: 14px;
    font-weight: 600;
}

.benchmark-map-nocenter {
    align-self: stretch;
    color: var(--Text-color-text-muted, #394754);
    text-align: center;
    font-variant-numeric: lining-nums tabular-nums;
    /* Form fields/Default */
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 125% */
}

.benchmark-map-nocenterimg {
    width: 100px;
    height: 100px;
    transform: rotate(+45deg);
    aspect-ratio: 1/1;
}