.search-results-info {
    font-size: 13.25px;
    text-align: right;
    margin-bottom: 1rem;
}

.search-bar-frame {
    width: 560px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    padding: 0px;
    border-radius: 10px;
    position: relative;
    border: 1px solid #000;
}

.content {
    padding-left: 30px;
    padding-right: 25px;
}

.slide-menu-trigger-icon {
    content: url('../img/element_s/sidebar_trigger_open03.png');
    width: 120px;
    height: 45px;
}

.slide-menu-trigger-icon:hover,
.slide-menu-trigger-icon.menu-open {
    content: url('../img/element_s/sidebar_trigger_close03.png');
}

.search-results-frame {
    margin-top: 1.5rem;
}

#search-bar {
    right: 0;
}

.search-button {
    left: 0;
}

.slide-menu {
    position: absolute;
    opacity: 0;
    color: #fff;
    background-color: rgb(61, 61, 61);
    width: 232px;
    height: auto;
    z-index: 1000;
    left: -200px;
    padding: 31px 31px 0 31px;
    border-radius: 1.25rem;
    /* overflow-y: hidden; */
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
}

.slide-menu .menu-group {
    display: block;
    position: relative;
    margin-bottom: 1.5rem;
}

.slide-menu .menu-group h5 {
    letter-spacing: .125rem;
    font-family: Taipei Sans TC Beta;
    font-size: 15px;
    margin-bottom: .35rem;
}

.slide-menu .brand-list {
    padding: 0;
    margin-bottom: 0;
}

.slide-menu.slide-menu-open {
    left: 0;
    opacity: 1;
}

.search-results {
    width: 100%;
}

.search-results.slide-menu-open {
    min-height: 1060px;
}

.search-results,
.no-result,
#search-results-gallery,
.music-title {
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
}

.search-results .no-result {
    color: rgba(0, 0, 0, .8);
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: .25rem;
    background-color: rgba(0, 0, 0, .05);
    padding: .8rem;
}

.search-results .no-result::after {
    content: '無搜尋結果';
}

.slide-menu-open .no-result,
.slide-menu-open #search-results-gallery,
.slide-menu-open .pagination-frame,
.slide-menu-open .music-title {
    margin-left: 235px;
    padding-right: 235px;
}

.slide-menu-open .music-title {
    margin-left: calc(235px + .45rem);
}

.to-right-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-40%);
    right: 4px;
    border: 6px solid transparent;
    border-color: transparent transparent transparent #cb2e27;
}

.custom-page-link {
    width: 30px;
    height: 30px;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
    background-color: transparent;
}

.page-item.disabled .custom-page-link {
    display: none;
}

.page-item.active .custom-page-link,
.custom-page-link:hover {
    color: #cb2e27;
    background-color: transparent;
    border: 1px solid #cb2e27;
    border-radius: 15px!important;
}

.page-item {
    margin-left: 2px;
    margin-right: 2px;
}

.page-item.next,
.page-item.prev {
    display: flex;
    justify-content: center;
    align-items: center;
}

.page-item.next {
    margin-left: 5px;
}

.page-item.prev {
    margin-right: 5px;
}

.page-item.next .custom-page-link {
    width: 0;
    height: 0;
    padding: 0;
    color: transparent;
    background-color: transparent;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 14px solid #cb2e27;
}

.page-item.prev .custom-page-link {
    width: 0;
    height: 0;
    padding: 0;
    color: transparent;
    background-color: transparent;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 14px solid #cb2e27;
}

.page-item.next .custom-page-link:hover {
    border-radius: 0!important;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 14px solid #cb2e27;
    border-right: 0;
}

.page-item.prev .custom-page-link:hover {
    border-radius: 0!important;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 14px solid #cb2e27;
    border-left: 0;
}

#search-pagination {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.phone-search-panel {
    padding: 4px 20px;
    margin-bottom: 1.5rem;
}

.phone-close-img {
    width: 14px;
    height: auto;
}

.phone-filter-img {
    width: 26px;
    height: auto;
}

.phone-slide-menu {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5000;
    max-width: 220px;
    min-width: 220px;
    background-color: #d38480;
    padding: 30px 25px;
    margin-top: 5px;
    margin-right: -20px;
    overflow-y: scroll;
}

.phone-slide-menu h5 {
    letter-spacing: .125rem;
    font-size: .9rem;
    margin-bottom: .75rem;
}

.phone-slide-menu .menu-group {
    margin-bottom: .75rem;
}

.phone-dropdown-toggle {
    width: 0;
    height: 0;
    border-top: 12px solid #fff;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    margin-bottom: .75rem;
    margin-left: .825rem;
}

.phone-dropdown-toggle.dropdown-open {
    border-top: 0;
    border-bottom: 12px solid #fff;
}

.phone-dropdown-menu {
    display: none;
    visibility: 0;
    transition: all .3s;
}

.phone-dropdown-menu.dropdown-open {
    display: flex;
    visibility: 1;
}

.phone-dropdown-menu.dropdown-open:not(.custom-checkbox-pair) {
    flex-direction: column;
}

.ui-corner-all {
    border-radius: 7px;
}

.ui-widget-header {
    background-color: #000;
}

