/* body{
    transition-property: background, color;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
} */
body{
    font-family: 'Roboto', 'Noto Sans TC', '微軟正黑體', 'Arial', sans-serif;
}

.collapse-header{
    cursor: pointer;
}
.collapse-header::before {
    content: "▷";
}
.collapse-header:has(+ div.collapse.show)::before {
    content: "▼";
}
.collapsing {
    transition: height .15s ease;
}
  

.title-link{
    color: #000;
    text-decoration: none;
}
.theme-dark .title-link{
    color: #fff;
}

.btn-check:checked + .btn, .btn.show{
    background-color: #2a7fff;
    border-color: #2a7fff;
}
.btn-outline-primary{
    background-color: #e5e5e5;
    border-color: #e5e5e5;
    color: #000;
}
.btn-check + .btn:hover{
    background-color: #0b5ed7;
    border-color: #0b5ed7;
    color: #fff;
}

.theme-dark .btn-check:checked + .btn, .theme-dark .btn.show{
    background-color: #2a7fff;
    border-color: #2a7fff;
}
.theme-dark .btn-outline-primary{
    background-color: #474747;
    border-color: #474747;
    color: #c6c6c6;
}
.theme-dark .btn-check + .btn:hover, .theme-dark .btn-outline-primary:hover{
    background-color: #0b5ed7;
    border-color: #0b5ed7;
    color: #e9e9e9;
}
.theme-dark .popover{
    --bs-popover-border-color: #e4e4e4;
}

.verticalLine{
    border-left: 1px solid #666;
    padding-left: 1px;
    padding-right: 1rem;
    content: ' ';
    margin-left: 1rem;
    min-height: 50%;
}

.form-check-label, .form-check-input{
    cursor: pointer;
}

/* .resultTable tbody tr:nth-child(even) td{
    background: #f0f9ff;
} */

.resultTable {
    border: 0px solid #000;
}
.theme-dark .resultTable, .theme-dark .resultTable tbody th{
    border: 0px solid #555;
}

.resultTable tr, .resultTable th, .resultTable td{
    border: 1px solid #000;
    cursor: pointer;
    padding: 3px;
    /* overflow: hidden; */
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    /* max-width: fit-content; */
    min-width: 3rem;
}
.resultTable td{
    text-align: center;
}
.theme-dark .resultTable tr, .theme-dark .resultTable th, .theme-dark .resultTable td{
    border: 1px solid #555;
}

.resultTable thead, .resultTable tbody, .resultTable tfoot tr, .resultTable tbody th{
    border: 2px solid #000;
}

.resultTable th.selected, .resultTable td.selected{
    background-color:  #dafcd3;
    font-weight: 800;
    filter: drop-shadow(0px 0px 2px rgba(0, 0, 0))
}
.resultTable th.selected.hp, .resultTable td.selected.hp{
    background-color:  #dafcd3;
}

.resultTable th.selected.atk, .resultTable td.selected.atk{
    background-color:  #ffcbcb;
}

.resultTable td.higher.hp{
    background-color:  rgb(240, 255, 243);
}
.resultTable td.higher.atk{
    background-color:  rgb(255, 248, 245);
}

.resultTable td.skill{
    background-color:  #ffe5e5;
}

.resultTable td.guard{
    background-color:  #c4c4c4;
}

.theme-dark .resultTable td.skill{
    background-color:  #6e1212;
}
.theme-dark .resultTable td.guard{
    background-color:  #555;
}

.resultTable th div{
    position: relative;
}

.resultTable th label{
    cursor: pointer;
}

.resultTable th.summary, .resultTable td.summary{
    font-weight: 800;
}

.resultTable th.ele-light{
    background-color: #f8ecbc;
} 
.resultTable th.ele-dark{
    background-color: #dcd0ff;
} 
.resultTable th.ele-fire{
    background-color: #ffd0d7;
} 
.resultTable th.ele-water{
    background-color: #d0e5ff;
} 
.resultTable th.ele-wood{
    background-color: #bae9c8;
} 

