@charset "utf-8";
body {
    font-family: "Microsoft YaHei UI Light", "Microsoft YaHei UI", "微软雅黑", sans-serif;
}

.llbtn {
    border-radius: 15px;
    text-align: left;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

.llform {
    border-radius: 999px;
}

.llbtn:hover {
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

.llbtn:active {
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

.llbtn:focus {
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

.llbtn:active:focus {
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

.llsmilecolor {
    color: #da0d74;
}

.llpurecolor {
    color: #2da65a;
}

.llcoolcolor {
    color: #0f95e2;
}

.topnav button {
    color: #ffffff;
    border-color: #ffffff;
    background: none;
}

.navbar-header {
    float: left !important;
}

.navbar-right {
    float: right !important;
}

.navbar-default .navbar-brand {
    color: #ffffff;
}

.navbar-setting-button {
    color: #ffffff !important;
}

.lefttoolbox {
    background-image: url("/static/images/dotbg.png");
    background-repeat: repeat-x;
    background-position: center bottom;
}

.ckb_attribute_filter {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    height: 48px;
}

#attribute_id_filter1, #attribute_id_filter2, #attribute_id_filter3, #attribute_id_filter5 {
    display: none;
}

.ckb_attribute_filter1 {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_AttrSmile-01_On-01.png");
}

.ckb_attribute_filter2 {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_AttrPure-01_On-01.png");
}

.ckb_attribute_filter3 {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_AttrCool-01_On-01.png");
}

.ckb_attribute_filter5 {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_AttrSupport-01_On-01.png");
}

input[type=checkbox]:not(:checked) + .ckb_attribute_filter1 {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_AttrSmile-01_Off-01.png");
}

input[type=checkbox]:not(:checked) + .ckb_attribute_filter2 {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_AttrPure-01_Off-01.png");
}

input[type=checkbox]:not(:checked) + .ckb_attribute_filter3 {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_AttrCool-01_Off-01.png");
}

input[type=checkbox]:not(:checked) + .ckb_attribute_filter5 {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_AttrSupport-01_Off-01.png");
}

.ckb_rarity_filter {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: 20%;
    height: 48px;
}

#rarity_filter1, #rarity_filter2, #rarity_filter3, #rarity_filter4, #rarity_filter5 {
    display: none;
}

.ckb_rarity_filter1 {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_RarityN-01_On-01.png");
}

.ckb_rarity_filter2 {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_RarityR-01_On-01.png");
}

.ckb_rarity_filter3 {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_RaritySR-01_On-01.png");
}

.ckb_rarity_filter4 {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_RarityUR-01_On-01.png");
}

.ckb_rarity_filter5 {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_RaritySSR-01_On-01.png");
}

input[type=checkbox]:not(:checked) + .ckb_rarity_filter1 {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_RarityN-01_Off-01.png");
}

input[type=checkbox]:not(:checked) + .ckb_rarity_filter2 {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_RarityR-01_Off-01.png");
}

input[type=checkbox]:not(:checked) + .ckb_rarity_filter3 {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_RaritySR-01_Off-01.png");
}

input[type=checkbox]:not(:checked) + .ckb_rarity_filter4 {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_RarityUR-01_Off-01.png");
}

input[type=checkbox]:not(:checked) + .ckb_rarity_filter5 {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_RaritySSR-01_Off-01.png");
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    input[type=checkbox]:checked + .ckb_attribute_filter:after, input[type=checkbox]:checked + .ckb_rarity_filter:after {
        content: '　';
        background-image: url("/static/images/checked.png");
        position: absolute;
        width: 32px;
        height: 32px;
    }
}

.nbsp32 {
    display: block;
    clear: both;
    width: 100%;
    height: 32px;
}

.toolboxbg {
    background-color: rgba(255, 255, 255, 0.5);
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 20px;
    margin: 10px 0;
}

.toolboxbg h5 {
    margin: 0;
}

.toolboxbg h5 a {
    display: block;
    text-decoration: none;
    line-height: 36px;
}

.ckb_skill_type_filter {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

#skill_type_filter4, #skill_type_filter5, #skill_type_filter9, #skill_type_filter11, #skill_type_filter2000, #skill_type_filter2100, #skill_type_filter2200, #skill_type_filter2201, #skill_type_filter2300, #skill_type_filter2301, #skill_type_filter2400, #skill_type_filter2500, #skill_type_filter2600 {
    display: none;
}

#unit_type_id_filter1, #unit_type_id_filter2, #unit_type_id_filter3, #unit_type_id_filter4, #unit_type_id_filter5, #unit_type_id_filter6, #unit_type_id_filter7, #unit_type_id_filter8, #unit_type_id_filter9, #unit_type_id_filter101, #unit_type_id_filter102, #unit_type_id_filter103, #unit_type_id_filter104, #unit_type_id_filter105, #unit_type_id_filter106, #unit_type_id_filter107, #unit_type_id_filter108, #unit_type_id_filter109 {
    display: none;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #skill_type_filter4, #skill_type_filter5, #skill_type_filter9, #skill_type_filter11, #skill_type_filter2000, #skill_type_filter2100, #skill_type_filter2200, #skill_type_filter2201, #skill_type_filter2300, #skill_type_filter2301, #skill_type_filter2400, #skill_type_filter2500, #skill_type_filter2600 {
        display: inline-block;
    }

    #unit_type_id_filter1, #unit_type_id_filter2, #unit_type_id_filter3, #unit_type_id_filter4, #unit_type_id_filter5, #unit_type_id_filter6, #unit_type_id_filter7, #unit_type_id_filter8, #unit_type_id_filter9, #unit_type_id_filter101, #unit_type_id_filter102, #unit_type_id_filter103, #unit_type_id_filter104, #unit_type_id_filter105, #unit_type_id_filter106, #unit_type_id_filter107, #unit_type_id_filter108, #unit_type_id_filter109 {
        display: inline-block;
    }
}

