@charset "UTF-8";
img[src=""] {
    content:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAASsJTYQAAAAASUVORK5CYII=");
}

input[type=number] {
    padding: 1px 5px
}

a {
    text-decoration: none;
}

body {
    background-color: #e3cfcb;
}

hr {
    border-top: 2px solid black;
    border-radius: 3px
}

/* FONTS ============================================================================================================ */
body:lang(en-US), translate:lang(en-US), select:lang(en-US), option:lang(en-US), input:lang(en-US) {
    font-family: 'Open Sans', 'Roboto', 'Segoe UI', 'San Francisco', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}

body:lang(ja-JP), translate:lang(ja-JP), select:lang(ja-JP), option:lang(ja-JP), input:lang(ja-JP) {
    font-family: 'Open Sans', 'Roboto', 'Segoe UI', 'San Francisco', Helvetica, Arial, -apple-system, BlinkMacSystemFont, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'Noto Sans JP', sans-serif;
}

body:lang(ko-KR), translate:lang(ko-KR), select:lang(ko-KR), option:lang(ko-KR), input:lang(ko-KR) {
    font-family: 'Open Sans', 'Roboto', 'Segoe UI', 'San Francisco', Helvetica, Arial, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', 'NanumBarunGothic', 'Noto Sans KR', Dotum, sans-serif;
}

body:lang(zh-CN), translate:lang(zh-CN), select:lang(zh-CN), option:lang(zh-CN), input:lang(zh-CN) {
    font-family: 'Open Sans', 'Roboto', 'Segoe UI', 'San Francisco', Helvetica, Arial, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

p.footer:lang(en-US), .toast-message:lang(en-US), button, .quest_required-amount, .quest_drop-percent, .item-amount {
    font-family: 'Trebuchet', 'Trebuchet MS', 'Roboto', 'Segoe UI', 'San Francisco', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}

p.footer:lang(ja-JP), .toast-message:lang(ja-JP) {
    font-family: 'Trebuchet', 'Trebuchet MS', 'Roboto', 'Segoe UI', 'San Francisco', Helvetica, Arial, -apple-system, BlinkMacSystemFont, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'Noto Sans JP', sans-serif;
}

p.footer:lang(ko-KR), .toast-message:lang(ko-KR) {
    font-family: 'Trebuchet', 'Trebuchet MS', 'Roboto', 'Segoe UI', 'San Francisco', Helvetica, Arial, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', 'NanumBarunGothic', 'Noto Sans KR', Dotum, sans-serif;
}

p.footer:lang(zh-CN), .toast-message:lang(zh-CN) {
    font-family: 'Trebuchet', 'Trebuchet MS', 'Roboto', 'Segoe UI', 'San Francisco', Helvetica, Arial, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}


/* FANCY/SIMPLE MODE ================================================================================================ */
body.fancy-body {
    background-image: url("./../images/webpage/adv_mask_C.png");
    color: white;
}

body.simple-body {
    color: black;
}

body.simple-body #simple-page-link {
    visibility: hidden;
}

body.fancy-body #fancy-page-link {
    visibility: hidden;
}

/* LOADING PAGE (FANCY MODE ONLY) =================================================================================== */
body.simple-body #page-loading {
    /* HIDE PAGE LOADING IF SIMPLE MODE */
    visibility: hidden;
}
body.simple-body div#page-cover.failed {
    background-image: url("./../images/webpage/adv_mask_C.png");
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0.5;
}

body.fancy-body #miyako {
    display: block;
    width: 400px;
    height: 400px;
    opacity: 0;
    margin-top: -150px;
}

.no-webp #miyako {background: url("../images/webpage/spritesheets/miyako.png");}
.webp #miyako {background: url("../images/webpage_webp/spritesheets/miyako.webp");}

body.fancy-body div#page-cover {
    background-image: url("./../images/webpage/adv_mask_C.png");
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    box-shadow: 4px 0 5px 5px rgba(0, 0, 0, 0.8),
    4px 0 5px 10px rgba(0, 0, 0, 0.5),
    4px 0 5px 15px rgba(0, 0, 0, 0.2);
}

body.fancy-body #loading-div {
    position: fixed;
    top: 50%;
    left: 51%;
    transform: translate(-50%, -50%);

    /* #loading-div MUST BE ABOVE #page-cover */
    z-index: 2;
}

body.fancy-body #miyako.run {
    /* PAGE BOOTED UP ; RUN TO CENTER OF SCREEN AND STAY THERE */
    animation: run 750ms steps(19) infinite, start_move 1s forwards;
}

body.fancy-body #loading-text {
    white-space: nowrap;
    text-align: center;
    animation: fade_in 1s forwards;
}

body.fancy-body #miyako.run.death {
    background: url("../images/webpage/spritesheets/miyako_death.png");
}

body.fancy-body #miyako.run.death {
    /* PAGE LOAD FAILED ; GO COMMIT DEAD */
    opacity: 1;
    animation: death 1000ms steps(18) forwards;
}

body.fancy-body #page-cover.end {
    animation: cover_reveal 3s forwards;
}

body.fancy-body #loading-div.end {
    animation: end_move 2750ms forwards;
}

@keyframes run {
    from {background-position-y: 0;}
    to {background-position-y: -7600px;}
}

