@import url('https://fonts.googleapis.com/css2?family=Encode+Sans:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@300..700&display=swap');

* {
    padding: 0;
    margin: 0;
    color: white;
    user-select: none;
}

.omulet {
    position: fixed;
    z-index: -1;
    opacity: 0.03;
    height: 60vh;
    margin-left: 4.1vh;
    margin-top: 1vh;
}

.ui {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* background: url("../assets/bg.png"); */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: none;
    z-index: 0;
}

.close-container {
    position: absolute;
    top: 20px;
    right: 170px;
    z-index: 1000;

    display: flex;
    align-items: center;
    gap: 15px;
}

.close-text {
    color: white;
    font-family: 'Gilroy', sans-serif;
    font-weight: 600;
    font-size: 1.3rem;
    user-select: none;
}

.close-button {
    color: white;
    font-family: 'Gilroy', sans-serif;
    font-weight: 600;
    font-size: 1.8rem;
    background-color: rgba(37, 37, 37, 0.514);
    width: 90px;        /* lățime fixă */
    height: 90px;       /* înălțime egală cu lățimea pentru pătrat */
    line-height: 90px;  /* pentru a centra vertical textul */
    border-radius: 12px;
    border: 1px solid rgba(100, 100, 100, 0.8);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    user-select: none;
    text-align: center;
    display: inline-block;
    padding: 0;         /* eliminăm padding-ul ca să fie pătrat fix */
}

.title{
    position: absolute;
    left: 11.1111vh;
    top: 8.0556vh;

    display: flex;
    align-items: start;
    flex-direction: column;
    gap: 22px;
}

.title > .title-wrapper{
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 18px;
}

.title > .title-wrapper > .line{
    width: 4px;
    height: 45px;

background: linear-gradient(180deg, #a17431 0%, #ff8800 44%, #ff8800 67%, #a17431 100%);
}

.title > .title-wrapper > .flex-start{
    display: flex;
    align-items: start;
    flex-direction: column;
    gap: 9px;
}

.title > .title-wrapper > .flex-start > span:nth-child(1){
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 500;
    font-size: 28px;

    color: #FFFFFF;
    text-shadow: 0px 0px 31.3px #FFFFFF;
}

.title > .title-wrapper > .flex-start > span:nth-child(2){
    max-width: 316px;

    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: -0.03em;

    color: rgba(195, 195, 195, 0.31);
}

.corner-image {
    position: absolute;
    top: 20px;
    left: 170px;
    z-index: 1000;
    background-color: rgba(10, 10, 10, 0.575);
    padding: 6px;
    border-radius: 10px;
    border: 1px solid rgba(120, 120, 120, 0.85);
    box-shadow: 0 3px 12px rgba(0,0,0,0.6);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.corner-image img {
    max-height: 72px;
    max-width: 72px;
    border-radius: 6px;
    display: block;
}

.close-button {
    color: white;
    font-family: 'Gilroy', sans-serif;
    font-weight: 600;
    font-size: 1.6rem;
    background-color: rgba(37, 37, 37, 0.514);
    width: 70px;
    height: 70px;
    line-height: 70px;
    border-radius: 10px;
    border: 1px solid rgba(100, 100, 100, 0.8);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    user-select: none;
    text-align: center;
    display: inline-block;
    padding: 0;
}

.inventory {
    position: fixed;
    width: 154vh;
    top: 50vh;
    height: 70vh;
    left: 85vh;
    /* color: white; */
    color:#ff9100;
    transform: translate(-50%, -50%);
    border-radius: .1vh;
    overflow: hidden; /* Schimbat de la 4.5vh la hidden */
    display: block; /* Schimbat de la 5vh la block */
    padding: 0vh 1.5vh;
}

.cloth {
    right: 1.5vh;
    position: absolute;
    top: 6vh;
    transition: all 0.3s ease;
}

#glasses,
#hat,
#mask,
#pants,
#shirt,
#shoes,
#top,
#vest,
#bagoff,
#watch {
    width: 1.6vh;
    height: 1.6vh;
    border: 0.3vh solid rgba(60, 60, 60, 0.6);
    border-radius: 20%;
    padding: 1.4vh;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.171) 0%, 
        rgba(70, 70, 70, 0.671) 50%, 
        rgba(40, 40, 40, 0.63) 100%);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.3vh 0;
}

#glasses:hover,
#hat:hover,
#mask:hover,
#pants:hover,
#shirt:hover,
#shoes:hover,
#top:hover,
#vest:hover,
#watch:hover {
    opacity: .5;
}

