:root{
    --db-view-width:140px;
}
.txt-rarity_common {
    color: #f3f3f3;
}

.txt-rarity_uncommon {
    color: #c0ffc0;
}

.txt-rarity_magic {
    color: #d789b6;
}

.txt-rarity_artifact {
    color: #e5dd7e;
}

.txt-rarity_legend {
    color: #ffa666;
}

.txt-rarity_epic {
    color: #b38cff;
}

.txt-rarity_rare {
    color: #5990ff;
}

.txt_durability_calc_000 {
    color: #e56674;
}

.txt_durability_calc_010 {
    color: #ffd966;
}

.txt_durability_calc_099 {
    color: #e5e5e5;
}

.txt_durability_calc_100 {
    color: #a5d841;
}

.db-wrapper i {
    font-size: inherit;
}

.db-wrapper>.clearfix {
    padding-bottom: 1px;
}

.db-view__item_level {
    background: #141414;
    margin-bottom: 10px;
    padding: 3px 12px;
    border: 1px solid #3c3c3c;
    color: #ccc;
}

.db-view__item_spec {
    margin-bottom: 10px;
}

.db-view__item_spec__name {
    float: left;
    width:var(--db-view-width);
    margin-left: 0;
    margin-right: 10px;
    color: #bbac94;
    text-align: right;
}

.db-view__item_spec__name--last {
    margin-right: 0;
}

.db-view__item_spec__value {
    float: left;
    width:var(--db-view-width);
    margin-left: 0;
    margin-right: 10px;
    line-height: 1;
    background: url(../images/popup_line5.png) no-repeat right bottom;
}

.db-view__item_spec__value--last {
    margin-right: 0;
}

.db-view__item_spec__value strong {
    margin-top: 8px;
    padding-right: 3px;
    display: block;
    font-size: 18px;
    color: #ccc;
    text-align: right;
    font-weight: 500;
}

.db-view__item_equipment {
    margin: 0 0 10px 12px;
}

.db-view__line {
    height: 2px;
    background: url(../images/popup_line.gif) repeat-x 0 0;
    margin: 0 0 3px 0;
    padding: 0 0 0 0;
}

.db-view__sub_title {
    font-weight: normal;
    color: #666;
    line-height: 1.3;
    margin-left: 2px;
}

.db-view__basic_bonus {
    margin: 0 0 10px 12px;
}

.db-view__basic_bonus li {
    display: inline-block;
    width: 178px;
    vertical-align: top;
}

.db-view__basic_bonus li span {
    color: #bbac94;
}

.db-view__help_text {
    margin: 0 0 10px 12px;
}

.db-view__series_bonus {
    margin: 0 0 10px 12px;
}

.db-view__series_bonus--title {
    color: #a6d982;
    font-weight: normal;
    line-height: 1;
}

.db-view__materia_socket {
    margin: 0 0 10px 12px;
}

.db-view__item_repair {
    margin: 0 0 10px 12px;
}

.db-view__item_repair span {
    width: 178px;
    display: inline-block;
}

.db-view__item_repair__title {
    color: #bbac94;
}

.db-view__item-info__list {
    margin: 0 0 6px 12px;
}

/* .db-view__item-info__list li {
    width: 178px;
    display: inline-block;
    color: #bbac94;} */
.db-view__item-info__list {
    display: flex;
    flex-wrap: wrap;           /* 自動換行 */
   max-width: 100%;             /* 控制總寬讓一行剛好放兩個 */
}

.db-view__item-info__list li {
    width: calc(50% - 6px);    /* 一行兩個，扣掉間距 */
    display: flex;             /* 讓文字與符號垂直置中 */
    align-items: center;
    color: #bbac94;
}
.db-view__item-info__list li span {
    margin-left: 4px;
}

.db-view__item-info__list li span {
    color: #ccc;
    font-size: 14px ;
    line-height: 1.3;
}

.db-view__item_footer {
    margin-left: 4px;
    margin-bottom: 10px;
}
.db-view__item_footer .price {
    display: inline-flex;
    align-items: center; /* 垂直置中 */
}

/* .db-view__item_footer .price::after{
    content: "";
    background: url(../images/g.png) no-repeat center bottom;
    background-size: cover;   
    display: inline-block;
    aspect-ratio: 12/16;
    width: 7.8px;
    margin-left: 2px;
    position: static;
} */


.db-view__cannot_materia_prohibition,
.db-view__unsellable {
    color: #d98298;
}

.db-view__market_notsell {
    color: #d98298;
    margin-left: 4px;
}

.db-view__info_effects {
    margin: 0 0 10px 12px;
}

