@import "https://fonts.googleapis.com/css2?family=Wix+Madefor+Display:wght@400..800&display=swap";

:root {
    font-size: 1.48148148vh;
    font-family: Wix Madefor Display, sans-serif;
    transition: font-size .15s linear;
}

body {
    margin: 0;
    height: 100vh;
    background: none !important;
    overflow: hidden !important;
    user-select: none;
}

#root {
    height: 100%;
}

p {
    margin: 0;
    padding: 0;
}

*:focus {
    outline: none;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.app-wrapper {
    height: 100%;
    width: 100%;
    color: #fff;
}

.item-drag-preview {
    width: 6rem;
    height: 6rem;
    z-index: 1;
    position: fixed;
    pointer-events: none;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 4.5rem;
    image-rendering: -webkit-optimize-contrast;
}

.inventory-app {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: rgba(0, 0, 0, .4);
}

.inventory-wrapper {
    display: flex;
    justify-content: center;
    gap: 2rem;
    height: auto;
    align-items: flex-start;
    perspective: 100rem;
}

.inventory-control {
    display: flex;
    width: 100%;
    justify-content: space-around;
}

.inventory-control .inventory-control-wrapper {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.inventory-control .inventory-control-wrapper .inventory-control-wrapper-left {
    display: flex;
    flex-direction: row;
    gap: .25rem;
    height: 2.5rem;
}

.inventory-control .inventory-control-wrapper .inventory-control-wrapper-right {
    display: flex;
    flex-direction: row;
    gap: .5rem;
}

.inventory-control .inventory-control-input {
    transition: .2s;
    display: flex;
    width: 5.625rem;
    padding: .625rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .625rem;
    align-self: stretch;
    text-align: center;
    outline: none;
    border: none;
    color: #fff;
    border-radius: .25rem;
    border: .0625rem solid rgba(158, 14, 28, .3); /* Adjusted from rgba(202, 255, 51, .3) */
    background: linear-gradient(225deg, rgba(31, 31, 31, .5) .74%, rgba(26, 26, 26, .5) 99%);
}

.inventory-control .inventory-control-input:focus-within {
    border: .0625rem solid #9e0e1c; /* Adjusted from rgb(202, 255, 51) */
}

.inventory-control .inventory-control-button-addValue,
.inventory-control .inventory-control-button-removeValue {
    font-size: 1.25rem;
    color: #fff;
    transition: .2s;
    border: none;
    text-transform: uppercase;
    font-weight: 800;
    display: flex;
    width: 2.5rem;
    height: 2.5rem;
    padding: .625rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .625rem;
    align-self: stretch;
    border-radius: .25rem;
    background: #9e0e1c; /* Adjusted from #89AD22 */
    cursor: pointer;
}

.inventory-control .inventory-control-button-addValue:active,
.inventory-control .inventory-control-button-removeValue:active {
    scale: .9;
}

.inventory-control .inventory-control-button {
    font-size: .9rem;
    font-weight: 700;
    color: #fff;
    transition: .2s;
    padding: .625rem .75rem;
    border-radius: .5rem;
    border: none;
    display: flex;
    gap: .25rem;
    align-items: center;
    cursor: pointer;
}

.inventory-control .inventory-control-button.give {
    border-radius: .5rem;
    border: .0938rem solid #9e0e1c; /* Adjusted from #89AD22 */
    background: #1f1f1f;
}

.inventory-control .inventory-control-button.use {
    border-radius: .5rem;
    background: #9e0e1c; /* Adjusted from #89AD22 */
}

.inventory-control .inventory-control-button:active {
    scale: .9;
}

.useful-controls-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    width: 28.125rem;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    border-radius: .25rem;
    gap: 1rem;
    z-index: 6;
    border-radius: 1rem;
    border: .0938rem solid #9e0e1c; /* Adjusted from #89AD22 */
    background: radial-gradient(142.02% 141.42% at 0% 0%, rgba(158, 14, 28, .3) 0%, rgba(0, 0, 0, 0) 100%), rgba(0, 0, 0, .6); /* Adjusted gradient */
    backdrop-filter: blur(6px);
}

.useful-controls-dialog-overlay {
    background-color: #000000a6;
}

.useful-controls-dialog-title {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    font-size: 1.125rem;
}

.useful-controls-dialog-close {
    width: 1.5625rem;
    height: 1.5625rem;
    padding: .375rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: .25rem;
    fill: #fff;
}

.useful-controls-dialog-close:hover {
    cursor: pointer;
}

.useful-controls-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.divider {
    width: 100%;
    height: .0625rem;
    background-color: #ffffff1f;
}

.useful-controls-button {
    position: absolute !important;
    bottom: 1.5625rem;
    right: 1.5625rem;
    transition: .2s !important;
    border: none;
    color: #fff;
    width: 3.25rem;
    height: 3.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    fill: #fff;
    border-radius: 5% !important;
}

.useful-controls-button:hover {
    cursor: pointer;
}

.useful-controls-exit-button {
    position: absolute !important;
    right: .5rem;
    top: .5rem;
    color: gray !important;
}

.button-usefullControls {
    position: fixed;
    left: 1rem;
    top: 1rem;
    transition: .2s;
    border: none;
    width: 2rem;
    height: 2rem;
    padding: .5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, .4);
    border: .0625rem solid rgba(158, 14, 28, .2); /* Adjusted from rgba(137, 173, 34, .2) */
    border-radius: 50%;
    transform-origin: center center;
}