@keyframes start_move {
    80% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes end_move {
    from {left: 51%;}
    to {left: 150%;}
}

@keyframes death {
    from {background-position-y: 0;}
    to {background-position-y: -7200px;}
    0% {opacity: 1;}
    100% {opacity: 1;}
}

@keyframes cover_reveal {
    from {left: 0;}
    to {left: 130%;}
}

@keyframes fade_in {
    0% {opacity: 0;}
    100% {opacity: 100%;}
}

/* WEBPAGE DESIGN =================================================================================================== */
#navigation-bar, #common-div, #copper-div, #silver-div,
#gold-div, #purple-div, #red-div, #green-div, #orange-div, #lightblue-div, #misc-div,
#requested-div, #required-div, #recommended-div,
#character-preset-div, #other-container {
    /* REPLACE <hr> */
    margin-bottom: 10px;
}

button.item-sprite_button {
    border: none;
    margin: 0;
    text-decoration: none;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transition: all 0.4s ease-out;
}

@media (max-width: 400px) {
    p.footer {
        font-size: 12px;
    }
}

/* NO JAVASCRIPT ==================================================================================================== */
.no-js div:not(#page-loading):not(#loading-div) {display: none;}
.no-js hr {display: none;}
.no-js footer {display: none;}
.no-js #miyako {
    background: url("../images/webpage/spritesheets/miyako_death.png");
    animation: death 1250ms steps(18) forwards;
}
.no-js #loading-div { top: 40% !important; }
#javascript-warning {
    color: white;
    text-align:center;
    position: fixed;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: 1px 1px 3px #000000, 1px 1px 4px #000000;
    z-index: 4;
    background: rgba(0, 0, 0, 0.30);
    padding: 10px 30px;
    border-radius: 6px;
}
@media (max-width: 650px) {
    .no-js #javascript-warning {
        width: 80%;
    }
}
@media (max-height: 700px) {
    .no-js #javascript-warning {
        top: 80%
    }
}

/* TITLE BACKGROUND ================================================================================================= */
div.title-background {
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: 10%;

    transition: all 0.4s ease-out;
    overflow: hidden;
}

div.title-background:not(.no-hover):hover, div.title-background:not(.no-hover):active {
    /* WHEN CURSOR HOVERS TITLE BACKGROUND... */
    background-position: center;
    padding-top: 50px;
    padding-bottom: 50px;
    background-position-y: 10%;
}

div.title-background:not(.no-hover):hover .title {
    /* LOWER OPACITY OF TITLE WHEN TITLE IS HOVERED */
    opacity: 0.1;
}

/* TITLE ============================================================================================================ */
.title {
    color: aliceblue;
    text-align: center;
    text-shadow: 2px 2px 4px #000000;
    box-sizing: border-box;
    transition: all 0.4s ease-out;
}

.main_title {
    font-size: 28px;
}

.sub_title {
    margin-top: -25px;
    letter-spacing: 3px;
}

p.footer {
    text-align: right;
    text-shadow: 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000;
    color: aliceblue;
    letter-spacing: 1px;
    font-weight: bold;
}

i.footer {
    height: 24px;
    width: 24px;
    position: relative;
    top: 7px;
}

.invert {
    filter: invert(100%);
}

@media (max-width: 400px) {
    .main_title {
        font-size: 6vw;
    }
    .sub_title {
        font-size: 5vw;
        margin-top: -16px;
        letter-spacing: 2px;
    }
    .sub_title:lang(ja-JP), .sub_title:lang(ko-KR) {
        margin-top: -12px;
    }
}

/* COMMON CLASSES =================================================================================================== */
.category-title {
    color: aliceblue;
    text-align: center;
    text-shadow: 2px 2px 4px #000000;
    font-size: 24px;
}

/* SCRIPT CLASSES =================================================================================================== */
.notranslate {
    /*
        CLASS THAT PREVENTS GOOGLE TRANSLATION
    */
}

.collapsible {
    /*
        AN ELEMENT WITH THIS CLASS WILL CONVERT THE NEXT ELEMENT TO A "COLLAPSIBLE" ONE
        COLLAPSIBLE ELEMENTS WILL APPEAR/DISAPPEAR IF THE ELEMENT WITH THE "collapsible" ELEMENT IS INTERACTED WITH
        LOOK AT scripts/priconne-quest-helper.js::webpage.init().enable_collapsible() FOR MORE INFORMATION
     */
}

.itemTable {
    /*
        AN ELEMENT WITH THIS CLASS WILL BE FILLED WITH EQUIPMENT ITEMS ACCORDING TO THEIR RARITY
        LOOK AT scripts/priconne-quest-helper.js::data_display.item_table FOR MORE INFORMATION
     */
}

.item-4-element {
    /*
        AN ELEMENT WITH THIS CLASS IS THE FOURTH (MAIN) ITEM IN A QUEST.
        FOURTH ITEMS ARE USUALLY FOUND IN VERY HARD QUESTS
        IF THIS CLASS IS FOUND, THAT MEANS THERE IS A QUEST THAT HAS A FOURTH ITEM SO IT WILL BE REVEALED.
        LOOK AT scripts/priconne-quest-helper.js::data_display.recommended-quests FOR MORE INFORMATION
    */
}

.item-table-item {
    /*
        USED WHEN SWITCHING BETWEEN CURRENT AND LEGACY EQUIPMENT DATA
        LOOK AT scripts/priconne-quest-helper.js::data_display.item_table FOR MORE INFORMATION
    */
}

/* COLLAPSIBLE CLASSES ============================================================================================== */
.collapsible:hover {
    background-color: white;
    cursor: pointer;
}

.collapsible:after {
    content: ' \25BC';
}