.theme-dark .resultTable th.ele-light{
    background-color: #6c5600;
} 
.theme-dark .resultTable th.ele-dark{
    background-color: #3f185f;
} 
.theme-dark .resultTable th.ele-fire{
    background-color: #6c1f2a;
} 
.theme-dark .resultTable th.ele-water{
    background-color: #2f4781;
} 
.theme-dark .resultTable th.ele-wood{
    background-color: #0f5b27;
} 

.resultTable th input[type='checkbox']{
    width: 1.3rem;
    height: 1.3rem;
}

/* .resultTable th.ele-dark div::before{
    content: "";
    background-image: url(https://static.miraheze.org/nucarnivalwiki/thumb/d/d8/Type_-_Dark.png/33px-Type_-_Dark.png);
    width: 20px;
    height: 20px;
    display: inline-block;
    position: absolute;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    left: 10px;
} */  

.info-attack{
    color: #aa2121;
}
.info-buff{
    color: #198754;
}
.info-debuff{
    color: #414141;
}

.theme-dark .info-attack{
    color: #ffa9a9;
}
.theme-dark .info-buff{
    color: #71dcaa;
}
.theme-dark .info-debuff{
    color: #e8e8e8;
}

.card-swap-icon{
    position: relative;
}
.card-swap-icon > .fa-solid{
    position: absolute;
    right: -1.3rem;
    font-size: 1.3rem;
    color: #98a8e6;
    cursor: pointer;    
}
.card-swap-icon > .fa-solid:hover{
    color: #9a4ce8;
}
.card-swap-icon > .fa-solid:active{
    color: #f0418d;
}

.popover{
    max-width: 100%;
}

.card-block{
    display: inline-block;
    text-align: center;
    white-space: normal;

    padding: 0.375rem;
    border-radius: 0.5rem;
    vertical-align: middle;
    cursor: pointer;
    background-color: none;
    transition: all .25s ease-in-out;
}

#cardSelector .card-block{
    width: 200px; 
    height: 200px; 
}

.card-block:hover{
    background-color: #71b6ff75;
}

.card-block:hover .card-name{
    background-color: #1679d0;
    font-weight: bold;
    font-size: 1.3rem;
}

.card-block:hover .card-image-div{
    transform: scale(1.1);
}

.card-image-div{
    position: relative;
    display: inline-block;
    width: 150px;
    height: 150px;
    transition: all .15s ease-in-out;
}

.card-image{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    border-radius: 0.8rem;
}

.card-icon-element{
    position: absolute;
    top: 6px;
    left: 5px;
    z-index: 130;
}

