html, body{
    padding: 0;
    margin: 0;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    cursor: url('./img/Interface/cursor.png'), auto;
}

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}

div.wrapper {
    background-color: black;
    margin: 0;
    width: 100%;
    height: 100%;
}

div.view {
    margin: 0;
    text-align: center;
    width: 100%;
    height: 100%;
}

div.hidden {
    display: none;
}

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

label, input[type="checkbox"], input[type="radio"] {
    cursor: url('./img/Interface/cursor2.png'), auto;
}

@font-face {
    font-family: "RingBearer";
    src: url("../Client/fonts/RingBearer.TTF") format("truetype");
}

div#loginScreen {
    position: absolute;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    font-family: "RingBearer";
    background-image: url("../Client/img/Interface/loginScreen.png");
    background-size: cover;
    opacity: 1;
    transition: opacity 1.5s;
    transition-timing-function: ease-in;
}

#loadBar {
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 3vh;
    width: 100%;
    border: 2px solid #463e3c;
    background-color: #2b2523;
}

#loadBarProgress {
    width: 0%;
    height: 100%;
    background-color: #7fc579;
}

#usernameInput {
    position: absolute;
    background-color: antiquewhite;
    width: 18vw;
    height: 6vh;
    left: 69vw;
    top: 42vh;
    font-family: "RingBearer";
    padding: 1.5vh 1vw 1.5vh 1vw;
    line-height: 3vh;
    font-size: 3ch;
    transition: width 0.1s, padding 0.1s;
    transition-timing-function: ease-out;
}

#passwordInput {
    position: absolute;
    background-color: antiquewhite;
    width: 18vw;
    height: 6vh;
    left: 69vw;
    top: 50vh;
    font-family: "RingBearer";
    padding: 1.5vh 1vw 1.5vh 1vw;
    line-height: 3vh;
    font-size: 3ch;
    transition: width 0.1s, padding 0.1s;
    transition-timing-function: ease-out;
}

#registerInput {
    position: absolute;
    background-color: antiquewhite;
    width: 18vw;
    height: 6vh;
    left: 69vw;
    top: 58.5vh;
    font-family: "RingBearer";
    padding: 1.5vh 1vw 1.5vh 1vw;
    line-height: 3vh;
    font-size: 2vh;
    transition: width 0.1s, padding 0.1s;
    transition-timing-function: ease-out;
}

button#loginButton {
    position: absolute;
    width: 8vw;
    height: 6vh;
    left: 69vw;
    top: 69vh;
    font-family: "RingBearer";
    padding: 1.5vh 1vw 1.5vh 1vw;
    line-height: 3vh;
    font-size: 3vh;
    background-color: antiquewhite;
    color: #362f2d;
}

div#loginStatus {
    position: absolute;
    width: 30vw;
    left: 58vw;
    top: 75vh;
    font-family: "RingBearer";
    padding: 1.5vh 1vw 1.5vh 1vw;
    line-height: 3vh;
    font-size: 3vh;
    color: #362f2d;
}

div.interface {
	position:absolute;
	top:0;
}

.interface .bgImg {
	pointer-events: none;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

div.button {
    position:relative;
    float:left;
    background-size: 150%;
    background-position: center center;
    transition: 0.3s background-size;
    cursor: url('./img/Interface/cursor2.png'), auto;
}

span.itemAmount {
    position: absolute;
    right: 10%;
    top: 5%;
    font-size: 14px;
    font-weight: bold;
    color:white;
    text-shadow: 0px 0px 4px black;
}

.xpBar, .subXpBar {
    width: 0%;
    height: 100%;
    background-color: gold;
    box-shadow: inset 0px 0px 0 1.5px #654d3f;
    position:absolute;
    top:0;
    transition: 1.5s width;
}

.xpBar.ma {
    background-color: #59d0ff;
}

.xpBar.ra {
    background-color: #8db800;
}

.xpBar.me {
    background-color: orange;
}

.xpBar {
    border-right: 2px solid #654d3f;
}

.subXpBar {
    background-color: white;
    transition: 0.01s;
}

div.xpBarContainer {
    width: 100vw;
    height: 1.2vh;
    background-color: #bb9d82b8;
    box-shadow: inset 0px 0px 0 1.5px #654d3f;
}

.xpDividers {
    position: absolute;
    top:0;
    width: 100%;
    height: 1.2vh;
    overflow: hidden;
}

.xpDivider {
    border-right: 2px solid #271f0d70;
    height: 1.2vh;
    float: left;
    color: #fff0;
    transition: 0.2s color;
    line-height: 1.2vh;
    font-size: 10px;
    font-weight: bold;
}

.xpDivider:hover {
    color: #fff;
}

span.xpProgress {
    background-color: #8d7865;
    border: 2px solid #654d3f;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    padding: 2px;
    font-weight: bold;
    font-size: 10px;
    transition: 0.2s all;
    color: #ffeecb;
    z-index: 1;
    position: relative;
}

.xpBarLevel {
    width: 40px;
    height: 1.8vh;
    box-shadow: inset 0px 0px 0 1.5px #654d3f;
    position: absolute;
    top: 0;
    color: white;
    font-size: 1.6vh;
    line-height: 1.8vh;
    text-shadow: 1px 1px 3px black;
}

.xpBarLevel.me {
    background-color: orange;
}

.xpBarLevel.ma {
    background-color: #59d0ff;
}

.xpBarLevel.ra {
    background-color: #8db800;
}

#xpBarCurrentLevel {
    border-bottom-right-radius: 0.7vh;
}

#xpBarNextLevel {
    right: 0;
    border-bottom-left-radius: 0.7vh;
}

span.xpProgress:hover {
    font-size: 16px;
}

div.hpIndicatorContainer {
    position: relative;
    top: 2vh;
    z-index:1;
}

span.hpIndicator {
    font-size: 1.7em;
    font-weight: bold;
    color: white;
}

div.combatLevelContainer {
    position: relative;
    width: 9vw;
    z-index: 1;
    top: 1vh;
}

span#combatLevel {
    color: white;
    font-size: 2.7em;
    font-weight: bold;
}

div.chat {
    height: 12.5vh;
    box-shadow: inset 1px 1px 2px 1px #2f1c08;
    border-radius: 3px;
    padding: 0.5vw;
    margin: 1px 4px 4px 4px;
    overflow-y: auto;
}

.chatTabs {
    overflow: hidden;
    position: absolute;
    left: 3px;
    top: 3px;
}

.chatTab {
    float: left;
    font-weight: bold;
    color: #eee;
    height: 3vh;
    line-height: 3vh;
    padding: 0px 5px;
    border-radius: 5px;
    border-right: 2px solid #2d2414;
}

.chatTab.inactive {
    font-weight: normal;
    background-color: #1115;
    color: #bbb;
}

.chatTab.unread {
    text-decoration: underline;
}

.chatTab.inactive:hover {
    cursor: url('./img/Interface/cursor2.png'), auto;
    background-color: #fff2;
}

div#chatMsgContainer {
    overflow: scroll;
    overflow-x: hidden;
    height: 100%;
    overflow-wrap: break-word;
    width: 106%;
    padding-right: 1em;
}

div.chatMsg {
    text-align: left;
    font-weight: bold;
}

span.type {
    color: #666;
}

span.quest {
    color: #606;
}

span.time {
    color: #444;
}

div#dialogueContainer {
    height: 11.5vh;
    margin: 0px 5px;
    padding: 5px 10px;
    overflow-y: auto;
    overflow-x: hidden;
    overflow-wrap: break-word;
    text-align: left;
    font-size: 1.8vh;
    font-weight: bold;
    font-family: sans-serif;
    color: #5d4930;
    box-shadow: inset 1px 1px 3px 0px #5d4930;
    background-color: antiquewhite;
}

div#dialogueButtonContainer {
    margin-top: 7px;
}