.collapsible-content {
    margin-top: 30px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.collapsible-active:after {
    content: ' \25B2';
}

.collapsible:after, .collapsible-active:after {
    color: black;
    text-shadow: 0 0 8px #666666;
}

/* SIMPLE MODE CLASSES ============================================================================================== */
.no-background {
    background-image: none !important;
}

.no-background:not(#title-div) {
    background: rgba(217, 197, 193, 0.50);
}

.no-transition {
    transition: none !important;
}

.no-text-shadow {
    text-shadow: none !important;
}

/* NAVIGATION BAR =================================================================================================== */
#navigation-bar {
    overflow: hidden;
    background-color: #30333d;
    margin-top: 10px;
}

#navigation-bar button, #navigation-bar select {
    width: 150px;
    height: 50px;
    border: none;
    float: left;
    padding: 15px 16px;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 17px;
}

#navigation-bar button {
    background-color: #30333d;
    outline: 0;
}

#navigation-bar button:hover {
    /* NAVIGATION BAR BUTTONS WHEN HOVERED */
    background-color: #4f4f4f;
    cursor: pointer;
}

#navigation-bar button.is-open {
    /* SELECTED NAVIGATION BAR BUTTON */
    background-color: #5a5f73;
}

#navigation-bar select {
    /* NAVIGATION BAR ; LANGUAGE SELECT */
    background-color: #2c2f38;
    font-size: 14px;
    outline: none;
}

#navigation-bar select:hover {
    /* NAVIGATION BAR ; LANGUAGE SELECT WHEN HOVERED */
    background-color: #4f4f4f;
    cursor: pointer;
}

.navigation-bar-text {
    font-size: 1.0rem;
    position: relative;
    text-align: center;
    text-shadow: 1px 1px 3px #000000;
    font-weight: bold;
    display: block;
    margin-top: -25px;
}

.navigation-bar-image {
    margin-left: -16px;
    margin-top: -19px;
    position: relative;
    top: 5px;
    -webkit-filter: opacity(30%);
    filter: opacity(30%);
}

/* ITEM TABLES ====================================================================================================== */
.item-table_div {
    margin-left: 5%;
    margin-right: 5%;
    padding-top: 10px;
    padding-bottom: 10px;
}

@media (max-width: 400px) {
    .item-table_div {
        margin-left: 1%;
        margin-right: 1%;
    }
}

.item-table-item_div {
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px;
}

/*
.item-table-item_button {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 5px;
    transition: all 0.4s ease-out;
    outline: none;
}
*/

.item-table-item_input {
    margin-top: 5px;
}

.item-table-item_button-img {
    width: 48px;
    height: 48px;
    margin: -3px -8px -6px;
    border-radius: 5px;
}

.rarity-button {
    font-size: 24px;
    font-weight: bold;
    border: transparent;
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px #000000, 1px 1px 3px #000000;

    display: inline;
    padding: 8px 5px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.3);

    position: relative;
    left: 10px;
    top: 15px;
}

.item-table-spacing {
    height: 15px;
}

.focused-item {
    box-shadow: 0 0 2px 2px rgba(255, 0, 0, 1.0) !important;
}

.item-table_category-title {
    color: azure;
    text-shadow: 2px 2px 4px #000000;
    letter-spacing: 2px;
    text-align: center;
    font-size: 20px;

    background-color: rgba(255, 255, 255, 0.3);
    padding: 7px 5px;
    border-radius: 5px;
    display: inline;

    position: relative;
    top: 15px;
    left: 10px;
}

.item-table_padding {
    width: 90px;
}

.tip {
    color: white;
    text-shadow: 1px 1px 3px #000000,
        1px 1px 3px #000000,
        1px 1px 3px #000000,
        1px 1px 3px #000000,
        0 0 3px #000000;
    line-height: 18px;
    text-align: center;
    overflow: auto;
    font-size: 14px;

    margin-bottom: 10px;
    max-width: 500px;
    background-color: rgba(50, 50, 50, 0.5);
    padding: 10px 15px;
    border-radius: 5px;
}

.request-info {
    margin-top: 30px;
    margin-bottom: 10px;
}

#recommended-quest-div {
    transition: all 0.4s ease-in-out;
}

#requested-item-table {
    margin-left: 5%;
    margin-right: 5%;
    padding-top: 10px;
    padding-bottom: 10px;
}

.requested-item {
    display: inline-block;
    margin: auto 1px;
}

.requested-item span {
    font-size: 16px;
    font-weight: bold;
    margin-right: 5px;
    position: relative;
    top: 28px;
}

#required-ingredient-table {
    margin-left: 5%;
    margin-right: 5%;
    padding-top: 10px;
    padding-bottom: 10px;
}

.required-ingredients_button {
    /* USING !important TO OVERPOWER .item-sprite_button */
    margin: 3px 1px 0 !important;
}

.required-ingredients_button.disabled {
    filter: grayscale(100%) opacity(60%);
    cursor: auto;
}

.required-ingredients_button span {
    font-size: 16px;
    font-weight: bold;
    margin-right: -4px;
    position: relative;
    top: 13px;
    right: 3px;
}

.required-ingredients_button span:before,
.requested-item span:before,
.quest_inventory-amount:before,
.quest_required-amount:before,
#project-modal_dialog .item-sprite .item-amount:before {
    content: '\00D7';
}

.required-ingredients_button_inventory-crate {
    display: block;
    width: 16px;
    height: 16px;
    margin-top: -16px;
    position: relative;
    right: 4px;
    bottom: 16px;
    filter: opacity(100%);
}

@media (max-width: 400px) {
    .rarity-button,
    .item-table_category-title {
        font-size: 5vw;
    }
    .tip {
        font-size: 13px;
        line-height: 17px;
    }
}