.card-icon-class{
    position: absolute;
    width: 45px;
    top: 5px;
    right: 1px;
    filter: drop-shadow(0 0 0.2rem #646464);
    z-index: 120;
}

.card-icon-rarity{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 110;
    filter: drop-shadow(0 0 0.2rem #000000b2);
    border-radius: 0.8rem;
}

.card-block .card-icon-btn{
    position: absolute;
    top: 0px;
    z-index: 200;
    /* display: none; */
    font-size: 0rem;
    filter: drop-shadow(1px 1px 1px #000000) drop-shadow(-1px -1px 2px #000000);
    opacity: 0;
    transition: opacity .25s ease-in-out;
}

.card-block .card-icon-remove-btn{
    right: -0.5rem;
 }
.card-block .card-icon-remove-btn .fa-xmark{
    color:rgb(255, 255, 255);
}
.card-block .card-icon-remove-btn .fa-square{
    color:rgb(233, 91, 91);
}

.card-block .card-icon-info-btn{
    right: 2rem;
 }
.card-block .card-icon-info-btn .fa-info{
    color:rgb(255, 255, 255);
}
.card-block .card-icon-info-btn .fa-square{
    color:rgb(75, 114, 255);
}

.card-block .card-icon-move-btn{
    left: 0rem;
    cursor: grab;
 }
.card-block .card-icon-move-btn .fa-up-down-left-right{
    color:rgb(255, 255, 255);
}
.card-block .card-icon-move-btn .fa-square{
    color:rgb(0, 0, 0);
}
.sortable-chosen .card-block .card-icon-move-btn{
    cursor: grabbing;
}
.sortable-chosen .card-block .card-icon-move-btn .fa-square{
    color:rgb(105, 105, 105);
}
.resultTable th.charItem.sortable-swap-highlight {
    filter: brightness(0.8);
}

.card-block:hover .card-icon-btn{
    font-size: 1.2rem;
    display: block;
    opacity: 0.85;
}

.card-block:hover .card-icon-btn:hover{
    opacity: 1;
}


.card-name{
    font-size: 1.25rem;
    text-shadow: 1px 1px 2px black;
    white-space: nowrap;
    color: white;
    background-color: #595959;
    border-radius: 10px;
    width: 150px;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    filter: drop-shadow(0px 0px 3px #0000008c);
    transition: all .25s ease-in-out;
}

#cardSelector .btn, #cardSelector input, #cardSelector button {
    font-size: 1.15rem;
}

#cardSelector .modal-dialog{
    max-width: 90%;
}
#cardSelector .modal-body{
    display: flex; 
    flex-direction: row;
}
#cardSelector .filter-panel{
    display: inline-flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 30%;
    min-height: 100px;
    transition: all .25s ease-in-out;
    position: sticky;
    top: 0;
}
#cardSelector .cardFilter-searchForm{
    width: 70%;
}
#cardSelector .card-panel{
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 100px;
    position: sticky;
    top: 0;
}
.cardFilter-element span, .cardFilter-clazz span{
    margin-right: 1rem;
}
.cardFilter-element label, .cardFilter-clazz label{
    cursor: pointer;
}
.cardFilter-element label img{
    width: 35px;
    height: 35px;
    filter: drop-shadow(rgb(100, 100, 100) 0px 0px 0.2rem) drop-shadow(rgb(250, 250, 250) 0px 0px 0.2rem) brightness(0.8);
    opacity: 0.5;
    transition: all .25s ease-in-out;
    background-color: black;
    border-radius: 50%;
}
.cardFilter-element input:checked + label img{
    opacity: 1;
    filter: drop-shadow(rgb(35, 35, 35) 0px 0px 0.25rem) drop-shadow(rgb(250, 250, 250) 0px 0px 0.25rem) brightness(1);
}

.cardFilter-clazz label img{
    width: 35px;
    height: 35px;
    filter: drop-shadow(rgb(100, 100, 100) 0px 0px 0.2rem) drop-shadow(rgb(250, 250, 250) 0px 0px 0.2rem) brightness(0.8);
    opacity: 0.5;
    transition: all .25s ease-in-out;
    background-color: black;
    border-radius: 50%;
}
.cardFilter-clazz input:checked + label img{
    opacity: 1;
    filter: drop-shadow(rgb(35, 35, 35) 0px 0px 0.25rem) drop-shadow(rgb(250, 250, 250) 0px 0px 0.25rem) brightness(1);
}

:root {
    --yakumo-bg-color: #e15353;
    --edmond-bg-color: #2173dc;
    --olivine-bg-color: #2fbf68;
    --quincy-bg-color: #d7ab2a;
    --kuya-bg-color: #9c6ad8;
    --garu-bg-color: #955f5f;
    --blade-bg-color: #b49eba;
    --dante-bg-color: #e52b2b;
    --rei-bg-color: #7b7b7b;
    --aster-bg-color: #f283b2;
    --morvay-bg-color: #940161;
    --eiden-bg-color: #63a5df;
}


.cardFilter-char.image label{
    cursor: pointer;
    font-size: 1.3rem;
    border-radius: 1rem;
    filter: brightness(0.9);
    opacity: 0.65;
    max-width: 80px;
    transition: all .15s ease-in-out;
    transform: scale(0.9);
}

.cardFilter-char.image input:hover + label {
    opacity: 1;
    filter: brightness(1);
    font-weight: 600;
}

.cardFilter-char.image input:checked + label {
    opacity: 1;
    font-weight: 600;
    /* filter: brightness(1); */
    /* border: 3px double #000; */
}