button.dialogueButton {
    margin-right: 10px;
    padding: 0.25em;
    font-weight: bold;
    font-size: 1.5vh;
    border: none;
    border-radius: 2px;
    background-color: antiquewhite;
    box-shadow: 1px 1px 1px 1px #666;
    color: #5d4930;
    cursor: url('./img/Interface/cursor2.png'), auto;
}

#dialogueHeadContainer {
    position: relative;
    margin: 0px 3px;
    float: left;
    height: 8vh;
    width: 10vh;
    background-color: antiquewhite;
    box-shadow: inset 1px 1px 3px 0px #5d4930;
}

#dialogueHeadContainer img {
    position: relative;
    left: -50%;
    top: -75%;
    width: 200%;
    height: 250%;
    pointer-events: none;
}

#interface_14 { /*Dialogue interface*/
    z-index: 5;
}

div#interface_15, div#interface_39 { /*Quest interace, Raids interface*/
    overflow-x: hidden;
    overflow-y: hidden;
    color: #5d4930;
    font-family: sans-serif;
}

.questBar {
    display: grid;
    grid-template-columns: 20vw 1fr 1fr;
    grid-template-areas: "title rec diff";
    margin: 3px;
    height: 1.5em;
    background-color: #fff5eb;
    color: #341f0f;
}

.questBar > div {
    font-weight: bold;
    line-height: 1.5em;
    border-right: 1px solid transparent;
    box-shadow: 1px 1px 2px #341f0f;
    cursor: url('./img/Interface/cursor2.png'), auto;
}

.questTitleBar > div {
    font-weight: bold;
    line-height: 2em;
    border-right: 1px solid #a48d7c;
}

.questTitleBar .questTitle {
    font-size: 1.3em;
    line-height: 1.5em;
}

.questBar > div:hover {
    background-color: #fffa;
}

.questDom {
    background-color: #fff6;
    border-radius: 2px;
    padding-bottom: 5px;
    box-shadow: 1px 1px 1px;
    margin-bottom: 5px;
    overflow: hidden;
}

.questDom.completed .questTitleBar {
    color: #259112;
    
}
.questDom.in_progress .questTitleBar {
    color: #ffcd15;
    text-shadow: 1px 1px 1px #000000ad;
    
}

.questDom.collapsed {
    max-height: 2em;
}

.questDom.out-of-focus {
    background-color: #999;
    -webkit-filter: blur(0.5px);
    -moz-filter: blur(0.5px);
    -o-filter: blur(0.5px);
    -ms-filter: blur(0.5px);
    filter: blur(0.5px);
}

.questDom:hover {
    background-color: #fff8 !important;
    -webkit-filter: blur(0px) !important;
    -moz-filter: blur(0px) !important;
    -o-filter: blur(0px) !important;
    -ms-filter: blur(0px) !important;
    filter: blur(0px) !important;
}


.questTitleBar {
    display: grid;
    grid-template-columns: 20vw 1fr 1fr;
    grid-template-areas: "title rec diff";
    background-color: #fff5;
    cursor: url('./img/Interface/cursor2.png'), auto;
}

.questInfo {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
        "desc desc desc"
        "reqs recs hint"
        "tip tip tip";
}

.questInfo ul {
    margin-block-start: 0px;
    margin-block-end: 10px;
    padding-inline-start: 20px;
}

.questInfo b {
    display: block;
    padding-bottom: 0.5em;
}

.requiredQuest.completed {
    color: #259112;
}

.requiredQuest.in_progress {
    color: #ffcd15;
    text-shadow: 1px 1px 1px #000000ad;
}

.questDesc {
    font-size: large;
    width: 98%;
    margin: 0.7em auto;
    padding: 0.7em;
    padding-top: 0px;
    border-bottom: 2px solid #5f4a3561;
    grid-area: desc;
}

.questReqs, .questRecs {
    text-align: left;
    margin-left: 1em;
}

.questReqs {
    grid-area: reqs;
}
.questRecs {
    grid-area: recs;
}
.questHint {
    grid-area: hint;
}

.hintBox {
    border: 3px solid #58493d;
    height: 2.5em;
    width: 2.5em;
    margin: auto;
    background-color: #fff7;
    line-height: 2.3em;
}

.hintBox.checked:after {
    content: "\2713";
    font-weight:bold;
    color: green;
    font-size: 2em;
}

.hintBox.unavailable {
    background-color: #999;
}

.hintBox.unavailable:after {
    content: "\00D7";
    font-weight:bold;
    color: #777;
    font-size: 2em;
}

.hintBox:not(.unavailable):hover {
    background-color: #fff;
    cursor: url('./img/Interface/cursor2.png'), auto;
}

.questTip {
    grid-area: tip;
    font-size: large;
    width: 98%;
    padding: 0.7em;
    margin: auto;
    border-top: 2px solid #5f4a3561;
    margin-top: 0.5em;
    background-color: #fff6;
}

div#questList, div#raidList {
    padding: 0px 3px;
    width: 100%;
    height: 37vh;
    overflow-x: hidden;
    overflow-y: auto;
    transition: 0.1s all;
}

#questList {
    height: 37vh;
}

div.questLineItem, div.raidLineItem {
    width: 100%;
    max-height: 4vh;
    font-family: cursive;
    font-weight: bold;
    background-color: #ffffff77;
    box-shadow: 1px 1px 2px 0px #00000044;
    transition: 0.1s all;
    margin-bottom: 1vh;
    text-shadow: 2px 1px 0px #2f1c08;
    overflow: hidden;
}

div.questLineItem.clicked, div.raidLineItem.clicked {
    max-height: 50vh;
}

div.questLineItem.in_progress, div.raidLineItem.attempted  {
    color: #d89a65;
}

div.questLineItem.completed, div.raidLineItem.completed {
    color: #459237;
}

div.questLineItem:hover, div.raidLineItem:hover {
    background-color: #ffffffcc;
}

div.questLineItem.clicked, div.raidLineItem.clicked {
    background-color: #ffffffcc;
}

div.raidInfo {
    color: #58493c;
    text-shadow: none;
    padding-bottom: 10px;
}

.raidDescriptionContainer {
    overflow: hidden;
    display: flex;
    justify-content: space-around;
}

span.raidStat {
    padding: 0px 10px;
}

div.raidStatsTitle {
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    padding: 20px 0px;
}

#raidUniques {
    width: 100%;
    display: flex;
    justify-content: space-around;
}

div#questInfo.completed, div#raidInfo.completed {
    background-color: #73ff62ab;
}

div.questTitleContainer, div.raidTitleContainer {
    width: 100%;
}

span.questTitle, span.raidTitle {
    font-size: 26px;
}

div.questDescriptionContainer {
    margin-top: 1vh;
    font-size: 18px;
    font-style: italic;
}

div.questTipContainer {
    margin-top: 2vh;
}

/* BEGIN SHOP INTERFACE*/

.shopInfo {
    position: relative;
    width: 50%;
    height: 55.2vh;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 5vw 1fr 5vw;
    grid-template-areas: "image title title title" "table table table table" "buttons buttons buttons buttons";
    
    background-color: #584e4a;
    float: left;
    margin: 0px 0px 0px 3px;
    border-radius: 4px;
    box-shadow: inset 1px 1px 2px #2f1c08;
    transition: 0.5s all;
}

#shopItemImg {
    grid-area: image;
    width: 5vw;
    height: 5vw;
    border-radius: inherit;
    border: 3px solid #3b3326;
    background-color: #d1cbbf;
}

#shopItemTitle {
    grid-area: title;
    font-family: 'calibiri';
    color: white;
    font-weight: bold;
    font-size: 1.5em;
    line-height: 5vw;
}

table#shopItemInfo {
    table-layout: fixed;
    color: white;
    font-size: 1.1em;
    overflow: hidden;
    padding: 0.5em;
    height: fit-content;
    width: 100%;
    position: relative;
    grid-area: table;
}

