@font-face {
    font-family: 'Roboto';
    src: url(../fonts/Roboto-VariableFont_wdth,wght.ttf);
}

@font-face {
    font-family: 'Oswald';
    src: url(../fonts/Oswald-VariableFont_wght.ttf);
}


#page {
    --color-txt: #242424;
    --color-bg: white;
    --color-bg-darker: #6D687511;
    --color-bg-darkest: #6d687521;
    --color-bg-darkest-solid: #ecebed;
    --color-bg-darkest-solid-rgb: 236, 235, 237;
    --color-btn: #9a8c98;
    --color-btn2: #726d81;
    --color-btn-rgb: 154, 140, 152;
}

#page.mode_dark {
    --color-txt: white;
    --color-bg: #242424;
    --color-bg-darker: #1b1b1b;
    --color-bg-darkest: #00000099;
    --color-bg-darkest-solid: #0e0e0e;
    --color-bg-darkest-solid-rgb: 14, 14, 14;
    --color-btn: #4a4e69;
    --color-btn2: #9a8c98;
    --color-btn-rgb: 74, 78, 105;
}

#page * {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#triangle {
    border-width: 40px;
    border-style: solid;
    border-color: #8338ec50 #8338ec50 transparent transparent;
    position: fixed;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    z-index: 4;
}

#triangle img {
    position: relative;
    width: 40px;
    height: 40px;
    top: -37px;
    right: 3px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

#triangle img:hover {
    transform: scale(1.1);
}

#page.mode_mini .section_img,
#page.mode_mini .wing_img,
#page.mode_mini .char_img {
    display: none;
}

#page.mode_mini .char_name, #page.mode_mini .char_name .char_img_mini, #page.mode_name .char_name {
    display: flex;
}

#page.mode_name .has_tip .name {
    display: block;
}

#page:not(.mode_spoilers) .spoiler {
    display: none;
}

#page .spoiler_placeholder {
    border: 1px solid var(--color-bg-darkest);
    border-radius: 5px;
    background: var(--color-bg-darkest);
    border-radius: 10px;
    opacity: 0.5;
    height: 50px;
    width: 50px;
}

#page.mode_spoilers .spoiler_placeholder {
    display: none;
}

#page.mode_gift .item:has(input:checked) {
    display: none;
}

html {}

body {
    font-family: "Roboto", sans-serif;
    margin: 0;
}

svg:focus {
    outline: none;
}

#page {
    background-color: var(--color-bg);
    color: var(--color-txt);
    display: flex;
    min-height: 100dvh;
    overflow: hidden;
    max-height: 100dvh;
    font-size: 14px;
    flex-wrap: nowrap;
}

#page ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

#page ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.45);
    border-radius: 10px;
    box-shadow: rgba(255, 255, 255, 0.3) 0 0 0 1px;
}

#page :hover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.55);
}

#side_menu {
    max-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    max-height: 100dvh;
    padding: 8px 15px;
    background-color: var(--color-bg-darkest-solid);
    overflow: hidden;
    padding: 0;
    flex: 1;
    transition: max-width 0.3s ease;
    position: fixed;
    z-index: 1;
    height: 100%;
}

#page:not(.mode_collapse) #side_menu {
    max-width: 260px;
    z-index: 2;
    min-width: 260px;
    overflow: unset;
}

#side_menu #title {
    transition: margin 0.3s ease;
    height: 51px;
    display: flex;
    align-items: center;
    margin-left: 50px;
    white-space: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    gap: 7px;
}

#side_menu #title .version {
    font-size: 12px;
    opacity: 0.3;
    line-height: 14px;
    display: inline-block;
    margin-top: 2px;
}

@media only screen and (min-width: 550px) {
    #side_menu {
        position: unset;
        height: unset;
        overflow: hidden;
    }

    #page:not(.mode_collapse) #side_menu {
        max-width: 260px;
        min-width: unset;
    }

    #page:not(.mode_collapse) #content {
        width: calc(100% - 260px);
    }
}

.side_menu_btn {
    cursor: pointer;
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.side_menu_btn input {
    display: none;
}

.side_menu_btn:hover {
    transform: scale(1.1);
}

.side_menu_btn svg {
    height: 22px;
    width: 22px;
    transition: transform 0.3s ease, fill 0.3s ease, font-size 0.1s ease, text-decoration-color 0.3s ease, filter 0.5s ease, opacity 0.3s ease, background 0.3s ease, color 0.1s ease, border-color 0.5s ease, max-width 0.3s ease;
}

.side_menu_btn svg path {
    fill: var(--color-txt);
}

#page:not(.mode_collapse) #header .side_menu_btn svg {
    transform: rotate(90deg);
    fill: var(--color-txt);
}