input[type=checkbox]:checked + .ckb_skill_type_filter {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

.checkbox-container {
    display: inline-block;
}

.checkbox-container-rarity, .checkbox-container-attribute_id {
    display: inline-block;
}

.checkbox-container-attribute_id {
    width: 25%;
}

.llradio {
    width: 32px;
    height: 32px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
    margin-right: 5px;
}

.llradio:after {
    content: '';
    width: 24px;
    height: 24px;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 24px;
}

.llradio:before {
    content: '';
    width: 28px;
    height: 28px;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 28px;
}

input[type=radio]:checked + .llradio {
    box-shadow: none;
}

input[type=radio]:checked + .llradio:after {
}

input[type=radio]:checked + .llradio:before {
}

.sorterradio {
    display: none;
}

.checkbtn {
    text-align: center;
    width: 30%;
    display: inline-block;
}

.namebg {
    height: 70px;
    background-repeat: no-repeat;
    background-position: right center;
    margin-left: 50px;
    position: relative;
}

.nametext {
    position: absolute;
    top: 28px;
    left: 42px;
    font-size: 2em;
    line-height: 38px;
}

.nametext2 {
    position: absolute;
    top: 4px;
    left: 42px;
    font-size: 1.2em;
    line-height: 24px;
    color: #FFFFFF;
}

.raritybg {
    width: 94px;
    height: 80px;
    position: absolute;
    top: -5px;
    left: -52px;
    display: inline-block;
}

.Smilebg {
    background-image: url("/asset/assets/image/ui/common/com_win_27.png");
}

.Purebg {
    background-image: url("/asset/assets/image/ui/common/com_win_28.png");
}

.Coolbg {
    background-image: url("/asset/assets/image/ui/common/com_win_26.png");
}

.Allbg {
    background-image: url("/asset/assets/image/ui/common/com_win_31.png");
}

.SmileN {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_RarityN-02_AttrSmile-01.png");
}

.SmileR {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_RarityR-02_AttrSmile-01.png");
}

.SmileSR {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_RaritySR-02_AttrSmile-01.png");
}

.SmileSSR {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_RaritySSR-02_AttrSmile-01.png");
}

.SmileUR {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_RarityUR-02_AttrSmile-01.png");
}

.PureN {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_RarityN-02_AttrPure-01.png");
}

.PureR {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_RarityR-02_AttrPure-01.png");
}

.PureSR {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_RaritySR-02_AttrPure-01.png");
}

.PureSSR {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_RaritySSR-02_AttrPure-01.png");
}

.PureUR {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_RarityUR-02_AttrPure-01.png");
}

.CoolN {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_RarityN-02_AttrCool-01.png");
}

.CoolR {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_RarityR-02_AttrCool-01.png");
}

.CoolSR {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_RaritySR-02_AttrCool-01.png");
}

.CoolSSR {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_RaritySSR-02_AttrCool-01.png");
}

.CoolUR {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_RarityUR-02_AttrCool-01.png");
}

.AllN {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_RarityN-02_AttrSupport-01.png");
}

.AllR {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_RarityR-02_AttrSupport-01.png");
}

.AllSR {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_RaritySR-02_AttrSupport-01.png");
}

.AllSSR {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_RaritySSR-02_AttrSupport-01.png");
}

.AllUR {
    background-image: url("/asset/assets/image/gui/common/Common_Icon_RarityUR-02_AttrSupport-01.png");
}

#card {
    display: block;
    width: 100%;
}

