.suggestion_above, .suggestion_above {
    position: relative;
}

.suggestion_above .wdk_suggestion .list_container {
    bottom: 100%;
}

.wdk_suggestion {
    --color_text_primary: #0074e4;
    --color_text_primary_hover: #fff;
    --background_color: #fff;
    --background_color_hover: #0074e4;
    word-break: normal;

    /*min-width:215px;*/

    .list_container {
        width: 100%;
        display: none;
        position: absolute;
        z-index: 100000;
        background: white;
        min-width: 280px;
    }

    .list_scroll {
        height: 300px;
        overflow-y: scroll;
        overflow-x: hidden;
        border-left: 1px solid #ccc;
    }
    
    .list_scroll ul {
        margin: 0px;
        padding: 0px;
    }
      
    .list_scroll ul li {
        list-style: none;
        margin: 0px;
        border: 0px;

        padding: 10px 0;
        background: var(--background_color);

        font-size: 12px;
        font-weight: 400;
        display: flex;
        align-content: center;
        justify-content: flex-start;
        flex-wrap: nowrap;
        cursor: pointer;
        color: var(--color_text_primary);

        .column {
            flex: 1 2 auto;
            &.left {
                flex: 0 0 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                i {
                }
            }
            &.right {
                flex: 0 0;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0 10px;
                text-align: right;
            }

            &.middle {
                display: flex;
                flex-direction: column;
                .title {
                    font-size: 14px;
                    font-weight: 500;
                }

                .sub-title {
                    font-size: 12px;
                    line-height: 1.6;
                    color: #515151;
                    font-style: italic;

                  
                }
            }
        }

        &:hover {
            background: var(--background_color_hover);
            color: var(--color_text_primary_hover);

            .column.middle .sub-title {
                color: var(--color_text_primary_hover);
            }

        }
        transition: all .15s;
    }
    
    @media (max-width: 767px) {
        .list_container {
            min-width: auto;
        }
    }
    
    @media (max-width: 400px) {

    }
 
}
