/* ==================================================
   Dependencies
================================================== */

@import url("//fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@300;500;700;900&display=swap");
@import url("//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css");


/* ==================================================
   Global attributes
================================================== */

:root {
    /* colors */
    --item-bg: #505050;
    --examine-bg: #746559;
    --examine-bg-op: #746559ed;
    --selection: #443b33;
    --shadow-color: #261d11;
    /* icons */
    --button-close1-1: -57px -79px / 79px url(../media/images/buttons/buttons-pack.png) no-repeat;
    --button-close1-2: -57px -101px / 79px url(../media/images/buttons/buttons-pack.png) no-repeat;
    --button-close2-1: -70px -49px / 98px 151px url(../media/images/buttons/buttons-pack.png) no-repeat;
    --button-close2-2: -70px -73px / 98px 151px url(../media/images/buttons/buttons-pack.png) no-repeat;
    --button-expand-1: -90px -45px / 125px url(../media/images/buttons/buttons-pack.png) no-repeat;
    --button-expand-2: -106px -45px / 125px url(../media/images/buttons/buttons-pack.png) no-repeat;

    --icon-cancel: -74px -58px / 100px url(../media/images/sprites/settings-icon-pack.png) no-repeat;
    --icon-chart: -24px -53px / 92px url(../media/images/sprites/settings-icon-pack.png) no-repeat;
    --icon-chatbubble: -46px 0px / 72px url(../media/images/sprites/settings-icon-pack.png) no-repeat;
    --icon-check: -71.5px -29px / 110px url(../media/images/sprites/settings-icon-pack.png) no-repeat;
    --icon-clock: -25px 0px / 79px url(../media/images/sprites/settings-icon-pack.png) no-repeat;
    --icon-examine: 0 -57px / auto url(../media/images/sprites/settings-icon-pack.png) no-repeat;
    --icon-export: 0 -20px / 92px url(../media/images/sprites/settings-icon-pack.png) no-repeat;
    --icon-import: 0 -37px / 92px url(../media/images/sprites/settings-icon-pack.png) no-repeat;
    --icon-magnifier: -50px -38px / 104px url(../media/images/sprites/settings-icon-pack.png) no-repeat;
    --icon-referral: 0 -67px / 92px url(../media/images/sprites/settings-icon-pack.png) no-repeat;
    --icon-reorder: 0 0 / auto url(../media/images/sprites/settings-icon-pack.png) no-repeat;
    --icon-trash: -20px -31px / 92px url(../media/images/sprites/settings-icon-pack.png) no-repeat;
    --icon-scroll: -34px -40px / 70px url(../media/images/sprites/settings-icon-pack.png) no-repeat;
    --icon-warning: 78px 0 / auto url(../media/images/sprites/settings-icon-pack.png);

    --icon-buy: 0 0 / 45px 78px url(../media/images/sprites/icon-pack.png) no-repeat;
    --icon-sell: -20px 0 / 45px 78px url(../media/images/sprites/icon-pack.png) no-repeat;
    --icon-margin: -19px -31.5px / 44px 78px url(../media/images/sprites/icon-pack.png) no-repeat;
    --icon-moneybag: 0 -28px / 46px 81px url(../media/images/sprites/icon-pack.png) no-repeat;
    --icon-coins: -40px -68px / auto url(../media/images/sprites/icon-pack.png) no-repeat;
    --icon-highalchemy: 0 -68px / auto url(../media/images/sprites/icon-pack.png) no-repeat;
    --icon-lowalchemy: -20px -68px/ auto url(../media/images/sprites/icon-pack.png) no-repeat;
    --icon-members: 3px -93px / 64px url(../media/images/sprites/icon-pack.png) no-repeat;
    --icon-star-members: -20px -101px / 75px 120px url(../media/images/sprites/icon-pack.png) no-repeat;
    --icon-star-nonmembers: -41px -101px / 75px 120px url(../media/images/sprites/icon-pack.png) no-repeat;
}
::selection {
    background-color: var(--selection);
}
* {
    scrollbar-color: #261d11 #494034;
    scrollbar-width: thin;
}
::-webkit-scrollbar-track {
	border-radius: 5px;
	background-color: transparent;
}
::-webkit-scrollbar {
	width: 10px;
    height: 10px;
	background-color: #494034;
}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-corner {
	background-color: #191612;
}
div {
  -webkit-tap-highlight-color: transparent;
}
a {
    color: white;
    text-decoration: none;
}
    a:active, a:focus, a:hover {
        color: black;
        text-decoration: underline;
    }
p {
    margin: 0;
}


/* ==================================================
   Global Classes
================================================== */

.flex {
    display: flex;
}
.uppercase {
    text-transform: uppercase;
}
.bold {
    font-weight: 400;
}
.italic {
    font-style: italic;
}
.text-center {
    text-align: center;
}
.text-nowrap {
    white-space: nowrap;
}
.visible {
    opacity: 1 !important;
}
.invisible {
    display: none !important;
}
.retract {
    opacity: 0;
    height: 0 !important;
    overflow: hidden;
}
.transparent {
    background: transparent !important;
    border: transparent !important;
    outline: 0 !important;
}
.positive {
    color: #1aa61a;
}
.negative {
    color: #c42020;
}
.highlight {
    animation: highlight 1.25s ease-in-out 3;
}

/* ==================================================
   Animations & Transforms
================================================== */
    .no-anim {
        transition: none !important;
    }
    .appear {
        opacity: 1 !important;
        transform: none !important;
    }
    @keyframes rotate {
        from {
            transform: rotate(0deg);
        } to {
            transform: rotate(360deg);
        }
    }
    @keyframes fade {
        from {
            opacity: 1;
        } to {
            opacity: 0;
        }
    }
    @keyframes shadow-pulse {
        0%, 100% {
            box-shadow: 0 0 10px 5px black;
        } 50% {
            box-shadow: 0 0 10px 0 black;
        }
    }
    @keyframes click-pulse {
        0% {
            box-shadow: none;
        } 25% {
            box-shadow: 0 0 2px 5px #ffffff69;
        } 50% {
            box-shadow: 0 0 2px 10px #ffffff69;
        } 75% {
            box-shadow: 0 0 2px 15px #ffffff69;
        } 95% {
            box-shadow: 0 0 2px 20px #ffffff15;
            background-color: #ffffff15;
        } 100% {
            box-shadow: none;
        } 0%, 100% {
            background-color: transparent;
        } 25%, 50%, 75% {
            background-color: #ffffff69;
        }
    }
    @keyframes emptySwing {
        0%, 100% {
            font-size: 35pt;
            font-weight: 500;
            line-height: 100px;
            text-indent: 50px;
            transform: rotate(10deg);
        } 25%, 75% {
            font-size: 32.5pt;
            transform: rotate(-3deg);
        } 50% {
            font-size: 30pt;
            text-indent: 25px;
            transform: rotate(-15deg);
        } 75% {
            line-height: 75px;
        }
    }
    @keyframes expand-width {
        from {
            width: 35px;
        } to {
            width: fit-content;
        }
    }
    @keyframes highlight {
        0%, 25% {
            box-shadow: none;
        } 75% {
            box-shadow: 0 0 5px 0 white, inset 0 0 5px 0 white;
        }
    }