.cardinfo {
    border-image: url("/static/images/com_win_29.png") 0 4 repeat;
    background: transparent url("/static/images/com_win_29.png") repeat-y center center;
    padding: 6px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 0;
}

.tab-border {
    border-image: url("/static/images/com_win_29_1.png") 0 22 repeat;
    background: transparent url("/static/images/com_win_29_1.png") no-repeat center center;
    background-clip: content-box;
    border-left: 22px solid transparent;
    border-right: 22px solid transparent;
    border-top: 0;
    height: 20px;
}

#llTab {
    border-bottom: 0;
    position: relative;
    height: 58px;
}

#llTab > li {
    position: absolute;
    width: 52%;
    height: 100%;
}

#llTab > li > a {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
    background-clip: content-box;
    margin: 0;
    padding: 0;
    border-radius: 0;
    border-left: 22px solid #ffffff;
    border-right: 22px solid #ffffff;
    border-top: 0;
    border-bottom: 0;
}

#lltab1 {
    border-image: url("/static/images/tab/com_button_23.png") 0 22 repeat;
    background-image: url("/static/images/tab/com_button_23.png");
}

#lltab2 {
    border-image: url("/static/images/tab/com_button_25.png") 0 22 repeat;
    background-image: url("/static/images/tab/com_button_25.png");
}

#lltab1:hover, #lltab1:active {
    border-image: url("/static/images/tab/com_button_23se.png") 0 22 repeat;
    background-image: url("/static/images/tab/com_button_23se.png");
}

#lltab1.active {
    z-index: 1;
    border-image: url("/static/images/tab/com_button_24.png") 0 22 repeat;
    background-image: url("/static/images/tab/com_button_24.png");
}

#lltab2:hover, #lltab2:active {
    border-image: url("/static/images/tab/com_button_25se.png") 0 22 repeat;
    background-image: url("/static/images/tab/com_button_25se.png");
}

#lltab2.active {
    border-image: url("/static/images/tab/com_button_26.png") 0 22 repeat;
    background-image: url("/static/images/tab/com_button_26.png");
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: bolder;
}

.modal {
    margin-top: 50px;
}