#filter_content {
    display: flex;
    gap: 24px;
    flex-direction: column;
    padding: 10px 15px;
    overflow: auto;
    height: 100%;
    border-top: 1px solid var(--color-bg-darkest);
}

#filter_content .input-label label {
    background-color: rgba(var(--color-bg-darkest-solid-rgb));
}

#content .side_menu_btn {
    margin-left: -15px;
}

#checkbox_filter_items {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
    max-height: 125px;
}

@media screen and (min-width: 575px) {
    #checkbox_filter_items {
        max-height: 270px;
    }
}

#checkbox_filter_items .spacing {
    min-height: 7px;
}

#checkbox_filter_collapse input {
    display: none;
}

#page.mode_chbexpand #checkbox_filter_items {
    max-height: unset;
}

#checkbox_filter #filter_show, #checkbox_filter #filter_collapse {
    cursor: pointer;
    display: none;
    gap: 3px;
    margin-top: 5px;
    white-space: nowrap;
    align-items: center;
}

#page:not(.mode_chbexpand) #filter_show {
    display: flex;
}

#page.mode_chbexpand #filter_collapse {
    display: flex;
}

#checkbox_filter svg {
    height: 25px;
    width: 21px;
}

#content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 100%;
    height: 100dvh;
    width: 100%;
    padding-top: 50px;
}

#header {
    display: flex;
    height: 50px;
    min-height: 50px;
    align-items: center;
    border-bottom: 1px solid var(--color-bg-darkest);
    font-size: 16px;
    flex: 1;
    width: 100%;
    position: fixed;
    z-index: 3;
}

#tabs {
    transition: opacity 0.3s ease, margin 0.3s ease;
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 5px;
    height: 100%;
    align-items: center;
}

.tab {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 5px;
    min-height: 40px;
    cursor: pointer;
    display: flex;
    text-align: center;
    align-items: center;
    overflow: hidden;
    flex-direction: row;
    padding: 5px 7px;
    font-size: 12px;
    background-color: var(--color-bg-darker);
    transition: fill 0.3s ease, color 0.3s ease, background-color 0.3s ease;
    width: unset;
    color: var(--color-txt);
    font-size: 0;
    fill: var(--color-txt);
}

.tab .icon {

    width: 20px;

    height: 100%;

    min-width: 20px;
}

.tab .icon svg {

    height: 17px;

    width: 17px;
}

.tab:hover,
#page.gift #tab_gift,
#page.museum #tab_museum,
#page.almanac #tab_almanac,
#page.wrapped #tab_wrapped,
#page.woodworking #tab_woodworking,
#page.cooking #tab_cooking,
#page.animal #tab_animal {
    background-color: rgba(var(--color-btn-rgb), 0.6);
}

#page.wrapped #filter_content .input-label,
#page.wrapped #filter_content #checkbox_filter,
#page.wrapped #filter_content .dropdown_wrap,
#page.wrapped #filter_content .switches .switch_wrap:not(.switch_wrap_dark) {
    display: none;
}

.tab_window {
    display: none;
    height: 100%;
    overflow: auto;
}

.gift_show,
.museum_show,
.almanac_show,
.wrapped_show,
.cooking_show,
.woodworking_show,
.animal_show {
    display: none;
}

#page.gift .gift_show,
#page.museum .museum_show,
#page.almanac .almanac_show,
#page.wrapped .wrapped_show,
#page.cooking .cooking_show,
#page.woodworking .woodworking_show,
#page.animal .animal_show {
    display: block;
}


.tab img {
    image-rendering: pixelated;
    width: 26px;
    height: 25px;
    object-fit: contain;
}

#page:not(.mode_collapse) #header #tabs {
    opacity: 0;

}

@media only screen and (min-width: 550px) {
    .tab {
        font-size: 12px;
        gap: 5px;
        padding-right: 12px;
        min-height: 34px;
    }

    .tab img {
        width: 20px;
        height: 20px;
    }

    #page:not(.mode_collapse) #header #tabs {
        margin-left: calc(260px - 50px + 8px);
    }

    #page:not(.mode_collapse) #header #tabs {
        opacity: 1;
    }
}

.bottom_info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
}

