.chart-tr {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 27px;
}

.photoProfileColumn {
    display: grid;
    place-items: center;
    width: 20px;
}

.photoProfile-Chart {
    height: 20px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    user-select: none;
}

.tooltipDiv {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 26px;
    min-width: 26px;
}

.tooltipDiv > span {
    display: grid;
    place-items: center;
    color: white;
    border: 2px solid white;
    user-select: none;
    height: 27px;
    font-size: 12px;
    font-weight: 600;
    animation: fadeIn 1s ease-in-out;
    line-height: normal;
    border-radius: 4.5px;
    background-color: var(--color);
}

@keyframes fadeIn {
    from {
        clip-path: circle(0%);
    }

    to {
        clip-path: circle(100%);
    }
}

.tooltipDiv:hover > span {
    background-color: var(--color-hover);
}

.column-eff-chart>div:nth-child(1),
.column-poi-chart>div:nth-child(2),
.column-eff-chart>span:nth-child(1),
.column-poi-chart>span:nth-child(2) {
    margin-right: 4px;
    flex-shrink: 1;
}

.TableDataColumn {
    display: flex;
    /* column-gap: 3px; */
    flex: 1;
    padding: 0;
}

.day-span {
    display: grid;
    place-items: center;
    font-size: 12px;
    user-select: none;
    color: black;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 26px;
    min-width: 26px;
}

.nameColumn {
    text-align: start;
    width: 140px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-left: -15px;
    font-size: 14px;
}

.scrollbar-none {
    padding-right: 5px;
}

.scrollbar-none::-webkit-scrollbar {
    width: 5px;
    height: 0px;
}

.scrollbar-none::-webkit-scrollbar-track {
    background-color: rgb(236, 236, 236);
    border-radius: 10px;
}

.scrollbar-none::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.20);
}

.arrow-scroll {
    transition: 1s all ease-in-out !important;
    opacity: 0;
    display: none;
}

.arrow-scroll-left {
    transform: translate(1rem);
    transition: 0.5s all ease-in-out !important;
}

.arrow-scroll-right {
    transform: translate(-1rem);
    transition: 0.5s all ease-in-out !important;
}

.pb-for-arrows {
    padding-bottom: 0px;
}

@media (max-width: 900px) {
    .pb-for-arrows {
        padding-bottom: 1.5rem;
    }

    .arrow-scroll {
        opacity: 1;
        display: block;
    }
}

.foot-tooltip .tooltip-inner {
    white-space: nowrap; /* Use white-space instead of text-wrap */
    background-color: white;
    color: black !important;
    border: 0.1px solid rgb(229, 229, 229);
}

.foot-tooltip[data-popper-placement="bottom"] .tooltip-arrow::before,
.foot-tooltip[data-popper-placement="top"] .tooltip-arrow::before,
.foot-tooltip[data-popper-placement="left"] .tooltip-arrow::before,
.foot-tooltip[data-popper-placement="right"] .tooltip-arrow::before {
    border-color: transparent !important;
}

#chartsContainer .form-select {
    background-position: right 0.5rem center;
}