#glasses:hover,
#hat:hover,
#mask:hover,
#pants:hover,
#shirt:hover,
#shoes:hover,
#top:hover,
#vest:hover,
#bagoff:hover,
#watch:hover {
    opacity: 0.8;
    transform: scale(1.05);
    border-color: rgba(128, 128, 128, 0.6);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 15px rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.15) 0%, 
        rgba(80, 80, 80, 0.25) 50%, 
        rgba(50, 50, 50, 0.35) 100%);
}

#playerInventory {
    position: absolute;
    width: 46.7vh;
    height: 46.7vh;
    direction: ltr;
    margin-left: 7.1vh;
    padding-left: .6vh;
    top: 23vh;
    
    /* Forțează scroll-ul să funcționeze */
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    
    /* Asigură-te că conținutul depășește înălțimea containerului */
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    
    /* Sau folosește grid pentru layout mai controlat */
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: min-content;
    gap: 0.5vh;
    
    /* Smooth scrolling */
    scroll-behavior: smooth;
}

#thirdLocation {
    position: absolute;
    height: 1.3vh;
    margin-left: 7vh;
    margin-top: 10vh; /* Mutat hotbar-ul mai sus */
    padding-left: .6vh;
}

.categories-container {
  display: flex;
  gap: 12px;
  margin-bottom: 15px;
  justify-content: center;
}

.category-button {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.category-button:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

.category-button.active {
  background: rgb(255, 136, 0);
  border-color: rgb(255, 136, 0);
  color: white;
}

#contextMenu {
    position: absolute;
    background: rgba(20, 20, 20, 0.95);
    border: 1px solid #444;
    border-radius: 8px;
    padding: 8px;
    display: none;
    z-index: 1000;
    min-width: 120px;
    box-shadow: 0 4px 12px rgba(3, 3, 3, 0.5);
    font-family: 'Inter', sans-serif;
}

.context-menu-item {
    padding: 8px 12px;
    cursor: pointer;
    color: #ccc;
    font-size: 14px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s;
}

.context-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.context-menu-item.disabled {
    color: #666;
    cursor: not-allowed;
}

.context-menu-item.disabled:hover {
    background-color: transparent;
}

.context-menu-separator {
    height: 1px;
    background-color: #333;
    margin: 4px 0;
}

.context-menu-count {
    padding: 8px 12px;
}

.context-menu-count label {
    color: #ccc;
    font-size: 12px;
    display: block;
    margin-bottom: 4px;
}

.context-count-input {
    background: rgba(40, 40, 40, 0.8);
    border: 1px solid #555;
    border-radius: 4px;
    padding: 4px 6px;
    color: #ccc;
    font-size: 14px;
    width: 60px;
    text-align: center;
}

.context-count-input:focus {
    outline: none;
    border-color: #777;
    background: rgba(50, 50, 50, 0.9);
}

.empty-slot.ui-droppable-hover {
    background: rgba(0, 255, 0, 0.2);
    border-color: rgba(0, 255, 0, 0.6);
}