#shopItemInfo td:nth-child(1) {
    width: 33%;
    white-space: nowrap;
}

.transButtonContainer {
    grid-area: buttons;
    font-weight: bold;
    font-size: 1.7em;
    line-height: 4vh;
}

#shopButtonContainer {
    padding: 2px 5px 0px 10px;
    height: 55.2vh;
}

#shopButtonContainer .itemButton {
    outline: 1px solid #806755;
}

.tickBoxes {
    display: grid;
    grid-template-columns: 10% 20% 20% 20% 20% 10%;
    grid-template-areas: "left one five ten twentyfive right";
    overflow: hidden;
    font-family: monospace;
}

.tickBoxes .button {
    background-color: #40332C;
    border-radius: 4px;
    color: #fbb761;
    justify-self: center;
    width: 3vw;
    height: 4vh;
    transition: 0.05s all;
}

.tickBoxes .button:hover {
    background-color: #8a7e69;
}

.tickBoxes .button.selected {
    box-shadow: inset 0px 0px 0px 2px gold;
}

.transButtonContainer .button {
    transition: 0.05s all;
}

.transButtonContainer .button.locked {
    color: #999 !important;
    background-color: #666 !important;
}

#id8button0 {
    position: absolute;
    left: 2em;
    bottom: 0.5em;
}

#id8button1 {
    position: absolute;
    right: 2em;
    bottom: 0.5em;
}

/* END SHOP INTERFACE */

div#signText {
    position: relative;
    z-index: 1;
    color: #30230d;
    margin: 7vh 5vw 0vw 4vw;
    font-size: 3vh;
    font-family: RingBearer;
    text-shadow: 2px 2px 2px #583f11;
}

div#menuItemContainer {
    overflow: auto;
    padding: 0.1vw;
}

div#menuItemContainer .button {
    background-color: #3c3b3b;
    float: left;
    height: 2vh;
    width: 100%;
    transition: 0.1s all;
    color: #d2d2d2;
}

div#menuItemContainer .button:hover {
    transform: scale(1.05);
    background-color: #584e4a;
}

#charInfoTable {
    width: 100%;
    padding: 0.5vw;
    box-shadow: inset 1px 1px 2px 1px #2f1c08;
    font-weight: bold;
}

#imageDisplayText {
    font-size: 2vw;
    font-family: 'RingBearer';
    color: #555;
    text-shadow: -1px -1px 1px #000;
    position: relative;
    z-index: 1;
    padding: 3vw;
}

#id15button0 { /* Close button for image display */
    position: absolute;
    z-index: 2;
    right: 1vw;
    top: 0.5vw;
    color: rgb(216, 196, 155);
    font-size: 2vh;
    background-color: rgb(93, 73, 48);
    border-radius: 1em;
    line-height: 5.7vh;
    transform: scale(1);
    font-family: monospace;
    font-weight: bold;
    padding: 0px 0.5em;
}

canvas {
    margin: 0;
    position: absolute;
    left: 0;
    top: 0;
}

#bgdiv, #bgtransition {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    background-size: 150%;
    filter: contrast(0.7);
}

.fade-out {
    opacity: 0;
    transition: 2s opacity;
}

.fade-in {
    opacity: 1;
    transition: 2s opacity;
}

#itemInfo {
    padding: 1em;
    font-family: sans-serif;
    color: #ccc;
    text-align: left;
    border: 2px solid #777;
    border-radius: 0.2em;
    background: #1c1c1cdb;
    min-width: 150px;
}

#itemInfo .property {
    overflow: hidden;
    min-height: 20px;
}

.itemStatDiff {
    float: right;
}

.itemStatDiff.positive::before {
    color: green;
    content: "\1F899";
    font-size: 26px;
    line-height: 0px;
    position: relative;
    top: 4px;
}

.itemInfoAmount {
    color: white;
    font-weight: normal;
    font-size: 14px;
}

.itemStatDiff.negative::before {
    color: red;
    content: "\1F89B";
    font-size: 26px;
    line-height: 0px;
    position: relative;
    top: 4px;
}

.badge {
    border-left: 4px solid #999;
    padding: 0px 4px;
    box-shadow: 1px 1px 2px 0px #333c;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    font-weight: bold;
    color: #eee;
    text-shadow: 1px 1px 1px #111;
    display: inline-block;
    width: fit-content;
}

b.me {
    color: orange;
    text-shadow: 1px 1px 0px #4d4d4d
}

b.ra {
    color: #8db800;
    text-shadow: 1px 1px 0px #4d4d4d
}

b.ma {
    color: #59d0ff;
    text-shadow: 1px 1px 0px #4d4d4d
}

b.holy {
    color: gold;
    text-shadow: 0 0 2px black;
}

b.cursed {
    color: #703080;
    text-shadow: 0 0 2px black;
}

b.worldly {
    color: #800000;
    text-shadow: 0 0 2px black;
}

.badge.me {
    border-left: 4px solid #63400099 !important;
    background-color: #ffa50099;
}
.badge.me:before {
    content: "";
    display: block;
    float:left;
    background: no-repeat url('./img/Interface/warriorOrange.png');
    background-size: 15px 15px;
    width: 20px;
    height: 15px;
    margin-top: 1px;
}

.badge.ra {
    border-left: 4px solid #2e3b0099 !important;
    background-color: #8db80099;
}
.badge.ra:before {
    content: "";
    display: block;
    float:left;
    background: no-repeat url('./img/Interface/archeryBadge.png');
    background-size: 15px 15px;
    width: 20px;
    height: 15px;
    margin-top: 1px;
}
.badge.ma {
    border-left: 4px solid #105c7a99 !important;
    background-color: #59d0ff99;
}
.badge.ma:before {
    content: "";
    display: block;
    float:left;
    background: no-repeat url('./img/Interface/sorceryBadge.png');
    background-size: 15px 15px;
    width: 20px;
    height: 15px;
    margin-top: 1px;
}
.badge.worldly {
    color: #ccc;
    border-left: 4px solid #ccc;
    background-color: #80000099;
}
.badge.holy {
    color: gold;
    border-left: 4px solid #bda000;
    background-color: #013fb199;
}
.badge.cursed {
    color: #bc40dc !important;
    background-color: #111;
    border-left: 4px solid #bc40dc !important;
}
.badge.hp {
    background-color: darkgreen;
    border-left: 4px solid green !important;
}
.badge.hp:before {
    content: "\2764\00A0";
    color: #8f0000;
}

#interface_34 {
    z-index: 999;
}

#interface_20 .buttonHolder {
    border-radius: 0.5em;
    position: relative;
    height: 44.9vh;
    width: 47.25vw;
    overflow: visible;
    margin-left: -0.25vw;
    padding-left: 0.25vw;
    margin-top: -0.4vh;
    padding-top: 0.4vh;
}

#interface_35 .button {
    border: 4px solid #0000;
    margin: 10px;
}

#gemOffers {
    overflow: hidden;
}

#merchDivider {
    
}

#gemsOffered {
    overflow: hidden;
}

#merchArrows {
    overflow: hidden;
}

#gemsWanted {
    overflow: hidden;
}

#gemsWanted .button {
    background-position: 25% 50%;
}

#merchBuy {
    overflow: hidden;
    padding: 10px;
    margin-bottom: 3px;
}

#merchBuy .button {
    color: #ccc;
    font-weight: bold;
    padding: 1em;
    width: 100%;
    border: 2px solid #111;
    background-color: #333;
    border-radius: 0.5em;
    margin: auto;
    float: none;
}

#merchBuy .button:hover {
    background-color: #666;
    color: white;
}

#gemOffers .button {
    background-color: #222;
    margin: 10px;
    border-radius: 0.5em;
    border: 4px solid #222;
}

#gemOffers .button:hover {
    border: 4px solid #111;
    background-color: #c7ad61;
}


#interface_35 .button.selected {
    border: 4px solid #999;
}