/* FOCUSED ITEM ===================================================================================================== */
#focused-item-popup {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
    background-color: rgba(255, 50, 0, 0.75);
    margin-bottom: 5%;
    padding: 0 10px;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    position: fixed;
    bottom: 0;
    right: 10px;
}

#focused-item-image {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 4px;
    margin-bottom: -7px;
    position: relative;
    top: 9px;
}

#lens-image {
    width: auto;
    height: 50%;
    max-width: 32px;
    max-height: 32px;
    min-width: 16px;
    min-height: 16px;
    margin-top: -32px;
    margin-bottom: -32px;
    position: relative;
    bottom: 31px;
    left: 23px;
}

/* RECOMMENDED QUESTS =============================================================================================== */
.quest-title_bg_green {
    background-color: rgba(153, 255, 132, 0.5);
}

.quest-title_bg_yellow {
    background-color: rgba(251, 255, 28, 0.5);
}

.quest-title_bg_red {
    background-color: rgba(239, 14, 14, 0.5);
}

.quest_priority-item {
    animation: glow 3000ms infinite;
}

@keyframes glow
{
    0% { box-shadow: 0 0 4px #c4a300; }
    40% { box-shadow: 0 0 13px #c4a300; }
    60% { box-shadow: 0 0 13px #B4000F; }
    100% { box-shadow: 0 0 4px #c4a300; }
}

#recommended-quest-div {
    padding-bottom: 10px;
}

#recommended-quest-table {
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 20px;
}

.quest {
    text-align: center;
    margin-bottom: 5px;

    border-radius: 5px;
    padding: 5px 10px;

    min-width: 820px;

    margin-left: 5vw;
    margin-right: 5vw;
}

.quest.odd {
    background-color: rgba(0, 0, 0, 0.40);
}

.quest.even {
    background-color: rgba(64, 64, 64, 0.40);
}

.quest_header {
    display: inline-block;
    margin-right: 25px;
    float: left;
}

.quest_title {
    display: inline-block;

    font-size: 15px;
    font-weight: bold;
    color: white;

    letter-spacing: 4px;
    text-shadow: 1px 1px 2px #000000,
    1px 1px 2px #000000,
    1px 1px 3px #000000;

    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
        0 3px 10px 0 rgba(0, 0, 0, 0.19);
    border-radius: 5px;
    padding: 10px 30px;

    margin-bottom: 10px;
    width: 100px;
    text-align: center;
}

.quest_score {
    display: inline-block;
    float: right;

    font-size: 14px;
    color: white;
    background-color: rgba(255, 255, 255, 0.50);

    letter-spacing: 1px;
    text-shadow: 1px 1px 2px #000000,
        1px 1px 2px #000000,
        1px 1px 3px #000000;

    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
        0 3px 10px 0 rgba(0, 0, 0, 0.19);
    border-radius: 5px;
    padding: 5px 0;
    width: 100px;
    text-align: center;
    font-weight: bold;
}

.quest_memory-piece {
    display: inline-block;
    position: relative;
    top: 14px;
    margin-left: 5px;
}

.quest_memory-piece-img {
    width: 32px;
    height: 32px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
        0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 4px;
}

.quest_memory-piece-percent {
    text-shadow: 1px 1px 4px #000000,
        1px 1px 4px #000000,
        1px 1px 4px #000000,
        1px 1px 4px #000000;
    color: lightsalmon;
    text-align: right;
    font-size: 14px;
    font-weight: bold;
    margin-top: -15px;

    position: relative;
    left: 5px;
}

.quest_line {
    display: none;
}

.quest_line-2 {
    display: none;
}

.quest_items {
    display: inline-block;
    margin-right: 25px;
}

.quest_subdrops {
    display: inline-block;
}

.quest_items, .quest_subdrops {
    position: relative;
    top: 5px;
    margin-bottom: 10px;
}

.quest_item {
    display: inline-block;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
        0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.quest_item-img {
    width: 48px;
    height: 48px;

    border-radius: 4px;
}

.quest_drop-percent,
.quest_required-amount {
    text-shadow: 1px 1px 4px #000000,
        1px 1px 4px #000000,
        1px 1px 4px #000000,
        1px 1px 4px #000000;
    text-align: right;
    font-weight: bold;
    font-size: 16px;
    display: block;
    position: relative;
}

.quest_drop-percent {
    color: lightsalmon;
    margin-right: 4px;
    position: relative;
    top: 28px;
}

.quest_drop-percent:after {
    content: '\0025';
}

.quest_required-amount {
    color: white;
    margin-right: 5px;
    top: 9px;
}

/* SCREEN RESIZING - ADJUST ELEMENTS TO LOOK BETTER */
@media only screen and (max-width: 1000px) {
    .quest_line {
        display: block;
    }
    .quest {
        text-align: left !important;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
    }
    .quest_header {
        float: none;
    }
    .quest.odd,
    .quest.even {
        background-color: rgba(0, 0, 0, 0.40);
    }

    .quest_inline-crate {
        left: 15px !important;
        z-index: 1;
    }

    .quest_item.quest-item-edit .quest_item-img {
        position: relative;
        left: 12px;
    }
}

@media only screen and (max-width: 625px) {
    .quest_line-2 {
        display: block;
    }
}

/* QUEST DROP PERCENT / QUEST AMOUNT SWAP */
.quest_item:not(:hover):not(.quest-item-edit) .quest_display-bottom,
.quest_item:hover:not(.quest-item-edit) .quest_display-top {
    opacity: 0;
}

.quest_item.quest-item-edit .quest_drop-percent {
    visibility: hidden;
}
.quest_item.quest-item-edit .quest_required-amount {
    visibility: visible;
}

/* QUEST ELEMENT HIDE (REMOVE) */
.remove {
    /* APPLY THIS CLASS TO REMOVE THE ELEMENT COMPLETELY */
    /* APPLICABLE TO:
        .quest_item
        .quest_score
        .quest_memory-piece
    */
}

.quest_item.remove,
.quest_score.remove
{
    display: none;
}
.quest_memory-piece.remove
{
    opacity: 0;
}

/* QUEST ELEMENT DISABLE (GRAYSCALE OR HIDE) */
.disabled {
    /* APPLY THIS CLASS TO GRAYSCALE THE ELEMENT AND HIDE SOME INFORMATION */
    /* APPLICABLE TO:
        .quest_memory-piece
        .quest_item
    */
}
.quest_memory-piece.disabled .quest_memory-piece-img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}
.quest_memory-piece.disabled .quest_memory-piece-percent {
    visibility: hidden;
}

.quest_item.disabled {
    -webkit-filter: grayscale(100%) opacity(30%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%) opacity(30%);
    transition: all 0.4s ease-out;
}
.quest_item.disabled:hover {
    -webkit-filter: grayscale(50%) opacity(75%); /* Safari 6.0 - 9.0 */
    filter: grayscale(50%) opacity(75%);
}
.quest_item.disabled .quest_drop-percent,
.quest_item.disabled .quest_required-amount {
    visibility: hidden;
}

.quest_item.quest-item-edit .quest_drop-percent,
.quest_item.quest-item-edit .quest_required-amount {
    position: relative;
    right: 12px;
}

.quest_item.quest-item-edit {
    position: relative;
    top: 78px;
}

/*
.quest_item.quest-item-edit:lang(ja-JP),
.quest_item.quest-item-edit:lang(ko-KR) {
    top: 57px;
}
*/

.quest_item.quest-item-edit .inventory-inline-editor {
    position: relative;
    bottom: 80px;
    margin-left: -10px;
}

.inventory-inline-editor {
    width: 105px;
    position: relative;
    right: 18px;
}

.quest_item.quest-item-edit .inventory-inline-editor button.minus,
.quest_item.quest-item-edit .inventory-inline-editor button.plus {
    width: 35px;
    text-decoration: none;
    cursor: pointer;
}

.quest_item.quest-item-edit .inventory-inline-editor .quest_inline-inventory input.quest_inline-input,
.quest_item.quest-item-edit .inventory-inline-editor .quest_inline-inventory button.input-confirm {
    width: 75px;
    display: none;
}

.quest_item.quest-item-edit.input-enabled {
    top: 125px;
}

.quest_item.quest-item-edit.input-enabled .inventory-inline-editor {
    top: -127px;
}

.quest_item.quest-item-edit.input-enabled .inventory-inline-editor .quest_inline-inventory input.quest_inline-input,
.quest_item.quest-item-edit.input-enabled .inventory-inline-editor .quest_inline-inventory button.input-confirm {
    display: inline-block;
}

.quest_item.quest-item-edit span {
    position: relative;
    top: -69px;
    left: 0;
}

/*
.quest_item.quest-item-edit span:lang(ja-JP),
.quest_item.quest-item-edit span:lang(ko-KR) {
    top: -48px;
}
*/

.quest_item.quest-item-edit.input-enabled span {
    top: -116px;
}

.quest_inline-inventory {
    display: block;
    background: rgba(0, 0, 0, 0.5);
    width: 105px;
    position: relative;
    top: 3px;
}

.quest_inline-crate {
    width: 24px;
    height: 24px;
    margin-top: 3px;
    margin-right: 5px;
}

.quest_inventory-amount {
    display: inline-block;
    text-shadow: 1px 1px 4px #000000,
    1px 1px 4px #000000,
    1px 1px 4px #000000,
    1px 1px 4px #000000;
    color: white;
    text-align: right;
    font-weight: bold;
    font-size: 16px;
    position: relative;
    bottom: 5px;
    margin-right: 2px;
}

@media (max-width: 400px) {
    #requested-item-table,
    #required-ingredient-table,
    #recommended-quest-table {
        margin-left: 1%;
        margin-right: 1%;
    }

    .quest_title {
        font-size: 14px;
        padding: 5px 10px;
    }
}

/* ITEM TABLE BACKGROUNDS =========================================================================================== */
#common-div, #copper-div, #silver-div,
#gold-div, #purple-div, #red-div, #green-div, #orange-div, #lightblue-div, #misc-div,
#requested-div, #required-div, #recommended-div {
    background-size: cover;
    background-position: center 45%;
    background-repeat: no-repeat;
}