.fixed-slot {
    position: relative;
    width: 80px;
    height: 80px;
    border: 2px solid #3a3a3a;
    border-radius: 8px;
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.fixed-slot:hover {
    border-color: #4a9eff;
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 0 10px rgba(74, 158, 255, 0.3);
    transform: translateY(-2px);
}

.fixed-slot.slot-hover {
    border-color: #00ff88;
    background: linear-gradient(135deg, #1a3a2a 0%, #0a2a1a 100%);
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 0 15px rgba(0, 255, 136, 0.4);
}

.fixed-slot.has-item {
    border-color: #ffa500;
    background: linear-gradient(135deg, #3a2a1a 0%, #2a1a0a 100%);
}

.slot-number {
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 10px;
    color: #888;
    font-weight: bold;
    z-index: 1;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

.fixed-slot.has-item .slot-number {
    color: #ffa500;
}

.empty-slot-indicator {
    width: 40px;
    height: 40px;
    border: 2px dashed #555;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.3;
    transition: opacity 0.3s ease;
}

.empty-slot-indicator::before {
    content: '+';
    font-size: 20px;
    color: #555;
    font-weight: bold;
}

.fixed-slot:hover .empty-slot-indicator {
    opacity: 0.6;
    border-color: #4a9eff;
}

.fixed-slot:hover .empty-slot-indicator::before {
    color: #4a9eff;
}

.fixed-slot.has-item .empty-slot-indicator {
    display: none;
}

/* Stiluri pentru itemele din sloturile fixe */
.fixed-slot .item {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 6px;
    position: relative;
    cursor: grab;
    transition: transform 0.2s ease;
}

.fixed-slot .item:hover {
    transform: scale(1.05);
}

.fixed-slot .item:active {
    cursor: grabbing;
    transform: scale(0.95);
}

.fixed-slot .item .item-name {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 10;
}

.fixed-slot .item:hover .item-name {
    opacity: 1;
}

.fixed-slot .item .item-count {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: rgba(0, 0, 0, 0.8);
    color: #ffa500;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    min-width: 16px;
    text-align: center;
}

.hotbar-slot {
    position: relative;
    width: 60px;
    height: 60px;
    border: 2px solid #3a3a3a;
    border-radius: 6px;
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #888;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hotbar-slot:hover {
    border-color: #4a9eff;
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 0 8px rgba(74, 158, 255, 0.3);
}

.hotbar-slot.hasItem {
    border-color: #00ff88;
    background: linear-gradient(135deg, #1a3a2a 0%, #0a2a1a 100%);
    color: #00ff88;
}

.hotbar-slot .item {
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 4px;
}

.hotbar-slot .item .item-count {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: rgba(0, 0, 0, 0.9);
    color: #00ff88;
    padding: 1px 3px;
    border-radius: 2px;
    font-size: 10px;
    font-weight: bold;
}

/* Animații pentru drag & drop */
.fixed-slot.ui-droppable-hover {
    border-color: #00ff88;
    background: linear-gradient(135deg, #1a3a2a 0%, #0a2a1a 100%);
    transform: scale(1.05);
}

.fixed-slot .item.ui-draggable-dragging {
    opacity: 0.7;
    transform: rotate(5deg) scale(0.9);
    z-index: 1000;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

/* Responsive design */
@media (max-width: 768px) {
    .fixed-slot {
        width: 70px;
        height: 70px;
    }
    
    .hotbar-slot {
        width: 50px;
        height: 50px;
    }
    
    .slot-number {
        font-size: 9px;
    }
}

.slot {
    aspect-ratio: 1;
    min-height: 80px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.slot:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
}

.controls {
    width: 20vh;
    position: absolute;
    left: 65.8vh;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    line-height: 7vh;
    
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 6px;
}

.controls > .count{
    width: 200px;
    height: 44px;

    background: rgba(93, 70, 32, 0.29);
    outline: transparent;
    border: transparent;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    color: #e09811;
    text-shadow: 0px 0px 12.8px #e4ab41ad;
}

.controls > .count > input{
    width: 200px;
    height: 44px;

    background: rgba(179, 119, 31, 0.644);
    outline: transparent;
    border: transparent;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    text-align: center;
    letter-spacing: -0.03em;

    color: #e0e0e0;
    text-shadow: 0px 0px 12.8px #ffffffad;
}

.controls > .button{
    width: 200px;
    height: 44px;

    background: rgba(17, 17, 17, 0.829);

    display: flex;
    align-items: center;
    justify-content: center;
}

.controls > .button > i{
    font-size: 20px;
    color: rgb(255, 255, 255);
}

#otherInventory {
    position: absolute;
    width: 46.7vh;
    height: 46.7vh;
    left: 75%;
    direction: rtl;
    padding-left: 6px;
    margin-left: -20vh;
    top: 23vh;
    
    /* Forțează scroll-ul să funcționeze */
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    
    /* Layout pentru scroll */
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: min-content;
    gap: 0.5vh;
    
    /* Smooth scrolling */
    scroll-behavior: smooth;
}

/* Elimină complet scrollbar-urile vizibile */
#playerInventory::-webkit-scrollbar,
#otherInventory::-webkit-scrollbar {
    display: none;
}

#playerInventory,
#otherInventory {
    scrollbar-width: none;
}


#count {
    border: none;
    outline: none;
    font-size: 18px;
}

#search {
    display: none;
    border: none;
    outline: none;
    font-size: 12px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
/*     background-color: #ffffff1c; */
    /*     box-shadow: 0px 0px 10px inset #00d9ff40;
    border: 1px solid #00d9ff; */
    background: rgba(255, 255, 255, 0.05);
    outline: .1vh solid rgba(255, 255, 255, 0.15);
    border-radius: .5vh;
    height: 4.1vh;
}

.slot {
    float: left;
    width: 8vh;
    height: 8vh;

    background: radial-gradient(117.65% 117.65% at 50% 50%, rgba(20, 20, 20, 0.678) 4.33%, rgba(24, 24, 24, 0.671) 69.75%);

    margin: 12px 12px 0px 0px;
    font-size: 40px;
    display: flex;
    align-items: center;
    color: rgba(37, 37, 37, 0.993);
    justify-content: center;
    position: relative;
    transition: all .3s;
    -webkit-animation-name: fade;
    animation-name: fade;
    animation-duration: 1200ms;
    animation-timing-function: ease-out; 
}

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}


@keyframes fade {
    0% {opacity: 0;}
    25% {opacity: .25;}
    50% {opacity: .5;}
    50% {opacity: .75;}
    100% {opacity: 1;}
}


#hotbar-1, #hotbar-2, #hotbar-3, #hotbar-4, #hotbar-5, #hotbar-6 > .slot{
    width: 8vh;
    height: 8vh;

    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjciIGhlaWdodD0iNjciIHZpZXdCb3g9IjAgMCA2NyA2NyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgb3BhY2l0eT0iMC42NiI+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2lfMTIxXzIzOSkiPgo8cmVjdCB3aWR0aD0iNjciIGhlaWdodD0iNjciIGZpbGw9InVybCgjcGFpbnQwX3JhZGlhbF8xMjFfMjM5KSIvPgo8L2c+CjxyZWN0IHg9IjAuNSIgeT0iMC41IiB3aWR0aD0iNjYiIGhlaWdodD0iNjYiIHN0cm9rZT0idXJsKCNwYWludDFfcmFkaWFsXzEyMV8yMzkpIiBzdHJva2Utb3BhY2l0eT0iMC41OCIvPgo8L2c+CjxkZWZzPgo8ZmlsdGVyIGlkPSJmaWx0ZXIwX2lfMTIxXzIzOSIgeD0iMCIgeT0iMCIgd2lkdGg9IjY3IiBoZWlnaHQ9IjY3IiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+CjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiByZXN1bHQ9InNoYXBlIi8+CjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIiByZXN1bHQ9ImhhcmRBbHBoYSIvPgo8ZmVPZmZzZXQvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIxMS42Ii8+CjxmZUNvbXBvc2l0ZSBpbjI9ImhhcmRBbHBoYSIgb3BlcmF0b3I9ImFyaXRobWV0aWMiIGsyPSItMSIgazM9IjEiLz4KPGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMyAwIi8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW4yPSJzaGFwZSIgcmVzdWx0PSJlZmZlY3QxX2lubmVyU2hhZG93XzEyMV8yMzkiLz4KPC9maWx0ZXI+CjxyYWRpYWxHcmFkaWVudCBpZD0icGFpbnQwX3JhZGlhbF8xMjFfMjM5IiBjeD0iMCIgY3k9IjAiIHI9IjEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDMzLjUgMzMuNSkgcm90YXRlKDkwLjUzNTUpIHNjYWxlKDU1LjE0ODYpIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjgiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNiIvPgo8L3JhZGlhbEdyYWRpZW50Pgo8cmFkaWFsR3JhZGllbnQgaWQ9InBhaW50MV9yYWRpYWxfMTIxXzIzOSIgY3g9IjAiIGN5PSIwIiByPSIxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgZ3JhZGllbnRUcmFuc2Zvcm09InRyYW5zbGF0ZSgzMy41IDMzLjUpIHJvdGF0ZSg5MC41MTYyKSBzY2FsZSg1Ny4yMSA0OC43MDEzKSI+CjxzdG9wIG9mZnNldD0iMC41MTkyMzEiIHN0b3AtY29sb3I9IiMzMzMzMzMiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuOCIvPgo8L3JhZGlhbEdyYWRpZW50Pgo8L2RlZnM+Cjwvc3ZnPgo=");
    background-repeat: no-repeat;
    background-size: 100% 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    text-align: center;
    letter-spacing: -0.03em;

    color: rgba(230, 230, 230, 0.877);
}

 .slot.hasItem{
    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjYiIGhlaWdodD0iNjciIHZpZXdCb3g9IjAgMCA2NiA2NyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgb3BhY2l0eT0iMC42NiI+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2lfMTIxXzI0MSkiPgo8cmVjdCB3aWR0aD0iNjYiIGhlaWdodD0iNjciIGZpbGw9InVybCgjcGFpbnQwX3JhZGlhbF8xMjFfMjQxKSIvPgo8L2c+CjxyZWN0IHg9IjAuNSIgeT0iMC41IiB3aWR0aD0iNjUiIGhlaWdodD0iNjYiIHN0cm9rZT0idXJsKCNwYWludDFfcmFkaWFsXzEyMV8yNDEpIi8+CjwvZz4KPGRlZnM+CjxmaWx0ZXIgaWQ9ImZpbHRlcjBfaV8xMjFfMjQxIiB4PSIwIiB5PSIwIiB3aWR0aD0iNjYiIGhlaWdodD0iNjciIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4KPGZlQ29sb3JNYXRyaXggaW49IlNvdXJjZUFscGhhIiB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMTI3IDAiIHJlc3VsdD0iaGFyZEFscGhhIi8+CjxmZU9mZnNldC8+CjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjExLjYiLz4KPGZlQ29tcG9zaXRlIGluMj0iaGFyZEFscGhhIiBvcGVyYXRvcj0iYXJpdGhtZXRpYyIgazI9Ii0xIiBrMz0iMSIvPgo8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwLjcxMTUzOCAwIDAgMCAwIDAuNDk1MDQgMCAwIDAgMCAwLjE0NzA5NyAwIDAgMCAwLjMyIDAiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbjI9InNoYXBlIiByZXN1bHQ9ImVmZmVjdDFfaW5uZXJTaGFkb3dfMTIxXzI0MSIvPgo8L2ZpbHRlcj4KPHJhZGlhbEdyYWRpZW50IGlkPSJwYWludDBfcmFkaWFsXzEyMV8yNDEiIGN4PSIwIiBjeT0iMCIgcj0iMSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzMgMzMuNSkgcm90YXRlKDkwLjUyNzUpIHNjYWxlKDU1LjE0ODUgNTQuMzI1NSkiPgo8c3RvcCBzdG9wLWNvbG9yPSIjRkZBQjI0IiBzdG9wLW9wYWNpdHk9IjAuNTEiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMkIyMTExIiBzdG9wLW9wYWNpdHk9IjAuNDIiLz4KPC9yYWRpYWxHcmFkaWVudD4KPHJhZGlhbEdyYWRpZW50IGlkPSJwYWludDFfcmFkaWFsXzEyMV8yNDEiIGN4PSIwIiBjeT0iMCIgcj0iMSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzMgMzMuNSkgcm90YXRlKDkwLjUwODUpIHNjYWxlKDU3LjIwOTkgNDcuOTc0NSkiPgo8c3RvcCBvZmZzZXQ9IjAuNTE5MjMxIiBzdG9wLWNvbG9yPSIjRkZBQjI0Ii8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIgc3RvcC1vcGFjaXR5PSIwIi8+CjwvcmFkaWFsR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg==") !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
}