span.youPay {
    color: #ccc;
    font-weight: bold;
    font-size: 12px;
}

span.gemAmount {
    color: #ccc;
    font-weight: bold;
    font-size: 12px;
    position: relative;
    top: 5.5vh;
    display: block;
    width: 100%;
}

#gemsWanted .gemAmount {
    color: #ccc;
    font-weight: bold;
    font-size: 12px;
    position: relative;
    top: 5.5vh;
    display: block;
    width: 100%;
}

#gemsOffered .gemAmount {
    color: #ccc;
    font-weight: bold;
    font-size: 12px;
    position: relative;
    top: 4.5vh;
    display: block;
    width: 100%;
}

#gemsOffered .button {
    background-color: #222;
    border-radius: 0.5em;
    border: 4px solid #222;
}

#gemsOffered .button:hover {
    border: 4px solid #111;
    background-color: #c7ad61;
}

#merchDivider {
    border-top: 2px solid #222;
    border-bottom: 2px solid #222;
    padding: 4px;
    font-weight: bold;
    color: #ccc;
}

.itemButton .ltc {
    overflow: hidden;
    width: 80%;
    height: 0.5vh;
    border: 1px solid #0005;
    position: relative;
    top: 88%;
    margin: auto;
    border-radius: 1em;
    background-color: #9998;
}

.lootTimer {
    height: 100%;
    width: 100%;
    opacity: 0.6;
}

.enchantmentInfo {
    margin-top: 2vh;
    float: left;
    width: 25.2vw;
    height: 15vh;
    position: relative;
    border: 2px solid #333;
    background-color: #1119;
    border-radius: 7px;
    text-align: left;
    padding: 10px;
    color: #ddd;
}

.enchantmentInfo h3 {
    margin: 0;
}

.enchantmentInfo span {
    display: block;
}


#interface_43 {
    width: 100vw;
    height: 100vh;
    opacity: 0;
    transition: 0.5s opacity;
    z-index: 10;
}

span.hintTitle {
    font-size: 26px;
    color: #999;
}

div#tip {
    color: #ddd;
    font-size: 20px;
    font-family: cursive;
    text-align: left;
    padding-top: 60vh;
    padding-left: 15vw;
    position: absolute;
}

#chestButtonContainer {
    position: absolute;
    left: 10vw;
    top: 5vh;
    width: 15vw;
    height: 20vh;
}

#interface_46 #text, #interface_59 #text {
    float: left;
    position: relative;
    font-size: 2vw;
    line-height: 3.2vw;
    font-family: 'RingBearer';
    margin-left: 0.5vw;
}

#interface_46 #div {
    float: left
}

#interface_6, #interface_7 {
    transition: 0.25s transform ease-out;
    z-index: 4;
}

.uniformInterface {
    border: 4px solid #524032;
    border-radius: 4px;
    background-color: #9a7f66;
    background: linear-gradient(330deg, #a08a76 0%, #a08a76 49.9%, #a58f7b 50.1%, #a58f7b 100%);
    opacity: 0.95;
    overflow-y: auto;
    overflow-x: hidden;
}

.titleBar {
    position: relative;
    color: #eee;
    background-color: #524032 !important;
    padding: 5px 0px 3px 0px;
    height: 3vh;
    box-shadow: inset 1px 1px 1px 1px #2f1c08 !important;
    letter-spacing: 3px;
    margin: 3px;
    font-size: 1.8vh;
}

.titleBar .title {
    overflow-x: hidden;
    white-space: nowrap;
}

.closeButton {
    background-color: #58493c;
    position: absolute;
    width: 1vw;
    height: 1vw;
    right: 0.2vw;
    top: 0.2vw;
    box-shadow: 1px 1px 1px 0px #2f1c08;
    border-radius: 3px;
    line-height: 1vw;
    text-shadow: 1px 1px #2f1c08;
    letter-spacing: 0;
    padding-left: 1px;
}

.closeButton::after {
    content: "\1F5D9";
}

.closeButton:hover {
    background-color: #aa9582;
    box-shadow: inset 1px 1px 1px 0px #2f1c08;
    cursor: url('./img/Interface/cursor2.png'), auto;
}

::-webkit-scrollbar {
    width: 10px;
    margin-right: 1px;
}

::-webkit-scrollbar-track {
    width: 12px;
    box-shadow: inset 0 0 5px #2f1c08; 
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #58493c; 
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #2f1c08; 
    cursor: url('./img/Interface/cursor2.png'), auto;
}

.itemButton {
    position: relative;
    width: 3.3vw;
    height: 3.3vw;
    margin-bottom: 0.3vw;
    cursor: url('./img/Interface/cursor2.png'), auto;
}

.itemButton.deleting {
    outline: 3px solid #800 !important;
    background: #8005;
}

#interface_0 { /* inventory */
    display: grid;
    grid-template-rows: 3.5vh 1fr 3vh;
    grid-template-areas: "titleBar" "inventoryButtons" "currencies";
}

.itemButtonContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 3px;
}

.inventoryButtons {
    grid-area: inventoryButtons;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 4px;
    border-radius: 3px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}


.inventoryButtons .itemButton {
    position: relative;
    width: 3.3vw;
    height: 3.3vw;
    margin-bottom: 0.3vw;
    outline-style: solid;
    outline-width: 1px;
    outline-color: rgba(112, 80, 64, 0.6);
    opacity: 0.999;
    cursor: url('./img/Interface/cursor2.png'), auto;
}

.itemButton:hover {
    box-shadow: 0px 0px 2px 2px rgba(112, 80, 64, 0.6);
}

.itemButton.dragover {
    border: 3px dashed #fff9;
    cursor: url('./img/Interface/cursor2.png'), auto;
}

.itemButton.dragging {
    background-color: #fff7;
    cursor: url('./img/Interface/cursor2.png'), auto;
}

.inventoryButtons .itemButton.disabled {
    background-color: #58493c;
    background-blend-mode: luminosity;
    opacity: 0.6;
    cursor: url('./img/Interface/cursor.png'), auto;
}

.setIndicators {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    font-size: 2.2vh;
    line-height: 2.5vh;
}

.setIndicator {
    color: #564537;
}

.setIndicator.worldly {
    color: #800;
}

.setIndicator.holy {
    color: gold;
}

.setIndicator.cursed {
    color: #703080;
}

.setIndicator::after {
    content: "\25FB";
}

.setIndicator.active::after {
    content: "\25A3";
}

.setsContainer {
    display: flex;
    gap: 1.5vh;
    margin: 3px 3px 0px 3px;
}

.equipmentContainer {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1px 2px;
    border-radius: 3px;
    display: flex;
    justify-content: space-between;
    gap: 5px;
}

.equipmentContainer .itemButton {
    width: 3.3vw;
    height: 3.3vw;
    margin-bottom: 0px;;
    outline-style: solid;
    outline-width: 1px;
    outline-color: rgba(112, 80, 64, 0.6);
}

.equipmentContainer .itemButton.active {
    border: 1px solid #0006;
}

.lootButtons {
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 4px;
    border-radius: 3px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.lootButtons .itemButton {
    width: 3.3vw;
    height: 3.3vw;
    margin-bottom: 0.3vw;
    outline-style: solid;
    outline-width: 1px;
    outline-color: rgba(112, 80, 64, 0.6);
}

.currencies {
    grid-area: currencies;
    padding: 0.2vw;
    color: #eee;
    background-color: #58493c;
    width: 50%;
    margin: auto;
    box-shadow: inset 1px 1px 1px 1px #2f1c08 !important;
}

.coinsContainer {
    float: right;
}

.coinIcon {
    margin: 0.2vh 0.2vh 0vh 0.5vh;
    width: 1.4vh;
    height: 1.4vh;
    float: left;
}

#coinAmount {
    text-shadow: 1px 1px #111;
    float: left;
}

#coinChange {
    float: left;
    text-shadow: 1px 1px #111;
    display: none;
}