.db-view__info_text {
    margin: 0 0 10px 4px;
}

.db-view__info_text--indent {
    margin-left: 12px;
}

.db-view__sells,
.db-view__materia_requirements,
.db-view__desynthesizable,
.db-view__aetherial_reduction {
    color: #bbac94;
}

.db-view__item_num {
    display: table-cell;
    width: 30px;
    padding-right: 2px;
    text-align: center;
    font-size: 16px;
    font-weight: normal;
    color: #cccccc;
    vertical-align: middle;
    line-height: 1;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.db-view__data {
    border: solid 1px #3c3c3c;
    background-color: #333333;
    text-align: left;
    margin-bottom: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.db-view__data__tooltip {
    margin: 0 auto;
}

.db-view__data--achievement {
    margin-bottom: 0;
}

.db-view__data__head {
    padding: 3px 4px;
    border-bottom: solid 1px #3c3c3c;
    background-color: #1f1f1f;
    background: #1f1f1f;
    color: #bfa34c;
    position: relative;
}

.db-view__data__head__tooltip {
    border-bottom: 0;
}

.db-view__data__inner {
    margin: 0 8px 10px;
    border: solid 1px #1c1c1c;
    background: #333333;
}

.db-view__data__inner--silver {
    border: solid 1px #737880;
}

.db-view__data__inner--gold {
    border: solid 1px #8c7a48;
}

.db-view__data__inner__wrapper {
    border: 1px solid #3c3c3c;
}

.db-view__data__inner__frontline_last {
    margin-bottom: 2px;
}

.db-view__data__inner--quest_reward {
    margin-top: 2px;
    margin-bottom: 14px;
}

.db-view__data__inner--select_reward {
    margin-bottom: 2px;
}

.db-view__data__title {
    padding: 3px 4px;
    margin-bottom: 2px;
    border-bottom: solid 1px #3c3c3c;
    color: #cdcdcd;
    background: #1f1f1f;
}

.db-view__data__title--reward {
    padding: 3px 4px;
    margin-bottom: 6px;
    border-bottom: solid 1px #3c3c3c;
    border-top: none;
    background: #2e2e2e;
}

.db-view__data__title--ordercondition {
    padding: 3px 4px;
    border-bottom: solid 1px #3c3c3c;
    background: #2e2e2e;
}

.db-view__data__title--quest_reward {
    padding: 3px 4px;
    border-top: solid 1px #3c3c3c;
    border-bottom: solid 1px #3c3c3c;
    color: #cdcdcd;
    background: #2e2e2e;
}

.db-view__data__title--quest_reward_list {
    padding: 3px 4px;
    border-bottom: solid 1px #3c3c3c;
    background: #1f1f1f;
}

.db-view__data__title--quest_reward_list span {
    color: #bbac94;
}

.db-view__data__title--required_ingredients {
    padding: 3px 4px;
    border-bottom: solid 1px #3c3c3c;
    background: #2e2e2e;
    margin-bottom: 6px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-box-align: center;
    -o-box-align: center;
    box-align: center;
    align-items: center;
    position: relative;
}

.db-view__data__title--required_ingredients>h4 {
    width: calc(100% - 34px);
}

.db-view__data__title--required_ingredients>div {
    display: inline-block;
    margin: 0 4px;
    height: 26px;
}

.db-view__data__title--required_ingredients__icon {
    display: inline-block;
    width: 26px;
    height: 26px;
    overflow: hidden;
    cursor: pointer;
}

.db-view__data__title--required_ingredients__icon:hover img {
    display: block;
    margin-top: -26px;
}

.db-view__data__title--gathering_spot {
    padding: 3px 4px;
    border-bottom: solid 1px #3c3c3c;
    background: #2e2e2e;
    margin-bottom: 6px;
}

.db-view__data__title--achievement {
    padding: 3px 4px;
    border-top: solid 1px #3c3c3c;
    border-bottom: solid 1px #3c3c3c;
    background: #2e2e2e;
    margin-bottom: 4px;
}

.db-view__data__title--silver {
    padding: 3px 4px;
    margin-bottom: 2px;
    border-bottom: solid 1px #3c3c3c;
    color: #cdcdcd;
    background: #505459;
}

.db-view__data__title--gold {
    padding: 3px 4px;
    margin-bottom: 2px;
    border-bottom: solid 1px #3c3c3c;
    background: #665833;
    color: #ffe699;
}

.db-view__data__title--boss_reward {
    padding: 3px 4px;
    color: #cdcdcd;
    background-color: #1f1f1f;
    border-top: solid 1px #3c3c3c;
}

.db-view__data__title_content_info {
    padding: 3px 4px;
    margin-bottom: 6px;
    border-bottom: solid 1px #3c3c3c;
    border-top: solid 1px #3c3c3c;
    background: #2e2e2e;
}

.db-view__data__content_info {
    padding: 0 4px 5px 4px;
}

.db-view__data__content_info__limittime {
    margin-bottom: 11px;
}

.db-view__data__boss_list {
    padding: 0 4px 5px 4px;
    font-weight: bold;
}

.db-view__data__boss_list li {
    margin-top: 3px;
    margin-bottom: 2px;
}

.db-view__data__boss_list li .ic_boss {
    margin-right: 4px;
}

.db-view__data__boss_list li a {
    margin-left: 24px;
}

.db-view__data__boss_list li.boss a {
    margin-left: 0;
    color: #E5992E;
}

.db-view__data__boss_list li.boss a:hover {
    color: #FFAA33;
}

.db-view__data__reward {
    padding: 6px 0 5px;
    border-top: solid 1px #3c3c3c;
    background: #2e2e2e;
}

.db-view__data__reward__token {
    overflow: hidden;
}

.db-view__data__reward__token__image {
    width: 32px;
    height: 32px;
    display: block;
    float: left;
    padding: 0 8px 0 10px;
}

.db-view__data__reward__token__image.plr4 {
    padding: 0 4px;
}

.db-view__data__reward__token__image--quest {
    padding-left: 2px;
}

.db-view__data__reward__token__text {
    float: left;
}

.db-view__data__reward__token--name {
    color: #bfa34c;
    font-weight: bold;
}

.db-view__data__reward__token--value {
    font-size: 18px;
    line-height: 1;
}

.db-view__data__reward a {
    font-weight: bold;
}

.db-view__data__reward__item.odd {
    background: #3d3d3d;
    margin-bottom: 0;
}

.db-view__data__reward__item__inner {
    padding-left: 2px;
    padding: 6px 0;
}

.db-view__data__reward__item__inner .db-list__item__icon {
    padding-right: 0;
}

.db-view__data__reward__item__condition {
    margin: 0 0;
    color: #a5d841;
    font-size: 10px;
}

.db-view__data__reward__item__condition p {
    font-size: inherit;
}

.db-view__data__reward__item__name {
    display: table-cell;
    vertical-align: middle;
}

.db-view__data__reward__item__name__wrapper {
    display: table-cell;
    vertical-align: middle;
}

.db-view__data__reward__item__name__wrapper .icon {
    font-weight: normal;
    margin-left: 2px;
}

.db-view__data__reward__list {
    width: 164px;
    min-height: 32px;
    float: left;
    margin: 3px 0 2px 8px;
    padding: 4px 0 0 34px;
}

.db-view__data__reward__list__wrapper {
    margin-bottom: 3px;
}

.db-view__data__reward__list--name {
    color: #bfa34c;
    font-weight: bold;
    line-height: 1;
}

.db-view__data__reward__list--value {
    font-size: 18px;
    line-height: 1;
}

.db-view__data__notes {
    padding-left: 8px;
    margin-bottom: 5px;
    color: #CC2944;
}

.db-view__data__detail_list {
    margin-bottom: 25px;
}

.db-view__data__detail_list__wrapper {
    padding: 4px;
}

.db-view__data__detail_list__header {
    color: #bfa34c;
    font-weight: bold;
}

.db-view__data__item_list {
    border-bottom: solid 1px #3c3c3c;
    padding: 4px;
}

.db-view__data__item_list:nth-child(odd) {
    background: #333;
}

.db-view__data__item_list:nth-child(even) {
    background: #2e2e2e;
}

.db-view__data__item_list:nth-last-child(1) {
    border-bottom: 0;
}

.db-view__data__item_list.active {
    background: #363d4d;
    border-bottom: 0;
}

.db-view__data__item_list.setdresser {
    display: flex;
    align-items: center;
}

.db-view__data__number {
    font-size: 16px;
}

.db-view__data__action {
    background: #3d3d3d;
    border-radius: 4px;
    padding: 4px;
    margin-top: 4px;
}

.db-view__data__action strong {
    font-size: 12px;
    font-weight: bold;
    color: #a3cc52;
    display: block;
    padding: 4px;
}

.db-view__npc__location__wrapper {
    margin-bottom: 10px;
}

.db-view__npc__location__list ul {
    display: inline-block;
}

.db-view__npc__header_text {
    color: #bfa34c;
    font-weight: bold;
}

.db-view__npc__shop_list {
    margin-bottom: 5px;
}

.db-view__npc__shop_list li {
    display: inline;
    padding-right: 20px;
}

.db-view__npc__shop_list__item_name {
    display: table-cell;
    vertical-align: middle;
}

.db-view__npc__shop_list__item_name--needitems {
    font-size: 10px;
}

.db-view__npc__shop_list__item_name--needitems img {
    width: 14px;
    height: 14px;
}

.db-view__npc__shop_list__item_name--needitems h4 {
    font-size: 10px;
}

.db-view__npc__shop_list__item_name--needitems h4.currency {
    font-size: 12px;
}

.db-view__npc__notes {
    margin-top: 4px;
}

.db-view__quest__reward__list {
    width: 418px;
    margin: 4px auto 0;
}

.db-view__quest__reward__list--token {
    margin-top: 0;
}

.db-view__quest__reward__list--beastreward {
    margin-top: 7px;
}

.db-view__quest__reward__box {
    width: 174px;
    min-height: 32px;
    float: left;
    padding-left: 34px;
    padding-top: 4px;
    position: relative;
}



.db-view__quest__reward__name {
    color: #bfa34c;
    font-weight: bold;
    line-height: 1;
}

.db-view__quest__reward__value {
    font-size: 18px;
    line-height: 1.2;
}

.db-view__quest__reward__token_image {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
}

.db-view__quest__reward__notes {
    color: #CC2944;
    margin-left: 4px;
}

.db-view__quest__reward__notes__wrapper p:nth-last-child(1) {
    margin-bottom: 8px;
}

.db-view__quest__reward__notes--select_reward {
    margin-bottom: 4px;
}

.db-view__quest__general_annotation {
    border: 1px solid #3d6629;
    margin: 0;
    margin-bottom: 8px;
}

.db-view__quest__general_annotation__inner {
    background: #2e4d1f;
    border: 1px solid #5c993d;
    color: #99ff66;
    padding: 2px 8px;
}

.db-view__recipe__text {
    float: right;
    width: 283px;
    padding-top: 6px;
}

.db-view__recipe__book_name {
    margin-top: 4px;
}

.db-view__recipe__category {
    font-size: 12px;
}

.db-view__recipe__craftdata {
    margin: 4px 4px 18px;
}

.db-view__recipe__craftdata li {
    display: inline-block;
    width: 50%;
    vertical-align: top;
}

.db-view__recipe__craftdata li span {
    color: #bbac94;
}

.db-view__recipe__crafting_conditions {
    margin: 0 4px 24px;
}

.db-view__recipe__crafting_conditions dt {
    color: #bbac94;
    font-weight: normal;
}

.db-view__bt_close {
    display: block;
    width: 160px;
    height: 20px;
    margin: 0 auto;
    overflow: hidden;
}

.db-view__bt_close:hover img {
    margin-top: -20px;
}

.db-view__body--light {
    background: #2e2e2e;
    padding: 4px;
}

.db-view__item_view {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-box-align: center;
    -o-box-align: center;
    box-align: center;
    align-items: center;
}

.db-view__item_view .character__item_icon {
    margin-right: 4px;
    cursor: default;
}

.db-view__item_view p {
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-box-align: center;
    -o-box-align: center;
    box-align: center;
}

.db-tools {
    width: 440px;
    margin: 0 auto;
}

.db-view__data__inner__wrapper .db-tree .db-view__data__reward__item__name__wrapper {
    padding-top: 8px;
}

.db-view__data__inner__wrapper .db-tree:nth-child(even) {
    background: #333333;
}

.db-view__data__inner__wrapper .db-tree:nth-last-child(1) {
    border-bottom: 0;
}

.db-view__data__inner__wrapper .db-tree.active {
    background: #363d4d;
}

.db-view__data__inner__wrapper .db-tree.active .db-tree.active {
    background: #364d49;
}

.db-view__data__inner__wrapper .db-tree.active .db-tree.active .db-tree.active {
    background: #364d36;
}

.db-view__data__inner__wrapper .db-tree.active .db-tree.active .db-tree.active .db-tree.active {
    background: #494d36;
}

.db-item__source {
    margin-bottom: 20px;
}

.db-item__source__text-s {
    font-size: 10px;
    display: block;
}

.db-item__source__text-m {
    font-size: 12px;
    display: block;
}
@media (max-width:680px) {
:root{
    --db-view-width:130px;
}
.db-view__item-info__list li span {
    color: #ccc;
    font-size: clamp(11.5px,5vw,14px);
    line-height: 1.3;
}
}
@media (max-width:320px) {
:root{
    --db-view-width:clamp(90px, 27vw, 140px);
}
}

@media (max-width:270px) {
:root{
    --db-view-width:50%;
}
}