.item {
    width: 8vh;
    height: 4vh;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    top: 50%;
    z-index: 999;
    left: 50%;
    transform: translate(-50%,-50%);
}

.item-name {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 12px;
    z-index: 500;

    background: rgba(204, 118, 6, 0.747);

    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 500;
    font-size: 8px;
    text-align: center;

    color: #FFFFFF;
    bottom: -2vh;
}

.item-name-not {
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    z-index: 500;
    font-size: .9vh;
    padding: .6vh 0vh;
    text-transform: capitalize;
    /*     text-shadow: 0px 0px 10px #00d9ff; */
    color: #fff;
    display: none;
    background-color: rgb(255 255 255 / 0%);
    /*     border-bottom-left-radius: 1px;
    border-bottom-right-radius: 1px; */
}

.item-name-bg {
    width: 100%;
    width: 1.7vh;
    height: 2vh;
    position: absolute;
    bottom: 0;
}

#thirdLocation>.hotbar-weapons:nth-child(1):after,
#hotbar>.hotbar-weapons:nth-child(1):after {
    display: none;
    top: 6.1vh;
    left: 8.9vh;
    margin: 0 auto;
    position: absolute;
    content: '1';
    height: 19px !important;
    width: 20px !important;
    font-size: 8px;
    font-weight: 500;
    text-align: center;
    line-height: 19px;
    vertical-align: middle;
    border: 1px solid #0c0c0c1c;
    font-size:4.1vh;
    color: #ffffff;
    border-radius: 1px;
    text-shadow: none;
    outline-offset: -1px;
}


