.ui.menu .item.stories-page-menu-searchbar {
    flex-grow: 1;
}

.ui.search.story-search-bar {
    width: 100%;
    .ui.icon.input {
        top: 0.5px;
        width: 100%;
    }
    input.prompt {
        height: 2.6em;
        border-radius: .28571429rem;
        border-style: none;
        visibility: hidden;
        &:focus {
            border-style: solid;
            visibility: visible;
        }
    }
    &:hover {
        input.prompt {
            border-color: rgb(188, 188, 188);
            border-style: solid;
            visibility: visible;
        }
    }

    &.has-text{
        input.prompt {
            border-style: solid;
            visibility: visible;
        }
    }
    .fitted.item.stories-search-result {
        display: flex;
        align-content: space-between;
    }
    .results.transition.visible {
        height: 50vh;
        overflow-y: scroll;
        width: 100%;
    }
    .result {
        padding-right: 0.5em;
        .search-item-prefix.story {
            opacity: 0.4;
            font-size: 0.8em;
            margin-right: 0.5em;
        }
        .search-item-prefix.form {
            opacity: 0.6;
            font-size: 0.8em;
            margin-right: 1.1em;
        }
        .icon.push-story-icon {
            display: block;
            margin-left: auto;
            margin-right: 0;
            &.story-open {
                color: #656565;
            }
            &.story-closed{
                visibility: hidden;
                color:#a7a7a7;
                &:hover {
                    color: #767676;
                }
            }
        }
        .story-group-name {
            font-size: smaller;
            color: rgb(164, 164, 164);
            margin-top: auto;
            margin-bottom: 0;
            margin-left: 1em;
            margin-right: 1em;
            padding: 0;
            overflow: wrap;
            word-wrap: break-word;
            box-sizing: border-box;
        }
        .story-name {
            overflow: wrap;
            box-sizing: border-box;
            word-wrap: break-word;
        }
        &:hover {
            .icon.push-story-icon {
                visibility: visible;
            }
        }
    }
}

.search-shortcuts {
    position: absolute;
    max-width: 550px;
    width: 100%;
    background: #fff;
    border-radius: 0.28em;
    box-shadow: 0 2px 4px 0 rgba(34,36,38,.12), 0 2px 10px 0 rgba(34,36,38,.15);
    border: 1px solid #d4d4d5;
    z-index: 998;
    display: flex;
    flex-direction: column;
    top: 56px;
    & > span {
        color: #555;
        cursor: pointer;
        padding: 10px 25px;
        &:hover {
            background: #f6f6f6;
        }
        .icon {
            margin-right: 10px;
        }
    }
}