/* ==================================================
   Stylesheet
================================================== */

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: 'Noto Sans Mono', monospace;
    /* cursor: none !important; */
}
    body {
        background-color: #ffe4c4;
        overflow: hidden;
    }
        pre {
            display: block;
            font-family: 'Noto Sans Mono', monospace;
            margin: 0;
        }
        button {
            min-width: fit-content;
            min-height: 34px;
            padding-inline: 15px;
            color: white;
            font-size: 10pt;
            background: no-repeat url(../media/images/buttons/buttons-pack.png);
            background-size: 200px 200px;
            border-radius: 2px;
            border: 1px solid black;
            outline: 0;
            cursor: pointer;
            user-select: none;
            z-index: 1;
        }
            button:hover {
                background-position-y: -34px;
            }
        div.block {
            text-align: left;
        }
        div.notification {
            position: fixed;
            align-items: center;
            justify-self: center;
            box-sizing: border-box;
            inset: 60px auto auto auto;
            width: 100%;
            margin-top: 4px;
            padding: 0.5em 1em;
            gap: 10px;
            color: white;
            text-shadow: 1px 1px 1px black;
            background-color: #7e6e61;
            outline: 1px solid black;
            transition: 250ms all ease-in-out;
            z-index: -1;
        }
            div.notification a {
                color: black;
                text-shadow: 1px 1px 2px black;
                cursor: pointer;
            }
                div.notification a:focus, div.notification a:hover {
                    text-underline-offset: 2px;
                    outline: 0;
                }
            div.notification-content span.title {
                font-size: 15pt;
                font-weight: 400;
            }
            div.notification-content div.notificationDesc {
                font-size: 10pt;
                font-weight: 100;
            }
            div.notification div.notification-icon {
                width: 40px;
                height: 40px;
                background-position: right;
                background-repeat: no-repeat;
            }
        div#tooltip {
            position: fixed;
            max-width: 225px;
            padding: 8px 14px;
            color: white;
            font-size: 11px;
            text-align: center;
            background-color: #746559;
            border-radius: 0 2px 2px 2px;
            outline: 1px solid black;
            opacity: 0;
            transition: 250ms opacity ease-in-out;
            z-index: 22000;
        }
        div#ge-tracker {
            flex-direction: column;
            height: 100%;
        }
            pre#empty, noscript {
                position: fixed;
                align-self: center;
                align-items: center;
                height: 75%;
                margin: 0;
                color: white;
                font-family: monospace;
                font-size: 30pt;
                font-weight: 900;
                line-height: 75px;
                letter-spacing: 10px;
                text-indent: 150px;
                text-align: left;
                text-transform: uppercase;
                text-shadow: 2px 2px black;
                background: url(../media/images/doge.png) no-repeat;
                background-size: contain;
                background-position: center;
                opacity: 0;
                transition: 500ms all ease-in-out;
                user-select: none;
                z-index: -1;
            }
            noscript {
                display: flex;
                align-items: flex-end;
                justify-content: center;
                inset: auto auto 25% auto;
                width: 100%;
                line-height: 4rem;
                letter-spacing: 0;
                text-indent: 0;
                text-align: center;
                background: center / contain no-repeat url(../media/images/Crob.gif);
                opacity: 1;
                z-index: 0;
            }
                pre#empty.visible {
                    z-index: 0 !important;
                }
                pre#empty:hover {
                    font-size: 35pt;
                    font-weight: 500;
                    line-height: 100px;
                    text-indent: 50px;
                    text-transform: none;
                    transform: rotate(10deg);
                    animation: emptySwing 2s linear 500ms infinite forwards;
                }
                pre#empty::selection, noscript::selection {
                    background-color: transparent;
                }
            div#form {
                justify-content: space-around;
                align-items: center;
                box-sizing: border-box;
                width: 100%;
                min-height: 60px;
                margin-bottom: 4px;
                color: white;
                text-shadow: 2px 2px 0 black;
                background-color: #494034;
                box-shadow: 0 4px 0 0 var(--shadow-color), 0 0 10px 2px black;
                transition: 150ms all ease-in-out;
                z-index: 20000;
            }
                form#item-search {
                    margin: 0;
                    gap: 10px;
                    border-radius: 10px;
                    outline: none;
                    /* opacity: 0; */
                    transform: translateY(-500%);
                    transition: 250ms all ease-in-out, 500ms transform ease-in-out;
                }
                    div#form-logo {
                        align-self: center;
                        width: 40px;
                        height: 40px;
                        aspect-ratio: 1;
                        background: url(../media/images/logos/ge-icon.png) no-repeat;
                        background-size: 45px;
                        background-position: center;
                        border-radius: 50%;
                        border: 1px solid black;
                    }
                    form#item-search div#form-container {
                        position: relative;
                        min-width: 210px;
                        max-width: 420px;
                        padding: 0 10px;
                        background-color: #372E22;
                        box-shadow: 0 -2px 0 0 var(--shadow-color);
                        border-radius: 10px;
                        box-sizing: border-box;
                        transition: 250ms all ease-in-out, 0ms border-radius;
                    }
                        div#form-container::after {
                            content: "";
                            position: absolute;
                            inset: 10px 10px auto auto;
                            width: 20px;
                            height: 21px;
                            background: var(--icon-magnifier);
                            pointer-events: none;
                        }
                            div#form-container:focus-within:after {
                                inset: 10px 10px auto auto;
                            }
                        form#item-search div#form-container:focus-within,
                        form#item-search div#form-container:hover {
                            box-shadow: 0 0 0 0 var(--shadow-color), 0 0 6px 1px black !important;
                        }
                        form#item-search input[type="text"] {
                            position: relative;
                            padding-right: 28px;
                            width: 100%;
                            max-width: 400px;
                            min-width: 40px;
                            height: 40px;
                            font-size: 13pt;
                            color: white;
                            background-color: transparent;
                            border: none;
                        }
                            form#item-search input[type="text"]::selection {
                                background-color: #5d4e39;
                            }
                            form#item-search input[type="text"]:focus,
                            form#item-search input[type="text"]:-webkit-autofill,
                            form#item-search input[type="text"]:-webkit-autofill:active,
                            form#item-search input[type="text"]:-webkit-autofill:focus {
                                inset: 0 0 0 0;
                                padding-right: 28px;
                                color: white;
                                -webkit-text-fill-color: white !important;
                                background-color: transparent;
                                border-radius: 10px;
                                outline: 0;
                                transition: 150ms all ease-in-out, background-color 5000000s ease-in-out 0s;
                            }
                            #form-container.suggested {
                                border-radius: 10px 10px 0 0 !important;
                            }
                        #item-search-box-suggestions {
                            position: absolute;
                            display: block;
                            top: 45px;
                            min-width: 425px;
                            width: auto;
                            min-height: 42px;
                            max-height: 335px;
                            margin-left: -10px;
                            padding: 10px 0 0 0;
                            color: white;
                            background-color: #372E22;
                            box-shadow: 0 -3px 0 0 var(--shadow-color), 3px -3px 0 0 var(--shadow-color), 3px 3px 0 0 var(--shadow-color), 3px 3px 0 0 var(--shadow-color), 0 0 0 0 var(--shadow-color), 0 2px 6px 1px black;
                            border-radius: 0 10px 10px 10px;
                            scrollbar-color: #261d11 #494034;
                        }
                            #item-search-box-suggestions div#btn {
                                display: grid;
                                width: fit-content;
                                height: 20px;
                                margin: 5px 15px 5px auto;
                                color: #979797;
                                font-size: 10pt;
                                font-weight: 500;
                                font-style: italic;
                                text-align: end;
                                background: none;
                                border-radius: 0;
                                border: none;
                                cursor: pointer;
                                order: 1;
                                user-select: none;
                            }
                                #item-search-box-suggestions div#btn:hover {
                                    color: white;
                                    text-decoration: underline;
                                    text-underline-offset: 4px;
                                }
                            #item-search-box-suggestions ul {
                                position: relative;
                                flex-direction: column;
                                width: 100%;
                                max-height: 300px;
                                margin: 0;
                                margin-block: 0;
                                padding: 0;
                                font-size: 11pt;
                                font-weight: 300;
                                text-indent: 15px;
                                list-style: none;
                                overflow: auto;
                            }
                                // #item-search-box-suggestions ul::after {
                                //     content: "";
                                //     position: absolute;
                                //     inset: auto auto 0 auto;
                                //     display: block;
                                //     width: 100%;
                                //     height: 30px;
                                //     background: #372e22;
                                // }
                                #item-search-box-suggestions ul::-webkit-scrollbar {
                                    border-radius: 5px;
                                    border-right: 1px solid #372e22;
                                }
                                #item-search-box-suggestions ul::-webkit-scrollbar-thumb {
                                    border-radius: 5px;
                                }
                                #item-search-box-suggestions li {
                                    align-items: center;
                                    height: 40px;
                                    padding: 7px 10px;
                                    gap: 10px;
                                    font-size: 12pt;
                                    font-weight: 500;
                                    text-indent: 0;
                                    user-select: none;
                                }
                                    #item-search-box-suggestions li:hover,
                                    #item-search-box-suggestions li.active {
                                        text-decoration: underline;
                                        text-underline-offset: 2px;
                                        background-color: #6e604d;
                                        cursor: pointer;
                                    }
                                    #item-search-box-suggestions li.active {
                                        outline: 1px solid black;
                                    }
                                    #item-search-box-suggestions #suggestion-icon {
                                        width: 30px;
                                        height: 30px;
                                        background-position: center !important;
                                        background-repeat: no-repeat !important;
                                        background-size: auto !important;
                                    }
                                    #item-search-box-suggestions span {
                                        padding-left: 5px;
                                    }
                    div#form-btns {
                        gap: 10px;
                        transform: translateY(-500%);
                        transition: 250ms all ease-in-out, 500ms transform ease-in-out;
                    }
                        div.form-btn {
                            align-self: center;
                            margin: -2px;
                            padding: 2px;
                            color: #d4d4d4;
                            border-radius: 50%;
                            outline: transparent;
                            transition: 100ms all ease-in-out;
                        }
                            div.form-btn i {
                                width: 32px;
                                height: 32px;
                                font-size: 24pt;
                                border-radius: 50%;
                                cursor: pointer;
                                transition: 100ms all ease-in-out;
                            }
                                div.form-btn:active i {
                                    color: black;
                                    text-shadow: 0 0 10px white;
                                }
                                div#form-btns div#debug-btn i {
                                position: relative;
                                inset: 3px 2px auto auto;
                                font-size: 20pt;
                            }
                        div#item-btns > div::selection, div.itemDesc::selection, div#refresh-btn::selection {
                            color: transparent;
                            background-color: transparent;
                        }
                        div.form-btn:hover {
                            text-shadow: 0 0 10px white;
                        }
                        div#refresh-container {
                            transition: 250ms all ease-in-out;
                        }
                            div#refresh-container span#auto-update-countdown {
                                align-items: center;
                                user-select: none;
                                transition: 100ms all ease-in-out;
                            }
                            div#refresh-container.active {
                                gap: 6px;
                                padding: 5px 10px;
                                background-color: #372e22;
                                box-shadow: 0 -2px 0 0 var(--shadow-color);
                                border-radius: 10px;
                            }
                                div#refresh-container.active i.disabled {
                                    color: #d4d4d4;
                                }
                                div#refresh-container.active:hover {
                                    box-shadow: 0 0 0 0 var(--shadow-color), 0 0 6px 1px black;
                                }
                                div#refresh-btn i {
                                    box-shadow: none;
                                    border-radius: 50%;
                                    transition: 250ms all ease-in-out;
                                }
                                    div#refresh-btn i.disabled {
                                        color: #454545;
                                    }
                                    div#refresh-btn i:hover {
                                        color: #d4d4d4;
                                        transform: rotate(360deg);
                                        transition: 250ms transform ease-in-out;
                                    }
                                    div#refresh-btn i.active {
                                        text-shadow: none;
                                        animation: rotate 1s linear infinite;   
                                    }
                                        div#refresh-btn i.active:hover {
                                            transform: none;
                                        }
                            div#refresh-container.busy {
                                gap: 0;
                                padding: 0;
                                background-color: transparent;
                                box-shadow: none;
                                border-radius: 50%;
                            }
                                div#refresh-container.busy:hover {
                                    box-shadow: none;
                                }
            div#bar-settings-panel {
                justify-content: space-around;
                align-items: center;
                width: 100%;
                opacity: 0;
                transform: translateY(-500%);
                transition: 250ms all ease-in-out, 500ms transform ease-in-out;
            }
                div#bar-settings-panel div#bs-addition {
                    min-width: 45px;
                    text-indent: 10px;
                }
                div#bar-settings-panel div#bs-button {
                    justify-content: flex-end;
                }
                    div#bar-settings-panel div.settings-toggle {
                        justify-content: center;
                        width: 30px;
                        height: 40px;
                    }
                        div#bar-settings-panel div#reorder-items-btn::after {
                            content: "";
                            width: 30px;
                            height: 30px;
                            background: var(--icon-reorder);
                            background-size: 145px;
                        }
            div#items {
                flex-wrap: wrap;
                justify-content: center;
                box-sizing: border-box;
                width: 100%;
                height: inherit;
                gap: 2em;
                padding: 2rem 1rem;
                background-color: #ffe4c4;
                overflow: hidden auto;
                scroll-behavior: smooth;
                scrollbar-color: #261d11 transparent;
                transition: 250ms all ease-in-out;
            }
                div#items::-webkit-scrollbar {
                    background-color: transparent;
                }
                div.item {
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    min-width: 325px;
                    width: 350px;
                    height: fit-content;
                    /* max-height: 560px; */
                    padding: 15px;
                    gap: 20px;
                    color: white;
                    text-shadow: 1px 1px 0 black;
                    background-color: var(--examine-bg);
                    box-shadow: 0 -4px 0 0 var(--shadow-color), 0 4px 0 0 var(--shadow-color);
                    border: 1px solid black;
                    border-radius: 10px;
                    outline: none;
                    overflow: hidden;
                    transition: 400ms all ease-in-out 250ms, 0ms max-height;
                    z-index: 1;
                }
                    div.item.expanded {
                        padding: 25px 15px 20px 15px;
                    }
                    div.item.static {
                        filter: grayscale(1) brightness(0.75);
                        /* animation: shadow-pulse 2s ease-in-out infinite; */
                    }
                    div.item.sortable-chosen {
                        filter: none;
                        pointer-events: none;
                    }
                    div.item.sortable-ghost {
                        opacity: 0;
                    }
                    div.item.reorder {
                        height: 44px;
                        padding: 10px;
                        user-select: none;
                        cursor: grab;
                        transition: 250ms filter ease-in-out;
                    }
                        div.item.reorder:hover {
                            filter: brightness(1.25);
                        }
                    div.item.reorder.noname {
                        min-width: 44px;
                        width: 44px;
                    }
                    div.item:active, div.item:focus, div.item:hover {
                        /* max-height: 750px; */
                        /* box-shadow: 0 0 4px 2px black; */
                        z-index: 10001;
                    }
                    div#item-btns {
                        gap: 15px;
                    }
                        div#item-btns.favourites {
                            position: absolute;
                            inset: 54px 0 0 46px;
                            width: 26px;
                            height: 26px;
                            z-index: 1;
                        }
                            div#item-btns.favourites div#favourite:active,
                            div#item-btns.favourites div#favourite:focus,
                            div#item-btns.favourites div#favourite:hover {
                                background-color: #9d8b7c;
                                box-shadow: none;
                            }
                            div#item-btns.favourites a:nth-of-type(1n) {
                                display: none;
                            }
                            div#item-btns.favourites div.item-btn-icon {
                                height: 18px;
                                background-color: transparent;
                            }
                            div#item-btns.favourites div#favourite {
                                padding: 4px;
                                background-color: grey;
                                border-radius: 50%;
                                outline: 1px solid black;
                            }
                                div#item-btns.favourites i {
                                    color: #a91313;
                                    font-size: 14pt !important;
                                    line-height: 20px !important;
                                    text-shadow: none;
                                    -webkit-text-stroke: 1px black;
                                }
                        div#item-btns a {
                            color: transparent;
                        }
                            div#item-btns a:active, div#item-btns a:focus, div#item-btns a:hover {
                                outline: 0;
                            }
                        div.item-btn-icon {
                            width: 36px;
                            height: 36px;
                            border-radius: 2px;
                            outline: 1px solid black;
                            cursor: pointer;
                            transition: 100ms all ease-in-out;
                        }
                            #item-btns a:active div.item-btn-icon, #item-btns a:focus div.item-btn-icon, #item-btns a:hover div.item-btn-icon {
                                text-shadow: 0 0 10px black;
                                box-shadow: 0 0 6px 4px #ffdead;
                            }
                        div#gedb {
                            background: center / contain no-repeat url(../media/images/logos/ge-icon.png);
                            background-color: #7b7272;
                            background-size: 42px;
                        }
                        div#wiki {
                            background: center / contain no-repeat url(../media/images/logos/rs-wiki-icon.png);
                        }
                        div#favourite {
                            text-align: center;
                            background-color: #7b7272;
                        }
                            div#favourite i {
                                font-size: 18pt !important;
                                letter-spacing: 0;
                                line-height: 36px !important;
                            }
                            div#favourite:active, div#favourite:focus, div#favourite:hover {
                                text-shadow: none !important;
                                box-shadow: 0 0 6px 4px #ffdead;
                            }
                            div#favourite:hover i {
                                color: red !important;
                                text-shadow: none !important;
                            }
                    div.item div#close {
                        position: absolute;
                        inset: 15px 15px auto auto;
                        width: 28px;
                        height: 26.5px;
                        background: url(../media/images/buttons/buttons-pack.png);
                        background-position: 126px 53px;
                        background-size: 98px;
                        opacity: 0;
                        transition: 100ms all ease-in-out, 0s background-position;
                    }
                        div#close:active, div#close:focus, div#close:hover {
                            background-position: 126px 26.5px !important;
                            opacity: 1 !important;
                            outline: 0;
                        }
                        div.item:hover div#close,
                        div.item:hover div#item-data-btn {
                            opacity: 1;
                        }
                        div.item:hover div#item-chart div {
                            opacity: .75;
                        }
                        div#item-btns i.fab, div#item-btns i.fas,
                        div.item i.fab, div.item i.fas {
                            font-size: 24pt;
                            line-height: 36px;
                            cursor: pointer;
                        }
                        div#item-btns i.fab:active, div#item-btns i.fab:focus, div#item-btns i.fab:hover,
                        div#item-btns i.fas:active, div#item-btns i.fas:focus, div#item-btns i.fas:hover {
                            opacity: 1;
                            color: black;
                            text-shadow: 0 0 10px black;
                            outline: none;
                        }
                        div#item-btns.favourites + div#close {
                            inset: 5px 10px auto auto;
                            width: 22px;
                            height: 22px;
                            background: var(--button-close1-1);
                            border-radius: 0 0 0 1px;
                        }
                            div#item-btns.favourites + div#close:hover {
                                background: var(--button-close1-2) !important;
                            }
                            
                            div#close:hover div.item {
                                filter: brightness(0.5);
                            }
                    div#item-description {
                        flex-direction: row;
                        gap: 10px;
                    }
                        div#item-description div#item-icon {
                            position: relative;
                            display: grid;
                            place-content: center;
                            min-width: max(36px);
                            height: 36px;
                            padding: 4px;
                            background-color: #50493e !important;
                            background-position: center !important;
                            background-repeat: no-repeat !important;
                            background-size: auto !important;
                            border-radius: 2px;
                            outline: 1px solid black;
                        }
                            div#item-icon.error::after {
                                content: "";
                                width: 26px;
                                height: 26px;
                                background: var(--icon-cancel);
                            }
                        div#item-description div.flex {
                            flex-direction: column;
                            align-items: flex-start;
                            justify-content: center;
                            margin-top: -4px;
                        }
                            span.item-name {
                                width: 295px;
                                font-size: 15pt;
                                white-space: nowrap;
                            }
                                span.item-name.long {
                                    max-height: 29px;
                                    font-weight: 600;
                                    white-space: nowrap;
                                    text-shadow: 0 0 transparent;
                                    background-color: var(--examine-bg);
                                    background-image: linear-gradient(to right, white 0%, white 90%, var(--examine-bg) 100%);
                                    background-size: 100%;
                                    background-clip: text;
                                    -webkit-background-clip: text;
                                    -moz-background-clip: text;
                                    -webkit-text-fill-color: transparent;
                                    -moz-text-fill-color: transparent;
                                    overflow: hidden;
                                    transition: 250ms all ease-in-out 250ms;
                                }
                                div.item:focus span.item-name.long, div.item:hover span.item-name.long {
                                    max-height: 60px;
                                    width: 260px !important;
                                    white-space: normal;
                                    background-image: linear-gradient(white, white);
                                }
                                span.item-name.long::selection {
                                    -webkit-text-fill-color: white; 
                                    -moz-text-fill-color: white;
                                }
                            span.item-id {
                                font-size: 10pt;
                                font-weight: 100;
                            }
                            div#item-btns.favourites ~ div#item-description {
                                /* width: 275px; */
                                gap: 15px;
                            }
                    div#item-data,
                    div#item-examine {
                        position: relative;
                        flex-direction: column;
                        justify-content: space-around;
                        /* max-height: 152px; */
                        min-height: 120px;
                        padding: 15px;
                        font-size: 9pt;
                        font-weight: 300;
                        background-color: #50493e;
                        outline: 1px solid black;
                        border-radius: 2px;
                        overflow: hidden;
                        transition: 500ms all ease-in-out;
                    }
                        div#item-data-btn {
                            position: absolute;
                            display: block;
                            width: 16px;
                            height: 18px;
                            inset: 5px 5px auto auto;
                            background: var(--button-expand-1);
                            opacity: 0;
                            cursor: pointer;
                        }
                            div#item-data-btn:focus {
                                outline: 0;
                            }
                            div#item-data-btn:hover {
                                filter: sepia(1) drop-shadow(0 0 2px black);
                            }
                            div#item-data-btn.active {
                                background: var(--button-expand-2);
                            }
                        div#item-prices,
                        div#item-chart,
                        div#item-value {
                            flex-direction: column;
                            justify-content: space-evenly;
                            height: 120px;
                            background-color: transparent;
                            border-radius: 2px;
                            transition: 500ms all ease-in-out;
                        }
                        div#item-chart {
                            position: relative;
                            align-items: center;
                            height: 125px;
                            padding-bottom: 6px;
                            background-color: #50493e;
                            outline: 1px solid black;
                        }
                            div#item-chart div {
                                position: absolute;
                                width: 35px;
                                height: 25px;
                                top: 5px;
                                right: 5px;
                                font-size: 9pt;
                                border-radius: 5px;
                                outline: 1px solid black;
                                opacity: 0;
                                animation: expand-width ease-in-out 150ms forwards;
                            }
                            div#item-chart div:focus, div#item-chart div:hover {
                                    opacity: 1 !important;
                                }
                                div#item-chart ul#chart-select {
                                    position: relative;
                                    margin: 0;
                                    padding: 0;
                                    list-style: none;
                                    list-style-type: none;
                                    border-radius: 5px;
                                    box-shadow: none;
                                    overflow: hidden;
                                    transition: 150ms all ease-in-out, 0s box-shadow 0s;
                                }
                                    ul#chart-select.allow-pointer-e {
                                        box-shadow: 3px 0 0 0 var(--shadow-color), -3px 0 0 0 var(--shadow-color) !important;
                                    }
                                        ul#chart-select.allow-pointer-e li {
                                            pointer-events: all;
                                        }
                                    ul#chart-select:focus, ul#chart-select:hover {
                                        gap: 1px;
                                        background-color: black;
                                    }
                                    ul#chart-select:focus li, ul#chart-select:hover li {
                                        width: 35px;
                                        padding: 0 2px;
                                        text-align: center;
                                        border-radius: 0;
                                        opacity: 1;
                                    }
                                    ul#chart-select:focus li:first-child, ul#chart-select:hover li:first-child {
                                        border-radius: 5px 0 0 5px;
                                    }
                                    ul#chart-select:focus li:last-child, ul#chart-select:hover li:last-child {
                                        border-radius: 0 5px 5px 0;
                                    }
                                    ul#chart-select li {
                                        display: flex;
                                        align-items: center;
                                        justify-content: space-evenly;
                                        width: 0;
                                        background-color: var(--examine-bg);
                                        border-radius: 5px;
                                        opacity: 0;
                                        cursor: pointer;
                                        user-select: none;
                                        pointer-events: none;
                                        transition: 150ms all ease-in-out;
                                    }
                                        ul#chart-select li.active {
                                            cursor: default;
                                        }
                                        ul#chart-select.hide-list li:not(.active) {
                                            position: absolute;
                                            width: 0;
                                            padding: 0;
                                            opacity: 0;
                                            transition: 0s opacity 0s;
                                        }
                                        ul#chart-select li:focus, ul#chart-select li:hover,
                                        ul#chart-select li.active {
                                            padding: 0 2px;
                                            width: 35px;
                                            background-color: var(--selection);
                                            opacity: 1 !important;
                                        }
                            div#item-chart canvas {
                                display: block;
                                box-sizing: border-box;
                                width: 350px;
                                height: 125px;
                                background-color: #50493e;
                            }
                            div#item-chart canvas.riv {
                                width: 125px !important;
                                height: auto !important;
                            }
                        div#item-examine {
                            min-height: auto;
                            height: 100%;
                        }
                            span#item-value,
                            span#item-examine {
                                font-size: 12pt;
                                font-weight: 300;
                            }
                            div.icon-text {
                                align-items: center;
                                min-height: 30px;
                                gap: 10px;
                            }
                                div.icon-text i.fas,
                                div.icon-text i.fab {
                                    width: 20px;
                                    color: #864915;
                                    font-size: 14pt;
                                    text-align: center;
                                    text-shadow: 1px 1px 0 #260a00;
                                    cursor: default;
                                }
                                div.icon-text img {
                                    user-select: none;
                                    pointer-events: none;
                                }
                            div#item-prices div.icon,
                            div#item-value div.icon {
                                width: 20px;
                                height: 27px;
                                background-image: url(../media/images/sprites/icon-pack.png);
                                background-size: 45px 78px;
                            }
                                div#item-prices div.icon-text:nth-of-type(1) div.icon {
                                    background: var(--icon-buy);
                                }
                                div#item-prices div.icon-text:nth-of-type(2) div.icon {
                                    background: var(--icon-sell);
                                }
                                div#item-prices div.icon-text:nth-of-type(3) div.icon {
                                    width: 21px !important;
                                    height: 17px !important;
                                    background: var(--icon-margin);
                                    filter: sepia(0.75);
                                    transform: rotate(135deg);
                                }
                                div#item-prices div.icon-text:nth-of-type(4) div.icon {
                                    height: 25px !important;
                                    background: var(--icon-moneybag);
                                }
                            div#item-value div.icon {
                                height: 18px;
                            }
                                div#item-value div.icon-text:nth-of-type(1) div.icon {
                                    background: var(--icon-coins);
                                }
                                div#item-value div.icon-text:nth-of-type(2) div.icon {
                                    background: var(--icon-highalchemy);
                                }
                                div#item-value div.icon-text:nth-of-type(3) div.icon {
                                    background: var(--icon-lowalchemy);
                                }
                                div#item-value div.icon-text:nth-of-type(4) div.icon {
                                    width: 20px;
                                    height: 12px;
                                    background: var(--icon-members);
                                }
                            div#item-value div.members {
                                width: 20px;
                                height: 19px;
                            }
                                div.members.true {
                                    background: var(--icon-star-members);
                                }
                                div.members.false {
                                    background: var(--icon-star-nonmembers);
                                }
            div.panel-top,
            div.panel-content,
            div.panel-bottom {
                width: calc(100% - 20px);
                padding-inline: 10px;
                color: white;
                background-color: #484139;
            }
                div.panel-top button,
                div.panel-content button,
                div.panel-bottom button {
                    margin: 5px;
                }
                div.panel-top {
                    line-height: 40px;
                    /* border-radius: 5px 5px 0 0; */
                    border-bottom: 1px solid black;
                }
                div.panel-content {
                    flex-direction: column;
                    justify-content: space-evenly;
                    align-items: center;
                    height: 100%;
                    padding: 15px 10px;
                    gap: 15px;
                    font-size: 11pt;
                    text-align: center;
                    background-color: var(--examine-bg);
                    /* border-radius: 5px; */
                    user-select: none;
                }
                    div.panel-content.modal {
                        justify-content: center;
                        background-color: #000000eb;
                        backdrop-filter: blur(5px);
                    }
                div.panel-bottom {
                    justify-content: center;
                    font-size: 11pt;
                    line-height: 30px;
                    /* border-radius: 0 0 5px 5px; */
                    border-top: 1px solid black;
                }
                div.panel-top span.title,
                div.panel-bottom span.title,
                span.panel-bottom {
                    width: 100%;
                    font-size: 15pt;
                    font-weight: 600;
                    text-transform: uppercase;
                }
                div.panel-top span.title,
                div.panel-bottom span.title,
                span#version,
                span#tos-version,
                span.panel-bottom {
                    user-select: none;
                }
                div#settings-panel span#version,
                div#tos-panel span#tos-version {
                    position: absolute;
                    inset: auto 40px auto auto;
                }
                div#settings-container {
                position: fixed;
                justify-content: center;
                width: 100%;
                height: 100%;
                background-color: #000000f2;
                opacity: 0;
                backdrop-filter: blur(10px);
                transition: 100ms all ease-in-out;
                z-index: -1;
            }
                div#settings-container.visible {
                    z-index: 21000;
                }
                div#settings-panel,
                div#dialog-panel {
                    position: fixed;
                    flex-direction: column;
                    align-items: center;
                    align-self: center;
                    min-width: 300px;
                    /* width: 300px; */
                    /* min-height: 150px; */
                    /* height: 100%; */
                    max-height: 300px;
                    margin: 2rem;
                    /* padding-bottom: 0.5rem; */
                    font-weight: 100;
                    background-color: var(--examine-bg);
                    box-shadow: 0 0 0 1px black, 0 0 0 7px #50493e, 0 0 0 8px black, 0 0 6px 10px black;
                    border-radius: 1px;
                    opacity: 0;
                    transform: translateY(-500%);
                    transition: 250ms all ease-in-out, 500ms transform ease-in-out, 0s max-height;
                    z-index: 15000;
                }
                div#settings-panel.modal-active {
                    height: auto;
                }
                div#dialog-panel {
                    position: initial;
                    display: none;
                    justify-content: center;
                    /* inset: 0 0 0 100%; */
                    margin: 0;
                    width: 100%;
                    max-width: 350px;
                    height: 100%;
                    max-height: fit-content;
                    background-color: #746559;
                    box-shadow: none;
                    opacity: 0;
                    transform: scaleY(1);
                    transition: 250ms all ease-in-out 250ms;
                }
                    div#dialog-panel.active {
                        display: flex;
                        /* inset: 0 0 0 0; */
                        opacity: 1;
                    }
                    textarea.port {
                        width: calc(100% - 4rem);
                        height: calc(100% - 4rem);
                        max-width: 250px;
                        max-height: 185px;
                        min-height: 150px;
                        padding: 5px 8px;
                        background-color: #c6b9ae;
                        border: 0;
                        outline: 1px solid black;
                        resize: none;
                    }
                    div#settings-panel div.close,
                    div.adialog-btn {
                        position: absolute;
                        inset: 7px 7px auto auto;
                        width: 24.5px;
                        height: 24.5px;
                        border-radius: 0;
                        background: var(--button-close2-1);
                        cursor: default;
                        transition: none;
                    }
                        div#settings-panel div.close:focus, div#settings-panel div.close:hover,
                        div.adialog-btn:focus, div.adialog-btn:hover {
                            background: var(--button-close2-2);
                            outline: 0;
                        }
                    div#settings-toggles {
                        flex-direction: row;
                        /* justify-content: center; */
                        align-items: center;
                        height: 100%;
                        padding: 1em;
                        gap: 1em;
                        overflow-x: hidden;
                        overflow-y: overlay;
                        z-index: -1;
                    }
                        div.toggle-seperator, div.toggle-seperator::after {
                            display: block;
                            width: 50%;
                            height: 1px;
                            background-color: #191612;
                            border-radius: 1px;
                        }
                        div.toggle-seperator::after {
                            content: "";
                        }
                            div.settings-toggle {
                                align-items: center;
                                justify-content: space-between;
                                width: 175px;
                                min-height: 34px;
                                padding-inline: 10px;
                                color: white;
                                font-size: 10pt;
                                line-height: 1px;
                                background: no-repeat url(../media/images/buttons/buttons-pack.png);
                                background-size: 280px 250px;
                                box-shadow: 0 0 2px 1px black;
                                border-radius: 2px;
                                cursor: pointer;
                                user-select: none;
                            }
                                div.settings-toggle:focus {
                                    outline: 0;
                                }
                                div.settings-toggle:hover {
                                    background-position-y: -42px;
                                }
                                div.settings-toggle.inactive {
                                    background-position-y: -170px;
                                }
                                    div.settings-toggle.inactive:hover {
                                        background-position-y: -210px;
                                    }
                                    div#form-settings-panel div#reorder-items-btn,
                                    div#reorder-items-btn span.btn-icon {
                                        width: 20px;
                                        height: 20px;
                                        background: var(--icon-reorder);
                                    }
                                    div#toggle-container div.settings-toggle:not(.inactive):hover {
                                        background-position-y: -42px;
                                    }
                                    div#auto-update-btn:not(.inactive),
                                    div#import-items-btn,
                                    div#export-items-btn {
                                        background-position-y: -85px;
                                    }
                                        div#auto-update-btn:not(.inactive):hover,
                                        div#import-items-btn:hover,
                                        div#export-items-btn:hover {
                                            background-position-y: -130px !important;
                                        }
                                div.settings-section {
                                    flex-direction: column;
                                    align-items: center;
                                    width: 100%;
                                    gap: .75em;
                                }
                                    span.btn-icon {
                                        width: 25px;
                                        height: 25px;
                                        cursor: pointer;
                                        user-select: none;
                                    }
                                        div#import-items-btn span.btn-icon {
                                            width: 19px;
                                            height: 16px;
                                            background: var(--icon-import);
                                        }
                                        div#export-items-btn span.btn-icon {
                                            width: 19px;
                                            height: 16px;
                                            background: var(--icon-export);
                                        }
                                        div#clear-items-btn span.btn-icon {
                                            height: 21px;
                                            background: var(--icon-trash);
                                        }
                                        div#notifications-btn span.btn-icon {
                                            height: 20px;
                                            background: var(--icon-chatbubble);
                                        }
                                        div#item-referral-btn span.btn-icon {
                                            width: 24px;
                                            height: 13px;
                                            background: var(--icon-referral);
                                        }
                                    div#item-chart-btn {
                                        width: 75px;
                                    }
                                        div#item-chart-btn span.btn-icon {
                                            width: 21px;
                                            height: 19px;
                                            background: var(--icon-chart);
                                        }
                                        div#item-examine-btn span.btn-icon {
                                            height: 14px;
                                            background: var(--icon-examine);
                                        }
                                        div#auto-update-btn span.btn-icon {
                                            background: var(--icon-clock);
                                        }
                                    a#tos-btn,
                                    a#faq-btn {
                                        justify-content: center;
                                        align-items: center;
                                        cursor: pointer;
                                    }
                                        a#tos-btn:hover,
                                        a#faq-btn:hover {
                                            color: white;
                                            text-underline-offset: 4px;
                                        }
                                        a#tos-btn::after {
                                            content: "";
                                            position: relative;
                                            width: 18px;
                                            height: 20px;
                                            inset: 0 0 0 5px;
                                            background: var(--icon-scroll);
                                        }
                                    div#toggle-container {
                                        justify-content: space-between;
                                        align-content: space-between;
                                        width: 195px;
                                        gap: 10px;
                                        color: white;
                                        white-space: nowrap;
                                        user-select: none;
                                    }
                                        span.checkbox {
                                            min-width: 20px;
                                            min-height: 20px;
                                            max-width: 20px;
                                            max-height: 20px;
                                            background-color: #50493e;
                                            border-radius: 3px;
                                            outline: 1px solid black;
                                        }
                                            span.checkbox.checked {
                                                background: var(--icon-check);
                                                outline: 1px solid black;
                                            }
                                            span.checkbox:hover {
                                                background-color: #776d5c;
                                            }
                                            span.checkbox:active {
                                                background-color: #2f2c26;
                                            }
                                            span#reorder-chkbox {
                                                position: relative;
                                                text-indent: 30px;
                                                line-height: 20px;
                                                white-space: nowrap;
                                                user-select: none;
                                            }
                                        div.settings-dropdown {
                                            position: relative;
                                            width: 90px;
                                        }
                                            div.settings-dropdown ul#chart-list {
                                                justify-content: center;
                                                align-items: center;
                                                width: 90px;
                                                height: 34px;
                                                margin: 0;
                                                margin-block: 0;
                                                padding: 0 10px;
                                                padding-inline: 0;
                                                font-size: 10pt;
                                                list-style: none;
                                                background: url(../media/images/buttons/buttons-pack.png) no-repeat;
                                                background-size: 250px 250px;
                                                border-radius: 2px;
                                                box-shadow: 0 0 2px 1px black;
                                            }
                                            div.settings-dropdown ul#chart-list[aria-disabled=true] {
                                                background-position-y: -170px;
                                            }
                                                div.settings-dropdown ul#chart-list[aria-disabled=true]:hover {
                                                    background-position-y: -210px;
                                                }
                                            div.settings-dropdown ul#chart-list[aria-expanded=true] {
                                                position: absolute;
                                                flex-wrap: wrap;
                                                left: -4px;
                                                bottom: -46px;
                                                gap: 8px;
                                                width: 192px;
                                                height: 166px;
                                                padding: 10px 4px;
                                                background: var(--selection);
                                            }
                                                div.settings-dropdown ul#chart-list:not([aria-disabled=true]):hover {
                                                    background-position-y: -42px;
                                                }
                                                ul#chart-list li:not([aria-selected=true]) {
                                                    display: block;
                                                    width: 0;
                                                    cursor: pointer;
                                                }
                                                ul#chart-list[aria-expanded=true] li {
                                                    position: relative;
                                                    display: flex;
                                                    justify-content: center;
                                                    align-items: center;
                                                    width: 80px;
                                                    height: 34px;
                                                    padding: 0 5px;
                                                    background: url(../media/images/buttons/buttons-pack.png) no-repeat;
                                                    background-size: 250px 250px;
                                                    box-shadow: 0px 0px 2px 1px black;
                                                    border-radius: 2px;
                                                }
                                                    ul#chart-list li[aria-selected=true] {
                                                        background-position-y: -85px;
                                                    }
                                                        ul#chart-list li[aria-selected=true]:hover {
                                                            background-position-y: -130px !important;
                                                        }
                                                    ul#chart-list li:hover {
                                                        background-position-y: -42px;
                                                    }
                                                ul#chart-list[aria-expanded=false] li[aria-selected=false] {
                                                    display: none;
                                                }
                                                ul#chart-list[aria-expanded=false] li[aria-selected=true] {
                                                    background: transparent;
                                                    box-shadow: none;
                                                }
                                            div.settings-dropdown select {
                                                width: 80px;
                                                height: 100%;
                                                padding-left: 5px;
                                                color: white;
                                                background: no-repeat url(../media/images/buttons/buttons-pack.png);
                                                background-size: 250px 250px;
                                                border-radius: 10px;
                                                border: 0;
                                                outline: 0;
                                            }
                                            div.settings-dropdown:focus select, div.settings-dropdown:hover select {
                                                background-position-y: -42px;
                                            }
                                                div.settings-dropdown option {
                                                    background-color: #50493e;
                                                }
            div#tos-container,
            div#faq-container {
                position: fixed;
                justify-content: center;
                width: 100%;
                height: 100%;
                background-color: #000;
                opacity: 0;
                backdrop-filter: blur(10px);
                transition: 100ms all ease-in-out;
                z-index: -1;
            }
                div#tos-container.visible,
                div#faq-container.visible {
                    z-index: 22000;
                }
                div#tos-container a:focus, div#tos-container a:hover,
                div#faq-container a:focus, div#faq-container a:hover {
                    text-underline-offset: 2px;
                    outline: 0;
                }
                div#tos-panel,
                div#faq-panel {
                    position: fixed;
                    flex-direction: column;
                    align-self: center;
                    max-width: 1250px;
                    height: calc(100% - 2rem);
                    max-height: 750px;
                    margin: 2rem;
                    color: white;
                    background-color: var(--examine-bg);
                    box-shadow: 0 0 0 1px black, 0 0 0 7px #50493e, 0 0 0 8px black, 0 0 6px 10px black;
                    border-radius: 1px;
                    opacity: 0;
                    transition: 250ms all ease-in-out, 500ms transform ease-in-out;
                    z-index: 15000;
                }
                div#faq-panel {
                    height: auto;
                    max-height: 750px;
                }
                    div#tos-panel div.close,
                    div#faq-panel div.close {
                        position: absolute;
                        inset: 7px 7px auto auto;
                        width: 24.5px;
                        height: 24.5px;
                        border-radius: 0;
                        background: var(--button-close2-1);
                        cursor: default;
                        transition: none;
                    }
                        div#tos-panel div.close:focus, div#tos-panel div.close:hover,
                        div#faq-panel div.close:focus, div#faq-panel div.close:hover {
                            background: var(--button-close2-2);
                            outline: 0;
                        }
                    div#tos-panel div#tos-content,
                    div#faq-panel div#faq-content {
                        padding: 1rem 2rem;
                        font-weight: 100;
                        background-color: #746559;
                        scrollbar-color: #261d11 transparent;
                        overflow-x: hidden;
                        overflow-y: overlay;
                    }
                        div#tos-content::-webkit-scrollbar,
                        div#faq-content::-webkit-scrollbar {
                            background-color: transparent;
                        }
                        div#tos-panel span.subtitle {
                            font-weight: 600;
                        }
                        div#faq-content div.section {
                            align-items: center;
                            padding: 10px;
                            gap: 1rem;
                        }
                            div#faq-content div.section > :nth-child(1) {
                                flex-direction: column;
                                max-width: 250px;
                            }
                                div#faq-content span.title {
                                    font-size: 11pt;
                                    font-weight: 500;
                                }
                                div#faq-content span.subtitle {
                                    font-size: 9pt;
                                }
                        div#tos-content a,
                        div#faq-content a {
                            color: black;
                            white-space: nowrap;
                        }
                    div#tos-panel div.panel-bottom,
                    div#faq-panel div.panel-bottom {
                        /* border-radius: 0 0 5px 5px; */
                        border-top: 1px solid black;
                        border-bottom: none;
                    }
                        div#tos-panel span.panel-bottom,
                        div#faq-panel span.panel-bottom {
                            font-size: 12pt;
                            font-weight: 300;
                            text-transform: none;
                            user-select: auto;
                        }
        div#scroll-to-top {
            position: fixed;
            display: grid;
            place-content: center;
            inset: auto 1rem 1rem auto;
            width: 50px;
            height: 50px;
            font-size: 20pt;
            text-align: center;
            color: white;
            background-color: var(--examine-bg);
            box-shadow: 0 -2px 0 0 var(--shadow-color), 0 2px 0 0 var(--shadow-color);
            border-radius: 4px;
            outline: 1px solid black;
            opacity: 0;
            user-select: none;
            transform: translateY(500%) rotate(0deg);
            transition: 200ms all ease-in-out, 500ms transform ease-in-out;
            z-index: 12000;
        }
            div#scroll-to-top:focus, div#scroll-to-top:hover {
                background-color: var(--item-bg);
                cursor: pointer;
            }
        div#touch {
            display: none;
        }
        section#debug {
            position: fixed;
            inset: auto 20px 20px auto;
            flex-direction: column;
            width: calc(100% - 40px);
            max-width: 750px;
            height: 305px;
            color: white;
            font-size: 12pt;
            font-weight: 100;
            background-color: var(--examine-bg);
            box-shadow: 0 0 0 1px black, 0 0 0 7px #50493e, 0 0 0 8px black;
            outline: 0;
            transform: translateY(200%);
            transition: 250ms all ease-in-out;
            z-index: 12001;
        }
            section#debug div.title {
                padding: 6px 0 6px 10px;
                background-color: #50493e;
                border-bottom: 1px solid black;
                user-select: none;
            }
                section#debug div.title i {
                    font-size: 11pt;
                }
            section#debug div.debug-btns {
                position: absolute;
                inset: 6px 5px auto auto;
                gap: 10px;
                user-select: none;
            }
                div.debug-btns div#debug-btn {
                    position: relative;
                    width: 21.5px;
                    height: 20.5px;
                    background: var(--button-close2-1);
                    border-radius: 0;
                    transition: none;
                }
                    div.debug-btns div#debug-btn:hover {
                        background: var(--button-close2-2);
                    }
            section#debug pre#debug-container {
                height: 100%;
                padding: 5px 10px;
                white-space: pre-line;
                overflow: auto;
            }