.modal-body {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.llicon {
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
}

.hpicon {
    background-image: url("/asset/assets/image/ui/common/com_etc_196.png");
    flex: 1 1 78px;
    max-width: 78px;
}

.smileicon {
    background-image: url("/asset/assets/image/ui/common/com_etc_198.png");
    flex: 1 1 110px;
    max-width: 110px;
}

.pureicon {
    background-image: url("/asset/assets/image/ui/common/com_etc_199.png");
    flex: 1 1 110px;
    max-width: 110px;
}

.coolicon {
    background-image: url("/asset/assets/image/ui/common/com_etc_197.png");
    flex: 1 1 110px;
    max-width: 110px;
}

.deckinfo-llicon {
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    line-height: 38px;
    font-weight: bold;
}

.deckinfo-hpicon {
    background-image: url("/asset/assets/image/ui/common/com_etc_163.png");
    width: 158px;
    height: 38px;
    color: #ee5500;
    text-shadow: -1px -1px 0 #fff,
    0 -1px 0 #fff,
    1px -1px 0 #fff,
    1px 0 0 #fff,
    1px 1px 0 #fff,
    0 1px 0 #fff,
    -1px 1px 0 #fff,
    -1px 0 0 #fff;
}

.deckinfo-smileicon {
    background-image: url("/asset/assets/image/ui/common/com_etc_165.png");
    width: 236px;
    height: 38px;
    color: #ff6699;
}

.deckinfo-pureicon {
    background-image: url("/asset/assets/image/ui/common/com_etc_164.png");
    width: 236px;
    height: 38px;
    color: #00cc33;
}

.deckinfo-coolicon {
    background-image: url("/asset/assets/image/ui/common/com_etc_162.png");
    width: 236px;
    height: 38px;
    color: #0099ee;
}

.deckinfo-llicon small {
    color: #ff0000;
    margin-left: 12px;
    text-shadow: none;
}

.test2 .lltext {
    position: absolute;
    left: 33%;
    top: 0;
    bottom: 0;
    font-size: 150%;
    font-weight: bold;
}

.test5 {
    background-image: url("/asset/assets/image/ui/common/com_etc_280.png");
    background-repeat: repeat-x;
    padding-top: 4px;
    margin-top: 3px;
}

.test4 {
    background-image: url("/asset/assets/image/ui/common/com_etc_280.png");
    background-repeat: repeat-x;
    padding-top: 4px;
    margin-top: 3px;
}

.cardbtngroup {
}

.cardbtngroup p {
    margin: 0;
}

.cardbtngroup a {
    display: inline-block;
}

.cardinfo p {
    margin-bottom: 5px;
}

@media (min-width: 768px) {
    ::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
        border-radius: 999px;
        border: 1px solid #444444;
        background-color: #444444;
    }

    ::-webkit-scrollbar-track {
        box-shadow: 1px 1px 5px rgba(0, 0, 0, .2) inset;
    }

    ::-webkit-scrollbar-thumb {
        min-height: 20px;
        background-clip: content-box;
        background-color: #ffbb2b;
    }

    ::-webkit-scrollbar-corner {
        background: transparent;
    }
}

.card-header > a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #ffffff;
}

.panel-default > .panel-heading, .panel-primary > .panel-heading {
}

.panel-primary, .panel-default {
}

.closebtn {
    position: fixed;
    top: 12px;
    left: 16px;
    background-image: url("/asset/assets/image/ui/common/com_button_01.png");
    background-repeat: no-repeat;
    width: 86px;
    height: 58px;
    z-index: 9999;
}

.closebtn:hover, .closebtn:active {
    background-image: url("/asset/assets/image/ui/common/com_button_01se.png");
}

.fancybox-nav {
    width: 26px;
}

.deckinfo {
    font-size: 24px;
}

.deckinfo span {
    padding-left: 40px;
}

.decklist-item {
    text-align: center;
    color: #f75506;
    text-shadow: 0 0 1px #ffffff;
}

.deckrow {
    position: relative;
    z-index: 1;
    cursor: pointer;
    padding: 12px;
    width: 100%;
}

.deck-bg {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    z-index: -1;
    transition: background-color 500ms;
}

#nodeck, .deckrow > input[type=radio] {
    display: none;
}

.deckrow > input[type=radio] + .deck-bg {
}

.deckrow > input[type=radio]:checked + .deck-bg {
}

.deckinfo-btngroup {
    position: relative;
    bottom: -10px;
    margin-right: -11px;
    margin-left: -11px;
}

.deckinfo-btngroup2 {
    position: relative;
    bottom: -20px;
    margin-right: -20px;
    margin-left: -20px;
}