.button-usefullControls svg {
    stroke: #fff3;
    height: 1.5rem;
    width: auto;
}

.button-usefullControls:hover {
    cursor: pointer;
    background: rgba(158, 14, 28, .4); /* Adjusted from rgba(137, 173, 34, .4) */
    border: .0625rem solid rgba(255, 255, 255, .4);
    scale: 1.05;
}

.button-usefullControls:hover svg {
    stroke: #ffffffb3;
}

.inventory-wrapper-player {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.inventory-wrapper-left,
.inventory-wrapper-center,
.inventory-wrapper-right {
    position: relative;
    display: flex;
    width: 32.1rem;
    height: 39.125rem;
    padding: 1.5rem 1.5rem .5rem;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
    border: .0625rem solid rgba(158, 14, 28, .3); /* Adjusted from rgba(137, 173, 34, .3) */
}

.inventory-wrapper-left.inventory-wrapper-left,
.inventory-wrapper-center.inventory-wrapper-left,
.inventory-wrapper-right.inventory-wrapper-left {
    border-radius: 1rem 0rem 0rem 1rem;
    background: radial-gradient(142.02% 141.42% at 0% 0%, rgba(158, 14, 28, .2) 0%, rgba(0, 0, 0, 0) 100%), rgba(0, 0, 0, .6); /* Adjusted gradient */
    transform: rotateY(15deg) translateZ(4.75rem);
}

.inventory-wrapper-left.inventory-wrapper-center,
.inventory-wrapper-center.inventory-wrapper-center,
.inventory-wrapper-right.inventory-wrapper-center {
    background: radial-gradient(100% 100% at 50% 0%, rgba(158, 14, 28, .2) 0%, rgba(0, 0, 0, 0) 100%), rgba(0, 0, 0, .6); /* Adjusted gradient */
}

.inventory-wrapper-left.inventory-wrapper-right,
.inventory-wrapper-center.inventory-wrapper-right,
.inventory-wrapper-right.inventory-wrapper-right {
    border-radius: 0rem 1rem 1rem 0rem;
    background: radial-gradient(128.44% 141.42% at 100% 0%, rgba(158, 14, 28, .2) 0%, rgba(0, 0, 0, 0) 100%), rgba(0, 0, 0, .6); /* Adjusted gradient */
    transform: rotateY(-15deg) translateZ(4.75rem);
    max-height: 39.125rem;
    height: auto;
}

.inventory-wrapper-left.inventory-wrapper-right.player,
.inventory-wrapper-center.inventory-wrapper-right.player,
.inventory-wrapper-right.inventory-wrapper-right.player {
    height: 12rem;
    border-radius: 0rem 1rem 0rem 0rem;
}

.inventory-wrapper-left.inventory-wrapper-right.equipment,
.inventory-wrapper-center.inventory-wrapper-right.equipment,
.inventory-wrapper-right.inventory-wrapper-right.equipment {
    height: 24rem;
    border-radius: 0rem 0rem 1rem;
}

.inventory-wrapper-left.inventory-wrapper-right.equipment .inventory-header,
.inventory-wrapper-center.inventory-wrapper-right.equipment .inventory-header,
.inventory-wrapper-right.inventory-wrapper-right.equipment .inventory-header {
    height: 2rem !important;
}

.inventory-wrapper-left .inventory-header-wrapper,
.inventory-wrapper-center .inventory-header-wrapper,
.inventory-wrapper-right .inventory-header-wrapper {
    width: 100%;
    height: 3rem;
}

.inventory-wrapper-left .inventory-header-wrapper.leftInv,
.inventory-wrapper-center .inventory-header-wrapper.leftInv,
.inventory-wrapper-right .inventory-header-wrapper.leftInv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-radius: .5rem;
    border: .0625rem solid #9e0e1c; /* Adjusted from #89AD22 */
    background: linear-gradient(90deg, rgba(158, 14, 28, .1) 0%, rgba(158, 14, 28, .05) 50%, rgba(158, 14, 28, .15) 100%); /* Adjusted gradient */
}