.slot:hover {
    background: radial-gradient(117.65% 117.65% at 50% 50%, rgba(185, 185, 185, 0.17) 4.33%, rgba(115, 115, 115, 0.03) 69.75%);
    transition: all .7s;
}

.ui-draggable-dragging .item-name,
.ui-draggable-dragging .item-count {
    display: none;
}

.item-count {
    position: absolute;
    bottom: -2vh;
    left: 50%;
    transform: translateX(-50%);
    background-color: transparent;
    color: #ffffff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 0;
    border-radius: 0;
    min-width: 20px;
    text-align: center;
    backdrop-filter: none;
    border: none;
    box-shadow: none;
    text-shadow: none;
    z-index: 5;
}

.item-action {
    top: 0;
    left: 4vh;
    margin: 0 auto;
    position: absolute;
    height: 1.5vh !important;
    width: auto;
    font-size: 9px;
    font-weight: 500;
    font-weight: 100;
    text-align: center;
    line-height: 14px;
    vertical-align: middle;
    text-shadow: none;
    outline: none;
    border: none;
    border-radius: 2px;
    padding: 2px;
}

.controls-div {
    position: absolute;
    /* display: inline-flex; */
    transform: translate(-50%, -50%);
    transition: .3s all;
    bottom: -21vh;
    left: -31vh;

/*     animation-fill-mode: both; */
}

