/* Loaded directly by layouts so this feature does not depend on generated bundles. */
body.strend .box-serchtrend { display: block; visibility: visible; }

body.strend .search-overlay,
body.ssearch .search-overlay {
    display: block;
    visibility: visible;
    z-index: 49;
    background: rgba(0, 0, 0, .35);
}

.search-overlay {
    position: fixed;
    inset: 0;
    display: none;
    visibility: hidden;
}

.box-serchtrend {
    position: absolute;
    z-index: 100;
    display: none;
    visibility: hidden;
    box-sizing: border-box;
    max-height: 500px;
    overflow-y: auto;
    padding: 0 0 16px;
    background: #fff;
    box-shadow: 0 0 3px 1px rgba(0, 0, 0, .15);
}

.trendtax,
.trendpost,
.history-wrapper { padding: 0 16px; }

.trendtax { margin-bottom: 8px; padding-top: 8px; }
.ttrend { display: block; margin-bottom: 8px; font-weight: 700; }
.list-serchtrend { margin-left: 9px; }
.trendpost .list-serchtrend { margin-left: 16px; list-style: disc; }
.list-serchtrend li a {
    display: -webkit-box;
    overflow: hidden;
    color: inherit;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.list-serchtrend li:hover a { color: #f8752b; }
.trendpost .list-serchtrend li {
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid #0000001f;
}
.trendpost .list-serchtrend li:last-child { border-bottom: 0; }
.trendpost .ttrend::after {
    position: absolute;
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-left: 8px;
    content: "";
    background: url("/Themes/Default/images/Trending.svg") center / 24px no-repeat;
}

.history-wrapper {
    width: 100%;
    display:none;
    margin-bottom: 10px;
    padding-bottom: 0;
    border-bottom: 1px solid #eee;
    background: #fff;
}
.history-item { display: flex; align-items: center; padding: 2px 8px; }
.history-item:hover,
.history-clear-all:hover { background: #eee; }
.history-icon-clock,
.icon-trash-container {
    display: flex;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    align-items: center;
    justify-content: center;
}
.history-icon-clock svg,
.history-remove-item svg,
.history-clear-all svg { width: 18px; height: 18px; fill: #555; }
.history-link {
    flex: 1;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.history-remove-item { display: flex; padding: 5px; cursor: pointer; border: 0; background: transparent; }
.history-remove-item svg { fill: #999; }
.history-remove-item:hover svg { fill: #f8752b; }
.history-clear-all { display: flex; padding: 4px 8px; cursor: pointer; color: #555; border: 0; border-top: 1px dashed #eee; background: #fff; }

@media screen and (max-width: 767px) {
    .box-serchtrend { max-height: 371px; }
    .trendtax,
    .trendpost,
    .history-wrapper { padding-right: 12px; padding-left: 12px; }
}