#coinChange.active {
    display: inline-block;
    animation: coinChange 1s;
}

#coinChange.negative {
    color: #800;
}

@keyframes coinChange {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.menuButton {
    background-color: #ffffff77;
    box-shadow: 1px 1px 2px 0px #00000044;
    margin: 0px 4px 4px 4px;
    float: none !important;
    color: #5c472f;
    font-family: cursive;
    font-weight: bold;
    text-shadow: 2px 1px 0px #2f1c08;
    font-size: 26px;
    padding-bottom: 4px;
}

.menuButton:hover {
    background-color: #ffffffcc;
}

.menuButton.disabled {
    background-color: #fff3 !important;
    color: #999;
}

.bossHealthBarContainer {
    height: 3vh;
    box-shadow: inset 1px 1px 1px 1px #2f1c08;
    background-color: #800;
    margin: 0px 3px 3px 3px;
}

.bossHealthBar {
    box-shadow: inset 1px 1px 1px 1px #2f1c08;
    background-color: green;
    height: 3vh;
    border-right: 3px solid #570000;
    transition: 1s width;
}

.bossHealthBarText {
    position: relative;
    color: #fffd;
    font-weight: bold;
    font-size: 2vh;
    font-family: sans-serif;
    top: -2.5vh;
    text-shadow: 2px 1px 2px #00000080;
}

#chatTextField {
    position: relative;
    text-align: left;
    box-shadow: inset 1px 1px 2px 1px #2f1c08;
    font-weight: bold;
    font-family: sans-serif;
    height: 2.2vh;
    line-height: 2.5vh;
    padding-left: 5px;
    color: #271605;
    margin: 0px 4px 0px 4px;
    border-radius: 3px;
    overflow:hidden;
}

.pname {
    color: #001a9a;
}

#bhContainer {
    display: grid;
    margin: 0px 3px 3px 3px;
    grid-template-columns: 1fr 2fr;
}

#bhImage {
    background-position: center;
    background-size: 200%;
    cursor: url('./img/Interface/cursor2.png'), auto;
}

#bhCounter {
    font-weight: bold;
    font-family: sans-serif;
    line-height: 7vh;
    font-size: 2.5vh;
    color: white;
    text-shadow: 1px 1px black;
    background-color: #0005;
    box-shadow: inset 1px 1px 2px 1px #2f1c08;
    border-radius: 2px;
}

#bhCounter.completed {
    color: springgreen;
}

.lootControlsContainer {
    margin: 3px;
    overflow: hidden;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 13px;
    text-shadow: 1px 1px #3a3a3abf;
}

.lootControlsContainer .button {
    height: 2.5vh;
    line-height: 2.5vh;
    border-radius: 1px;
    width: 45%;
    color: white;
    box-shadow: 1px 1px 3px 0px #5d4930;
}

/* Universal crafting interface */

.craftingContainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 3.3vh 2fr 3.3vh 1fr 3.3vh 12.3vh;
    grid-template-areas:
        "itemsTitle componentsTitle"
        "items components"
        "items toolsTitle"
        "items tools"
        "items itemTitle"
        "items item";
    overflow: hidden;
    height: 65.5vh;
}

.craftingContainer .itemListTitle {
    grid-area: itemsTitle;
}
.craftingContainer .toolsListTitle {
    grid-area: toolsTitle;
}
.craftingContainer .componentListTitle {
    grid-area: componentsTitle;
}
.craftingContainer .itemTitle {
    grid-area: itemTitle;
}

.craftingContainer .toCraft {
    grid-area: item;
    display: grid;
    grid-template-rows: 5vh 5vh 2vh;
    grid-template-columns: 10vh 5vh 1fr 5vh;
    grid-template-areas: 
        "item title title title"
        "item craft craft craft"
        "amt amt amt amt";
    margin: 0 3px 3px 3px;
    /*background-color: #ffffff30;*/
    box-shadow: inset 1px 1px 2px 1px #2f1c08;
    cursor: url('./img/Interface/cursor2.png'), auto;
    position: relative;
}

    .changeCraftAmt {
        line-height: 1.5vh;
        font-size: 28px;
        color: #eee;
        text-shadow: 2px 1px #333d;
        font-family: cursive;
        grid-area: amt;
        position: absolute;
        width: 50%;
        height: 2vh;
        background-color: #524133;
    }

    .changeCraftAmt:hover {
        background-color: #403226;
    }

    .minus {
        left: 0;
    }
    
    .plus {
        right: 0;
    }

    .craftingContainer .craftAmount {
        grid-area: amount;
        line-height: 10vh;
        color: white;
        font-size: 20px;
        background-color: #fff4;
        text-shadow: 1px 1px 1px black;
    }

    .craftingContainer .itemImage {
        grid-area: itemImage;
    }
    
    .craftingContainer .itemStats {
        grid-area: itemStats;
    }
    
    .craftingContainer .actions {
        grid-area: actions;
    }

.craftingContainer .itemList {
    grid-area: items;
    margin: 0 3px 3px 3px;
    box-shadow: inset 1px 1px 2px 1px #2f1c08;
    overflow-y: auto;
}

    .craftingContainer .itemList .itemButton, .ingredient .itemButton, .tool .itemButton {
        width: 4.5vh;
        height: 4.2vh;
        float: left;
    }

.craftingContainer .componentList {
    grid-area: components;
    margin: 0 3px 3px 3px;
    box-shadow: inset 1px 1px 2px 1px #2f1c08;
    overflow-y: auto;
}

.craftingContainer .toolsList {
    grid-area: tools;
    margin: 0 3px 3px 3px;
    box-shadow: inset 1px 1px 2px 1px #2f1c08;
    overflow-y: auto;
}

/*
Universal crafting container
*/

.craftingContainer {
    font-family: sans-serif;
}

.craftingContainer .list {
  max-height: 30px;
  overflow: hidden;
}

.craftingContainer .list.expanded {
  max-height: none;
}

.craftingContainer .category > .title {
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    font-weight: bold;
    position: relative;
    text-align: left;
    color: #58493c;
    background-color: #fff3;
    padding-left: 10px;
    border-bottom: 2px solid #0007;
}

.craftingContainer .category > .title:hover {
  color: #eee;
  background-color: #fff7;
  cursor: url('./img/Interface/cursor2.png'), auto;
}

.craftingContainer .category > .category {
  border-left: 12px solid #0007;
}

.craftingContainer .item {
    height: 4vh;
    border-bottom: 1px solid #0007;
    background-color: #888;
    color: #eee;
    text-shadow: 1px 1px #333d;
    overflow: hidden;
    display: grid;
    grid-template-columns: 4vh 1fr 4vh;
}

.craftingContainer .item.enabled {
    background-color: transparent;
}

.craftingContainer .item .title {
  line-height: 4vh;
  font-size: 1.5vh;
}

.craftingContainer .item .levelReq {
    line-height: 3vh;
    font-weight: bold;
    color: #c70000;
}

.item .levelReq.enabled {
    color: #ccc;
}

.levelReq .lvl {
    height: 1vh;
    line-height: 1.5vh;
    font-size: 8px;
}

.craftingContainer .item.enabled:hover {
  background-color: #fff5;
  color: aliceblue;
  cursor: url('./img/Interface/cursor2.png'), auto;
}

.craftingContainer .ingredient, .craftingContainer .tool {
    height: 4vh;
    border-bottom: 1px solid #0007;
    /*background-color: #5c2f0885;*/
    color: #eee;
    text-shadow: 1px 1px #333d;
    overflow: hidden;
}

.craftingContainer .ingredient .title, .craftingContainer .tool .title {
  line-height: 4.3vh;
  font-size: 1.5vh;
}

.ingredient .title.hasSome {
    color: orange;
    background-color: #aaa9;
}

.title.hasNone {
    color: #c70000;
    background-color: #aaa9;
}