.no-webp #common-div {background-image: url("./../images/webpage/bg_500170_blur.png");}
.webp #common-div {background-image: url("./../images/webpage_webp/bg_500170_blur.webp");}

.no-webp #copper-div {background-image: url("./../images/webpage/bg_500200_blur.png");}
.webp #copper-div {background-image: url("./../images/webpage_webp/bg_500200_blur.webp");}

.no-webp #silver-div {background-image: url("./../images/webpage/bg_500210_blur.png");}
.webp #silver-div {background-image: url("./../images/webpage_webp/bg_500210_blur.webp");}

.no-webp #gold-div {background-image: url("./../images/webpage/bg_500220_blur.png");}
.webp #gold-div {background-image: url("./../images/webpage_webp/bg_500220_blur.webp");}

.no-webp #purple-div {background-image: url("./../images/webpage/bg_500240_blur.png");}
.webp #purple-div {background-image: url("./../images/webpage_webp/bg_500240_blur.webp");}

.no-webp #red-div {background-image: url("./../images/webpage/bg_101892_blur.png");}
.webp #red-div {background-image: url("./../images/webpage_webp/bg_101892_blur.webp");}

.no-webp #green-div {background-image: url("./../images/webpage/bg_100019_blur.png");}
.webp #green-div {background-image: url("./../images/webpage_webp/bg_100019_blur.webp");}