.cardFilter-char.image .filter-yakumo input:checked + label {
    filter: drop-shadow(0 0 0.25rem var(--yakumo-bg-color)) brightness(1)
}
.cardFilter-char.image .filter-edmond input:checked + label {
    filter: drop-shadow(0 0 0.25rem var(--edmond-bg-color)) brightness(1)
}
.cardFilter-char.image .filter-olivine input:checked + label {
    filter: drop-shadow(0 0 0.25rem var(--olivine-bg-color)) brightness(1)
}
.cardFilter-char.image .filter-quincy input:checked + label {
    filter: drop-shadow(0 0 0.25rem var(--quincy-bg-color)) brightness(1)
}
.cardFilter-char.image .filter-kuya input:checked + label {
    filter: drop-shadow(0 0 0.25rem var(--kuya-bg-color)) brightness(1)
}
.cardFilter-char.image .filter-garu input:checked + label {
    filter: drop-shadow(0 0 0.25rem var(--garu-bg-color)) brightness(1)
}
.cardFilter-char.image .filter-blade input:checked + label {
    filter: drop-shadow(0 0 0.25rem var(--blade-bg-color)) brightness(1)
}
.cardFilter-char.image .filter-dante input:checked + label {
    filter: drop-shadow(0 0 0.25rem var(--dante-bg-color)) brightness(1)
}
.cardFilter-char.image .filter-rei input:checked + label {
    filter: drop-shadow(0 0 0.25rem var(--rei-bg-color)) brightness(1)
}
.cardFilter-char.image .filter-aster input:checked + label {
    filter: drop-shadow(0 0 0.25rem var(--aster-bg-color)) brightness(1)
}
.cardFilter-char.image .filter-morvay input:checked + label {
    filter: drop-shadow(0 0 0.25rem var(--morvay-bg-color)) brightness(1)
}
.cardFilter-char.image .filter-eiden input:checked + label {
    filter: drop-shadow(0 0 0.25rem var(--eiden-bg-color)) brightness(1)
}

.cardFilter-char.pixel span{
    margin-right: 0.2rem;
}
.cardFilter-char.pixel label{
    cursor: pointer;
    font-size: 1.3rem;
    min-width: 60px;
    border-radius: 1rem;
    border: 3px solid transparent;
    padding: 3px;
    transition: all .25s ease-in-out;
}
.cardFilter-char.pixel label {
    opacity: 0.7;
}
.cardFilter-char.pixel input:checked + label {
    opacity: 1;
    font-weight: 600;
    border: 3px double #000;
}
.cardFilter-char.pixel input:checked + label {
    filter: drop-shadow(0 0 0.15rem #ffca86) brightness(1)
}

.cardFilter-char.text .btn {
    color: white;
    border: 0px;
    opacity: 0.5;
    transition: all .25s ease-in-out;
}
.cardFilter-char.text input:checked + .btn {
    opacity: 1;
    filter: drop-shadow(0 0 0.2rem #646464) brightness(1);
    font-weight: 900;
}

.cardFilter-char.text .filter-yakumo .btn {
    background-color: var(--yakumo-bg-color);
}
.cardFilter-char.text .filter-edmond .btn {
    background-color: var(--edmond-bg-color);
}
.cardFilter-char.text .filter-olivine .btn {
    background-color: var(--olivine-bg-color);
}
.cardFilter-char.text .filter-quincy .btn {
    background-color: var(--quincy-bg-color);
}
.cardFilter-char.text .filter-kuya .btn {
    background-color: var(--kuya-bg-color);
}
.cardFilter-char.text .filter-garu .btn {
    background-color: var(--garu-bg-color);
}
.cardFilter-char.text .filter-blade .btn {
    background-color: var(--blade-bg-color);
}
.cardFilter-char.text .filter-dante .btn {
    background-color: var(--dante-bg-color);
}
.cardFilter-char.text .filter-rei .btn {
    background-color: var(--rei-bg-color);
}
.cardFilter-char.text .filter-aster .btn {
    background-color: var(--aster-bg-color);
}
.cardFilter-char.text .filter-morvay .btn {
    background-color: var(--morvay-bg-color);
}
.cardFilter-char.text .filter-eiden .btn {
    background-color: var(--eiden-bg-color);
}

#cardDetailPanel.offcanvas{
    z-index: 2045;
    font-size: 1.2rem;
    width: 45%;
}
#cardDetailPanel h4{
    font-weight: 800;
}
#cardDetailPanel .icon{
    cursor: pointer;
    font-size: 3rem;
    color:#414141;
}
#cardDetailPanel .icon:hover{
    font-size: 3.2rem;
    color: #000;
}
.theme-dark #cardDetailPanel .icon{
    color:#b9b9b9;
}
.theme-dark #cardDetailPanel .icon:hover{
    color: #fff;
}