.control {
  position: absolute;
  top: 4vh;
  left: 17vw;
  width: 170px;
  height: 48px;
  background-color: rgba(10, 10, 10, 0.575);
  border-radius: 12px;
  border: 1px solid rgba(100, 100, 100, 0.8);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  text-align: center;
  line-height: 48px;
  border-radius: 8px;
  font-size: 18px;
  font-family: 'Gilroy', sans-serif;
}

#playerMoney {
  position: absolute;
  top: 4vh;
  left: 26vw;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  color: white;
  background-color: rgba(12, 12, 12, 0.25);
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 500;
  height: 32px;
  line-height: 32px;
}

.control.disabled {
    background-color: rgba(10, 10, 10, 1);
}

.hoverControl {
    background-color: rgba(51, 197, 255, 0.164);
}

.m6grr {
    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjYiIGhlaWdodD0iNjciIHZpZXdCb3g9IjAgMCA2NiA2NyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgb3BhY2l0eT0iMC42NiI+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2lfMTIxXzI0MSkiPgo8cmVjdCB3aWR0aD0iNjYiIGhlaWdodD0iNjciIGZpbGw9InVybCgjcGFpbnQwX3JhZGlhbF8xMjFfMjQxKSIvPgo8L2c+CjxyZWN0IHg9IjAuNSIgeT0iMC41IiB3aWR0aD0iNjUiIGhlaWdodD0iNjYiIHN0cm9rZT0idXJsKCNwYWludDFfcmFkaWFsXzEyMV8yNDEpIi8+CjwvZz4KPGRlZnM+CjxmaWx0ZXIgaWQ9ImZpbHRlcjBfaV8xMjFfMjQxIiB4PSIwIiB5PSIwIiB3aWR0aD0iNjYiIGhlaWdodD0iNjciIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4KPGZlQ29sb3JNYXRyaXggaW49IlNvdXJjZUFscGhhIiB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMTI3IDAiIHJlc3VsdD0iaGFyZEFscGhhIi8+CjxmZU9mZnNldC8+CjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjExLjYiLz4KPGZlQ29tcG9zaXRlIGluMj0iaGFyZEFscGhhIiBvcGVyYXRvcj0iYXJpdGhtZXRpYyIgazI9Ii0xIiBrMz0iMSIvPgo8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwLjcxMTUzOCAwIDAgMCAwIDAuNDk1MDQgMCAwIDAgMCAwLjE0NzA5NyAwIDAgMCAwLjMyIDAiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbjI9InNoYXBlIiByZXN1bHQ9ImVmZmVjdDFfaW5uZXJTaGFkb3dfMTIxXzI0MSIvPgo8L2ZpbHRlcj4KPHJhZGlhbEdyYWRpZW50IGlkPSJwYWludDBfcmFkaWFsXzEyMV8yNDEiIGN4PSIwIiBjeT0iMCIgcj0iMSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzMgMzMuNSkgcm90YXRlKDkwLjUyNzUpIHNjYWxlKDU1LjE0ODUgNTQuMzI1NSkiPgo8c3RvcCBzdG9wLWNvbG9yPSIjRkZBQjI0IiBzdG9wLW9wYWNpdHk9IjAuNTEiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMkIyMTExIiBzdG9wLW9wYWNpdHk9IjAuNDIiLz4KPC9yYWRpYWxHcmFkaWVudD4KPHJhZGlhbEdyYWRpZW50IGlkPSJwYWludDFfcmFkaWFsXzEyMV8yNDEiIGN4PSIwIiBjeT0iMCIgcj0iMSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzMgMzMuNSkgcm90YXRlKDkwLjUwODUpIHNjYWxlKDU3LjIwOTkgNDcuOTc0NSkiPgo8c3RvcCBvZmZzZXQ9IjAuNTE5MjMxIiBzdG9wLWNvbG9yPSIjRkZBQjI0Ii8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIgc3RvcC1vcGFjaXR5PSIwIi8+CjwvcmFkaWFsR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg==") !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
}

