mj-more-button {
    display: flex;
    align-items: center;
    justify-content: center;
    -ms-user-select: none;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    cursor: pointer;
}

mj-more-button::after {
    content: 'aaa';
    background-image: url('/Skin/img/icon/ic_arrow_down.svg');
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: right;
    color: transparent;
}

mj-more-button[use]::after {
    content: 'aaa';
    background-image: url('/Skin/img/icon/ic_arrow_up.svg');
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: right;
    color: transparent;
}

mj-more-view {
    display: none;
}

mj-more-view[show] {
    display: unset;
}
    
mj-star-button {
    display: flex;
    justify-content : center;
    --mj-icon-width: 10px;
    --mj-icon-height: 10px;
    --mj-spacing-width: 0px;
}
mj-face-button {
    display: flex;
    justify-content : center;
    --mj-icon-width: 10px;/*얼굴 아이콘들의 넓이*/
    --mj-icon-height: 10px;/*얼굴 아이콘들의 높이*/
    --mj-spacing-width: 0px;
}

/* https://www.9lessons.info/2014/11/ios-style-switch-button-using-css3-and.html */
mj-switch-button {
    --mj-switch-height: 25px;
    --mj-switch-width: calc(var(--mj-switch-height) * 2);

    display: flex;
    position: relative;
    width: var(--mj-switch-width);
    height: var(--mj-switch-height);
    border-radius: calc(var(--mj-switch-height) / 2);
    border: 1px solid #E5E5E5;
}
mj-switch-button[value=on] {
    border: 1px solid #67B846;
    background-color: #67B846;
}
mj-switch-button[value=on]::after {
    margin-left: var(--mj-switch-height);
}
mj-switch-button::after {
    content: ' ';
    width: calc(var(--mj-switch-height) - 2px);
    height: calc(var(--mj-switch-height) - 2px);
    border-radius: calc((var(--mj-switch-height) - 2px) / 2);
    background-color: white;
    position: absolute;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
    margin-top: 0px;
    margin-left: 0px;
    z-index: 2;
    box-shadow: 0 1px 3px rgb(0 0 0 / 40%);
}

.mj_ui_star_button_el {
    display: inline-block;
    font-size: 0;
    vertical-align: middle;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;

    -ms-user-select: none;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    user-select:none;
    cursor: pointer;
}
.mj_ui_star_button_el[clickable] {
    background-image: url(/Skin/img/icon/ic_star_btn_empty.svg);
}
.mj_ui_star_button_el[clickable][selected] {
    background-image: url(/Skin/img/icon/ic_star_btn_full.svg);
}

.mj_ui_face_button_el {
    -ms-user-select: none;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    user-select:none;
    cursor: pointer;
}

.mj_ui_face_button_el_icon {
    display: inline-block;
    font-size: 0;
    vertical-align: middle;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
}

.mj_ui_face_button_el[value='1'] .mj_ui_face_button_el_icon {
    /* background-image: url(/Skin/img/icon/ic_face_btn_empty.svg); */
    background-image: url('/Skin/img/icon/iconReview3.svg');
    opacity: 0.3;
}
.mj_ui_face_button_el[value='1'][selected] .mj_ui_face_button_el_icon {
    /* background-image: url(/Skin/img/icon/ic_face_btn_full.svg); */
    background-image: url('/Skin/img/icon/iconReview3.svg');
    opacity: 1;
}

.mj_ui_face_button_el[value='2'] .mj_ui_face_button_el_icon {
    /* background-image: url(/Skin/img/icon/ic_face_btn_empty.svg); */
    background-image: url('/Skin/img/icon/iconReview2.svg');
    opacity: 0.3;
}
.mj_ui_face_button_el[value='2'][selected] .mj_ui_face_button_el_icon {
    /* background-image: url(/Skin/img/icon/ic_face_btn_full.svg); */
    background-image: url('/Skin/img/icon/iconReview2.svg');
    opacity: 1;
}

.mj_ui_face_button_el[value='3'] .mj_ui_face_button_el_icon {
    /* background-image: url(/Skin/img/icon/ic_face_btn_empty.svg); */
    background-image: url('/Skin/img/icon/iconReview1.svg');
    opacity: 0.3;
}
.mj_ui_face_button_el[value='3'][selected] .mj_ui_face_button_el_icon {
    /* background-image: url(/Skin/img/icon/ic_face_btn_full.svg); */
    background-image: url('/Skin/img/icon/iconReview1.svg');
    opacity: 1;
}

.mj_ui_face_button_el .mj_ui_face_button_el_label {
    /*[낮다, 보통이다, 매우 높다 등..]선택되지 않았을 때와 공통적인 폰트*/
    color: #737373;
    text-align: center;
}
.mj_ui_face_button_el[selected] .mj_ui_face_button_el_label {
    /*[낮다, 보통이다, 매우 높다 등..]선택되었을 때의 폰트*/
    color: #E94F07;
}
mj-scroll-menu {
    display: block;
    width: 100%;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
mj-scroll-menu::-webkit-scrollbar {
    display: none;
}
mj-scroll-menu mj-scroll-menu-content {
    min-width: 100%;
    width: max-content;
    display: flex;
    flex-direction: row;
}
mj-scroll-menu mj-scroll-menu-content mj-scroll-menu-item {
    display: flex;
    -ms-user-select: none;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    cursor: pointer;
}