.offcanvas-backdrop{
    z-index: 2040;
}

.resultTable .card-block{
    max-height: 195px;
}
.resultTable .card-block.disabled{
    opacity: 0.6;
}

.popover{
    font-size: 1rem;
}

#damageRecordModal .modal-dialog {
    max-width: 90%;
}

.card-block .card-icon-star-container {
    position: absolute;
    display: flex;
    bottom: 0px;
    left: 2px;
    z-index: 120;
    filter: drop-shadow(1px 1px 2px #000000e4) drop-shadow(-1px -1px 2px #000000e4);
    border-radius: 0.8rem;
}
.card-icon-star {
    margin-right: 2px;
}

.resultTable #inputTurn{
    width: 4rem; font-size: 1.3rem; text-align: center;
}

#damageRecordModal .table{
    table-layout: auto;
}
#damageRecordModal .table th, td{
    min-width: 3rem;
}
#damageRecordModal .table th{
    user-select: none;
    background-color: #e8f2ff;
}

.theme-dark #damageRecordModal .table th{
    background-color: #49515b;
}

.btn {
    white-space: nowrap;
}

#damageRecordModal .card-image-div{
    width: 95px;
    height: 95px;
}
#damageRecordModal .card-block.big .card-image-div{
    width: 150px;
    height: 150px;
}
#damageRecordModal .card-block.small .card-image-div{
    width: 60px;
    height: 60px;
}
#damageRecordModal .card-block.none .card-image-div{
    width: 0px;
    height: 0px;
}


#damageRecordModal img.card-image, #damageRecordModal .resultTable img.card-icon-rarity{
    width: 100%;
    height: 100%;
}
#damageRecordModal img{
    width: 30%;
    height: 30%;
}
#damageRecordModal .card-icon-element {
    top: 5%;
    left: 3%;
}

#damageRecordModal .card-block .card-icon-star-container {
    width: 100%;
    height: 10%;
    filter: drop-shadow(1px 1px 1px #000000e4) drop-shadow(-1px -1px 1px #000000e4);
}
#damageRecordModal .card-block .card-icon-star-container img {
    width: auto;
    height: 100%;
}
#damageRecordModal .card-block .card-name {
    font-size: 1rem;
    width: max-content;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
#damageRecordModal .card-block.big .card-name {
    font-size: 1.3rem;
}
#damageRecordModal .card-block.small .card-name {
    font-size: 0rem;
    display: none;
}
#damageRecordModal .card-block.none .card-name {
    background-color: #fff;
    color: #000;
    filter: none;
    text-shadow: none;
    font-weight: 800;
}
.theme-dark #damageRecordModal .card-block.none .card-name {
    background-color: #000;
    color: #fff;
}

#damageRecordModal .card-block{
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}
#damageRecordModal .card-block:hover{
    background-color: initial;
}

#damageRecordModal .modal-body{
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#damageRecordModal .resultTable td{
    cursor: default;
}
#damageRecordModal .filter-panel{
    overflow-y: hidden;
    overflow-x: auto;
    flex-shrink: 1;
    flex-grow: 0;
    flex-basis: auto;
    min-height: 5rem;
    max-height: 5rem;
}
#damageRecordModal .card-panel{
    overflow-y: auto;
    min-height: 100px;
}

#damageRecordModal .form-control{
    width: auto;
}
#damageRecordModal .filter-panel button, #damageRecordModal .filter-panel input, #damageRecordModal .filter-panel span{
    margin-left: 10px;
    margin-right: 10px;
}
#damageRecordModal .table .card-cell{
    width: 80px;
}

#damageRecordModal .table textarea{
    width: 100%;
}

#damageRecordModal .heart-checkbox + label{
    cursor: pointer;
    font-size: 2rem;
}
#damageRecordModal .heart-checkbox:checked + label{
    color: rgb(255, 84, 84);
}

#damageRecordModal .col-isFav{
    max-width: 4rem;
}
#damageRecordModal .col-turn{
    max-width: 5rem;
}
#damageRecordModal .col-total{
    max-width: 6rem;
}