.hoverControl {
    background: rgba(255, 255, 255, 0.16) !important;
}

.hoverControl > i {
    opacity: 1 !important;
}

#playerInventory::-webkit-scrollbar-track,
#otherInventory::-webkit-scrollbar-track {
    background-color: #ffffff29;
}

#playerInventory::-webkit-scrollbar,
#otherInventory::-webkit-scrollbar {
    width: 5px;
    height: 30px;
}

#playerInventory::-webkit-scrollbar-thumb,
#otherInventory::-webkit-scrollbar-thumb {
    background-color: #6fb4d481;
}


#otherInfo p {
    margin-left: 60vh;
    font-size: 1.3vh;
  animation-name: fade;
    width: 10vw;
    animation-duration: 1200ms;
    animation-timing-function: ease-out; 
    /* margin-bottom: 8px; */
    
}

#otherInfo h3 {
    position: fixed;
    margin-top: -1vh;
    margin-left: 25vh;
    
    font-size: 1.5vh;
    /* background-color: rgb(255,255,255, .1); */
    /* box-shadow: 0px 0px 10px inset rgb(255,255,255, .1); */
    /* border: .3vh solid rgb(255,255,255, .2); */
    /* border-radius: .5vh; */
    /* padding: 1vh 2.3vh 1vh 2vh; */
            animation-name: fade;
    animation-duration: 1200ms;
    animation-timing-function: ease-out;
/*     animation-fill-mode: both; */
}

#playerInfo{
    display: none;
    color: white;
    font-size: 18px;
    width: 500px;
    margin-right: 2vh;
    margin-bottom: 1vh;
    margin-left: 8vh;
}

#otherInfo{
    display: none;
    margin-bottom: 1vh;
    margin-right: 19vh;
}

#otherInfo > .flex-start{
    display: flex;
    align-items: end;
    flex-direction: column;
    gap: 45px;
}

#playerInfo > .flex-start{
    display: flex;
    align-items: start;
    flex-direction: column;
    gap: 45px;
}

#otherInfo > .flex-start > .row,
#playerInfo > .flex-start > .row{
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 11px;
}

#otherInfo > .flex-start > .row > .progress-bar,
#playerInfo > .flex-start > .row > .progress-bar{
    width: 276px;
    height: 4px;
    background: rgba(70, 70, 68, 0.452);
    margin-left: auto;
}

#otherInfo > .flex-start > .row > .progress-bar > .progress,
#playerInfo > .flex-start > .row > .progress-bar > .progress{
    height: 4px;
    background: #ee8b09;
    box-shadow: 0px 0px 22.5px 1px #ffc477ab;
}

#otherInfo > .flex-start > .row > .weight,
#playerInfo > .flex-start > .row > .weight{
    min-width: 51px;
    height: 24px;
    background: #FFFFFF;
    padding-left: 1vh;
    padding-right: 1vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    text-align: center;
    color: #2D2D2D;
}

#otherInfo > .flex-start > .title-info{
    display: flex;
    align-items: end;
    flex-direction: column;
    gap: 6px;
}

#playerInfo > .flex-start > .title-info{
    display: flex;
    align-items: start;
    flex-direction: column;
    gap: 6px;
}

#otherInfo > .flex-start > .title-info > .row,
#playerInfo > .flex-start > .title-info > .row{
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 6px;
}

#otherInfo > .flex-start > .title-info > .row > span,
#playerInfo > .flex-start > .title-info > .row > span{
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    color: #FFFFFF;
    text-transform: uppercase;
}