.deckinfo-btngroup2 > a,
.deckinfo-btngroup > a,
.deckinfo-btngroup2 > button,
.deckinfo-btngroup > button {
    width: 50%;
    background-color: transparent;
}

.deckinfo-btngroup2 > .vline, .deckinfo-btngroup > .vline {
    position: absolute;
    left: 50%;
    top: -1px;
    height: 50px;
    width: 1px;
}

.has-back {
    max-height: 56px;
    padding-top: 0;
    padding-bottom: 0;
}

.backbtn {
    background-color: transparent;
    background-image: url("/asset/assets/image/ui/common/com_button_01.png");
    width: 86px;
    height: 58px;
}

.backbtn:hover, .backbtn:active {
    background-image: url("/asset/assets/image/ui/common/com_button_01se.png");
}

#sound_download a {
    word-break: break-all;
}

.llbtn-type {
    background: url("/asset/assets/image/gui/common/Common_TypeButton-01_Base-01.png") no-repeat;
    width: 70px;
    height: 36px;
    border: 0;
    cursor: pointer;
}

.namebg .llbtn-type {
    position: absolute;
    right: 14px;
    top: 30px;
}

.typeinfowell {
    background: url("/asset/assets/image/ui/common/com_win_45.png");
    width: 310px;
    height: 68px;
    padding: 18px 0 18px 10px;
}

.cardtypeinfo {
    background: url("/asset/assets/image/ui/common/com_etc_294.png");
    width: 88px;
    height: 36px;
    float: left;
    margin-right: 12px;
    padding-left: 8px;
}

.cardtypeinfo img {
    height: 100%;
}

#cardtypecollapse {
    position: absolute;
    right: 0;
    z-index: 99
}

body {
    margin-bottom: 64px;
}

.footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 1;
    width: 100%;
}

.footer .livebtn {
    flex: 0 0 auto;
}

.footerbtn {
    flex: 0 0 128px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

@media (max-width: 944px) {
    .footer .livebtn {
        flex: 1 1 176px;
    }

    .footerbtn {
        flex: 1 1 128px;
    }
}

.footerbtn.b_03 {
    background-image: url("/static/images/footer/com_button_03.png");
}

.footerbtn.b_04 {
    background-image: url("/static/images/footer/com_button_04.png");
}

.footerbtn.b_05 {
    background-image: url("/static/images/footer/com_button_05.png");
}

.footerbtn.b_06 {
    background-image: url("/static/images/footer/com_button_06.png");
}

.footerbtn.b_07 {
    background-image: url("/static/images/footer/com_button_07.png");
}

.footerbtn.b_08 {
    background-image: url("/static/images/footer/com_button_08.png");
}

.footerbtn.b_09 {
    background-image: url("/static/images/footer/com_button_09.png");
}

.footerbtn.b_03:hover {
    background-image: url("/static/images/footer/com_button_03se.png");
}

.footerbtn.b_04:hover {
    background-image: url("/static/images/footer/com_button_04se.png");
}

.footerbtn.b_05:hover {
    background-image: url("/static/images/footer/com_button_05se.png");
}

.footerbtn.b_06:hover {
    background-image: url("/static/images/footer/com_button_06se.png");
}

.footerbtn.b_07:hover {
    background-image: url("/static/images/footer/com_button_07se.png");
}

.footerbtn.b_08:hover {
    background-image: url("/static/images/footer/com_button_08se.png");
}

.footerbtn.b_09:hover {
    background-image: url("/static/images/footer/com_button_09se.png");
}

.footerbtn.b_03.footer_btn_di {
    background-image: url("/static/images/footer/com_button_03di.png");
}

.footerbtn.b_08.footer_btn_di {
    background-image: url("/static/images/footer/com_button_08di.png");
}

.eventscenariolist {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}

.eventscenariocard {
    text-align: center;
}

@media (max-width: 768px) {
    .eventscenariolist {
        display: block;
        overflow-x: hidden;
    }

    .eventscenariocard h3 {
        white-space: normal;
    }
}

.listcardicon {
    display: inline-block;
    width: 100%;
    cursor: pointer;
}

.listcardicon .img-container {
    width: 50%;
    float: left;
    position: relative;
}

.listcardicon .img-container > img {
    width: 100%;
    max-width: 128px;
    height: auto;
}

.rightcardlist {
    text-align: center;
}

.rightcardlist > .cardlist {
    margin: 10px 0;
    font-size: 14px;
}

.panel-attr1 {
    border-color: #da0d74;
}

.panel-attr2 {
    border-color: #2da65a;
}

.panel-attr3 {
    border-color: #0f95e2;
}

.panel-attr5 {
    border-color: #db65ff;
}

.livelist {
    margin-bottom: 12px;
    padding-right: 6px;
    padding-left: 6px;
}

.difficulties-table {
    width: 100%;
}

.livelist .card-body {
    padding: 0;
    overflow: hidden;
}

.livelist-attribute {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: 1em;
    height: 1em;
    display: inline-flex;
    vertical-align: middle;
}

.cardlist-attribute {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: 2em;
    height: 2em;
    display: inline-flex;
    vertical-align: middle;
}

.livelist-sw {
    background-image: url("/static/images/sw.png");
}

.livelist-5keys {
    background-image: url("/static/images/5icon.png");
}

.rightcardlist hr {
    margin: 0;
}

.rightcardlist .card {
    width: 100%;
    height: 100%;
}

#icon-list button {
    width: 100%;
    height: 100%;
}

