.bg__timed-list {
    position: relative;
    max-height: calc(100% - 139px);
    display: flex;
    flex-direction: column;
    border-top: 1px solid $clGreyTint;

    > .filter-results {
        background: $clGrey;
        border-bottom: 1px solid $clGreyTint;
        padding: 5px 10px;
        font-size: 13px;
    }

    > .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%);
                }
            }
        }
    }
}
