#landing-performance-view {
    width: 100%;
    height: 100%;
}

#landing-sales-leadership-view {
    width: 100%;
    height: 100%;
    font-family: 'Inter', sans-serif, Tahoma !important;
}

#landing-scheduling-view {
    width: 100%;
    height: 100%;
}

#landing-store-view {
    width: 100%;
    /*    overflow: auto;*/
    height: fit-content;
}

#landing-store-visit-view {
    width: 100%;
    height: 100%;
}

#landing-tasks-view {
    width: 100%;
    height: 100%;
}

#landing-team-activity-view {
    width: 100%;
    height: 100%;
    padding-right: 16px;
    padding-left: 16px;
}

.team-activity-text {
    align-content: center;
    font-size: 0.875rem;
}

#landingpage-menu-wrapper {
    height: 56px;
    position: absolute;
    top: 1px;
    /*    left: 140px;*/
    width: calc(100% - 570px);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: end;
}

#landingpage-menu {
    float: left;
    border-width: 0;
    background: none;
    vertical-align: bottom;
    color: #FFFFFF;
    font-weight: 700;
}

    #landingpage-menu li:hover {
        background-color: #FFFFFF1F;
        border-color: #FFFFFF1F;
    }

#storelandingpage-menu-wrapper {
    height: 56px;
    position: absolute;
    top: 1px;
    /*    left: 140px;*/
    width: calc(100% - 570px);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: end;
}

#storelandingpage-menu {
    float: left;
    border-width: 0;
    background: none;
    vertical-align: bottom;
    color: #FFFFFF;
    font-weight: 700;
}

    #storelandingpage-menu li:hover {
        background-color: #FFFFFF1F;
        border-color: #FFFFFF1F;
    }

.LandingPageBox {
    padding: 8px;
    box-sizing: border-box;
    float: left;
    display: inline-block;
    flex: 1 1 100%;
}

.landing-page-border {
    border: 1px solid #D7D8DA;
    border-radius: 5px;
}

/*#landing-page-discussion-board-view,*/
#landing-page-communication-view {
    height: 100%;
    width: 100%;
    font-size: 13pt;
    overflow: hidden;
}

#landing-page-view {
    width: 100%;
    overflow: hidden;
}

.landing-page-content-container {
    padding: 16px;
    width: 100%;
}

.landing-page-box-content {
    box-shadow: 0px 0px 4px 0px #0000000F;
    box-sizing: border-box;
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
}

.landing-page-border-new {
    display: flex;
    flex-wrap: wrap;
    margin-right: 24px;
    margin-left: 24px;
}

.landing-page-small-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #EBECEF;
    border-radius: 12px;
    gap: 5px;
    margin: 12px 24px 24px 24px;
    padding: 8px 12px 8px 12px;
    cursor: pointer;
    height: 60px;
}

.date-selector-landing {
    flex-direction: row;
    font-size: 0.8rem;
    font-weight: 400;
    color: #6B6B74;
    margin: 0;
    height: 36px;
    padding-bottom: 0;
    padding-top: 0;
    gap: 10px;
}

.landing-page-small-card-db {
    display: flex;
    flex-direction: row;
    justify-content: start;
    overflow: hidden;
    border: 1px solid #EBECEF;
    border-radius: 8px;
    margin: 12px 24px 24px 24px;
    padding: 8px 12px 8px 12px;
    cursor: pointer;
    white-space: nowrap;
    align-items: center;
    height: 57px;
    align-items: center;
    gap: 8px;
}

.landing-page-tasks-small {
    flex: 1 1 30%;
    margin-right: 0;
    margin-left: 0;
    box-sizing: border-box;
}

.landing-page-divider {
    height: 1px;
    background: #EBECEF;
    width: 100%;
}

@media (max-width: 768px) {
    .landing-page-tasks-small {
        flex: 1 1 100%;
    }

    .space-in-between {
        display: none;
    }

    #landing-layout-4,
    .landing-tasks-view {
        height: 610px;
    }
}

.LandingPageBoxText {
    font-weight: bold;
    flex: 1;
    height: 100%;
    font-size: 0.95rem;
}

.LandingPageBoxDetails {
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #6B6B74;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.show-events-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 240px;
}

.todo-list {
    height: 140px;
    overflow: auto;
    padding-right: 12px;
    padding-left: 12px;
}

.todo-item {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 3px;
    margin-top: 2px;
    padding: 5px;
    border: 1px solid transparent;
}

.todo-content {
    max-width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    color: #6B6B74;
    font-size: 0.8rem;
    padding-left: 6px;
}

.todo-date {
    color: #6B6B74;
    font-size: 0.8rem;
    cursor: pointer;
    text-align: right;
    margin-left: auto;
}