#otherInfo > .flex-start > .title-info > .row > i,
#playerInfo > .flex-start > .title-info > .row > i{
    font-size: 16px;
    color: #FFFFFF;
}

#otherInfo > .flex-start > .title-info > span{
    max-width: 338px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    letter-spacing: -0.03em;
    color: rgba(195, 195, 195, 0.31);
    text-align: right;
}

#playerInfo > .flex-start > .title-info > span{
    max-width: 338px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    letter-spacing: -0.03em;
    color: rgba(195, 195, 195, 0.31);
}

#progbar2 {
    width: 276px;
    height: 4px;

    background: rgba(255, 255, 255, 0.09);
}

#progbar {
    width: 276px;
    height: 4px;

    background: rgba(255, 255, 255, 0.09);
}

#progbar-value {
    background: #e49623;
    box-shadow: 0px 0px 22.5px 1px #eea70fab;
    height: 4px;
}

#hotbar {
    display: none;
    height: 110px;
    min-width: 110px;
    width: fit-content;
    position: absolute;
    left: 50%;
    bottom: 3%;
    transform: translate(-50%, 0%);
}

#notifications {
    height: 110px;
    min-width: 110px;
    width: fit-content;
    position: absolute;
    left: 50%;
    bottom: 15%;
    transform: translate(-50%, 0%);
}

#description {
    /*     display: none; */
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 800px;
    text-shadow: 1px 1px 10px rgb(255 77 77 / 67%);
}


.slot-notify {
    float: left;
    width: 8vh;
    height: 8vh;
    background-color: #ffa6005e;
    box-shadow: 0px 0px 20px inset #ff9100c7;
    margin: 6px 6px 0px 0px;
    clip-path: polygon(0 0, 100% 2%, 100% 93%, 0% 100%);
    position: relative;
    border-radius: 2px;
    transition: all .3s;
}

.item-count2 {
    top: .6vh;
    position: fixed;
    text-align: center;
    width: 20px;
    padding-top: 3px;
    font-size: 14px;
    z-index: 1;
}

.slot-hotbar {
    float: left;
    width: 8vh;
    height: 8vh;
    
    background-color: #ffffff5e;
    box-shadow: 0px 0px 20px inset #ffffffc7;
    margin: .6vh .6vh 0vh 0vh;
    clip-path: polygon(0 0, 100% 2%, 100% 93%, 0% 100%);
    position: relative;
    border-radius: 2px;
    transition: all .3s;
}

.hotbar-weapons {
    position: fixed;
    float: left;
    width: 8vh;
    height: 8vh;
    display: block;
    border: 1px solid #ffffff1c;
    background-color: rgb(255 255 255 / 4%);
    box-shadow: 0px 0px 10px inset #ffffff14;
    margin: .6vh .6vh 0vh 0vh;
    position: relative;
    border-radius: 2px;
    transition: all .3s;
}

.hotbar-weapons:hover {
    /* border: 1px solid #ffffffb0; */
    background: #ff0000;
    box-shadow: 0 0 5vh 0 #ffa60033;
    transition: all .3s;
}

.dropdown {
    position: relative;
    display: inline-block;
    transition: .3s ease-in-out;
  }
  
  .dropdown-content {
    display: none;
    transition: .3s ease-in-out;
    position: fixed;
    min-width: 8vw;
    padding: 6.2vh 0vh;
    text-align: center;
    margin-right: -2.5vh;
    font-size: 1.2vh;
    z-index: 1;
  }
  
  .dropdown:hover .dropdown-content {
    display: block;
    transition: .3s ease-in-out;

  }

text-up {
    position: fixed;
    left: -2vh;
    top: -1vh;
    font-size: 1.5vh;
    font-weight: 500;
    letter-spacing: .1vh;
        background-color: rgb(255,255,255, .1);
    box-shadow: 0px 0px 10px inset rgb(255,255,255, .1);
    border: .3vh solid rgb(255,255,255, .2);
    border-radius: .5vh;
    padding: .3vh 2vh 1vh 2vh;
        animation-name: middle-menu;
    animation-duration: 700ms;
    animation-timing-function: ease-out;
/*     animation-fill-mode: both; */
    
}
.poza-haina {
    width: 1.4vh;
    margin-top: 1vh;
    padding-right: 1vh;
}


@keyframes slide-right {
    0% {margin-left: -154vh;}
    100% {margin-left: 0vh;}
}
@keyframes middle-menu {
    0% {margin-top: -24vh;}
    100% {margin-top: 0vh;}
}