#icon-preview, #icon-preview2, #icon-preview3 {
    width: 128px;
    height: 128px;
    margin: 0 auto;
    background-color: #000000;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
}

.btn-change-icon {
    width: 128px;
    height: 128px;
    background-color: #000000;
    background-position: center;
    background-repeat: no-repeat;
}

.award {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-direction: row;
    -webkit-flex-direction: row;
    text-align: center;
}

.background {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    flex-direction: row;
    -webkit-flex-direction: row;
    text-align: center;
    overflow-x: auto;
}

.stamp {
    text-align: center;
    overflow-x: auto;
}

.stamp_row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    flex-direction: row;
    -webkit-flex-direction: row;
    text-align: center;
}

.panel-award, .panel-achievement {
    border: 1px solid;
    border-color: lightgrey;
    border-radius: 0;
}

.panel-background {
    flex: 1;
    border: 1px solid;
    border-color: lightgrey;
    border-radius: 0;
    white-space: nowrap;
}

.livelist .img-container {
    position: relative;
    width: 100%;
    height: auto;
}

.livelist .img-container > img {
    width: 100%;
    max-width: 256px;
    height: auto;
}

.jacket_border {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
}

.swing_border {
    background-image: url('/asset/assets/image/ui/live/l_win_46.png');
}

.five_keys_border {
    background-image: url('/asset/assets/image/gui/live/Live_SelectFrame-07_Base-01.png');
}

.medley {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-direction: row;
    -webkit-flex-direction: row;
    text-align: center;
}

.panel-medley, .panel-award {
    padding: 0;
}

.panel-achievement {
    width: 100%;
    padding-left: 15px;
}

.ll_plus_minus_button {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: 1.5em;
    height: 1.5em;
    display: inline-flex;
    vertical-align: middle;
}

.ll_minus_button {
    background-image: url('/static/images/set_button_34.png');
}

.ll_minus_button:hover, .ll_minus_button:active {
    background-image: url('/static/images/set_button_34se.png');
}

.ll_plus_button {
    background-image: url('/static/images/set_button_33.png');
}

.ll_plus_button:hover, .ll_plus_button:active {
    background-image: url('/static/images/set_button_33se.png');
}

.ll_play_se_button {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;

    width: 1.5em;
    height: 1.5em;
    display: inline-flex;
    vertical-align: middle;
    background-image: url('/static/images/set_button_53.png');
}

.ll_play_se_button:hover, .ll_play_se_button:active {
    background-image: url('/static/images/set_button_53se.png');
}

.live-character-container {
    max-width: 11%;
}

.lefttoolbox #sorter {
    margin-bottom: 10px;
}