.toCraftTitle {
    grid-area: title;
    height: 5vh;
    background-color: #aaa9;
    font-size: 16px;
    line-height: 7vh;
    color: #eee;
    text-shadow: 1px 1px #333d;
}

.toCraft.enabled .toCraftTitle {
    background-color: #003a02cc;
}

.toCraftText {
    grid-area: craft;
    height: 5vh;
    line-height: 3vh;
    background-color: #aaa9;
    font-weight: bold;
    font-size: 2.5vh;
    color: #c70000;
    text-shadow: 1px 1px #333d;
}

.toCraft.enabled .toCraftText {
    background-color: #003a02cc;
    font-size: 3.5vh;
    color: #eee;
}

.toCraft.enabled:hover {
    background-color: #fff;
}


/*
END universal crafting container
*/

/* END Universal Crafting interface*/

.extractContainer {
    margin: 4px;
    display: flex;
    justify-content: space-between;
}

.extractContainer > div {
    width: 10vh;
}

.toExtract .itemButton, .essence .itemButton {
    background-color: #fff2;
    box-shadow: 1px 1px 2px 1px #2f1c08;
    margin: 3px 0px;
}

.toExtract .itemButton:hover, .essence .itemButton:hover {
    background-color: #fff4;
    cursor: url('./img/Interface/cursor2.png'), auto;
}

.extractContainer .extractSymbol {
    margin: 5vh 0;
    width: 10vh;
    height: 10vh;
    background-color: #fff3;
    background: url('img/Interface/extractArrow.png');
    background-size: cover;
}

.skillsContainer {
    font-family: sans-serif;
    font-weight: bold;
    color: #423327;
}

.skillsContainer .skillDiv {
    display: grid;
    grid-template-columns: 6vh 1fr;
    grid-template-rows: 6vh;
    grid-template-areas: "img name";
    position: relative;
    height: 6vh;
    max-width: 6vh;
    transition: 0.5s max-width;
    overflow: hidden;
    background-color: #b3a89e;
    margin-bottom: 3px;
}

.skillsContainer .skillDiv:hover {
    max-width: 30vh;
    cursor: url('./img/Interface/cursor2.png'), auto;
}

.skillDiv img {
    grid-area: img;
    display: block;
    width: 6vh !important;
    position: relative !important;
    float: left;
}

.skillDiv:hover img {
    opacity: 0.8;
}

.skillDiv .skillName {
    grid-area: name;
    display: block;
    float: left;
    line-height: 6vh;
    padding: 0px 5px;
    border-right: 3px solid #584536;
    border-top: 3px solid #b9b1aa;
    border-bottom: 3px solid #68523d;
    white-space: nowrap;
}

.skillDiv .skillName:hover {
    background-color: #d9cfc5;
}

.glowing {
    border: 2px solid gold;
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    box-shadow: 0px 0px 5px #ffeb89
  }
  to {
    box-shadow: 0px 0px 10px 2px #ffeb89;
  }
}

.button.empty {
    transition: 0s all;
}

.trashContainer {
    margin: 4px;
    background-color: #800;
    line-height: 16vh;
    font-size: 15vh;
    opacity: 0.5;
    border: 5px dashed white;
}

.trashContainer:after {
    content:"\267A";
    color: white;
}

.trashContainer.enabled {
    opacity: 1;
    font-weight: bold;
}

.libraryButtons {
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 4px;
    border-radius: 3px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.libraryButtons .itemButton {
    width: 3.3vw;
    height: 3.3vw;
    margin-bottom: 0.3vw;
    outline-style: solid;
    outline-width: 1px;
    outline-color: rgba(112, 80, 64, 0.6);
    opacity: 0.999;
    position: relative;
}

.libraryButtons .itemButton:hover {
    box-shadow: 0px 0px 2px 2px rgba(112, 80, 64, 0.6);
}

.libraryButtons .itemButton.dragover {
    border: 3px dashed #fff9;
}

.libraryButtons .itemButton.dragging {
    background-color: #fff7;
}

.hotbarContainer {
    display: grid;
    grid-template-areas:
        "empty statusbar statusbar"
        "char meter meter"
        "char ability lib";
    grid-template-columns: 19vh 30vw 4vw;
    grid-template-rows: 4vh 6vh 8vh;
}

#statusBar {
    grid-area: statusbar;
    display: flex;
    gap: 4px;
    padding-bottom: 2px;
}

.statusEffect {
    width: 3.5vh;
    height: 3.5vh;
    background-repeat: no-repeat;
    background-size: cover;
    border: 3px solid #513f31;
    padding: 0.25vh;
    cursor: url('./img/Interface/cursor2.png'), auto;
}

.statusEffect.flashing {
    animation: flash_away 1s infinite;
}

@keyframes flash_away {
    0% { opacity: 0.2; }
    25% { opacity: 1; }
    50% { opacity: 0.2; }
    75% { opacity: 1; }
    100% { opacity: 0.2; }
}

span.statusEffectTimer {
    color: white;
    text-shadow: 1px 1px black;
    font-size: 1.5vh;
    text-align: center;
    line-height: 2.7vh;
    opacity: 0.8;
}

#statusTooltip {
    display: none;
    position: absolute;
    text-align: left;
    color: #eee;
    padding: 3px 5px;
    top: -30px;
    background-color: #52403290;
    border: 2px solid #1119;
    max-width: 25vh;
}

.charControls {
    grid-area: char;
    display: grid;
    grid-template-areas:
        "char char warrior"
        "char char archer"
        "char char sorcerer";
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
}

.charControls div {
    background-repeat: no-repeat;
    background-color: #a08a77;
    background-position: center;
    opacity: 0.9;
}

.charControls div:hover {
    background-color: #cbb8a8;
    opacity: 1;
    cursor: url('./img/Interface/cursor2.png'), auto;
}

.meterContainer {
    grid-area: meter;
    display: grid;
    grid-template-areas:
        "shield"
        "hp";
    grid-template-rows: 1fr 4fr;
    background-color: #a08a77;
    border: 3px solid #513f31;
}

.abilityBar {
    grid-area: ability;
    border: 3px solid #513f31;
    margin-top: 2px;
    padding: 3px;
    background-color: #73665c;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.abilityButton {
    width: 9.3%;
    border-radius: 5px;
    margin: 0px 1px;
    background-color: #473d38;
    border-top: 2px solid #33200d;
    border-left: 2px solid #33200d;
}

.abilityButton:hover {
    background-color: #978372;
}

.abilityButton.activated {
    outline: 2px solid #a69585;
    box-shadow: inset 3px 3px 4px 0px #372715;
}

.abilityButton.dragover {
    border: 3px dashed #fff9;
    background-color: #fff7;
}

.abilityInputIcon {
    line-height: 14px;
    padding-left: 2px;
    width: 11px;
    height: 14px;
    bottom: 0px;
    right: 0px;
    position: absolute;
    border-top-left-radius: 7px;
    color: #ddd;
    text-shadow: 1px 1px 1px black;
    font-family: monospace;
    background-color: #73665c;
}

.libraryScroll {
    grid-area: lib;
    background-image: url(img/Interface/abilityLibraryIcon.png);
    background-color: #a08a77;
    opacity: 0.9;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
    margin: 2px 0px 0px 2px;
    border: 3px solid #513f31;
}

.libraryScroll:hover {
    background-color: #cbb8a8;
    opacity: 1;
    cursor: url('./img/Interface/cursor2.png'), auto;
}

.charButton {
    grid-area: char;
    background-image: url(img/Interface/characterButton.png);
    border: 3px solid #513f31;
    background-size: 90%;
}

.styleButton.me {
    grid-area: warrior;
    background-image: url(img/Interface/warriorOrange.png);
    background-size: 60%;
    margin: 0 2px;
    border: 3px solid #513f31;
}

