#media-search {
    position: fixed;
    z-index: 5;
    
    top: 274px;
    left: var(--content-left);
    width: 100%;
    height: 100%;
    max-width: 960px;
    min-height: 90px;
    max-height: calc(100vh - 300px);

    background: #fefefe;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #bbb;
    /*transition: height 0.2s ease-in-out;*/
}

#media-search .results-scroll {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    
    overflow-y: auto;
    transition: opacity 0.2s;
}

#media-search.mini {
    height: 20%;
}
#media-search.mini .results-scroll {
    overflow: hidden;
}

#media-search .results {
    padding: 20px 16px 200px 24px;
}

#media-search .result-row {
    overflow: hidden;
    position: relative;
    clear: both;
    min-height: 124px;
    margin-bottom: 11px;
    padding-bottom: 6px;
    border-radius: 5px;
}

#media-search .result-row:hover {
    /*background: #eaeaea;*/
}

#media-search .buttons {
    position: absolute;
    left: 0;
    top: 36px;
    width: 100%;
    text-align: center;
    display: none;
    padding: 6px 0;
    background: rgba(245, 245, 245, 0.6);
    backdrop-filter: blur(5px);
    font-size: 14px;
}

#media-search .thumb-box {
    display: block;
    position: absolute;
    left: 7px;
    top: 6px;
    /*width: 176px;
    height: 100px;*/
    width: 208px;
    height: 117px;
    contain: paint;
}

#media-search .thumb {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 50% 45%;
    border-radius: 4px;
}

#media-search .details {
    display: block;
    padding: 7px 38px;
    padding-left: 234px;
}

#media-search .title {
    color: #111;
    font-size: 16px;
    padding-top: 3px;
    word-wrap: break-word;
}

#media-search .subtitle {
    font-size: 14px;
    cursor: default;
}
#media-search .subtitle, #media-search .subtitle a {
    color: #777;
}

#media-search .time {
    background: rgba(0, 0, 0, 0.55);
    color: #e2e2e2;
    position: absolute;
    bottom: 2px;
    right: 2px;
    padding: 0 4px;
    font-size: 11px;
    border-radius: 2px;
    user-select: none;
}

#media-search .thumb-box:hover .buttons {
    display: block;
}

#media-search .thumb-box:hover .thumb {
    opacity: 0.6;
}

#media-search-close {
    position: absolute;
    top: 20px;
    right: 30px;
    background: #f6f6f6;
    color: #666;
    font-size: 18px;
    width: 28px;
    height: 28px;
    line-height: 23px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: default;
    user-select: none;
}

#media-search-close:hover {
    background: #eee;
    border-color: #bbb;
    color: #111;
}

#media-search-loading {
    position: absolute;
    left: 50%;
    top: -15px;
    width: 104px;
    margin-left: -52px;
    height: 30px;
    font-size: 14px;
    background: #fcfcfc;
    border-radius: 16px;
    color: #111;
    text-align: center;
    line-height: 29px;
    border: 1px solid #ccc;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: opacity 0.2s;
    pointer-events: none;
}