.ui-widget.ui-widget-content,
.ui-widget-content {
    border: 0;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-state-focus {
    border: 0;
    color: #000;
    background-color: #000;
}

.ui-slider .ui-slider-handle {
    width: .65rem;
    height: .65rem;
    top: -.2rem;
    margin-left: 0;
}

.ui-slider .ui-slider-handle:last-child {
    margin-left: -.65rem;
}

.ui-slider-horizontal .ui-slider-range {
    min-width: 1px;
}

.range-selector-frame {
    color: #000;
    font-size: .9rem;
    padding: 10px 10px 5px 10px;
    border-radius: 10px;
    background-color: #c6c6c6;
}

.range-selector {
    height: 4px;
}

.range-selector-panel {
    display: flex;
    margin-top: .5rem;
    margin-left: 0;
    margin-right: 0;
    justify-content: center;
    align-items: center;
}

.range-selector-input {
    display: flex;
    align-items: center;
    width: 30%;
}

.range-selector-input .custom-textbox {
    padding: 4px 5px;
    color: rgba(0, 0, 0, .65);
    font-size: 10px;
    text-align: center;
    margin-right: 5px;
    border-color: #000;
}

.range-selector-panel hr {
    border-top: 1px solid #000;
}

.range-selector-input span {
    font-size: 14px;
}

.endless-icon {
    position: absolute;
    height: 2.8rem;
    bottom: -.2rem;
    right: -.2rem;
}

.tooltip-inner {
    text-align: left;
    /* max-width: 250px; */
}

.jg-caption {
    text-align: end;
    padding-right: .5rem!important;
    z-index: 1000;
}

.music-item {
    position: relative;
    padding-bottom: .75rem;
    margin-bottom: .3rem;
    /* margin-left: .45rem; */
    background-color: rgb(200, 200, 200, .5);
}

.music-item.music-title {
    padding: 0;
}

.music-info {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem .75rem .75rem .75rem;
}

.music-title .music-info {
    font-weight: bold;
    padding: .375rem .75rem;
    background-color: rgb(200, 200, 200);
}

.music-info .music-player {
    width: 12.5%;
    text-align: center;
}

.music-info .music-player .music-player-btn {
    color: #000;
    font-size: 50px;
    font-family: "Font Awesome 5 Free";
    text-decoration: none;
}

.music-info .music-player .music-player-btn::before {
    content: "\f144";
}

.music-info .music-player .music-player-btn.active::before {
    content: "\f28b";
}

.music-info .music-player a:hover {
    color: rgb(61, 61, 61);
}

.music-info .music-name {
    width: 17.5%;
    text-align: center;
}

.music-info .music-name h5 {
    letter-spacing: .05rem;
    font-weight: bold;
    margin-bottom: 0;
}

.music-title .music-info .music-name h5 {
    font-size: 1rem;
}

.music-info .music-attr {
    width: 12.5%;
    text-align: center;
}


/* .music-info .music-length::after {
    content: '/';
    margin-left: .2rem;
} */

.music-info .music-attr .music-beat::after {
    content: 'bpm';
    margin-left: .1rem;
}

.music-info .music-track {
    width: 25%;
    padding: .25rem 1rem;
}

.music-info .music-style {
    width: 20%;
    text-align: center;
}

.music-info .actions {
    width: 12.5%;
    display: flex;
    justify-content: space-evenly;
    padding-right: 3rem;
}

.music-item .dropdown-trigger {
    color: #000;
    cursor: pointer;
    position: absolute;
    bottom: .15rem;
    left: 50%;
    transform: translateX(-50%);
    transition: all .15s;
}

.music-item .dropdown-trigger:hover {
    font-size: 1.05rem;
}

.music-item .hidden-keywords-frame {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    padding-left: 7rem;
    padding-right: 7rem;
    max-height: 0;
    overflow-y: hidden;
    transition: all .45s ease-out;
}

.music-item .hidden-keywords-frame.show-keywords {
    padding-top: 1rem;
    padding-bottom: 1.5rem;
}

.pacman>div:first-of-type,
.pacman>div:nth-child(2) {
    width: 0;
    height: 0;
    border-right: 12.5px solid transparent;
    border-top: 12.5px solid rgb(134, 8, 8);
    border-left: 12.5px solid rgb(134, 8, 8);
    border-bottom: 12.5px solid rgb(134, 8, 8);
    border-radius: 12.5px;
    position: relative;
    left: -65px;
}

.pacman>div:nth-child(2) {
    margin-top: -25px;
}

.pacman>div:nth-child(3),
.pacman>div:nth-child(4),
.pacman>div:nth-child(5),
.pacman>div:nth-child(6) {
    background-color: rgb(134, 8, 8);
    border-radius: 100%;
    margin: 2px;
    width: 7.5px;
    height: 7.5px;
    position: absolute;
    -webkit-transform: translate(0, -6.25px);
    transform: translate(0, -6.25px);
    top: 12.5px;
    left: 12.5px;
}

@-webkit-keyframes pacman-balls {
    75% {
        opacity: 0.7;
    }
    100% {
        -webkit-transform: translate(-65px, -6.25px);
        transform: translate(-65px, -6.25px);
    }
}

@keyframes pacman-balls {
    75% {
        opacity: 0.7;
    }
    100% {
        -webkit-transform: translate(-65px, -6.25px);
        transform: translate(-65px, -6.25px);
    }
}

@media (min-width: 0) and (max-width: 575px) {
    .content {
        padding: 0;
    }
    .search-results-info {
        font-size: 12.5px;
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 0;
    }
    .desktop-search-panel {
        display: none;
    }
    .slide-menu-trigger-btn,
    .search-bar-frame {
        display: none;
    }
    .search-results-frame {
        margin-top: 0;
    }
    .search-results {
        padding-left: 15px;
        padding-right: 15px;
    }
    #search-pagination {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
    .custom-page-link {
        width: 27px;
        height: 27px;
    }
}

@media (min-width: 576px) {
    .search-results-info {
        margin-top: 3rem;
    }
    .phone-search-panel {
        display: none;
    }
}