#json_button {
    height: 20px;
    cursor: pointer;
    display: inline-flex;
    text-align: center;
    align-items: center;
    overflow: hidden;
    flex-direction: row;
    padding-right: 8px;
    font-size: 11px;
    line-height: 11px;
    transition: opacity 0.3s ease;
    color: var(--color-txt);
    fill: var(--color-txt);
    stroke: var(--color-txt);
    opacity: 0.5;
}

#json_button:hover {
    opacity: 01;
}

#json_button .icon {
    justify-content: flex-start;
    width: 17px;
    min-width: 17px;
    height: 20px;
}

#json_button .icon svg {
    height: 11px;
    width: 11px;
}

#json_button_popup *::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

#json_button_popup *::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.45);
    border-radius: 10px;
    box-shadow: rgba(255, 255, 255, 0.3) 0 0 0 1px;
}

#json_button_popup *:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.55);
}

.popup_wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    z-index: 109;
    --popup-width: 575px;
}

.popup_wrapper.loading .popup_inner:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 101;
    display: block;
    cursor: default;
    display: block;
    background-color: rgba(51, 51, 51, 0.4);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 2;
}

.popup_wrapper.loading .popup_inner:after {
    --loader-height: 70px;
    content: '';
    background-image: url(../images/loader.gif), url(../images/loader.gif), url(../images/loader.gif);
    height: var(--loader-height);
    width: calc(var(--loader-height) * 2);
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: contain;
    background-position: left, center, right;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    z-index: 3;
}

.popup_inner {
    position: absolute;
    background: var(--color-bg);
    z-index: 103;
    overflow: auto;
    top: 30px;
    border-radius: 8px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    width: auto;
    margin-left: 0;
    left: 0;
    right: 0;
    padding-top: 0;
    height: calc(100% - 30px);
    max-height: unset;
    display: block;
}

.popup_close {
    display: block;
    overflow: hidden;
    text-decoration: none;
}

.popup_close:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 101;
    display: block;
    cursor: default;
    display: block;
    background-color: rgba(var(--color-btn-rgb), 0.5);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.popup_close:after {
    position: absolute;
    content: '';
    z-index: 102;
    line-height: 25px;
    border: 0;
    cursor: pointer;
    background: url(../images/close.svg) center no-repeat;
    height: 18px;
    width: 18px;
    padding: 0;
    top: 6px;
    left: 0;
    right: 5px;
    margin-left: auto;
}

@media screen and (min-width: 575px) {
    .popup_inner {
        padding-top: 0;
        left: 50%;
        z-index: 103;
        overflow: auto;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        width: var(--popup-width);
        margin-left: calc((var(--popup-width) / 2 * -1));
        height: unset;
        max-height: 845px;
        top: 80px;
    }

    .popup_close {}

    .popup_close:before {}

    .popup_close:after {
        margin-left: calc((var(--popup-width) / 2 - 18px));
        top: calc(80px - 28px);
        left: 50%;
    }
}

@media screen and (min-width: 575px) and (min-height: 940px) {
    .popup_inner {
        min-height: 150px;
        max-height: calc(100% - 400px);
        top: 120px;
    }

    .popup_close:after {
        top: calc(120px - 28px);
    }
}

.inner_divider+.inner_divider {
    border-top: 1px solid var(--color-bg-darkest);
    margin-top: 20px;
    padding-top: 20px;
}

.popup_header {
    background: var(--color-bg);
    padding: 30px 16px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.popup_header_text {
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
    color: var(--color-txt);
    fill: var(--color-txt);
    stroke: var(--color-txt);
    display: flex;
    align-items: center;
}

.popup_header_text .icon {
    width: 32px;
    min-width: 32px;
    justify-content: flex-start;
}

.popup_header_text .icon svg {
    height: 21px;
    width: 21px;
}

.popup_header_desc, .popup_subdesc {
    font-size: 12px;
    line-height: 15px;
    opacity: 0.5;
    width: 100%;
}

.popup_subdesc {
    margin-bottom: 10px;
    font-size: 11px;
    line-height: 12px;
    opacity: 1;
}

.popup_header_desc p, .popup_subdesc p {
    margin: 0;
}

.popup_subdesc p {
    opacity: 0.5;
    display: flex;
    gap: 5px;
}

.popup_subdesc p+p {
    margin-top: 3px;
}


.popup_subdesc svg {
    color: var(--color-txt);
    width: 13px;
    height: 13px;
}

.popup_subdesc pre {
    width: 100%;
}

.popup_content {
    display: flex;
    flex-direction: column;
    min-height: min-content;
    padding: 0 16px 16px 16px;
}

.popup_subtitle {
    font-size: 14px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.popup_subtitle svg {
    color: var(--color-txt);
    width: 14px;
    height: 14px;
}

.popup_inner .button_set {
    display: flex;
    gap: 5px;
    justify-content: flex-end;
    margin-top: 10px;
}

.popup_inner .button_item {
    width: unset;
}



@media screen and (min-width: 550px) {
    .popup_header {
        padding: 25px;
        padding-bottom: 15px;
        display: flex;
        flex-direction: row;
        gap: 10px 0;
    }

    .popup_content {
        padding: 0 25px 25px 25px;
    }
}

#location_info {
    display: flex;
    position: relative;
    margin: 10px 0;
}

#location_info pre {
    min-height: 35px;
}