#damageRecordModal .search-number{
    width: 8rem;
}
#damageRecordModal .search-text{
    width: 20rem;
}
#damageRecordModal td.col-turn{
    cursor: pointer;
}
#damageRecordModal td.col-teamname{
    cursor: text;
}
#damageRecordModal td.col-teamname .tag{
    cursor: pointer;
    border-radius: 10px;
    background-color: rgb(188, 62, 62);
    color: white;
    padding: 3px;
    padding-left: 8px;
    padding-right: 8px;
    margin: 3px;
}

.drag-handler, .drag-handler label {
    cursor: grab;
}
.drag-bar-container{
    position: relative;
    height: 20px;
}
.drag-bar-container i{
    position: absolute;
    top: 0px;
    left: 0px;
}
.drag-bar {
    position: absolute;
    top: 0px;
    left: 10%;
    height: 10px;
    border-radius: 10px;
    width: 80%;
    background: linear-gradient( 0deg, #919191 50%, #c5c5c5 50% );
    border: 1px solid;
    background-size: 5px 4px;
}
.theme-dark .drag-bar {
    background: linear-gradient( 0deg, #3d3d3d 50%, #767676 50% );
    border-color: #828282;
}

#charInputList .card-data{
    margin-left: auto;
    margin-right: auto;
}
#charInputList .drag-handler .form-check{
    padding: 0px;

}
#charInputList .sortable-swap-highlight {
    background: #fd737375;
    border-radius: 15px;
}
#charInputList .sortable-chosen{
    background: #7398fd75;
    border-radius: 15px;
}
#charInputList .charItem .btn{
    width: 90%;
    margin-left: 5%;
}
.sortable-chosen .drag-handler, .sortable-chosen .drag-handler label {
    cursor: grabbing;
}
.sortable-chosen .drag-handler .drag-bar{
    background: linear-gradient( 0deg, #3b75ff 50%, #47baff 50% );
}
.sortable-chosen .drag-handler i{
    color: #0044e2;
}
.sortable-swap-highlight .drag-handler .drag-bar{
    background: linear-gradient( 0deg, #e05a5a 50%, #ec8686 50%);
}
.sortable-swap-highlight .drag-handler i{
    color: rgb(207, 71, 71);
}
.theme-btn{
    font-size: 1.25rem;
    cursor: pointer;
}
.theme-btn i{
    background-color: #ddd;
    color: #000;
    padding: 7px;
    margin: 15px;
    border-radius: 20%;
}
.theme-dark .theme-btn i{
    background-color: #999;
    color: #000;
}
.theme-btn:hover i, .theme-dark .theme-btn:hover i{
    background-color: rgb(80, 126, 255);
}

.card-order-icon{
    /* position: absolute !important; */
    bottom: -5px;
    left: -3px;
    font-size: 16px;
    font-weight: 1000;
    color: #00000086;
    border-radius: 1px solid #000;
    /* filter: drop-shadow(0px 0px 3px #0000004f); */
}
th .card-order-icon{
    position: absolute !important;
}
.card-order-icon .fa-stack-1x {
    font-size: 110%;
    color: #fff;
    top: -5px;
    left: 2px;
}

.theme-dark .card-order-icon{
    color: #ffffffc1;
    filter: drop-shadow(0px 0px 3px #ffffff7f);
}
.theme-dark .card-order-icon .fa-stack-1x {
    color: #000;
}

td.victoryTurn{
    font-weight: 900;
    background-color: #ffed8b;
}
.theme-dark td.victoryTurn{
    background-color: #897c36;
}
td.hpLockTurn{
    font-weight: 900;
    background-color: #c1cdff;
}
.theme-dark td.hpLockTurn{
    background-color: #496aab;
}


.enemyDescription{
    border: 1px solid #8d8d8d98;
    margin: 5px 0;
    padding: 0.8rem;
}
.enemyDescription .title{
    font-weight: 900;
    text-decoration: underline;
    margin-bottom: 0.5rem;
}
.enemyDescription pre{
    margin: 0;
    font-size: 1rem;
    font-family: 'Roboto', 'Noto Sans TC', '微軟正黑體', 'Arial', sans-serif;
}

.cardHp::before {
    content: "HP";
    color: #a4370d;
    font-size: 90%;
    margin: 0px 3px;
}
.cardHp{
    margin: 3px 0px;
}

.filter-icon-char-image{
    width: 68px;
    height: 68px;
    display: inline-block;
    background: url('../img/card-icon/image/char_icons.png');
}
.icon-yakumo{
    background-position: -344px -5px;
}
.icon-edmond{
    background-position: -36px -83px;
}
.icon-olivine{
    background-position: -138px -83px;
}
.icon-quincy {
    background-position: -242px -83px;
}
.icon-kuya{
    background-position: -344px -83px;
}
.icon-garu{
    background-position: -33px -163px;
}
.icon-blade{
    background-position: -138px -163px;
}
.icon-dante{
    background-position: -242px -163px;
}
.icon-rei{
    background-position: -344px -163px;
}
.icon-aster {
    background-position: -138px -2px;
}
.icon-morvay {
    background-position: -242px -2px;
}
.icon-eiden {
    background-position: -36px -2px;
}

#sortTable {
    font-size: 1.25rem;
}
#sortTable th {
    user-select: none;
    background-color: #e8f2ff;
}
#sortTable td {
    cursor: initial ;
}