.no-webp #orange-div {background-image: url("./../images/webpage/bg_500031_blur.png");}
.webp #orange-div {background-image: url("./../images/webpage_webp/bg_500031_blur.webp");}

.no-webp #lightblue-div {background-image: url("./../images/webpage/bg_100065_blur.png");}
.webp #lightblue-div {background-image: url("./../images/webpage_webp/bg_100065_blur.webp");}

.no-webp #misc-div {background-image: url("./../images/webpage/bg_100621_blur.png");}
.webp #misc-div {background-image: url("./../images/webpage_webp/bg_100621_blur.webp");}

.no-webp #requested-div {background-image: url("./../images/webpage/bg_500012_blur.png");}
.webp #requested-div {background-image: url("./../images/webpage_webp/bg_500012_blur.webp");}

.no-webp #required-div {background-image: url("./../images/webpage/bg_500032_blur.png");}
.webp #required-div {background-image: url("./../images/webpage_webp/bg_500032_blur.webp");}

.no-webp #recommended-div {background-image: url("./../images/webpage/bg_500270_blur.png");}
.webp #recommended-div {background-image: url("./../images/webpage_webp/bg_500270_blur.webp");}

/* PRESETS TAB ====================================================================================================== */
@media only screen and (max-width: 625px) {
    #character-preset-list-select {
        width: 58vw;
    }
}

#character-preset-div {
    background-position: center;
    background-size: cover;
}

.no-webp #character-preset-div {background-image: url('./../images/webpage/bg_530010_blur.png');}
.webp #character-preset-div {background-image: url('./../images/webpage_webp/bg_530010_blur.webp');}

.presets_unit-icon {
    height: 100px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3),
        0 6px 20px 0 rgba(0, 0, 0, 0.30);
    border-radius: 10px;
}

#preset-bulk-settings div div {
    display: inline-block;
    width: 25%;
    font-weight: bold;
}

#preset-bulk-settings translate[text="presets_tab.to"],
#preset-bulk-settings translate[text="presets_tab.minimum_rank"],
#preset-bulk-settings translate[text="presets_tab.maximum_rank"] {
    text-shadow: 2px 2px 4px #000000;
    text-align: center;
    font-weight: bold;
}

#preset-bulk-settings translate[text="presets_tab.to"] {
    padding-left: 25px;
    padding-right: 25px;
    font-size: 16px;
}

#preset-bulk-settings translate[text="presets_tab.minimum_rank"],
#preset-bulk-settings translate[text="presets_tab.maximum_rank"] {
    font-size: 14px;
}

.presets_unit-info {
    color: navajowhite;
    line-height: 24px;
    font-weight: bold;
    text-shadow: 2px 2px 4px #000000;
    text-align: center;
}

.presets_overwrite-warning {
    text-shadow: 1px 1px 2px #000000,1px 1px 3px #000000;
    font-size: 16px;
}

#preset-search-button {
    width: 32px;
    height: 32px;
    position: relative;
    top: 15px;
    cursor: pointer;
}

#preset-lens-image {
    width: 32px;
    position: relative;
    right: 8px;
    bottom: 4px;
}

.preset-grid-entry {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin-left: 2px;
    margin-right: 2px;
    cursor: pointer;
    border-radius: 5px;
}

.preset-item-button {
    display: inline-block;
    margin: 5px 0 !important;
    transition: none !important;
}

#preset-item-1,
#preset-item-3,
#preset-item-5 {
    margin-right: 260px !important;
}

#preset-items-previous-rank-button,
#preset-items-next-rank-button {
    height: 30px;
    font-weight: bold;
}
#preset-items-previous-rank-button {
    margin-right: 100px;
}
/*
.preset-item-button-padding {
    margin-left: 125px;
    margin-right: 125px;
}
*/

.preset-plus-img {
    width: 20px;
    position: relative;
    left: 10px;
    top: 11px;
}

#preset-items-div {
    margin-left: 5%;
    margin-right: 5%;
    margin-top: -110px;
}

#preset-items-rank-label {
    line-height: 24px;
    font-weight: bold;
    text-shadow: 0 1px 2px #000000, 1px 1px 2px #000000;
    text-align: center;
    cursor: pointer;

    padding: 5px 15px;
}

@media (max-width: 450px) {
    #preset-item-1,
    #preset-item-3,
    #preset-item-5 {
        margin-right: 60% !important;
    }
    #preset-character-name-label {
        display: inline-block;
        width: 55%;
    }
    #preset-items-previous-rank-button {
        margin-right: 20px;
    }
}

@media (max-width: 320px) {
    #preset-item-1,
    #preset-item-3,
    #preset-item-5 {
        margin-right: 0 !important;
    }
    #preset-items-div {
        margin-top: 10px;
        margin-bottom: 40px;
    }
    #preset-items-previous-rank-button {
        text-align: center;
        display: inline-block;
        margin: auto 0 10px auto;
    }
    #preset-character-name-label {
        display: inline-block;
        width: 100%;
    }
}

#preset-items-rank-label.grayscale {
    cursor: auto;
}

#preset-items-rank-select {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.preset-items-rank-option {
    cursor: pointer;
    padding: 2px 15px;
    text-shadow: 0 1px 2px #000000, 0 1px 2px #000000;
}