#location_info .copy_button {
    position: absolute;
    right: 4px;
    top: 4px;
    padding: 5px 0;
    min-height: 26px;
    font-size: 11px;
}

#location_info .copy_button .icon {
    width: 26px;
    min-width: 26px;
}

#location_info .copy_button .icon svg {
    height: 12px;
    width: 12px;
}

#location_info .copy_button .copied {
    padding: 5px 10px 5px 0;
}

#location_info .copy_button:not(.copied):hover {
    padding: 5px 10px 5px 0;

    .hover {
        display: inline;
    }
}

#output {
    margin: 10px 0;
}

#suggestion {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    text-decoration: unset;
    color: var(--color-txt);
    margin-top: 5px;
}

#suggestion_question {
    font-size: 10px;
    line-height: 10px;
    opacity: 0.2;
    transition: opacity 0.3s ease;
}

#suggestion:hover #suggestion_question {
    opacity: 0.5;
}

#suggestion_question p {
    margin: 0;
}

#suggestion_question svg {
    height: 100%;
    width: 7px;
    margin-left: 2px;
}

#suggestion_question svg * {
    fill: var(--color-txt);
}

#owner {
    font-size: 14px;
    line-height: 14px;
    display: flex;
    align-items: center;
    gap: 7px;
    opacity: 0.3;
    transition: opacity 0.3s ease;
}

#suggestion:hover #owner {
    opacity: 1;
}

#owner svg {
    height: 16px;
    width: 16px;
}

.tab_content {
    padding: 8px;

}

.tab_content.soon,
.tab_content:empty {
    position: relative;
    min-height: 100%;

}

.tab_content:empty:after {
    --loader-height: 70px;
    content: '';
    background-image: url(../images/loader.gif), url(../images/loader.gif), url(../images/loader.gif);
    height: var(--loader-height);
    width: calc(var(--loader-height) * 2);
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: contain;
    background-position: left, center, right;
    background-repeat: no-repeat;
    image-rendering: pixelated;
}

.tab_content.soon:empty:after {
    content: 'Nothing here yet..';
    background-image: url("images/spr_ui_generic_lock_icon.png");
    height: unset;
    width: unset;
    padding-left: 22px;
    background-size: calc(10px * 1.3) calc(12px * 1.3);
}


#almanac,
.sets,
#characters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 10px;
    overflow: auto;
}

#almanac {
    grid-template-columns: repeat(auto-fill, 1fr);
}

@media only screen and (min-width: 640px) {
    #almanac {
        grid-template-columns: repeat(auto-fill, minmax(370px, 1fr));
    }
}