@media screen and (max-width: 950px) {
            div#form {
                padding-inline: 10px;
                gap: 10px;
            }
}
@media screen and (max-width: 860px) and (max-height: 340px) {
                div#tos-panel {
                    width: 100%;
                    height: 100%;
                }
                div#settings-panel {
                    width: 100%;
                    height: 100%;
                    max-height: fit-content;
                }
                    div#dialog-panel {
                        max-width: 100%;
                    }
                    div#dialog-panel.active div#settings-panel {
                        max-height: 400px;
                    }
                    div#settings-panel.modal-active {
                        height: inherit;
                    }
                    div#settings-toggles {
                        flex-direction: row;
                        width: initial;
                        padding: 10px;
                    }
                    div.panel-content {
                        gap: 25px;
                    }
                    textarea.port {
                        min-height: auto;
                    }
        section#debug {
            max-width: 350px;
            max-height: 125px;
            font-size: 7pt;
            box-shadow: 0 0 0 1px black, 0 0 0 4px #50493e, 0 0 0 5px black;
        }
            section#debug div.debug-btns {
                inset: 3px 5px auto auto;
                font-size: 10pt;
            }
                div.debug-btns div#debug-btn {
                    display: none;
                    /* inset: 4px 4px auto auto; */
                    /* width: 21.5px; */
                    /* height: 20.5px; */
                    /* background-position: 126px 103px; */
                }
                    div.debug-btns div#debug-btn:hover {
                        /* background-position: 126px 78px; */
                    }
}
@media screen and (max-width: 768px) {
::-webkit-scrollbar {
	width: 5px;
    background-color: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: #261d11;
}
            div#form {
                min-height: 50px;
            }
        div.notification {
            inset: 50px auto auto auto;
            padding: 0.5em;
        }
            div#disclaimer {
                font-size: 7pt;
            }
                            #form-container.suggested {
                                border-radius: 10px !important;
                            }
                        #item-search-box-suggestions {
                            position: fixed;
                            inset: 60px 0 0 7px;
                            min-width: auto;
                            width: 100%;
                            height: fit-content;
                            margin-top: -6px;
                            box-shadow: 0 -3px 0 0 var(--shadow-color), 3px -3px 0 0 var(--shadow-color), 3px 3px 0 0 var(--shadow-color), 3px 3px 0 0 var(--shadow-color), 0 4px 0 0 var(--shadow-color);
                            border-radius: 0;
                        }
                            #item-search-box-suggestions::-webkit-scrollbar,
                            #item-search-box-suggestions::-webkit-scrollbar-track,
                            #item-search-box-suggestions::-webkit-scrollbar-thumb {
                                width: 20px;
                                border-radius: 0;
                            }
                            #item-search-box-suggestions ul {
                                max-height: 250px;
                            }
                        div.form-btn:hover {
                            text-shadow: 2px 2px 0 black;
                        }
                div#bar-settings-panel {
                    justify-content: space-between;
                }
                    div#bar-settings-panel div#bs-message {
                        display: none;
                    }
                    div#bar-settings-panel div#bs-button {
                        width: fit-content !important;
                    }
            div#items {
                height: calc(100% - 54px);
            }
                /* div.item {
                    min-width: 300px;
                    max-height: 700px;
                } */
                    div.item:hover {
                        animation: none;
                    }
                    div.item div#close, div#item-data-btn {
                        opacity: 1;
                    }
                        div#item-btns.favourites + div#close {
                            inset: 6px 10px auto auto;
                        }
                            div#item-description div {
                                justify-content: space-between;
                            }
                                span.item-name {
                                    font-size: 14pt;
                                }
                                span.item-id {
                                    font-size: 8pt;
                                    font-weight: 100;
                                }
                div#tos-panel {
                    width: 100%;
                    min-height: 100%;
                    border-radius: 0;
                    background-color: #484139;
                }
                    div#tos-panel div#tos-content {
                        padding: 1rem;
                    }
                    div#tos-panel span.panel-bottom {
                        text-indent: 0;
                        line-height: 25px;
                    }
                div#settings-panel {
                    max-height: 550px;
                }
                    div#settings-toggles {
                        flex-direction: column;
                        justify-content: space-evenly;
                        width: 100%;
                        padding: 1rem 0;
                    }
                                div#auto-update-btn:not(.inactive):hover,
                                    div#import-items-btn:hover,
                                    div#export-items-btn:hover {
                                        background-position-y: -85px !important;
                                    }
                                div.settings-toggle.inactive:hover,
                                div#toggle-container div.settings-toggle.inactive:hover,
                                div.settings-dropdown ul#chart-list[aria-disabled=true]:hover {
                                    background-position-y: -170px;
                                }
                                div.settings-toggle:hover,
                                div#toggle-container div.settings-toggle:hover,
                                div#import-items-btn:hover,
                                div#export-items-btn:hover,
                                div#toggle-container div.settings-toggle:hover {
                                    background-position: 0 0;
                                }
                    div.panel-content {
                        justify-content: center;
                    }
        section#debug {
            inset: auto 0 5px auto;
            width: 100%;
            max-width: 100%;
            max-height: 191px;
            box-shadow: 0 0 0 1px black, 0 0 0 4px #50493e, 0 0 0 5px black;
        }
            section#debug div.title {
                padding: 2px 0 2px 10px;
                font-size: 9pt;
            }
                section#debug div.title i {
                    font-size: 9pt;
                }
            section#debug div.debug-btns {
                inset: 2px 5px auto auto;
                font-size: 9pt;
            }
                div.debug-btns div#debug-btn {
                    display: none;
                }
        div#touch {
            position: absolute;
            display: block;
            width: 100px;
            height: 100px;
            border-radius: 50px;
            transform: scale(0.5);
            pointer-events: none;
            z-index: 22001;
        }
            div#touch.anim {
                animation: click-pulse ease-in-out 500ms backwards;
            }
}
@media screen and (max-width: 480px) {
            div#form {
                justify-content: space-between;
            }
                    /* div#form-logo {
                        display: none;
                    } */
                    form#item-search div#form-container {
                        min-width: 42px;
                        max-width: 42px;
                        padding: 0 10px;
                        background-color: #7b7272;
                        box-shadow: none;
                        border-radius: 20px;
                        border: 1px solid black;
                    }
                    form#item-search input[type="text"]:focus {
                        inset: 0 0 0 0;
                    }
                    div#form-container::after {
                        inset: 10px auto auto auto;
                    }
                    form#item-search div#form-container:focus-within {
                        min-width: 25px;
                        max-width: 420px;
                        padding: 0 10px;
                        background-color: #372E22;
                        box-shadow: 0 -2px 0 0 var(--shadow-color);
                        border-radius: 10px;
                    }
                    div#form-logo {
                        display: none;
                    }
                        div#form-container:focus-within::before {
                            content: "";
                            position: absolute;
                            inset: 5px 0 5px 5px;
                            width: 30px;
                            height: 30px;
                            background: url(../media/images/logos/ge-icon.png) no-repeat;
                            background-size: 31px;
                            border-radius: 8px;
                            pointer-events: none;
                        }
                        form#item-search input[type="text"] {
                            inset: 0 0 0 -10px;
                            padding-right: 0;
                            color: transparent;
                            background-size: 20px;
                            transition: 250ms all ease-in-out;
                        }
                            form#item-search input[type="text"]::placeholder,
                            form#item-search input[type="text"]:hover,
                            form#item-search input[type="text"]:-webkit-autofill:hover {
                                color: transparent;
                                background-position: right center;
                            }
                            form#item-search input[type="text"]:focus {
                                padding: 0 25px 0 35px;
                            }
                    div#form-btns {
                        gap: 6px;
                    }
                            div#refresh-container span#auto-update-countdown {
                                /* display: none; */
                            }
                                div#refresh-container.active {
                                    /* padding: 0; */
                                    /* background-color: transparent; */
                                    /* box-shadow: none; */
                                    /* border-radius: 0; */
                                    /* outline: 0; */
                                }
                                    div#refresh-container.active:hover {
                                        box-shadow: none;
                                    }
                                    div#refresh-container.active i {
                                        text-shadow: 2px 2px 0 black;
                                    }
                                    div#refresh-btn:hover {
                                        transform: none;
                                        text-shadow: 2px 2px 0 black;
                                    }
                                    div#refresh-btn i.disabled {
                                        color: #454545;
                                    }
                                    div#refresh-btn i.active {
                                        text-shadow: none;
                                    }
                                    div#refresh-btn i:hover,
                                    div#refresh-btn i.active:hover {
                                        transform: none;
                                    }
            pre#empty, noscript {
                line-height: 50px;
            }
            pre#empty {
                font-size: 15pt;
            }
                div.item {
                    min-width: 300px;
                }
                            div#item-btns.favourites ~ div.flex span.item-name {
                                width: 230px;
                            }
                                            div.settings-dropdown ul#chart-list[aria-expanded=true] {
                                                left: -8px;
                                                bottom: -10px;
                                                gap: 8px;
                                                width: fit-content;
                                                height: fit-content;
                                                padding: 10px 8px;
                                            }
            div#scroll-to-top:focus, div#scroll-to-top:hover {
                background-color: var(--examine-bg);
            }
        div#tooltip {
            display: none;
        }
            section#debug pre#debug-container {
                font-size: 6pt;
            }
}
@media screen and (max-height: 640px) {
                div#settings-panel {
                    width: 100%;
                    max-height: none;
                    box-shadow: 0 0 0 10px #484139;
                }
}
@media (pointer:coarse) {
                        div.item:hover div#item-chart div,
                            div#item-chart div {
                                height: 30px;
                                opacity: 1;
                            }
                                                div.settings-dropdown ul#chart-list:hover {
                                                    background-position-y: 0px;
                                                }
                                                ul#chart-select li {
                                                    height: 30px;
                                                }
                                                        ul#chart-list li[aria-selected=true]:hover {
                                                            background-position-y: -85px !important;
                                                        }
                                                    /* ul#chart-select li:last-child::after {
                                                        content: "";
                                                        width: 21px;
                                                        height: 19px;
                                                        background-position: -26px -57px;
                                                        background-image: url(../media/images/sprites/settings-icon-pack.png);
                                                    } */
}