.bg__timed-list {
    position: relative;
    max-height: calc(100% - 83px);
    overflow-y: auto;
    border-top: 1px solid $clGreyTint;

    > .timed-list-items {
        max-height: 100%;
        display: flex;
        flex-direction: column;

        > .filter-results {
            background: $clGrey;
            padding: 5px 10px;
            font-size: 12px;
        }

        > .list-container {
            list-style: none;
            padding: 0;
            margin: 0;
            overflow-y: auto;
            max-height: 100%;

            > li {
                cursor: pointer;
                padding: 5px 10px;
                border-bottom: 1px solid $clGreyTint;
                display: flex;
                font-size: 13px;
                line-height: 16px;
                transition: background-color $transition;

                &:hover {
                    background-color: $clGrey;
                    border-right: 3px solid $clGreyTint;
                    padding-right: 7px;
                }

                &.current {
                    background-color: mix($clPrimary, white, 25%);
                    border-right: 3px solid $clPrimary;
                    padding-right: 7px;
                }

                > .start-time {
                    font-size: 11.5px;
                    line-height: 16px;
                    font-weight: bold;
                    padding-right: 10px;
                    white-space: nowrap;
                }

                > span > .highLight-text {
                    background-color: mix($clPrimary, white, 25%);
                    border-bottom: 1px dotted $clPrimary;
                }

                &.current {
                    > span > .highLight-text {
                        background-color: mix($clPrimary, white, 50%);
                    }
                }
            }
        }
    }
}