#museum {
    display: flex;
    gap: 10px;
    overflow: auto;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.sets {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wing,
.section,
.character {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid var(--color-bg-darkest);
    border-radius: 5px;
    background: var(--color-bg-darker);
    padding: 10px;
    border-radius: 10px;
}

.wing {
    max-width: 350px;
    flex: 1;
    width: 100%;
    min-width: 220px;
}



.section .set_items {
    max-width: 450px;
    background: unset;
    border: unset;
    margin-top: 20px;
}


.wing_img,
.char_img {
    width: 180px;
    height: 180px;
    margin-bottom: 10px;
}

.wing_img img,
.char_img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.section_img_mini,
.char_img_mini {
    width: 40px;
    height: 40px;
    image-rendering: pixelated;
    margin-top: 2px;
    object-fit: contain;
    margin-right: 5px;
    display: none;
}

.section_name,
.char_name {
    font-size: 18px;
    font-weight: bold;
    display: none;
    color: var(--color-txt);
    text-decoration: unset;
    align-items: center;
    height: 42px;
}

.section_name, .section_img_mini {
    display: flex;
}

.liked_gifts, .loved_gifts, .set_items {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 5px;
    justify-content: space-around;
    margin-top: 20px;
}

.set_items {
    border: 1px solid var(--color-bg-darkest);
    border-radius: 5px;
    background: var(--color-bg-darkest-solid);
    padding: 10px;
    border-radius: 10px;
    margin-top: unset;
}

.liked_gifts {}

[data-tippy-root] .tippy-box {
    background-color: rgba(51, 51, 51, 0.8);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.tippy-arrow:before {
    color: rgba(51, 51, 51, 0.8);
}

.tip_wrap {
    padding: 4px 0;
}

[data-tippy-root] .tippy-box .tippy-content .save_file {
    margin: 0;
    font-size: 12px;
    line-height: 14px;
}

[data-tippy-root] .tippy-box .tippy-content .save_file+.save_file {
    margin-top: 5px;
}

[data-tippy-root] .tippy-box .tippy-content .tip {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 5px;
    min-width: 160px;
    align-items: center;
}

[data-tippy-root] .tippy-box .tippy-content .tip .tip_name {
    flex: 1;
    text-align: center;
    text-decoration: unset;
    color: white;
    margin-bottom: 5px;
    position: relative;
    display: inline-flex;
    gap: 5px;
}

[data-tippy-root] .tippy-box .tippy-content .tip .tip_name.donatable {
    padding-left: 10px;
}

[data-tippy-root] .tippy-box .tippy-content .tip .tip_name.checked:after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    height: 100%;
    text-align: center;
    background-image: url(../images/check.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
    opacity: 0.7;
}

[data-tippy-root] .tippy-box .tippy-content .tip .tip_name.checked img {
    opacity: 0.6;
}


[data-tippy-root] .tippy-box .tippy-content .tip .tip_buff {
    width: 100%;
    text-align: center;
    margin-bottom: 5px;
    margin-top: -10px;
    font-size: 11px;
    opacity: 0.5;
}

[data-tippy-root] .tippy-box .tippy-content .tip .tip_info {
    width: 100%;
    text-align: left;
}

[data-tippy-root] .tippy-box .tippy-content .tip .tip_info p {
    margin: 0;
    display: inline-block;
}

[data-tippy-root] .tippy-box .tippy-content .tip .no-wrap {
    white-space: nowrap;
}

[data-tippy-root] .tippy-box .tippy-content .tip span {
    line-height: 19px;
}


[data-tippy-root] .tippy-box .tippy-content .tip span:not([style="display:none"]) {
    display: inline-block !important;
}


[data-tippy-root] .tippy-box .tippy-content .tip a {
    text-decoration: unset;
    color: #a2d2ff;
    height: 19px;
    line-height: 19px;
    display: inline-block;
    vertical-align: top;
}

[data-tippy-root] .tippy-box .tippy-content .tip a:visited {
    color: #cdb4db;
}

[data-tippy-root] .tippy-box .tippy-content .tip a:hover {
    text-decoration: underline;
}

[data-tippy-root] .tippy-box .tippy-content .tip img {
    height: 19px;
    width: 19px;
    object-fit: contain;
    display: block;
    display: inline-block;
    vertical-align: top;
    image-rendering: pixelated;
}

[data-tippy-root] .tippy-box .tippy-content .tip img[alt^=Season] {
    width: 14px;
}

.statistics_header {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 5px;
}

.statistics_table,
[data-tippy-root] .tippy-box .tippy-content .tip table {
    font-size: 11px;
    line-height: 19px;
    border-collapse: collapse;
    margin-top: 5px;
    width: 100%;
}

.statistics_table {
    width: unset;
    margin: 5px;
}

#page.mode_mini_tooltip [data-tippy-root] .tippy-box .tippy-content .tip table {
    display: none;
}

[data-tippy-root] .tippy-box .tippy-content .tip table tr {}

.statistics_table td,
[data-tippy-root] .tippy-box .tippy-content .tip table td {
    padding: 4px 3px;
    border-top: 1px solid #00000099;
    width: 99%;
}

[data-tippy-root] .tippy-box .tippy-content .tip table td {
    font-size: 11px;
    line-height: 19px;
    text-align: left;
}

.statistics_table td {
    width: unset;
    padding: 2px 3px;
}

.statistics_table td:first-child,
[data-tippy-root] .tippy-box .tippy-content .tip table td:first-child {
    font-size: 10px;
    text-transform: uppercase;
    width: unset;
    opacity: 0.5;
    padding-right: 10px;
    white-space: nowrap;
}

.statistics_table tr:first-child td {
    /* border-top: unset; */
}

.wing_name,
.set_name,
.giftset {
    width: 100%;
    text-align: center;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-txt);
    text-decoration: unset;
}