.rightcardlist .searchbox {
    margin-bottom: 10px;
}

.tag_filter_container {
    width: 100%;
    text-align: left;
}

@media (max-width: 768px) {
    .tag_filter {
        width: 100%;
    }
}

@media (min-width: 768px) {
    .tag_filter_description {
        display: inline-block;
    }
}

.achievement_left {
    float: left;
    width: 64px;
    max-height: 80vh;
    overflow-y: auto;
}

.achievement_left::-webkit-scrollbar {
    display: none;
}

.achievement_right {
    margin-left: 79px;
    max-height: 80vh;
    overflow-y: auto;
}

.input-group input.llform {
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    border: 1px solid #ffffff;
}

#pages {
    flex-wrap: wrap;
}

.lllist {
    display: block;
    width: 432px;
    max-width: 100%;
    margin: 0 auto;
}

.lllist .list-group-item {
    background: none;
    border: none;
    padding: 6px 0;
    cursor: pointer;
}

.layer_1_bg {
    position: relative;
    background-image: url("/asset/assets/image/ui/scenario/s_button_03.png");
    height: 80px;
    border-left: 26px solid;
    border-right: 26px solid;
    border-top: 0;
    border-bottom: 0;
    border-image: url("/asset/assets/image/ui/scenario/s_button_03.png") 0 26 repeat;
    background-repeat: no-repeat;
    background-position: center;
    background-clip: content-box;
}

.layer_1_bg:hover {
    background-image: url("/asset/assets/image/ui/scenario/s_button_03se.png");
    border-image: url("/asset/assets/image/ui/scenario/s_button_03se.png") 0 26 repeat;
}

.layer_1_bg .name {
    position: absolute;
    width: 100%;
    height: 46px;
    line-height: 46px;
    top: 6px;
    left: 0px;
    font-size: 22px;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 1px 1px #000000;
}

.layer_1_bg .outline {
    position: absolute;
    width: 100%;
    height: 18px;
    line-height: 18px;
    bottom: 10px;
    left: 0;
    font-size: 12px;
    white-space: nowrap;
    color: #000000;
    overflow: hidden;
    text-overflow: ellipsis;
}

.layer_1_bg .icon {
    position: absolute;
    width: 130px;
    height: 90px;
    right: -30px;
    bottom: -4px;
}

.layer_2_bg {
    position: relative;
    width: 428px;
    height: 132px;
    max-width: 100%;
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.full-screen {
    position: absolute;
    left: 0;
    top: 96px;
    height: 720px;
    overflow: hidden auto;
}

.btn-transparent {
    background-color: transparent;
}

.sound-link {
    word-break: break-all;
}

.badge {
    font-size: 12px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hptext {
    color: #ee5500;
    text-shadow: -1px -1px 0 #fff,
                  0   -1px 0 #fff,
                  1px -1px 0 #fff,
                  1px  0   0 #fff,
                  1px  1px 0 #fff,
                  0    1px 0 #fff,
                 -1px  1px 0 #fff,
                 -1px  0   0 #fff;
}

.cardlist_yelltext {
  position: absolute;
  color: #ff6699;
  text-shadow: -1px -1px 0 #fff,
                0   -1px 0 #fff,
                1px -1px 0 #fff,
                1px  0   0 #fff,
                1px  1px 0 #fff,
                0    1px 0 #fff,
               -1px  1px 0 #fff,
               -1px  0   0 #fff;
    margin: auto;
    right: 0;
    bottom: 0;
    left: 0;
    text-indent: 20px;
    letter-spacing: 3px;
}

.test2 .hptext {
    left: 52%;
}

.smiletext {
    color: #ff6699;
}

.puretext {
    color: #00cc33;
}

.cooltext {
    color: #0099ee;
}

.panel-secretbox {
    border-radius: 0;
}

.scenariolist-header {
  margin: 0 auto;
  padding: 0;
  max-width: 436px
}

.navbar-icon {
  width: 16px;
  height: 16px;
}

@media (max-width: 768px) {
  .top-notice {
    font-size: 0.7em;
  }
}