.styleButton.ra {
    grid-area: archer;
    background-image: url(img/Interface/archeryGreen.png);
    background-size: 60%;
    margin: 0 2px;
    border-right: 3px solid #513f31;
    border-left: 3px solid #513f31;
}

.styleButton.ma {
    grid-area: sorcerer;
    background-image: url(img/Interface/sorceryBlue.png);
    background-size: 60%;
    margin: 0 2px;
    border: 3px solid #513f31;
}

.styleButton.selected {
    border: 2px solid #fff9;
}

.styleButton.disabled {
    background-color: grey;
}

.shieldContainer {
    position: relative;
    border-top: 2px solid #33200d;
    border-left: 2px solid #33200d;
    background-color: #999;
    border-bottom: 3px solid #513f31;
    overflow: hidden;
}

.hpContainer {
    border-top: 2px solid #33200d;
    border-left: 2px solid #33200d;
    margin: 0px;
    background-color: red;
    position: relative;
    overflow: hidden;
}

.hpInfo {
    color: white;
    font-weight: bold;
    line-height: 4vh;
    font-size: 2.5vh;
    font-family: monospace;
    text-shadow: 2px 2px 4px #000000b3;
    height: 1.2vh;
    width: 100%;
    position: absolute;
}

.hpMeter {
    background-color: green;
    width: 30%;
    height: 100%;
    float: left;
    border-right: 2px solid #013e01;
    transition: 1s width;
}

.armourMeter {
    background-color: darkgreen;
    width: 30%;
    height: 100%;
    float: left;
    border-right: 2px solid black;
    transition: 1s width;
}

.shieldMeter {
    height: 100%;
    background-color: #eee;
    width: 50%;
    border-right: 2px solid #555;
    transition: 1s width;
}

.subDivision {
    position: absolute;
    height: 100%;
    top: 0;
    z-index: 1;
    width: 1px;
    background-color: #777;
}

.subDivision:nth-child(10n) {
    width: 2px;
    background-color: #111;
}

.interface .chestIcon {
    width: 7vw;
    height: 7vw;
    left: 3.3vh;
    top: 3.3vh;
    position: absolute;
}

#drItemContainer {
    top: 26px;
    position: relative;
    margin: 0px 26px;
}

#drItemContainer .itemButton {
    outline: 1px solid #ccc5;
}

#drItemContainer .itemButton:hover {
    box-shadow: 0px 0px 2px 2px #fff5;
}

.drInstruction {
    font-size: 22px;
    color: white;
    text-shadow: 2px 2px 2px black;
    text-align: center;
    width: 100%;
    bottom: 4vh;
    position: absolute;
    font-family: monospace;
    height: 5vh;
    line-height: 5vh;
}

#interface_55 .actionButtons div {
    background-color: #999;
    color: white;
    font-size: 2.5vh;
    font-weight: bold;
    border-radius: 4px;
    font-family: monospace;
    width: 150px;
    height: 3.3vh;
    cursor: url('./img/Interface/cursor2.png'), auto;
}

#interface_55 .actionButtons div:hover {
    background-color: #ccc;
}

#crystalSackItemContainer .itemButton {
    outline: 1px solid #806755;
}

#imgContainerImg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

div#imgContainer {
    position: relative;
    height: calc(100% - 3vh - 6px);
}

.hsMainTitle {
    font-size: 26px;
    font-weight: bold;
    border-bottom: 1px solid #58493c;
    margin: 0px 3px;
    line-height: 50px;
}

.hsMainContainer {
    height: 60vh;
    margin: 0px 3px;
	display: flex;
}

.hsMenuList {
	display: flex;
	flex-direction: column;
    border-right: 1px solid #58493c;
    height: 100%;
	width: 12vw;
}

.hsEntryList {
	display: flex;
    width: 100%;
	flex-direction: column;
}

.hiscore-table thead {
    background-color: #58493c;
    color: #eee;
    text-align: left;
}

.hiscore-table tbody tr:nth-child(even) {
    background-color: #bbaa94;
    cursor: url('./img/Interface/cursor2.png'), auto;
}

.hiscore-table tbody tr:nth-child(odd) {
    background-color: #c3b59f;
    cursor: url('./img/Interface/cursor2.png'), auto;
}

.hiscore-table tbody tr:hover {
    background-color: #cfc4b2;
}

.hiscore-table th, .hiscore-table td {
    padding-left: 5px;
}

.bankTabs {
    display: flex;
    height: 0px;/*2.5em;*/
    border-bottom: 1px solid #58493c;
}

#interface_60 { /* bank */
    overflow: hidden;
}

.bankContainer {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.bankItems {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 57vh;
    overflow-y: auto;
    padding-bottom: 3em;
}

.bankItems .itemButton {
    border: 1px solid rgba(112, 80, 64, 0.4);
    margin-bottom: 0;
}

.bank-category {
    display: none;
    width: 100%;
    border-radius: 4px;
}

.bank-category.has-items {
    display: block;
}

    .bank-category.cat-armour {
        background-color: rgba(169, 169, 169, 0.3);
    }

    .bank-category.cat-weapons {
        background-color: rgba(139, 69, 19, 0.3);
    }

    .bank-category.cat-worldly {
        background-color: rgba(128, 0, 0, 0.3);
    }

    .bank-category.cat-holy {
        background-color: rgba(218, 165, 32, 0.3);
    }

    .bank-category.cat-cursed {
        background-color: rgba(75, 0, 130, 0.3);
    }

    .bank-category.cat-ranged {
        background-color: rgba(47, 79, 79, 0.3);
    }

    .bank-category.cat-melee {
        background-color: rgba(139, 69, 19, 0.3);
    }

    .bank-category.cat-magic {
        background-color: rgb(0 100 229 / 30%) 
    }

.bank-category-title {
    color: #eee;
    padding: 3px;
    background-color: #0004;
}

.bank-category-items {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 2px;
}

.bankSearch {
    width: 100%;
    position: absolute;
    bottom: 0;
    padding: 4px;
}

.bankSearch input {
    width: 50%;
    height: 2em;
    border-radius: 4px;
    border: 1px solid #58493c;
    background-color: #a79482;
    padding: 4px 8px;
    color: #eee;
}

.bankSearch input:focus {
    background-color: #58493c;
    border: 1px solid #211912;
    outline: none;
}


/* Map builder interface */

div#interface_61 {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.typeButtons {
    display: flex;
    border: 1px solid #58493c;
    margin: 3px;
}

.typeButton {
    background-color: #413227;
    color: #eee;
    padding: 3px;
    cursor: pointer;
    flex-grow: 1;
    border: 1px solid #352920;
}

.typeButton.selected {
    background-color: #746559;
    color: #eee;
    font-weight: bold;
}

.layerContainer {
    display: flex;
    flex-direction: column;
    gap: 1px;
    border: 1px solid #58493c;
    padding: 0px 3px;
    margin: 3px;
    overflow-y: auto;
    max-height: 20vh;
}

.layerContainer .layer {
    display: flex;
    gap: 5px;
    border-bottom: 1px solid #706255;
    cursor: pointer;
}

.layer.focused {
    background-color: #c7b5a4;
}

.layer:hover {
    font-weight: bold;
}

.layer input {
    cursor: pointer;
}

.blockContainer {
    border: 1px solid #58493c;
    padding: 3px 3px 0px 3px;
    overflow-y: scroll;
    max-height: 21vh;
    margin: 3px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8vh;
}

.blockContainer .block {
    position: relative;
    width: 5vh;
    height: 5vh;
    cursor: pointer;
    box-shadow: 1px 1px 3px 0px #58493c;
    color: #44392f;
}

span.block-id {
    position: absolute;
    bottom: 1px;
    right: 1px;
    background-color: #fff5;
    padding: 0px 2px;
    font-size: 10px;
    color: black;
}

.blockContainer .block img {
    width: 5vh;
    height: 5vh;
}

.blockContainer .block:hover {
    box-shadow: 2px 2px 3px 0px #44392f;
    color: #222;
    filter: brightness(1.2);
}