.wing_name {
    font-weight: bold;
    margin-bottom: 10px;
}

.set_name {
    text-transform: unset;
}

.item.hide_checkbox, .item.hide_search {
    display: none;
}

.item input {
    display: none;
}

.item input:checked+label {
    opacity: 0.3;
}

.item label {
    display: flex;
    width: 50px;
    flex-direction: column;
    align-items: center;
}

.item label .image {
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-size: contain;
    image-rendering: pixelated;
}

.item label .image.noimage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(var(--color-btn), #00000000, #00000000) !important;
    color: var(--color-txt);
}

.item label .image.noimage:after {
    content: "?";
    display: block;
    position: relative;
    width: 10px;
    line-height: 20px;
    font-size: 20px;
    text-align: center;
}

.item label img:hover {
    transform: scale(1.1);
}

.item .name {
    width: 100%;
    font-size: 10px;
    text-align: center;
    overflow: hidden;
    display: none;
}

#search_items {
    width: 100%;
    border-radius: 8px;
    padding: 0 15px;
    border: 1px solid var(--color-txt);
    height: 46px;
    color: var(--color-txt);
    text-align: left;
    background: transparent;
    outline: none;
    line-height: 19px;
    min-height: 46px;
    font-size: 16px;
}

.switches {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: auto;
}

.switch_wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.switch_wrap svg {
    color: var(--color-txt);
    width: 16px;
    height: 16px;
}

/*** switch checkbox ***/
.switch {
    --switch-width: calc(50px);
    /* 50 */
    --switch-height: calc(50px / 2);
    /* 25 */
    --switch-toggler-height: calc(var(--switch-height) * 0.74);
    /* 19 */
    --switch-toggler-left: calc(var(--switch-height) * 0.13);
    /* 3 */
    --switch-toggler-right: calc(var(--switch-width) - var(--switch-toggler-height) - var(--switch-toggler-left) *2);
    /* 25 */

    position: relative;
    display: inline-block;
    width: var(--switch-width);
    min-width: var(--switch-width);
    height: var(--switch-height);

}

.switch input {
    display: none;
}

.switch .toggler {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #c8c8c8;
    border-radius: calc(var(--switch-height) / 2)
}

.switch .toggler:before {
    position: absolute;
    content: "";
    height: var(--switch-toggler-height);
    width: var(--switch-toggler-height);
    left: var(--switch-toggler-left);
    bottom: var(--switch-toggler-left);
    background-color: white;
    -webkit-transition: transform 0.3s ease;
    transition: transform 0.3s ease;
    border-radius: 50%;
    box-sizing: border-box;
}

.switch input:checked+.toggler {
    background-color: var(--color-btn);
}

.switch input:checked+.toggler:before {
    -webkit-transform: translateX(var(--switch-toggler-right));
    -ms-transform: translateX(var(--switch-toggler-right));
    transform: translateX(var(--switch-toggler-right));
}

@media only screen and (min-width: 550px) {
    .switches {
        gap: 7px;
    }

    .switch {
        --switch-width: calc(38px);
        /* 50 */
        --switch-height: calc(40px / 2);
        /* 25 */
    }
}

/*** END: switch checkbox ***/
/*** dark mode switch checkbox ***/
.switch {
    --switch-toggler-offset: calc(var(--switch-toggler-left)*2);
}

.switch.mode_dark input+.toggler {
    background-color: white;
    border-color: var(--color-bg-darkest);
}

.switch.mode_dark input:checked+.toggler {
    background-color: var(--color-btn);
}

.switch.mode_dark .toggler:before {
    background-color: #ffeccf;
    border: 1.5px solid #ffbb52;
}

.switch.mode_dark input:checked~.toggler:before {
    background-color: var(--color-btn);
    border: 1.5px solid var(--color-txt);
}

.switch.mode_dark .moon-icon, .switch.mode_dark .sun-icon {
    position: absolute;
    height: var(--switch-toggler-height);
    width: var(--switch-toggler-height);
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../images/moon.svg);
    background-size: 75%;
}

.switch.mode_dark .sun-icon {
    background-image: url(../images/sun.svg);
    background-size: 90%;
}

.switch.mode_dark .sun-icon {
    opacity: 1;
    transform: translate(calc(var(--switch-toggler-right) + var(--switch-toggler-left)), var(--switch-toggler-left)) rotate(-15deg);
    transform-origin: 50% 50%;
    transition: opacity 150ms, transform 500ms ease;
}