.todo-checkbox {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-todo-button {
    width: 24px;
    height: 24px;
    cursor: pointer;
    align-self: end;
    padding-right: 24px;
}

.show-events-header {
    height: 32px;
    display: flex;
    align-items: center;
    padding: 0 5px;
    font-weight: bold;
}

.events-list {
    height: 200px;
    overflow: auto;
}

.events-small-card {
    height: 74px;
    gap: 0;
}

.event-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 2px 5px 0 5px;
    margin-bottom: 3px;
    border: 1px solid #ccc; /* Adjust as needed */
}

.event-description {
    font-size: 0.95rem;
    font-weight: 700;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

.event-details {
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #6B6B74;
}

#scheduling_landing_top .fiscal-week-wrapper img {
    position: relative;
    top: 5px;
}

#scheduling_landing_top .fiscal-date-picker-wrapper {
    width: 24px;
    position: relative;
    float: left;
}

    #scheduling_landing_top .fiscal-date-picker-wrapper .ui-datepicker-trigger {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        display: inline-block;
    }

.scheduling-store-stats-container {
    height: 170px;
    padding: 12px 24px 24px 24px;
    gap: 16px;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #EBECEF;
}

#landing-page-main-team-activity {
    width: 100%;
    border: 1px solid #E7E9EA;
    border-radius: 10px;
}

#landing-page-main-sales-leadership {
    width: 100%;
    border: 1px solid #E7E9EA;
    border-radius: 10px;
}

#landing-rankings-kpi-selection {
    margin-left: auto;
    margin-right: auto;
}

.landing-section-name {
    font-weight: bold;
    padding: 16px 24px 8px 24px;
    display: inline-block;
    white-space: nowrap;
    font-size: 16px;
}

[id^="landing-layout"] * {
    font-family: 'Inter', sans-serif, Tahoma !important;
}

.landing-page-view-general-container {
    height: 100%;
    width: 100%;
    font-size: 1rem;
    overflow: hidden;
}

.landing-count {
    font-weight: 700;
    color: #0177BC;
    margin-right: 10px;
}

.landing-margin-left {
    margin-left: 10px;
}

.landing-header-font {
    font-weight: bold;
}

.landing-arrows {
    height: 100%;
    padding: 0 12px;
}

.landing-header-font-sales-leadership {
    font-size: 0.95rem;
    font-weight: 700;
}

.landing-column-header-leadership {
    font-size: 0.8rem;
    font-weight: 400;
    color: #6B6B74;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 3em;
    line-height: 1.3rem;
}

.landing-separator {
    color: #E7E9EA;
}

.landing-container {
    display: inline-flex;
    border: 1px solid #E7E9EA;
    border-radius: 10px;
    height: 40px;
    padding-top: 10px;
    width: 95%;
    margin-left: 5px;
    margin-bottom: 5px;
    margin-top: 5px;
}

.landing-container-new {
}

.landing-chart-container {
    background-color: #fff;
    width: 50%;
    height: calc(100% - 50px);
    padding-top: 10px;
}