#preset-item-settings {
    margin-top: -36px;
}

.preset-item-rank-button-text {
    font-size: 16px;
    margin-left: 30px;
    margin-right: 30px;
}

#preset-bulk-mode-button {
    font-size: 16px;
    cursor: pointer;
}

/* SETTINGS TAB ===================================================================================================== */
#saved-projects-select {
    margin-bottom: 10px;
}

/* UPDATE INFORMATION =============================================================================================== */
#update-div {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 100%;
    display: none;
}

.no-webp #update-div {background-image: url('../project_files/old_images/bg_0000_blur.png');}
.webp #update-div {background-image: url('../project_files/old_images/bg_0000_blur.webp');}

.update-checkmark {
    height: 25px;
    position: relative;
    left: 15px;
    top: 25px;
}

.update-book-img {
    height: 40px;
    position: relative;
    top: 13px;
}

/* HYPERLINKS ======================================================================================================= */
.hyperlink-image, .hyperlink-text {
    display: inline;
    position: absolute;
    left: 0; right: 0;
    text-align: center;
}

.hyperlink-image {
    display: inline-block;
    position: relative;
}

.hyperlink-text {
    font-size: 22px;
    text-shadow: 1px 1px 2px #000000,
        1px 1px 2px #000000,
        1px 1px 3px #000000,
        1px 1px 3px #000000;
    color: white;
    white-space: nowrap;
    bottom: 33%;
}

.hyperlink-text:lang(ja-JP), .hyperlink-text:lang(ko-KR) {
    bottom: 30%;
}

.app-hyperlink_image {
    max-height: 64px;
    max-width: 64px;
}

.app-hyperlink_text {
    font-size: 14px;
    top: 62px;
}

/* PROJECT COMPLETE ================================================================================================= */
#project-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.30);
    overflow: auto;
}

#project-modal_title {
    font-weight: bold;
    font-size: 24px;
    margin-right: 15px;
    line-height: 36px;
}

#project-modal_dialog button,
#project-modal_dialog .project-contents .item-sprite {
    cursor: pointer;
}

#project-modal_dialog div .project-name {
    font-size: 24px;
    line-height: 36px;
    font-style: italic;
}

#project-modal_dialog {
    background-color: white;
    color: black;
    margin: 10% auto;
    padding: 0 33px 30px;
    width: 60%;
    z-index: 2;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}

#project-modal_dialog .project-contents,
#project-modal_dialog .inventory-requirements {
    background-color: rgba(0, 0, 0, 0.10);
    border-radius: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 10px;
    text-align: center;
}

#project-modal_close-button {
    display: inline-block;
    background-color: rgba(255, 0, 0, 0.50);
    cursor: pointer;
    width: 33px;
    height: 33px;
    border-radius: 5px;
    float: right;
    margin-right: 5px;
    margin-top: 5px;
}

@media (max-width: 350px) {
    #project-modal_close-button {
        width: 33px;
        height: 33px;
        margin-right: 0;
        margin-top: 0;
    }
}

#project-modal_close-button .text {
    display: block;
    color: white;
    font-weight: bold;
    font-size: 32px;
    text-align: center;
    margin-top: -7px;
    margin-right: -1px;
    text-shadow: 1px 1px 3px #000000,
    1px 0 2px #000000,
    0 1px 2px #000000,
    0 0 3px #000000;
}

#project-modal_close-button .text:lang(ja-JP) {
    position: relative;
    top: 2px;
    font-size: 28px;
}

#project-modal_close-button .text:lang(ko-KR) {
    position: relative;
    bottom: 4px;
}

#project-modal_dialog .item-sprite {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    display: inline-block;
    text-align: right;
}

#project-modal_dialog .item-sprite.disabled {
    -webkit-filter: grayscale(100%) opacity(60%);
    filter: grayscale(100%) opacity(60%);
    cursor: auto;
    box-shadow: none;
}

#project-modal_dialog .item-sprite .item-amount {
    font-weight: bold;
    font-size: 16px;
    margin-right: 3px;
    position: relative;
    top: 26px;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

#project-modal_dialog button {
    display: block;
}

/* INVENTORY ======================================================================================================== */
#inventory_open-button {
    background-color: rgba(255, 255, 255, 0.30);
    border: none;
    border-radius: 5px;
    float: right;
    outline: none;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
        0 6px 20px 0 rgba(0, 0, 0, 0.19);
    cursor: pointer;
}

#inventory_crate-img {
    width: 32px;
    height: 32px;
    margin-left: -3px;
    margin-right: -4px;
    position: relative;
    top: 2px;
}

#inventory_modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.30);
    overflow: auto;
}

#inventory_title {
    font-weight: bold;
    font-size: 24px;
    margin-right: 15px;
    line-height: 36px;
}

#inventory_modal-dialog {
    background-color: white;
    color: black;
    margin: 10% auto;
    padding: 0 33px 30px;
    width: 60%;
    z-index: 2;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
        0 6px 20px 0 rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}

#inventory_modal_toolbar {
    padding-top: 4px;
    margin-bottom: 20px;
    width: 100%;
    z-index: 2;
    border-radius: 3px;
}

.inventory_modal_toolbar-button {
    position: relative;
    top: 3px;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.30);
    border: none;
    border-radius: 5px;

    margin-right: 5px;

    -webkit-filter: opacity(50%);
    filter: opacity(50%);
}

.inventory_modal_toolbar-button.is-open {
    box-shadow: 0 0 2px #000000,
        0 0 2px #000000,
        1px 1px 5px #000000;
    -webkit-filter: opacity(100%);
    filter: opacity(100%);
}

