/* 악곡 목록 CSS */

/* 애니메이션 정의*/

/* 버튼 호버 */
@keyframes btnhover {
    from {
        transform: scale(1.0);
    }
    to {

    }
}

/* CSS */
.search {
    margin-top: 7rem;
    width: 60%;
    min-width: 1200px;
    padding: 1em;
    margin-left: auto;
    margin-right: auto;
    background-color: #f0f7ff;
    border: 1px solid rgba(23, 95, 184, 0.1);
    transition: 0.25s;
    user-select: none;
    font-family: 'Noto Sans KR', sans-serif;
}

.bar {
    border-right: 1px solid #F4F4F4;
}

.search > div {
    width: 100%;
    background-color: #FFF;
    padding: 0.7rem;
    margin-top: 1em;
}

.search > div:first-child {
    margin-top: 0;
}

.searchDiv {
    width: 60%;
    min-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.searchDiv > div {
    box-shadow: 0px 0px 4px rgba(23, 95, 184, 0.25);
    z-index: 0;
    padding: 0.5em;
    border: 0;
    margin-right: 1em;
    margin-top: 1em;
}

.searchDiv > div:last-child {
    margin-right: 0;
}
/* 레벨 카테고리 등등 제목 */

h3 {
    width: 5em;
    text-align: center;
    font-size: 0.9em !important;
    font-weight: bold !important;
    color: #495057;
}

p3 {
    margin-right: 1em;
}

.levelText, .categoryText {
    width: 5em;
    text-align: center;
    font-size: 1em;
    font-weight: 700;
    color: #495057;
}

/* 레벨 카테고리 등등 숫자*/
.levelNumber, .categoryOption, .sortOption {
    margin-left: 1em;
    margin-right: 1em;
    font-size: 0.9em;
    font-weight: 400;
    color: #495057;
}

.lvlP, .categoryP, .sortPP, .konasuteP {
    margin-bottom: 0;
    transition: 0.25s;
}

.lvlP:hover, .categoryP:hover, .sortP:hover, .sortPP:hover, .konasuteP:hover {
    cursor:pointer;
}

.levelDiv > select, .categoryDiv > select, .sortCondition > select, .sortDetail > input {
    display: none;
}

/* 정렬 제목 */
.sortText {
    width: 5em;
    text-align: center;
    font-size: 1em;
    font-weight: 500;
}

.sortPP {
    margin-right: 1em;
}

.sortCondition {
    width: 50%;
    margin-right: 1%;
    background-color: #fff;
}

.sortDetail {
    width: 49%;
    background-color: #fff;
}

.levelDivision, .categoryDivision, .sortDivision, .detailDivision, .titleSearchDivision, .composerSearchDivision, .conditionSearchDivision{
    background-color: rgba(0, 0, 0, 0.25);
    height: auto;
    width: 1px;
}

.composerText, .titleText, .conditionText, .konasuteText {
    width: auto;
    text-align: left;
    margin-right: 1em;
    margin-bottom: 0;
    color: #495057;
    font-size: 1em;
    font-weight: normal;
    user-select: none;
}

.konasuteSearchText {
    font-size: 0.8em;
    margin-bottom: 0.4em;
}

.custom-select {
    border-color: rgba(0, 0, 0, 0.10);
    -ms-overflow-style: none;
    scrollbar-width: none;
    font-size: 0.8em;
}

.custom-select::-webkit-scrollbar {
    display: none;
}

.custom-select:active, .custom-select:focus {
    border: 1px solid rgba(0, 0, 0, 0.10);
    box-shadow: none;
    outline: none;
}

.titleInput, .composerInput, .conditionInput {
    width:65%;
    border: 1px solid rgba(0, 0, 0, 0.10);
    outline: none;
    margin-left: 1em;
    transition: 0.25s;
}

.titleInput:focus, .composerInput:focus, .conditionInput:focus {
    background-color: rgba(119, 119, 119, 0.10);
}

.konasuteDiv {
    height: 7em;
    opacity: 0;
    transition: 0.25s;
}

.konasuteCheck {
    margin-top: auto;
    margin-bottom: auto;
}

/* 텍스트 클릭 */
.ascend {
    color: #175FB8;
    filter: drop-shadow(0px 0px 1px #6599D7);
}

.submitDiv {
    min-width: 1000px;
}
/* submit - 검색 버튼 */
.submit, .submit:hover {
    width: 10em;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
    color: rgba(0, 0, 0, 0.75);
    background-color: #FFF;
    border-color: rgba(0, 0, 0, 0.10);
    transition: 0.25s;
    z-index: 0;
}

.submit:hover {
    transform: scale(1.10);
    border-color: #FFF;
    color: #175FB8;
    filter: drop-shadow(0px 0px 2px #6599D7);
    -webkit-appearance: none;
    -moz-appearance: none;
}

.submit:active, .submit:focus {
    box-shadow: none;
    outline: none;
    background-color: #fff;
    color: #175FB8;
}

/* 악곡 프레임 전체 */
.songs {
    width: 60%;
    min-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    user-select: none;
}

/* 악곡 프레임 개별 */
.songs > figure {
    background-color: white;
    border-radius: 0.5em;
    margin: 0.5em;
    width: 18%;
    box-shadow: 0px 0px 4px rgba(23, 95, 184, 0.25);
}

.link, .link:hover {
    color: #000;
    text-decoration: none;
}

.jacket {
    width: 100%;
    height: auto;
    margin: auto;
}

.jk {
    width: 100%;
    margin-left: 0;
    margin-top: 0;
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
}

.detail {
    padding: 0.5em;
    padding-bottom: 1em;
}

div.title {
    text-align: center;
    overflow: hidden;
    color: #333333;
    white-space: nowrap;
    font-size: 1.5em;
    margin-top: 5px;
}

div.composer {
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.85em;
    color: #A0A0A0;
    margin-top: 5px;
    margin-bottom: 30px;
}

.levels {
    width:100%;
    text-align: center;
}
.level {
    margin-top: 5px;
    width: 25%;
    color: white;
    font-size:0.7em;
}

.nov {
    color: #3f33ac;
    border-right: 1px solid rgba(0, 0, 0, 0.25);
}
.adv {
    color: #dda03e;
    border-right: 1px solid rgba(0, 0, 0, 0.25);
}
.exh {
    color: #bd3739;
    border-right: 1px solid rgba(0, 0, 0, 0.25);
}
.nov > a, .nov > a:hover {
    color: #3f33ac; text-decoration: none; 
}
.adv > a, .adv > a:hover {
    color: #dda03e; text-decoration: none;
}
.exh > a, .exh > a:hover {
    color: #bd3739; text-decoration: none;
}
.mxm > a, .mxm > a:hover {
    color: #777777; text-decoration: none;
}
.inf > a, .inf > a:hover {
    color: #be50b7; text-decoration: none;
}
.grv > a, .grv > a:hover {
    color: #bb6e3b; text-decoration: none;
}
.hvn > a, .hvn > a:hover {
    color: #3289ac; text-decoration: none;
}
.vvd > a, .vvd > a:hover {
    color: #b13c8e; text-decoration: none;
}
.xcd > a, .xcd > a:hover {
    color: #1057ad; text-decoration: none;
}

.paginator {
    margin-top: 10px;
}

.paginator > nav {
    position: relative !important;
    margin-bottom: 3rem !important;
    background-color: transparent !important;
}

.pagination {
    margin-left: auto;
    margin-right: auto;
    font-size: 0.5em;
}

.page-link {
    border-radius: 0;
    border: 0;
    transition: 0.25s;
    color: rgba(0, 0, 0, 0.25);
    background-color: transparent !important;
}

.page-link:hover {
    color: #175FB8 !important;
}

.page-link:active, .page-link:focus {
    border: none;
    box-shadow: none;
    outline: none;
}

.page-link:active {
    font-size: 1em;
    color: #175FB8;
}

.active > a{
    color: #175FB8 !important;
}

.page-link:first-child, .page-link:last-child {
    border-top-left-radius: 0em;
    border-bottom-left-radius: 0em;
    border-bottom-right-radius: 0em;
    border-top-right-radius: 0em;
}

.highlight {
    font-size: 0.8em !important;
    font-weight: 400 !important;
    box-shadow: 0px 0px 4px rgba(23, 95, 184, 0.25);
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
    width: 1rem;
    word-break: keep-all;
}