.landing-profile-image {
    position: absolute;
    left: 50%;
    top: 50%;
    max-width: 32px;
    max-height: 32px;
    width: auto;
    height: auto;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.landing-profile-image-container {
    width: 32px;
    height: 32px;
    margin: 5px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    border: 1px solid #e7e9ea;
}

.landing-profile-image-container-new-outer {
    border: 3px solid #31E096;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 0;
}

.landing-profile-image-container-new-inner {
    width: 28px;
    height: 28px;
    border: 2px solid white;
    border-radius: 50%;
    position: absolute;
    margin: 0;
    padding: 0;
    align-items: center;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 1;
    background-size: cover;
    background-position: center;
}

.drawer {
    height: 100%;
    width: 0;
    z-index: 1;
    background-color: white;
    overflow-x: hidden;
    transition: 0.7s;
    border: 1px solid #E7E9EA;
    border-radius: 5px;
}

.landing-tab {
    height: 40px;
    overflow: hidden;
    border-bottom: 1px solid #E7E9EA;
    width: 98%;
    margin-left: 10px;
}

    .landing-tab button {
        background-color: #FFFFFF;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 9px 16px;
        transition: 0.3s;
        font-size: 11pt;
        font-family: Calibri, Helvetica, Tahoma;
        margin-top: 0px;
        color: #000000;
        font-weight: 400;
    }

        .landing-tab button:hover {
            background-color: #FFFFFF;
            color: #0177BC;
        }

        .landing-tab button.active {
            background-color: #FFFFFF;
            font-weight: 700;
            margin-top: 1px;
            color: #0177BC;
            border-bottom: 3px solid #0177BC !important;
        }

.bottom-50 {
    bottom: 50px;
}

.text-500-ellipsis {
    margin-left: 10px;
    width: 500px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: block;
}

.inline-flex-100-percent {
    display: inline-flex;
    width: 100%;
}

.cursor-pointer {
    cursor: pointer;
}

.landing-page-dashboard-chart {
    width: 100%;
    float: left;
    padding: 16px 24px 16px 24px;
}

.round-button {
    height: 28px;
    padding: 4px 12px 4px 12px;
    border-radius: 16px;
    background: #FBFBFB;
    border: 1px solid #EBECEF;
    cursor: pointer;
    color: #6B6B74;
    font-size: 0.85rem;
    align-items: center;
    display: flex;
    justify-content: center;
}

    .round-button * {
        font-size: 0.85rem;
        font-weight: 400;
        line-height: 20px;
        color: #6B6B74;
    }

.centered-class {
    justify-content: center;
    display: flex;
    align-items: center;
}

.period-to-date-selector-container {
    width: 100%;
    height: 57px;
    float: left;
    padding-left: 16px;
    padding-right: 10px;
    overflow: hidden;
    border-bottom: 1px solid #EBECEF;
}

.period-to-date-selector {
    height: 100%;
    display: flex;
    flex-direction: row;
}

.coverage-selector {
    display: flex;
    flex-direction: row;
    gap: 24px;
}

.scheduling-coverage-item {
    white-space: nowrap;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 400;
    margin-right: 12px;
    margin-left: 12px;
    color: #6B6B74;
    cursor: pointer;
}

.peak-coverage-header {
    font-size: 0.875rem;
}

.landing-scheduling-chart-container {
    height: 50%;
    cursor: pointer;
    float: left;
    padding: 16px 24px 8px 10px;
    width: 100%;
}

.landingXTD {
    height: 57px;
    width: 57px;
    color: #3C4048;
    font-size: 14px;
    font-weight: 400;
    border-bottom: 3px solid transparent;
    cursor: pointer;
}

.landingXTD-active {
    border-bottom: 3px solid #0075C4;
    font-weight: 600;
    color: #3C4048;
}

.count-to-target-container {
    padding: 16px 24px 8px 24px;
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
    height: 20%;
}

.performance-donut-charts-container {
    padding: 16px 24px 16px 24px;
    width: 100%;
    height: 50%;
    cursor: pointer;
    float: left
}

    .performance-donut-charts-container * {
        font-size: 0.95rem;
        font-weight: 600;
    }
/*#region Scrollbar styles*/
/* For WebKit browsers (Chrome, Safari) */
#landing-store-view *::-webkit-scrollbar {
    width: 10px;
}

#landing-store-view *::-webkit-scrollbar-track {
    background: transparent;
}

#landing-store-view *::-webkit-scrollbar-thumb {
    background: #EBECEF;
    border-radius: 12px;
}

#landing-store-view *::-webkit-scrollbar-button {
    display: none;
}

/* For Firefox */
/*todo*/
/*#endregion */


#landing-page-management-schedule-view {
    height: 100%;
    width: auto;
    font-size: 16px;
    overflow: auto;
}

.mgmt-schedule-table-container {
    height: calc(100% - 20px);
}

    .mgmt-schedule-table-container * {
        font-family: 'Inter', sans-serif, Tahoma !important;
        font-size: 14px;
    }
    .mgmt-schedule-table-container tr {
        width: 100%;
    }

    .mgmt-schedule-table-wrapper {
        height: 95%;
    }

    .mgmt-schedule-table-wrapper table {
        height: 100%;
        display: block;
        border-collapse: collapse;
        overflow-x: hidden;
    }

    .mgmt-schedule-table-wrapper th {
        font-weight: 700;
        font-size: 15px;
        color: #3C4048;
        text-align: left;
    }

    .mgmt-schedule-table-wrapper td {
        font-weight: 400;
        font-size: 14px;
        color: #6B6B74;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .mgmt-schedule-table-wrapper tbody tr:first-child td {
        padding-top: 16px;
    }

    .mgmt-schedule-table-wrapper th,
    .mgmt-schedule-table-wrapper td {
        border: 0px;
        white-space: nowrap;
    }

        .mgmt-schedule-table-wrapper td:not(:first-child),
        .mgmt-schedule-table-wrapper th:not(:first-child) {
            padding-left: 48px;
        }

.mgmt-schedule-table {
    table-layout: fixed;
    width: 100%;
}

.mgmt-schedule-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.mgmt-schedule-store {
    padding-left: 24px;
}