.blockContainer .block.selected {
    box-shadow: 2px 2px 3px 0px #44392f;
    color: #222;
    filter: brightness(1.2);
    scale: 0.95;
    outline: 2px dashed #ffffff;
}

.toolBar {
    display: flex;
    gap: 3px;
    margin: 3px;
}

.toolButton {
    border: 1px solid #58493c;
    background-color: #413227;
    padding: 3px;
    width: 5vh;
    height: 5vh;
}

.toolButton.selected {
    background-color: #c3a283;
    border: 1px solid #413227;
}

.toolButton:hover {
    background-color: #cec6c0;
    cursor: url('./img/Interface/cursor2.png'), auto;
}

.toolButton img {
    width: 100%;
    height: 100%;
}

.saveMapButton {
    border: 2px solid #413227;
    background-color: #58493c;
    color: #eee;
    bottom: 0px;
    position: relative;
    padding: 0.5em;
    margin: 3px;
}

.saveMapButton:hover {
    background-color: #746559;
    cursor: url('./img/Interface/cursor2.png'), auto;
}

/* End map builder interface */

/* Flask options interface */
.flaskContainer {
    display: flex;
    flex-direction: column;
    padding: 0px 3px;
}

.flaskTabs {
    display: flex;
}

.flaskTab {
    width: 100%;
    height: 3vh;
    line-height: 3vh;
    padding: 0px 5px;
    color: #bbb;
    cursor: url('./img/Interface/cursor2.png'), auto;
    background-color: #1115;
}

.flaskTab.active {
    font-weight: bold;
    color: #eee;
    background-color: #524032;
}

#flaskConfirmButton {
    background-color: rgb(0, 75, 0);
    color: #eee;
    height: 3vh;
    line-height: 3vh;
    cursor: url('./img/Interface/cursor2.png'), auto;
}

#flaskConfirmButton:hover {
    font-weight: bold;
    background-color: green;
}

#flaskConfirmButton.disabled {
    background-color: #333;
    color: #666;
}

.flaskOptions {
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.flaskArrow {
    font-size: 2em;
    line-height: 2em;
    color: #524032;
}

.flaskAssignmentList {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid #654d3f;
    max-height: 20vh;
    overflow-y: auto;
    margin: 3px 0px;
}

.flaskAssignment {
    display: flex;
    align-items: center;
    /*font-weight: bold;*/
    color: #ccc;
    background-color: #0005;
    cursor: url('./img/Interface/cursor2.png'), auto;
}

.flaskAssignment:nth-child(odd) {
    background-color: #0003;
}

.flaskAssignment.disabled {
    filter: saturate(0.5) brightness(0.7);
}

.flaskAssignment.disabled .levelReq {
    color: red;
}

.flaskAssignment:hover {
    background-color: #0001;
}

.flaskAssignment.selected {
    /*background-color: #9aff3b26;*/
    background-color: #0007;
    border: 2px solid #fff8;
    font-weight: bold;
}

.flaskAssignment .itemButton {
    width: 4.5vh;
    height: 4.5vh;
}

.flaskAssignment .levelReq {
    padding-right: 1rem;
    height: 4vh;
}

.flaskName {
    text-shadow: 1px 1px 1px #524032;
}

/* End flask options interface */

/* Timer interface */

.timerContainer {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: opacity 0.5s;
}

.timerRing {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 5px solid #524032;
    box-sizing: border-box;
    overflow: hidden;
    border: 2px solid #524032;
}

.progressIndicator {
    position: absolute;
    left:-1%;
    top: -1%;
    width: 102%;
    height: 102%;
    border-radius: 50%;
}

.centerContent {
    position: relative;
    z-index: 2;
    background: #524032;
    border-radius: 50%;
    width: 80%;
    height: 80%;
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
}

.timeDisplay {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 5px;
}

.targetDisplay {
    font-size: 12px;
    opacity: 0.8;
}

/* End timer interface */

/* Achievement interface */

#interface_64 {
    max-width: 20vw;
    padding: 3px;
    transition: 0.5s all;
    opacity: 0; /* Start as 0, increase to 1 when opening */
    z-index: 999;
}

#interface_64 .taskContainer {
    display: flex;
    gap: 0.9em;
    align-items: center;
    width: 100%;
    height: 7.2vh;
    overflow: hidden;
    padding-right: 0.5em;
    margin: 0px 3px;
}

.taskIconContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    /*width: 7.2vh;
    height: 7.2vh;*/
    /*background-color: #59483a;*/
}

.taskIconContainer .taskIcon {
    /*width: 6.5vh;
    height: 6.5vh;*/
    height: 100%;
    transition: 0.5s all;
}

#interface_64.spin-in .taskIcon {
    animation: spin-in 0.6s ease-in-out;
}

#interface_64 .taskText {
    flex-grow: 1;
    font-family: sans-serif;
    font-weight: bold;
    text-align: left;
    color: #0b0b0bdd;
    font-size: 2vh;
}

@keyframes spin-in {
    0% { transform: rotate(180deg); scale: 0; }
    90% { transform: rotate(360deg); scale: 1.1; }
    100% { transform: rotate(360deg); scale: 1; }
}

/* End achievement interface */

#interface_65 {
    display: flex;
    flex-direction: column;
}

#interface_65 #taskListContainer {
    display: flex;
    flex-direction: column;
    height: 45.2vh;
    font-family: sans-serif;
}

#interface_65 .filterBar {
    background-color: #59483a;
    display: flex;
    justify-content: space-between;
    padding: 4px 4px;
    margin: 0px 3px;
    color: #ebdcba;
    font-size: 1.2rem;
}

.filterBar select {
    font-weight: bold;
    font-family: sans-serif;
    color: #59483a;
    background-color: #ebdcba;
}

.filterBar option:checked, .filterBar option:hover, .filterBar option:focus {
    background-color: #59483a !important;
    color: #ebdcba;
}

#interface_65 .taskList {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    /*border: 2px solid #58493c;*/
    margin: 0px 3px;
    gap: 3px;
    color: #3d3009;
}

#interface_65 .taskItem {
    display: flex;
    align-items: center;
    text-align: left;
    padding: 3px 5px;
    font-size: 1.1rem;
    background: #fff6;
}

#interface_65 .taskItem:nth-child(odd) {
    /*background: #856d59;*/
}

.taskItem.tier-0::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url('./img/interface/1-star.png') no-repeat center;
    background-size: contain;
}

.taskItem.tier-1::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url('./img/interface/2-star.png') no-repeat center;
    background-size: contain;
}

.taskItem.tier-2::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url('./img/interface/3-star.png') no-repeat center;
    background-size: contain;
}

.taskItem.tier-3::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url('./img/interface/4-star.png') no-repeat center;
    background-size: contain;
}

.taskItem.tier-4::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url('./img/interface/5-star.png') no-repeat center;
    background-size: contain;
}

.taskItem.tier-5::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url('./img/interface/6-star.png') no-repeat center;
    background-size: contain;
}

#interface_65 .taskItem.combat {
    border-left: 8px solid #6d0000;
}

#interface_65 .taskItem.skilling {
    border-left: 8px solid #005a00;
}

#interface_65 .taskItem.quest {
    border-left: 8px solid #004297;
}

#interface_65 .taskItem.exploration {
    border-left: 8px solid #924200;
}

#interface_65 .taskItem.other {
    border-left: 8px solid #811395;
}

#interface_65 .taskItem.completed {
    /*background: #00440080;*/
    color: #59483a90;
    text-decoration: line-through;
}

#interface_65 .taskItem:hover {
    color: white;
    opacity: 0.9;
}

#interface_65 .loadingSpinner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#interface_65 .loadingSpinner img {
    height: 10vh;
    width: 10vh;
}

.loadingSpinner img {
    animation: loading-spinner 5s linear infinite;
}

@keyframes loading-spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}