.theme-dark #sortTable th {
    background-color: #49515b;
}

#sortTable .card-image-div{
    width: 95px;
    height: 95px;
}
#sortTable .card-block.big .card-image-div{
    width: 150px;
    height: 150px;
}
#sortTable .card-block.small .card-image-div{
    width: 60px;
    height: 60px;
}
#sortTable .card-block.none .card-image-div{
    width: 0px;
    height: 0px;
}


#sortTable img.card-image, #sortTable img.card-icon-rarity{
    width: 100%;
    height: 100%;
}
#sortTable img{
    width: 30%;
    height: 30%;
}
#sortTable .card-icon-element {
    top: 5%;
    left: 3%;
}

#sortTable .card-block .card-icon-star-container {
    width: 100%;
    height: 10%;
    filter: drop-shadow(1px 1px 1px #000000e4) drop-shadow(-1px -1px 1px #000000e4);
}
#sortTable .card-block .card-icon-star-container img {
    width: auto;
    height: 100%;
}
#sortTable .card-block .card-name {
    font-size: 1rem;
    width: max-content;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
#sortTable .card-block.big .card-name {
    font-size: 1.3rem;
}
#sortTable .card-block.small .card-name {
    font-size: 0rem;
    display: none;
}
#sortTable .card-block.none .card-name {
    background-color: #fff;
    color: #000;
    filter: none;
    text-shadow: none;
    font-weight: 800;
}
.theme-dark #sortTable .card-block.none .card-name {
    background-color: #000;
    color: #fff;
}

#sortTable .card-block{
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}
#sortTable .card-block:hover{
    background-color: initial;
}

#actionOrderDialog .btn, #actionOrderDialog input, #actionOrderDialog button {
    font-size: 1.15rem;
}

#actionOrderDialog .modal-dialog{
    max-width: 90%;
}
#actionOrderDialog .modal-body{
    display: flex; 
    flex-direction: row;
}
#actionOrderDialog .card-block {
    width: 200px;
    height: 200px;
}
#actionOrderDialog select { 
    text-align-last:center; 
}
#actionOrderDialog td.modified { 
    background-color: #fff49c;
    font-weight: 800;
}
.theme-dark #actionOrderDialog td.modified { 
    background-color: rgb(141, 118, 26)
}
.customOrder{
    position: absolute;
    bottom: 0;
    left: 0;
    border: 1px solid #000;
    padding: 0 0.5rem;
    font-size: 1rem;
    background-color: #fff49c;
}
.theme-dark .customOrder { 
    background-color: rgb(175, 115, 0)
}
.customOrder.defaultOrder { 
    background-color: #dde6ff;
}
.theme-dark .customOrder.defaultOrder { 
    background-color: rgb(76, 101, 174)
}

.resultTable .turn-cell{
    text-align: left;
}
.resultTable .turn-cell .text-content{
    text-align: center;
}

.resultTable .cell-container {
    position: relative;
}

.resultTable .turn-cell .text-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    pointer-events: none;
}