.switch.mode_dark input:checked~.toggler .moon-icon {
    opacity: 1;
    transform: translate(var(--switch-toggler-left), calc(var(--switch-toggler-left) * 1.2)) rotate(15deg);
}

.switch.mode_dark input:checked~.toggler .sun-icon {
    opacity: 0;
    transform: translate(var(--switch-toggler-right), var(--switch-toggler-offset)) rotate(10deg);
}

.switch.mode_dark .moon-icon {
    opacity: 0;
    transform: translate(calc(var(--switch-toggler-left) + var(--switch-toggler-left)), var(--switch-toggler-offset)) rotate(-10deg);
    transform-origin: 50% 50%;
    transition: opacity 150ms, transform 500ms ease;
}

/*** END: dark mode switch checkbox ***/
.highlight {
    background-color: #8338ec;
    color: white;
}

input[type="checkbox"].styled {
    display: none;
}

input[type="checkbox"].styled+label {
    min-height: 20px;
    align-items: center;
    padding-left: 30px;
    padding-right: 20px;
    background-position: 0 center;
    line-height: 20px;
    background-size: 20px;
    background-repeat: no-repeat;
    display: inline-flex;
    cursor: pointer;
    white-space: nowrap;
}

input[type="checkbox"].styled:checked+label {
    font-weight: bold;
}

input[type="checkbox"].styled:checked+label:after {
    display: none;
}

input[type="checkbox"].styled+label {
    background-image: url(../images/checkbox.svg);
}

input[type="checkbox"].styled:checked+label {
    background-image: url(../images/checkbox_ch.svg);
}

.button_item {
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10 and IE 11 */
    user-select: none;
    /* Standard syntax */
    border-radius: 5px;
    min-height: 32px;
    cursor: pointer;
    display: flex;
    text-align: center;
    align-items: center;
    overflow: hidden;
    flex-direction: row;
    padding: 5px 12px 5px 0;
    padding-right: 12px;
    font-size: 12px;
    background-color: var(--color-bg-darker);
    transition: fill 0.3s ease, color 0.3s ease, background-color 0.3s ease;
    width: 100%;
    color: var(--color-txt);
    fill: var(--color-txt);
    stroke: var(--color-txt);
}

#page:not(.mode_dark) .button_item:hover {
    color: var(--color-bg);
    fill: var(--color-bg);
    stroke: var(--color-bg);
}

.button_item.no_icon {
    padding-left: 12px;
}

.button_item.accent {
    background-color: var(--color-btn);
}

#page:not(.mode_dark) .button_item.accent {
    color: var(--color-bg);
    fill: var(--color-bg);
    stroke: var(--color-bg);
}

.button_item.accent:hover {
    background-color: var(--color-btn2);
}

.button_item.copy_button {
    span {
        display: none;
    }

    .default {
        display: inline;
    }
}

.button_item.copy_button.copied {
    background-color: #6b917e;

    span {
        display: none;
    }

    .copied {
        display: inline;
    }
}

#page:not(.mode_dark) .button_item.copy_button.copied {
    color: var(--color-bg);
    fill: var(--color-bg);
    stroke: var(--color-bg);
}

.dropdown_button {
    background-image: url(../images/dropdown_grey.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) center;
    background-size: 8px 8px;
    white-space: nowrap;
}

.dropdown_button:hover {
    background-image: url(../images/dropdown_white_transparent.svg);
}

#page.mode_dark .dropdown_button {
    background-image: url(../images/dropdown_white_transparent.svg);
}

.button_item:hover {
    background-color: var(--color-btn);
}