.inventory-wrapper-left .inventory-header,
.inventory-wrapper-center .inventory-header,
.inventory-wrapper-right .inventory-header {
    display: flex;
    height: 3rem;
    width: 100%;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    justify-content: center;
}

.inventory-wrapper-left .inventory-header .inventory-header-left,
.inventory-wrapper-center .inventory-header .inventory-header-left,
.inventory-wrapper-right .inventory-header .inventory-header-left {
    display: flex;
    height: 1.875rem;
    width: 100%;
    padding: .25rem 0rem;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.inventory-wrapper-left .inventory-header .inventory-header-left .inventory-label-left,
.inventory-wrapper-center .inventory-header .inventory-header-left .inventory-label-left,
.inventory-wrapper-right .inventory-header .inventory-header-left .inventory-label-left {
    font-size: 1.25rem;
    font-weight: 700;
}

.inventory-wrapper-left .inventory-header .inventory-header-left .inventory-label-left.skeleton,
.inventory-wrapper-center .inventory-header .inventory-header-left .inventory-label-left.skeleton,
.inventory-wrapper-right .inventory-header .inventory-header-left .inventory-label-left.skeleton {
    margin-left: 1rem;
    margin-right: .5rem;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.inventory-wrapper-left .inventory-header .inventory-header-left .inventory-label-left.skeleton .inventory-button-info,
.inventory-wrapper-center .inventory-header .inventory-header-left .inventory-label-left.skeleton .inventory-button-info,
.inventory-wrapper-right .inventory-header .inventory-header-left .inventory-label-left.skeleton .inventory-button-info {
    display: flex;
    flex-direction: row;
    gap: .5rem;
    justify-content: center;
    align-items: center;
}

.inventory-wrapper-left .inventory-header .inventory-header-left .inventory-label-left.skeleton .inventory-button-info .inventory-header-button,
.inventory-wrapper-center .inventory-header .inventory-header-left .inventory-label-left.skeleton .inventory-button-info .inventory-header-button,
.inventory-wrapper-right .inventory-header .inventory-header-left .inventory-label-left.skeleton .inventory-button-info .inventory-header-button {
    display: flex;
    width: 9.4375rem;
    padding: .5rem;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    align-self: stretch;
    border-radius: .5rem;
    background: #9e0e1c; /* Adjusted from #89AD22 */
    transition: .2s;
    border: none;
    cursor: pointer;
}

.inventory-wrapper-left .inventory-header .inventory-header-left .inventory-label-left.skeleton .inventory-button-info .inventory-header-button img,
.inventory-wrapper-center .inventory-header .inventory-header-left .inventory-label-left.skeleton .inventory-button-info .inventory-header-button img,
.inventory-wrapper-right .inventory-header .inventory-header-left .inventory-label-left.skeleton .inventory-button-info .inventory-header-button img {
    width: 1rem;
    height: 1rem;
}

.inventory-wrapper-left .inventory-header .inventory-header-left .inventory-label-left.skeleton .inventory-button-info .inventory-header-button span,
.inventory-wrapper-center .inventory-header .inventory-header-left .inventory-label-left.skeleton .inventory-button-info .inventory-header-button span,
.inventory-wrapper-right .inventory-header .inventory-header-left .inventory-label-left.skeleton .inventory-button-info .inventory-header-button span {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}

.inventory-wrapper-left .inventory-header .inventory-header-left .inventory-label-right,
.inventory-wrapper-center .inventory-header .inventory-header-left .inventory-label-right,
.inventory-wrapper-right .inventory-header .inventory-header-left .inventory-label-right {
    font-size: 1rem;
    font-weight: 700;
}

.inventory-wrapper-left .inventory-header .inventory-weight-wrapper,
.inventory-wrapper-center .inventory-header .inventory-weight-wrapper,
.inventory-wrapper-right .inventory-header .inventory-weight-wrapper {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.inventory-wrapper-left .inventory-header .inventory-weight-wrapper img,
.inventory-wrapper-center .inventory-header .inventory-weight-wrapper img,
.inventory-wrapper-right .inventory-header .inventory-weight-wrapper img {
    width: 1rem;
    height: 1rem;
}

.inventory-wrapper-left .onMouseLeaveOrEnter,
.inventory-wrapper-center .onMouseLeaveOrEnter,
.inventory-wrapper-right .onMouseLeaveOrEnter {
    position: absolute;
    width: 100%;
    height: 10rem;
    bottom: -9rem;
}

.inventory-wrapper-left .inventory-button-bottom,
.inventory-wrapper-center .inventory-button-bottom,
.inventory-wrapper-right .inventory-button-bottom {
    display: flex;
    height: 2rem;
    padding: 0rem .75rem;
    justify-content: center;
    align-items: center;
    border-radius: 15rem;
    background: #9e0e1c; /* Adjusted from #89AD22 */
    position: absolute;
    bottom: -1rem;
    gap: .25rem;
    cursor: pointer;
    filter: drop-shadow(0px 2px 10px rgba(0, 0, 0, .4));
    transition: all .2s ease-in-out;
}

.inventory-wrapper-left .inventory-button-bottom:hover,
.inventory-wrapper-center .inventory-button-bottom:hover,
.inventory-wrapper-right .inventory-button-bottom:hover {
    scale: .9;
}

.inventory-wrapper-left .inventory-button-bottom span,
.inventory-wrapper-center .inventory-button-bottom span,
.inventory-wrapper-right .inventory-button-bottom span {
    font-size: 1rem;
    font-weight: 600;
}

.inventory-wrapper-left .inventory-button-bottom img,
.inventory-wrapper-center .inventory-button-bottom img,
.inventory-wrapper-right .inventory-button-bottom img {
    width: 1.5rem;
    height: 1.5rem;
}

.inventory-wrapper-left .inventory-menu-bar,
.inventory-wrapper-center .inventory-menu-bar,
.inventory-wrapper-right .inventory-menu-bar {
    position: absolute;
    bottom: -5.7rem;
    display: flex;
    padding: .75rem 1rem;
    justify-content: space-between;
    align-items: center;
    border-radius: 0rem 0rem 1rem 1rem;
    border: .0625rem solid rgba(158, 14, 28, .3); /* Adjusted from rgba(137, 173, 34, .3) */
    background: radial-gradient(260.42% 260.42% at 50.08% -76.04%, rgba(0, 0, 0, 0) 0%, rgba(158, 14, 28, .2) 100%), rgba(0, 0, 0, .6); /* Adjusted gradient */
    width: 33.125rem;
}

.inventory-wrapper-left ::-webkit-scrollbar,
.inventory-wrapper-center ::-webkit-scrollbar,
.inventory-wrapper-right ::-webkit-scrollbar {
    background: hsla(0, 0%, 100%, .1);
    width: .5rem;
    border-radius: 1rem;
}

.inventory-wrapper-left ::-webkit-scrollbar-thumb,
.inventory-wrapper-center ::-webkit-scrollbar-thumb,
.inventory-wrapper-right ::-webkit-scrollbar-thumb {
    background: #9e0e1c; /* Adjusted from #89AD22 */
    border-radius: 1rem;
}

.inventory-skeleton-hotbar {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100vh;
    width: 100vw;
    top: 0;
}

.inventory-skeleton-hotbar .skeleton-hotbar {
    border: .0625rem solid rgba(158, 14, 28, .3); /* Adjusted from rgba(137, 173, 34, .3) */
    background: radial-gradient(142.02% 141.42% at 0% 0%, rgba(158, 14, 28, .2) 0%, rgba(0, 0, 0, 0) 100%), rgba(0, 0, 0, .6); /* Adjusted gradient */
    position: relative;
    width: 25rem;
    left: 2rem;
    height: 35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
}

.inventory-skeleton-hotbar img {
    height: 90%;
    position: absolute;
}

.inventory-skeleton-container {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    gap: 1rem;
}

.inventory-skeleton-container .inventory-skeleton {
    height: 33.5rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inventory-skeleton-container .inventory-skeleton img {
    height: 80%;
    position: absolute;
}

.inventory-skeleton-container .inventory-grid-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-right: .1rem;
    padding: .5rem;
    padding-right: 0;
}

.damage,
.inventory-skeleton-hotbar img,
.inventory-skeleton-container .inventory-skeleton img {
    opacity: .5;
    transition: .2s opacity ease-in-out;
    animation: 5s pulseDamage infinite cubic-bezier(.34, .95, .38, -.04);
}

@keyframes pulseDamage {
    0% {
        opacity: .5;
    }
    50% {
        opacity: .1;
    }
    to {
        opacity: .5;
    }
}

.inventory-grid-container {
    display: grid;
    grid-template-columns: repeat(5, 5.625rem);
    gap: inherit;
    overflow-y: auto;
    padding: .5rem .7rem .5rem .5rem;
    margin-bottom: 1rem;
}

.inventory-grid-container.clothes {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.inventory-grid-container.clothes .inventory-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.inventory-grid-container.clothes .inventory-column .category-label {
    background: linear-gradient(90deg, rgba(158, 14, 28, .15) 0%, rgba(158, 14, 28, .05) 50%, rgba(158, 14, 28, .15) 100%); /* Adjusted gradient */
    display: flex;
    padding: .5rem 0rem;
    justify-content: center;
    align-items: center;
    gap: .625rem;
    flex-shrink: 0;
    border-radius: .5rem;
    margin-bottom: .125rem;
}

.inventory-grid-container.clothes .inventory-column .category-label img {
    width: 1.25rem;
    height: 1.25rem;
}

.inventory-grid-container.clothes .inventory-column .category-label span {
    font-size: .875rem;
    font-weight: 700;
}

.inventory-grid-container.clothes .inventory-column .inventory-grid-row {
    display: flex;
    justify-content: space-between;
}

.inventory-slot,
.hotbar-item-slot {
    position: relative;
    border: .0625rem solid rgba(158, 14, 28, .3); /* Adjusted from rgba(137, 173, 34, .3) */
    border-radius: .25rem;
    width: 5.625rem;
    height: 5.625rem;
    box-shadow: 0 0 48px #00000080 inset;
    background: linear-gradient(225deg, rgba(31, 31, 31, .5) .74%, rgba(26, 26, 26, .5) 99%);
    background-repeat: no-repeat;
    background-position: center;
    image-rendering: -webkit-optimize-contrast;
}

.inventory-slot .item-image-box,
.hotbar-item-slot .item-image-box {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.inventory-slot .item-image-box .item-image,
.hotbar-item-slot .item-image-box .item-image {
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    image-rendering: -webkit-optimize-contrast;
}

.inventory-slot.hotbar-slot,
.hotbar-slot.hotbar-item-slot {
    border: .0625rem solid #9e0e1c; /* Adjusted from rgb(137, 173, 34) */
}

.inventory-slot-number {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: .1875rem 0rem .25rem;
    overflow: hidden;
    background: #9e0e1c; /* Adjusted from #89AD22 */
    width: 1rem;
    height: 1rem;
    color: #fff;
    font-size: .625rem;
    font-weight: 800;
}

.item-slot-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    z-index: 3;
}

.item-slot-header-wrapper,
.item-hotslot-header-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.item-hotslot-header-wrapper {
    justify-content: space-between !important;
}

.item-slot-info-wrapper {
    display: flex;
    flex-direction: row;
    align-self: flex-end;
    padding: .1875rem;
    gap: .1875rem;
}

.item-slot-info-wrapper p {
    font-size: .625rem;
}

.item-slot-info-wrapper.count p {
    font-size: .625rem;
    font-weight: 600;
}

.item-slot-currency-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: .1875rem;
    gap: .1875rem;
}

.item-slot-currency-wrapper p {
    font-size: .625rem;
    font-weight: 600;
}

.item-slot-price-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: .1875rem;
    gap: .1875rem;
}

.item-slot-price-wrapper p {
    font-size: .625rem;
    font-weight: 600;
}

.context-menu-list {
    min-width: 12.5rem;
    background-color: #373737ee;
    width: 12.5rem;
    color: #fff;
    border-radius: 0rem .75rem .75rem;
    outline: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.context-menu-item {
    padding: .75rem;
    background-color: transparent;
    outline: none;
    border: none;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .875rem;
    border-bottom: .0625rem solid rgba(255, 255, 255, .12);
    overflow: hidden;
}

.context-menu-item:last-child {
    border-bottom: none;
}

.context-menu-item:active {
    transform: none;
}

.context-menu-item:hover {
    cursor: pointer;
    background-color: #2f2f2f;
}

.tooltip-description {
    padding-top: .3125rem;
}

.tooltip-markdown>p {
    margin: 0;
}

.tooltip-wrapper {
    pointer-events: none;
    display: flex;
    background-color: #373737ee;
    width: 12.5rem;
    flex-direction: column;
    min-width: 12.5rem;
    color: #fff;
    border-radius: 0rem .75rem .75rem;
    z-index: 4;
}

.tooltip-wrapper p {
    font-size: .75rem;
    font-weight: 400;
}

.tooltip-header-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .25rem;
    padding: .75rem;
}

.tooltip-header-wrapper p {
    font-size: 1rem;
    font-weight: 400;
}

.tooltip-header-wrapper .tooltip-header-info {
    display: inline-flex;
    flex-direction: row;
    gap: .5rem;
}

.tooltip-header-wrapper .tooltip-header-info .tooltip-header-info-box {
    margin-top: .25rem;
    display: flex;
    padding: .25rem;
    align-items: center;
    gap: .25rem;
    border-radius: .25rem;
    background: rgba(0, 0, 0, .2);
}

.tooltip-header-wrapper .tooltip-header-info .tooltip-header-info-box img {
    width: .75rem;
    height: .75rem;
}

.tooltip-header-wrapper .tooltip-header-info .tooltip-header-info-box p {
    font-size: .75rem;
    font-weight: 700;
}

.tooltip-upper-wrapper {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.tooltip-upper-wrapper p {
    padding: .75rem;
    font-size: .875rem;
    font-weight: 400;
}

.tooltip-bottom-wrapper {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .75rem;
}

.tooltip-bottom-wrapper p {
    font-size: .875rem;
    font-weight: 400;
}

.tooltip-crafting-duration {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.tooltip-crafting-duration svg {
    padding-right: .1875rem;
}

.tooltip-crafting-duration p {
    font-size: .875rem;
}

.tooltip-ingredients {
    padding-top: .3125rem;
}

.tooltip-ingredient {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.tooltip-ingredient img {
    width: 1.75rem;
    height: 1.75rem;
    padding-right: .3125rem;
}

.hotbar-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    width: 100%;
    position: absolute;
    bottom: 2vh;
}

.hotbar-item-slot {
    background-size: 4rem !important;
}

.hotbar-slot-header-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
    height: 100%;
}

.hotbar-slot-header-wrapper .item-slot-info-wrapper .count {
    position: absolute;
    top: .1rem;
    right: .1rem;
    font-size: .7813rem;
    font-weight: 600;
}

.hotbar-slot-header-wrapper .item-slot-info-wrapper .weight {
    bottom: 0;
    right: 0;
    font-size: .6875rem;
    font-weight: 500;
}

.item-notification-container {
    pointer-events: none;
    display: flex;
    overflow-x: scroll;
    flex-direction: column;
    gap: 1rem;
    position: absolute;
    width: 100%;
    left: 0;
    height: 24rem;
    bottom: 30vh;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.item-notification-container::-webkit-scrollbar {
    display: none;
}

.item-notification-item-box {
    position: relative;
    left: 1vw;
    display: flex;
    padding: .5rem 1rem;
    align-items: center;
    gap: .5rem;
    width: fit-content;
    border-radius: .25rem;
    background: rgba(26, 26, 26, .8);
}

.item-notification-item-box:before {
    content: "";
    position: absolute;
    width: .25rem;
    height: 4rem;
    left: 0;
    border-radius: .25rem 0 0 .25rem;
    transform: scaleX(0) scaleY(0);
    animation-delay: .1s !important;
    animation: scaleXYIn .25s ease forwards;
    transform-origin: center right;
}

@keyframes scaleXYIn {
    0% {
        transform: scaleX(0) scaleY(0);
    }
    to {
        transform: scaleX(1) scaleY(1);
    }
}

.item-notification-item-box .item-notification-item {
    width: 3rem;
    height: 3rem;
    background: rgba(0, 0, 0, .3);
    border-radius: .25rem;
    background-repeat: no-repeat;
    background-position: center;
    image-rendering: -webkit-optimize-contrast;
    background-size: 2rem !important;
}

.item-notification-item-box .item-notification-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: .25rem;
}

.item-notification-item-box .item-notification-body .item-header {
    display: flex;
    width: fit-content;
    padding: .25rem .5rem;
    justify-content: center;
    align-items: flex-start;
    gap: .625rem;
    border-radius: .25rem;
}

.item-notification-item-box .item-notification-body .item-header span {
    font-size: .75rem;
    font-weight: 700;
    color: #fff;
}

.item-notification-item-box .item-notification-body .item-name {
    display: flex;
    gap: .25rem;
    align-items: baseline;
}

.item-notification-item-box .item-notification-body .item-name span {
    font-size: .875rem;
    font-weight: 700;
    color: #fff;
}

.item-notification-item-box .item-notification-body .item-name span.count {
    font-size: .7188rem;
}

.item-notification-item-box .item-header {
    background: #9e0e1c; /* Adjusted from #89AD22 */
}

.item-notification-item-box:before {
    background: #9e0e1c; /* Adjusted from #89AD22 */
}

.item-notification-item-box.ui_added .item-header {
    background: #00b7b7; /* Adjusted from #00b011 to a cyan complementary color */
}

.item-notification-item-box.ui_added:before {
    background: #00b7b7; /* Adjusted from #00b011 */
}

.item-notification-item-box.ui_removed .item-header {
    background: #9e0e1c; /* Adjusted from #cd0000 to maintain consistency */
}

.item-notification-item-box.ui_removed:before {
    background: #9e0e1c; /* Adjusted from #cd0000 */
}

.durability-bar {
    background: hsla(0, 0%, 100%, .1);
    height: .25rem;
    border-bottom-left-radius: .1875rem;
    border-bottom-right-radius: .1875rem;
    overflow: hidden;
}

.weight-bar {
    border-radius: .25rem;
    background: hsla(0, 0%, 100%, .1);
    height: .5rem;
    overflow: hidden;
}

.transition-fade-enter {
    opacity: 0;
}

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

.transition-fade-exit {
    opacity: 1;
}

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

.transition-slide-up-enter {
    transform: translateY(12.5rem);
}

.transition-slide-up-enter-active {
    transform: translateY(0);
    transition: all .2s;
}

.transition-slide-up-exit {
    transform: translateY(0);
}

.transition-slide-up-exit-active {
    transform: translateY(12.5rem);
    transition: all .2s;
}

.transition-slide-left-enter {
    transform: translate(-12.5rem);
}

.transition-slide-left-enter-active {
    transform: translate(0);
    transition: all .2s;
}

.transition-slide-left-exit {
    transform: translate(0);
}

.transition-slide-left-exit-active {
    transform: translate(-12.5rem);
    transition: all .4s ease-in-out;
}

.transition-slide-left-skeleton-enter {
    transform: translate(-50rem);
}

.transition-slide-left-skeleton-enter-active {
    transform: translate(0);
    transition: all .2s;
}

.transition-slide-left-skeleton-exit {
    transform: translate(0);
}

.transition-slide-left-skeleton-exit-active {
    transform: translate(-50rem);
    transition: all .2s;
}

.transition-scaleY-enter {
    transform-origin: top;
    transform: scaleY(0);
}

.transition-scaleY-enter-active {
    transform: scaleY(1);
    transition: all .2s;
}

.transition-scaleY-exit {
    transform-origin: top;
    transform: scaleY(1);
}

.transition-scaleY-exit-active {
    transform: scaleY(0);
    transition: all .2s;
}