#inventory_toolbar-button_delete {
    visibility: hidden;
    margin-left: 30px;
}
#inventory_toolbar-button_delete.is-open {
    visibility: visible;
}

.inventory_modal_toolbar-button-img {
    width: 32px;
    height: 32px;
    margin: -3px -8px -6px;
}

#inventory_modal_toolbar-button-plus-img {
    display: block;
    width: 16px;
    height: 16px;
    margin-top: -16px;
    position: relative;
    left: 6px;
    top: 1px;
}

#inventory_modal_toolbar-button-remove-img {
    display: block;
    width: 16px;
    height: 16px;
    margin-top: -16px;
    position: relative;
    left: 6px;
    top: 1px;
    -webkit-filter: sepia(100%) saturate(0%);
}

#inventory_modal_toolbar-button-delete-img {
    display: block;
    width: 24px;
    height: 24px;
    margin-top: -24px;
    margin-left: -8px;
    position: relative;
    left: 4px;
    bottom: 1px;
}

#inventory_modal_close-button {
    display: inline-block;
    background-color: rgba(255, 0, 0, 0.50);
    cursor: pointer;
    width: 33px;
    height: 33px;
    border-radius: 5px;
    float: right;
    margin-right: 5px;
    margin-top: 5px;
}

@media (max-width: 350px) {
    #inventory_modal_close-button {
        width: 33px;
        height: 33px;
        margin-right: 0;
        margin-top: 0;
    }
}

#inventory_modal_close-button-text {
    display: block;
    color: white;
    font-weight: bold;
    font-size: 32px;
    text-align: center;
    margin-top: -7px;
    margin-right: -1px;
    text-shadow: 1px 1px 3px #000000,
        1px 0 2px #000000,
        0 1px 2px #000000,
        0 0 3px #000000;
}

#inventory_modal_close-button-text:lang(ja-JP) {
    position: relative;
    top: 2px;
    font-size: 28px;
}

#inventory_modal_close-button-text:lang(ko-KR) {
    position: relative;
    bottom: 4px;
}

#inventory_content_list {
    background-color: rgba(0, 0, 0, 0.10);
    border-radius: 5px;
}

@media (max-width: 400px) {
    #inventory_content_list {
        margin: auto -20px;
    }
}

.inventory_item {
    display: inline-block;
    margin: 3px 0 3px -2px;
    cursor: pointer;
}

.inventory_item.grow {
    transform: scale(calc(64/48));
    margin-right: 8px;
    margin-left: 6px;
    margin-top: 9px;
}
.inventory_item.grow input {
    transform: scale(calc(48/64));
    margin-left: -8px;
    position: relative;
    top: -1px;
}

.inventory_item span {
    display: block;
    text-align: right;
    font-weight: bold;
    font-size: 16px;
    color: white;
    text-shadow: 1px 1px 4px #000000,
        1px 1px 4px #000000,
        1px 1px 4px #000000,
        1px 1px 4px #000000;
    margin-right: 5px;
    position: relative;
    top: 5px;
}
.inventory_item span:before {
    content: '\00D7';
}

.inventory_item img {
    width: 16px;
    height: 16px;
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 0 1px #000000,
        0 0 1px #000000,
        1px 1px 2px #000000;
    border-radius: 3px;
    visibility: hidden;
    position: relative;
    left: 15px;
}

#inventory_content_list.remove .inventory_item img {
    visibility: visible;
}

.inventory_item input {
    width: 50px;
}

.inventory_catalog-item {
    margin-left: 2px;
    margin-right: 2px;
    cursor: pointer;
}

#inventory_catalog i {
    margin-left: 1px;
    margin-right: 1px;
}

#inventory_catalog_add-equipment, #inventory_catalog_add-fragment {
    padding-top: 5px;
}

#inventory_catalog_add-equipment_arrow {
    font-weight: bold;
    color: white;
    font-size: 24px;
    margin-top: -5px;
}

#inventory_catalog_add-equipment_sub-items div span {
    font-weight: bold;
    display: block;
    margin-top: 33px;
    position: relative;
    bottom: 5px;
    right: 4px;
}

#inventory_catalog_input {
    margin-top: 10px;
}

@media (max-width: 400px) {
    #inventory_catalog_input {
        width: 30vw;
    }
}

#inventory_catalog_add-button, #inventory_catalog_cancel-button {
    margin-top: 5px;
}

/* MISCELLANEOUS ==================================================================================================== */
.item-amount {
    text-shadow: 1px 1px 4px #000000,
    1px 1px 4px #000000,
    1px 1px 4px #000000,
    1px 1px 4px #000000;
    color: white;
    text-align: right;
}

.low-opacity {
    -webkit-filter: opacity(30%);
    filter: opacity(30%);
}

.grayscale {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

.pointer-cursor:hover {
    cursor: pointer;
}

.center-div {
    margin: auto;
    text-align: center;
}

/* COLORS =========================================================================================================== */
.heart-red {
    color: #ff4d4d
}

.text-color_common {
    color: #88acf0;
}

.text-color_copper {
    color: #f7ba9c;
}

.text-color_silver {
    color: #deebf7;
}

.text-color_gold {
    color: #ffdf73;
}

.text-color_purple {
    color: #d67dff;
}

.text-color_red {
    color: #f7515a;
}

.text-color_green {
    color: #29df7b;
}

.text-color_orange {
    color: #ffaa18;
}

.text-color_lightblue {
    color: #08fbf7;
}

.text-color_misc {
    color: #a1e9ff;
}