.icon {
    width: 32px;
    height: 100%;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon svg {
    height: 13px;
    width: 13px;
    overflow: visible;
}

.icon *[fill]:not([fill="none"]) {
    fill: inherit !important;
}

.icon *[stroke]:not([stroke="none"]) {
    stroke: inherit !important;
}

.dropdown_wrap {
    position: relative;
}

.dropdown {
    display: flex;
    max-height: 0;
    background: white;
    position: absolute;
    border-radius: 5px;
    flex-direction: column;
    -webkit-box-shadow: -1px 2px 30px 0px var(--color-bg-darkest);
    box-shadow: -1px 2px 30px 0px var(--color-bg-darkest);
    transition: 0.5s ease;
    overflow: hidden;
    flex-wrap: nowrap;
    align-items: flex-start;
    opacity: 0;
    top: calc(100% + 5px);
    max-width: calc(100vw - 30px);
    border: 1px solid var(--color-bg-darker);
    left: 0;
    z-index: 6;
    min-width: 100%;
    background-color: rgba(var(--color-bg-darkest-solid-rgb), 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.dropdown_wrap.open .dropdown {
    max-height: 1000px;
    opacity: 1;
    padding: 5px 0;
}

.dropdown-item {
    width: 100%;
    min-height: 32px;
    line-height: 21px;
    background-color: unset;
    background-position-y: center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position-x: 16px;
    font-size: 12px;
    color: var(--color-txt);
    fill: var(--color-txt);
    stroke: var(--color-txt);
    align-items: center;
    text-decoration: unset;
    transition: 0.5s ease;
    padding-right: 10px;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.dropdown-item:hover, .dropdown-item.selected {
    background-color: rgba(var(--color-btn-rgb), 0.2);
}

#page.mode_dark .dropdown-item:hover, #page.mode_dark .dropdown-item.selected {
    background-color: rgba(var(--color-btn-rgb), 0.4);
}

.dropdown-item .icon svg {
    width: 13px;
    height: 13px;
}

textarea {
    width: 100%;
    border-radius: 8px;
    padding: 0 15px;
    border: 1px solid var(--color-txt);
    height: 46px;
    color: var(--color-txt);
    text-align: left;
    background: transparent;
    outline: none;
    font-size: 12px;
    line-height: 15px;
    resize: vertical;
    height: 162px;
}

.input-label {
    display: flex;
    flex-wrap: wrap;
    transition: unset;
    position: relative;
}

.input-label label {
    position: absolute;
    background: var(--color-bg);
    min-width: unset;
    left: 10px;
    padding: 0 7px;
    color: var(--color-txt);
    line-height: 16px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 1;
}

.input-label textarea, .input-label input {
    margin-top: 8px;
    padding-top: 7px;
}

ul {
    padding: 0;
    list-style: none;
    margin: 0;
    margin-bottom: 10px;
}

.alerts {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.alert {
    align-items: center;
    background: #ff000033;
    border-radius: 8px;
    overflow: hidden;
    color: var(--color-txt);
    fill: var(--color-txt);
    stroke: var(--color-txt);
    width: 100%;
    display: none;
}

.alert.green {
    background: #00ff0033;
}

.alert.yellow {
    background: #F1B51D33;
}

.alert.show {
    display: flex;
}

.alert .icon {
    width: 35px;
    min-width: 35px;
}

.alert .icon.yellow, .alert .icon.green {
    display: none
}

.alert.green .icon {
    display: none
}

.alert.green .icon.green {
    display: flex
}

.alert.yellow .icon {
    display: none
}

.alert.yellow .icon.yellow {
    display: flex
}

.alert .icon svg {
    height: 15px;
    width: 15px;
}

.alert .info {
    padding: 10px 10px 10px 0;
}

pre {
    border: 1px solid var(--color-bg-darkest);
    border-left: 3px solid var(--color-btn);
    page-break-inside: avoid;
    font-family: monospace;
    max-width: 100%;
    overflow: auto;
    padding: 10px;
    display: block;
    word-wrap: break-word;
    background-color: var(--color-bg-darker);
    font-size: 11px;
    max-height: 100px;
    margin: 0;
}

#save_input {
    display: none;
}

.statistics {
    display: flex;
    flex-direction: column;
    gap: 3px;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.statistics:hover {
    opacity: 1;
}

.statistics_label {
    white-space: nowrap;
    font-size: 11px;
    padding-right: 5px;
    min-width: 84px;
}

.meter_label_wrapper {
    display: flex;
    align-items: center;
}

.meter_wrapper {
    --statistics-height: 15px;
    border-radius: calc(var(--statistics-height) / 5);
    overflow: hidden;
    margin-left: auto;
    flex: 1;
}

.meter {
    height: var(--statistics-height);
    position: relative;
    background: var(--color-bg-darker);
    border-radius: calc(var(--statistics-height) / 5);
    padding: 0;
    border: 1px solid rgba(var(--color-btn-rgb), 0.4);
}

.meter>div {
    display: flex;
    height: 100%;
    margin-top: -1px;
    margin-left: -1px;
    border-radius: calc(var(--statistics-height) / 5);
    background-color: var(--color-btn);
    box-sizing: content-box !important;
    padding: 1px;
    font-size: calc(var(--statistics-height) / 1.5);
    color: var(--color-txt);
    align-items: center;
}

.meter>div span {
    display: block;
    padding: 0 6px;
    text-align: center;
    width: 100%;
}