section#search {
    margin: 0 auto;
    transition: all 1s;
}

#search-results.inaktif {
    margin-top: 0 !important;
}

    #search-results.inaktif .tab-content, #search-results.inaktif ul {
        display: none;
    }

#search-results .tab-content {
    max-height: 400px;
    height: 400px;
    overflow-x: hidden;
    overflow-y: auto;
}

    #search-results .tab-content .tab-pane {
        position: relative;
    }

.search-details {
    text-decoration: none !important;
}

section#search .search-list-item {
    margin: 3px 0;
     padding: 9px 10px 3px 10px;
    min-height: 70px; 
    list-style: none;
    border-bottom: 1px solid #e2e1e1;
}
.search-list-item.clearfix:hover {
    background: rgba(185,185,185,0.1);
} 
    section#search .search-list-item img {
        margin-right: 15px;
    }

    section#search .search-list-item .search-title {
        color: #1f1609;
    }

        section#search .search-list-item .search-title em {
            font-size: 13px;
            margin-left: 15px;
            position: relative;
        }

            section#search .search-list-item .search-title em:after {
                content: '';
                position: absolute;
                left: -12px;
                width: 8px;
                height: 1px;
                top: 6px;
                background-color: #1f1609;
            }

    section#search .search-list-item .search-details {
        font-size: 14px;
        margin-top: 7px;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        color: #000;
    }

        section#search .search-list-item .search-details:empty {
            display: none;
        }

section#search #search-results {
    width: 100%;
    background-color: #fcfcfc;
    font-size: 16px;
    position: relative;
}

section#search.search--active #search-results {
    overflow: unset !important;
}

    section#search.search--active #search-results:after {
        content: '';
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 7px solid #fff;
        position: absolute;
        top: -6px;
        left: 41px;
    }

section#search.spinner--active #search-results {
    height: auto;
}

section#search #search-results, section#search #search-results .spinner, section#search #search-results .tab-content, section#search #search-results ul {
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 0;
    transition: max-height .55s ease-out;
    overflow: hidden;
}

    section#search #search-results ul {
        overflow: hidden;
    }

section#search .spinner {
    position: relative;
    width: 0;
    height: 0;
    margin: 0 auto;
    transition: all .6s;
}

section#search.spinner--active #search-results .spinner {
    height: 50px;
    width: 50px;
    overflow: visible;
}

section#search .spinner:after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin-top: -10px;
    margin-left: -10px;
    border-radius: 50%;
    border-top: 2px solid #07d;
    border-right: 2px solid transparent;
    animation: all .6s;
}

section#search.spinner--active .spinner:after {
    animation: spinnera .6s linear infinite;
}

section#search.search--active #search-results, section#search.search--active #search-results ul {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 50vh;
    height: 457px;
    overflow: hidden;
    transition: all 0.8s;
    margin-top: 8px;
}

    section#search.search--active #search-results ul {
        overflow-y: hidden;
        max-height: none !important;
        height: auto !important;
    }

        section#search.search--active #search-results ul a {
            color: #262626;
            border: 0;
            border-radius: 0;
            position: relative;
            margin-right: 0;
        }

            section#search.search--active #search-results ul a:hover, section#search.search--active #search-results ul li.active a {
                background: #f0ae31;
            }

            section#search.search--active #search-results ul a:after {
                height: 50%;
                width: 1px;
                content: '';
                position: absolute;
                right: 0;
                background: #000;
                top: 0;
                top: 50%;
                transform: translateY(-50%);
            }

        section#search.search--active #search-results ul li:last-child a:after {
            content: none;
        }

    section#search.search--active #search-results .tab-content {
        width: 100%;
        padding: 10px 2px 0;
        max-height: calc(100% - 50px);
        height: calc(100% - 50px);
    }

#search .tab-content .tab-pane {
    display: block;
    width: 100%;
    max-height: 0;
    transition: max-height .25s ease-out;
    overflow: hidden;
    background: #fcfcfc;
}

#search.search--active .tab-content .tab-pane.active {
    max-height: 100% !important;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

    #search.search--active .tab-content .tab-pane.active > strong {
        padding-left: 10px;
    }

.animation-content {
    position: absolute;
    top: 30%;
    left: 47%;
    transform: translate(-50%,-50%);
}

#search .custom-bar .mCSB_draggerRail {
    background: #fff;
}

#search .custom-bar .mCSB_dragger_bar {
    background: #000 !important;
    width: 1px;
    right: -3px;
}

@keyframes spinnera {
    to {
        transform: rotate(360deg);
    }
}