@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

.bg-bbutton {background: #689f38 !important;}
.bg-sbutton {background: #777777 !important;}
.bg-button {background: #404047cb !important;}
.text-check { color: rgba(255, 255, 255, 0.8)!important; }
.text-checkbox { color: #0059ffcb!important; }
.q-checkbox__svg { color: #00000000!important; }
div#q-loading-bar { display: none!important; }
.q-card { background: rgba(18, 21, 27, 0.849)!important; }
p { margin: 0 !important; }
.q-btn { align-items: center!important; font-family: "Gilroy"; }
.text-h6 { color: #fff; }
.q-card__section.q-card__section--vert.q-pt-none { color: #fff; }

:root {
    --primary-color: #2efa7c;
}
/* var(--primary-color) */
text-h6 {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5rem;
    letter-spacing: 0.0125em;
}

.kapatbu {
    width: 100%;
    background: transparent;
    border: none;
    color: whitesmoke;
    font-family: Optima, sans-serif;
}

.q-card2 {
    background: rgb(0 0 0 / 21%);
    backdrop-filter: blur(17.5px);
    position: absolute;
    left: 36%;
    bottom: 176px;
    left: 113vh;
    bottom: 49vh;
    width: 50vh;
    font-family: Optima, sans-serif;
}
.q-card3 {
    background: #2a2a2a;
    font-family: Optima, sans-serif;
    font-size: 13px;
    position: relative;

}
q-card__actions {
    padding: 0px;
    align-items: center;
}
.q-card__section2{
    padding: 5px;
    text-align: center;
    font-family: Optima, sans-serif;
    font-size: 23px;
    padding-top: 10px;
    color: #f1f1f1;
}
.text-check2 {
    color: rgba(255, 255, 255, 0.8)!important;
    font-size: 18px;
    text-align: center;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: 0px!important;
    margin-left: 0px!important;
}
.dropTargetValid {
    background-color: rgb(198, 13, 13) !important;
}
:root {
    --main-label-color: 38, 41, 60;
}

.sex-h6 { color: #fff;
    font-size: 1.5vh;
    font-weight: 500;
}
.sex-h5 { color: #fff;
    font-size: 18px;
    font-weight: 650;
}
.inv-sex {
    background: rgba(18, 21, 27, 0.89);
    top: 245px;
    text-align: center;
    height: auto;
    margin: 23% auto;
    right: 0px;
    width: 200px;
    border-radius: 3px;
    cursor: pointer; /* Can also be 'none' however, as these are the buttons I feel as the pointer fits better */
}

.fas.fa-lock {
    font-size: 22px;
    top: -82px;
    right: 0px;
    position: relative;
}

.emoji-icon {
    font-size: 22px;
}

.brand-logo {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 3px;
    padding-bottom: 10px;
    width: 45%;
}


/* rgb() */

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

.player-inventory::-webkit-scrollbar, .other-inventory::-webkit-scrollbar,.other-inventory2::-webkit-scrollbar,.back-inventory::-webkit-scrollbar,.oth-inv-container::-webkit-scrollbar{
    width: 3px;
}

.player-inventory::-webkit-scrollbar-track,.other-inventory::-webkit-scrollbar-track, .other-inventory2::-webkit-scrollbar-track,.back-inventory::-webkit-scrollbar-track,.oth-inv-container::-webkit-scrollbar-track {
    background: #3435359f;
    border-radius: 0.5px;
}

.player-inventory::-webkit-scrollbar-thumb, .other-inventory::-webkit-scrollbar-thumb,.other-inventory2::-webkit-scrollbar-thumb,.back-inventory::-webkit-scrollbar-thumb,.oth-inv-container::-webkit-scrollbar-thumb {
    background-color: #ffffffda;
    border-radius: 0.5px;
}


.item-slot-crafting::-webkit-scrollbar{
	display: none;
}

.q-card::-webkit-scrollbar{
	display: none;
}

#progressbar {
    width: 20%;
    margin-left: 88.4%;
    margin-top: -8.95%;
    border-radius: 0px;
    height: 100px;
    /* box-shadow:  0 0 0 0.14em #8381819f;*/
    background-color: #5a595900;
}

#progressbar-other {
    width: 112.6%;
    margin-left: -1.1%;
    margin-top: 7.95%;
    border-radius: 0px;
    height: 12px;
    /* box-shadow:  0 0 0 0.14em #8381819f; */
    /* background-color: #5a59599c; */
}

.pro {
    /* background: linear-gradient(to left, #1e6b5c 30% , #1c5d51 70% , #1a574c 100%); */
    height: 102px;
    border-radius: 0px;
    max-width: 100%;
    transition: width 1s, background-color 1s;
}

.pro1 {
    /* background: linear-gradient(to left, #1e6b5c 30% , #1c5d51 70% , #1a574c 100%); */
    height: 12px;
    border-radius: 0px;
    max-width: 100%;
    transition: width 1s, background-color 1s;
}

.weight-img {
    margin-top: -7.5%;
    top: 0rem;
    width: 36%;
    right: 7.4rem;
    position: absolute;
    border-radius: 3px;
    padding-left: 4.5px;
    padding-top: 4px;
    padding-right: 4.5px;
    padding-bottom: 4px;
}
.player-weight-img {
    right: 8.4rem;
    width: 20%;
    top: 1.4rem;
    position: absolute;
 
}
.back-weight-img {
    right: 8.4rem;
    width: 20%;
    top: 1.4rem;
    position: absolute;
}
.body-img-other {
    right: 30.4rem;
    width: 10%;
    top: 3px;
    position: absolute;
}



.char-info{
    display: none;
    position: absolute;
    top: 20%;
    left: 23%;
    width: 11%;
    height: 18%;
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    z-index: 1001;
    /* filter: drop-shadow(rgb(112 112 112 / 30%) 0rem 0rem 12px);
    background-color: rgb(112 112 112 / 30%); */
    background: rgb(0 0 0 / 21%);
    backdrop-filter: blur(17.5px);
}


.char-info .char-header{
    position: absolute;
    top: 5%;
    left: 5;
    width: 100%;
    height: 20%;
    font-size: 1.3vh;
    display: flex;
    color: white;
    margin-left: 5px;
    z-index: 5;
    border-radius: 0.3vh;
}


.char-info .char-list-box{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    position: absolute;
    top: 19%;
    left: 5%;
    z-index: 5;
    width: 90%;
    height: 80%;
}


.char-info .char-list-box .char-list{
    width: 100%;
    height: 20%;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    font-size: 1.5vh;
    color: white;
    z-index: 5;
    border-radius: 0.2vh;
    background-color: #00000030;
    margin-top: 2.5%;
}

.char-info .char-list-box .char-list .info-name{
    left: 5%;
    margin-top: 0%;
    font-weight: 500;
    text-shadow: 0px 0px 10px #ffffff52;
    position: absolute;
    height: 20%;
    font-size: 14px;
    width: 100%;
    display: flex;
}

.info-nameicon {
    font-size: 12px;
    height: 100%;
    padding-top: 9px;
    text-align: center;
    background: #00000000;
    border: 1px solid #ffffff00;
    border-radius: 3px;
}
.info-nametext {
    margin-left: 6px;
    line-height: 28px;
    font-size: 12px;
    height: 100%;

    background: #00000000;
    border: 1px solid #ffffff00;
    border-radius: 3px;
}

.char-info .char-list-box .char-list .info-count{
    right: 0;
    font-weight: 500;
    position: absolute;
    width: 40%;
    height: 18%;
    /* padding: 0.65%; */
    display: flex;
    padding-right: 8px;
    justify-content: right;
    /* align-items: center; */
    text-align: right;
    line-height: 31px;
    /* height: 18%; */
    font-size: 13px;
    color: #ff5151;
    text-shadow: 0px 0px 10px #ff606078;
}


.char{
    border: 2px solid #0000002e;
    background: #36363663;
    border-radius: 14px;
    position: absolute;
    top: 28.5%;
    left: 115px;
    width: 50.3vh;
    height: 60.3%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
}


.character .wound {
    transition: all .2s ease-in-out;
    cursor: pointer;
}
.character .wound:hover{
 fill:rgba(255, 103, 103, 0.587);
}

.character {
    position: absolute;
    width: calc(0.092592592vh * 248.203);
    height: calc(0.092592592vh * 479);
    background-image: url(../assets/character.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: calc(0.092592592vh * 14);
    left: 26.5%;
    top: 12%;
}

.status{
    position:absolute;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    pointer-events:none;
    color:#fff;
    text-align:center;
    font-size:calc(.092592592vh * 12);
    font-style:normal;
    font-weight:400;
    line-height:108.5%
}
.status.head{
    left: 53%;
    position: absolute;
    top: 12%;
}

.healthBar {
    box-shadow: rgba(255, 255, 255, 0.075) 0px 0px 6px;
    position: relative;
    height: 5px;
    width: 5px;
    left: 55px;
    top: -11px;
    border-radius: 5px;
    background: rgb(161, 161, 161);
}
.healthBar2 {
    box-shadow: rgb(255 255 255 / 8%) 0px 0px 6px;
    position: relative;
    height: 5px;
    width: 5px;
    left: 28px;
    top: -11px;
    border-radius: 5px;
    background: rgb(161, 161, 161);
}

.svgcirshead {
    position: relative;
    left: -20px;
    top: -20px;
    transform: rotate(-90deg);
}

.status.body{
    position: absolute;
    top: 41%;
    left: 48%;
}

.svgcirsbody {
    position: relative;
    left: -20px;
    top: -20px;
    transform: rotate(-90deg);
}


.status.leftArm{
    position: absolute;
    top: 24%;
    left: 60%;
}

.svgcirsleftArm {
    position: relative;
    left: -20px;
    top: -20px;
    transform: rotate(-90deg);
}

.status.rightArm{
    position: absolute;
    top: 29%;
    left: 24%;
}

.svgcirsrightArm {
    position: relative;
    left: -20px;
    top: -20px;
    transform: rotate(-90deg);
}

.status.leftLeg{
    position: absolute;
    top: 65%;
    left: 56%;
}

.svgcirsleftLeg {
    position: relative;
    left: -20px;
    top: -20px;
    transform: rotate(-90deg);
}

.status.rightLeg{
    position: absolute;
    top: 75%;
    left: 29%;
}

.svgcirsrightLeg {
    position: relative;
    left: -20px;
    top: -20px;
    transform: rotate(-90deg);
}

.isRight{
    transform:scaleX(-1) translate(-50%)
}

/* .status .healthBar{
    width: calc(0.092592592vh* 80);
    height: calc(0.092592592vh * 10);
    flex-shrink: 0;
    border-radius: calc(0.092592592vh * 4);
    display: flex;
    padding: 3px 0px;
    background: rgb(0 0 0 / 22%);
    backdrop-filter: blur(17.5px);
} */
.status .healthBar .bar{
    margin-left: 4%;
    width: 90%;
    height: calc(0.092592592vh * 4);
    flex-shrink: 0;
    border-radius: calc(0.092592592vh * 1);
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    background: repeating-linear-gradient(90deg, /* Hoek van de streepjes */ #575757a6, /* Startkleur van het streepje */ #575757a6 1.5px, /* Lengte van de kleur voor het streepje */ transparent 1px, /* Start van de transparante ruimte */ transparent 3px /* Lengte van de transparante ruimte */);
}
.status .healthBar .bar .progress{
    width: 20%;
    height: 100%;
    flex-shrink: 0;
    border-radius: calc(0.092592592vh * 1);
    background: repeating-linear-gradient(90deg, rgb(249, 68, 68), rgb(247, 66, 66) 1.5px, transparent 1px, transparent 3px);
}




.op-img {
    margin-top: -1.7%;
    width: 6%;
    right: -30.8%;
    background: #07e0ad56;
    position: absolute;
    padding-left: 5.5px;
    padding-top: 5px;
    padding-right: 5.5px;
    padding-bottom: 5px;
}

.op2-img {
    margin-top: -1.7%;
    width: 6%;
    right: -37.8%;
    position: absolute;
    background: #07e0ad56;
    padding-left: 5.5px;
    padding-top: 5.3px;
    padding-right: 5.9px;
    padding-bottom: 5px;
}

.op3-img {
    margin-top: -1.7%;
    width: 6%;
    right: -44.7%;
    position: absolute;
    background: #07e0ad56;
    padding-left: 5.8px;
    padding-top: 5.3px;
    padding-right: 5px;
    padding-bottom: 5px;
}

.op4-img {
    margin-top: -1.7%;
    width: 6%;
    right: -51.6%;
    position: absolute;
    background: #07e0ad56;
    padding-left: 5.8px;
    padding-top: 5.3px;
    padding-right: 5px;
    padding-bottom: 5px;
}

/* .weight-img-other {
    width: 4%;
    right: -33%;
    font-size: 10px; 
    color: #03dda7;
    position:absolute;
    border-radius: 3px;
    background: linear-gradient(to left, #1e6b5c 30% , #1c5d51 70% , #1a574c 100%);
    box-shadow:1px 1px 15px #20ad91d7;
    padding-left: 4.5px;
    padding-top: 4px;
    padding-right: 4.5px;
    padding-bottom: 4px;
} */

.weight-img-other {
    top: -19px !important;
    object-fit: contain;
    height: 6.3rem;
    width: 6.3rem;
    left: 5px;
    background: #1383d800;
    right: 82.5%;
    position: absolute;
    border-radius: 3px;
    transform: translateY(10%);
}
.weight-img-other2 {
    top: 13px !important;
    object-fit: contain;
    height: 6.3rem;
    width: 6.3rem;
    left: 12px;
    right: 81.5%;
    /* top: -7.5%; */
    position: absolute;
    border-radius: 3px;
    padding-left: 4.5px;
    padding-top: 4px;
    padding-right: 4.5px;
    padding-bottom: 4px;
    transform: translateY(-19%);
}

body {
    overflow-x: hidden;
}

#qbcore-inventory {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0vw;
    display: none;
    user-select: none;
    overflow: hidden;
    
}

.inv-background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    /* background-repeat: no-repeat; */
    background-size: 100% 100%;
    /* filter: blur(1rem); */
    background: radial-gradient(31.98% 56.85% at 50% 50%, #141414f3, #161616f7);
    /* background-image: url("../assets/character.png"); 
    background-position-y: 202.55px;
    background-position-x: 193.8px;
    background-repeat: no-repeat;
    background-size: 275px; */
}

.inv-container {
    position: absolute;
    width: 100%;
    height: 100%;
    
}

   
   
   .ply-inv-container {
    position: absolute;
    float: left;
    top: 9%;
    left: 31.9%;
     width: 31.6%;
    height: 38.9%;
    border-radius: 3px;
    background: rgba(18, 21, 27, 0);
}
.back-inv-container {
    position: absolute;
    float: left;
    top: 49%;
    left: 31.9%;
    width: 31.6%;
    height: 32%;
    border-radius: 3px;
    background: rgba(18, 21, 27, 0);
}

.wract {
    position: relative;
    left: 2px;
    top: 2px;
}

.player-inventory {
    position: absolute;
    top: 32.4%;
    width: 88.3%;
    max-width: 102.22%;
    left: 11.9%;
    height: auto;
    float: left;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 100;
    min-height: 20.5rem;
    max-height: 38.5%;
}
.back-inventory {
    position: absolute;
    top: 33.4%;
    width: 88.28%;
    max-width: 102.22%;
    max-height: 90.5%;
    min-height: 92.6%;
    left: 12%;
    height: auto;
    float: left;
    overflow-x: hidden;
    overflow-y: unset;
    z-index: 100;
}
.oth-inv-container {
    display: inline-flex;
    flex-direction: column;
    position: absolute;
    float: right;
    right: 4%;
    margin: 0 auto;
    width: 30.5%;
    top: 9.7%;
    height: 77%;
    /* max-height: 95.5%; */
    overflow-x: hidden;
    overflow-y: unset;
   
    background: rgba(18, 21, 27, 0);
}
.oth-inv-container2 {
    display: inline-flex;
    flex-direction: column;
    position: absolute;
    float: right;
    right: 4%;
    margin: 0 auto;
    width: 30.5%;
    top: 10.9%;
    height: 77%;
    /* max-height: 95.5%; */
    overflow-x: hidden;
    overflow-y: unset;
    background: transparent
}

.other-inventory {
    position: relative;
    right: -2%;
    width: 92%;
    max-width: 102.22%;
    /* margin-bottom: 13%;  eski */
    /* height: auto; eski */
    /* min-height: eski 20rem;
    max-height: eski 38.5%; */
    float: right;
    min-height: 11vh;
    max-height: 19.9rem;
    overflow-x: hidden;
    overflow-y: unset;
    flex-wrap: wrap;
    margin-top: 5px;
    /* right: 34px; */
}

.other-inventory2 {
    position: relative;
    right: -2%;
    width: auto;
    max-width: 92.32%;
    max-height: 38.5rem;
    min-height: 11vh;
    max-height: 19.9rem;
    float: right;
    overflow-x: hidden;
    overflow-y: unset;
    flex-wrap: wrap;
    /* right: 34px; */
}



.ply-hotbar-inventory {
    position: absolute;
    bottom: 10%;
    left: 35.5%;
    z-index: 105;
}

.player-inventory > .item-slot > .item-slot-key > p {
    position: absolute;
    font-weight: 300;
    padding-top: 3px;
    padding-bottom: 2px;
    width: fit-content;
    padding-right: 5px;
    padding-left: 5px;
    text-align: left;
    left: 2px;
    top: 2px;
    font-size: 10px;
    background: #02020259;
    line-height: 1.1vh;
    font-family: 'Roboto', sans-serif !important;
    border-radius: 4px;
    color: var(--primary-color);
    text-shadow: 0px 0px 10px var(--primary-color);
    font-family: Optima, sans-serif;
}

.back-inventory > .item-slot > .item-slot-key > p {
    position: absolute;
    font-weight: 300;
    color: #0fffd5;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-right: 5px;
    padding-left: 5px;
    text-align: left;
    font-size: 1.2vh;
    background:#1c5d5146;
    line-height: 1.8vh;
    font-family: 'Roboto', sans-serif !important;
}

.inv-options {
    padding-top: 5px;
    padding-left: 11px;
    padding-right: 12px;
    padding-bottom: 17.7px;
    border-radius: 3px;
    height: 100px;
    margin: 3.91%;
    margin-left: 1036px;
    background: rgba(232, 240, 255, 0);
    left: 0%;
    right: 50px;
    width: 11%;
    cursor: pointer; /* Can also be 'none' however, as these are the buttons I feel as the pointer fits better */
}

.Logs {
    left: 6.8rem;
    background-color: rgba(1, 1, 1, 0);
    width: 1.89%;
    bottom: 1.9%;
    height: 1.5%;
    position: absolute;
    font-family: verdana;
    overflow-y: auto;
    overflow-x: hidden;
    color: #fafafa00;
    font-size: 80%;
}

.Logs::-webkit-scrollbar {
	width: 1px;
	width: 1px;
}

.Logs::-webkit-scrollbar-thumb {
    background: #ffffff00;
	margin-left: 20px;
}


.combine-option-container {
    display: none;
    position: relative;
    right: 0px;
    width: auto;
    left: 0vh;
    margin: 0px auto;
}

.item-slot {
    position: relative;
    width: 9vh;
    height: 9vh;
    float: left;
    border-radius: 7px;
    background: rgba(44, 46, 49, 0.78);
    /* box-shadow: inset -1px 0px 1px rgb(255 255 255 / 4%), inset 0px 0px 6px rgb(255 255 255 / 3%); */
    margin: 4.4px;
    border: 3px solid #0000003d;
    background: #36363663;
}


.item-slot-crafting {
    position: relative;
    width: 48.61vh;
    height: 11.4vh;
    border-radius: 13px;
    float: left;
    background: rgba(255, 255, 255, 0.05);
    margin: 2px;
    /* overflow-x: hidden;
    overflow-y: scroll; */
    margin-bottom: 5px;
}

.item-slot-requirements-crafting {
    height: fit-content;
    position: relative;
    left: 108px;
    top: 40px;
    width: fit-content;
    background: #00000000;
    display: inline-table;
}

.item-slot-requirements-crafting img {
    height: auto;
    width: 25px;
    margin-right: 6px;
    margin-top: -3px;
}

.item-slot-requirements-crafting>p {
    position: relative;
    font-size: 14px;
    color: white;
    background: #dddad600;
    padding-left: 5px;
    height: 31px;
    border-radius: 4px;
    padding-right: 8px;
    line-height: 33px;
    font-family: Roboto;
    text-transform: capitalize;
}

/* .item-slot-requirements-crafting {
	position: absolute;
    display: inline-block;
    right: 10%;
    top: 5%;
	width: 38%;
}

.item-slot-requirements-crafting img {
    height: 30%;
    width: 30%;
}

.item-slot-requirements-crafting>p {
    position: absolute;
    font-size: 13px;
	color: white;
    left: -15%;
    top: 0;
    font-family: Roboto;
    text-transform: capitalize;
} */

.item-slot-img-crafting {
    position: absolute;
    left: 10px;
    width: 9vh;
    top: 10px;
    height: 9vh;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.05);
    border: 3px solid #0000003d;
    background: #36363663;
}

.item-slot-img-crafting img {
    display: block;
    position: relative;
    width: auto;
    margin: 0 auto;
    top: 16px;
    height: 5vh;
}

.item-slot-img-crafting>p {
    position: relative;
    font-size: 14px;
    color: white;
    left: 105px;
    top: -1px;
    font-family: Roboto;
}

.item-slot-body:hover {
    background-color: #07e0ad52 !important;
    /* border: 1px solid #07e0af; */
    box-shadow: inset -1px 0px 1px #07e0af, inset 0px 0px 6px #07e0af;
}


.item-slot:hover {
    background-color: #66666659 !important;
    /* border: 1px solid #07e0af; */
}
.item-slot-split:hover {
    background-color: none !important;
    /* border: 1px solid #07e0af; */
    box-shadow: none !important;
}


.btn-inv {
    width: 100%!important;
    max-width: 100%!important;
    padding: 10%!important;
    background-color: rgba(235, 235, 235, 0);
}

#item-amount {
    color: rgba(255, 255, 255, 0.76);
    font-size: 14px;
    font-weight: 300;
    outline: none;
}

.ammo-info-block {
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    width: 22vh;
    height: 11vh;
    background-color: rgba(235, 235, 235, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.01);
    top: 2vh;
    
}
.ammo-info-header {
    /* background-color: rgba(5, 5, 5, 0.5); */
    width: 100%;
    color: white;
    font-family: 'Roboto', sans-serif !important;
    background-color: rgba(0, 0, 0, 0.192);
    font-size: 1.vh;
    padding: .4vh;
    text-align: center;
}
.ammo-info {
    position: relative;
    color: white;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 200;
    font-size: 1.vh;
    margin-left: .8vh;
    margin-top: .4vh;
    margin-bottom: .25vh;
    top: .6vh;
}
.ammo-info span {
    margin-right: 1vh;
    float: right;
}

.inv-option-item > p {
    color: rgba(255, 255, 255, 0.76);
    text-align: left;
    line-height: 48px;
    text-transform: normal;
    font-size: 1.5vh;
    font-weight: 300;
    font-family: 'Roboto', sans-serif !important;
}

.inv-option-item {
    margin-top: -97.3%;
    width: 100%;
    height: 50px;
    background-color: #404047cb !important;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    border-radius: 0px!important;
}


.invsearch-input:focus{
    border: 0.1vh solid white;
    border-radius: 0.4vh;
}

.svg-search{
    position: absolute;
    top: 10.2%;
    right: 46.3%;
    color: grey;
    font-size: 1.2vh;
    width: 0.8vw;
    height: 0.8vw;
}

.fa-search{
    position: absolute;
    top: 28%;
    right: 23%;
    color: gray;
    font-size: 1.2vh;
}
.inv-option-itemm {
    margin-top: 10.3%;
    width: 95.6%;
    text-align: left;
    height: 40px;
    background-color: #40404700 !important;
    border: 1px solid #34363c;
    color: rgba(255, 255, 255, 0.5);
    border-radius: 0px!important;
    position: relative;
    right: 27.1%;
    float: right;
    font-size: 4px;
}

.inv-option-itemm::placeholder {
    text-align: start;
    padding-left: 0.1rem;
    font-size: 1.2vh;
}
.inv-option-itemm:focus{
    border: 0.1vh solid white;
    border-radius: 0.4vh;
}


.inv-option-itemk {
    margin-top: 8.3%;
    width: 57%;
    height: 36.5px;
    left: 100%;
    padding-top: 3px;
    background-color: #404047cb !important;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    border-radius: 2px!important;
}
.inv-option-itemk > p {
    color: rgba(255, 255, 255, 0.76);
    text-align: center;
    font-size: 1vh;
    font-weight: 300;
}

.inv-option-hand {
    margin-top: 20%;
/*     width: 80%; */
    height: 100px;
    margin-left: 10%;
    transition: background-color .1s linear;
}

inv-option-item:hover {
    filter: brightness(0.85);
}

inv-option-item:active {
    filter: brightness(0.5);
}

.btn-combine {
    position: relative;
    margin-top: 6px;
    width: auto;
    top: 0px;
    left: 0px;
    background-color: rgb(11, 214, 129)!important;
    text-align: center;
    line-height: 48px;
    font-size: 1.2vh;
    font-weight: 900;
    font-family: Roboto, sans-serif !important;
    border-radius: 0px;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.01);
    border-image: initial;
    transition: background-color 0.1s linear 0s;
}

.btn-combine > p {
    color: white;
    text-align: center;
    font-size: 1.5vh;
    font-weight: 300;
    font-family: 'Roboto', sans-serif !important;
    outline: none;

}

.item-slot-amount {
    position: absolute;
    top: 0.5vh;
    right: 0.20vw;
}

.item-slot-amount > p {
    padding-left: 4px;
    padding-right: 1px;
    padding-top: 0px;
    border-radius: 3px;
    font-weight: 520;
    text-align: right;
    font-size: 1.1vh;
    line-height: 11px;
    cursor: none;
    font-family: sans-serif;
    font-size: 13px;
    color: #ffffff;
    text-shadow: 0px 0px 10px;
}


.item-slot-ammo {
    position: absolute;
    bottom: 0.8vh;
    right: 0.10vw;
}

.item-slot-ammo > p {
    color: #eeeeee;
    text-shadow: 1px 1px 15px #f3f3f342;
    padding-left: 4px;
    padding-right: 4px;
    font-family: Optima, sans-serif;
    padding-top: 1px;
    border-radius: 3px;
    font-weight: 520;
    text-align: right;
    font-size: 1.1vh;
    cursor: none;
}

/* .item-slot-amount > p:after {
    content: "x"
} */

/* .item-slot-weight {
    position: absolute;
    bottom: 10.5vh;
    right: 0.55vw;
} */

/* .item-slot-weight > p {
    color: #ffffff;
    text-shadow: rgb(15, 16, 17) -1px 1px 0px, rgb(15, 16, 17) 1px 1px 0px, rgb(15, 16, 17) 1px -1px 0px, rgb(15, 16, 17) -1px -1px 0px;
    text-align: right;
    font-size: 1.2vh;
    font-weight: 500;
    cursor: none;
} */

.item-slot-name {
    position: absolute;
    left: 5px;
    bottom: 81px;
    background: #2efa7c;
    height: 5px;
    width: 5px;
    border-radius: 1px;
    box-shadow: 0px 0px 10px #2efa7ce3;
}

.item-slot-name > p {
    color: #e9e9e900;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 2px;
    border-radius: 3px;
    text-align: right;
    font-size: 0vh;
    font-weight: 500;
    cursor: none;
}

@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap');
.item-slot-label {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #ffffff00;
    /* min-height: 2vh; */
    height: auto;
}

.item-slot-label p {
    color: rgba(247, 247, 247, 0);
    /* text-shadow: rgb(15, 16, 17) -1px 1px 0px, rgb(15, 16, 17) 1px 1px 0px, rgb(15, 16, 17) 1px -1px 0px, rgb(15, 16, 17) -1px -1px 0px; */
    font-size: .95vh;
    line-height: 2.2vh;
    text-align: center;
    font-weight: 550;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif !important;
    /* font-variant: small-caps; */
    /* font-family: 'Noto Sans KR', sans-serif; */
    /* font-weight: bold; */
}

.item-slot-quality {
    position: absolute;
    bottom: 4px;
    left: 4px;
    width: 91%;
    height: 0.4vh;
    border-radius: 28px;
    background-color: #363c45e0;
    background: repeating-linear-gradient(90deg, /* Hoek van de streepjes */ #575757a6, /* Startkleur van het streepje */ #575757a6 1.5px, /* Lengte van de kleur voor het streepje */ transparent 1px, /* Start van de transparante ruimte */ transparent 3px /* Lengte van de transparante ruimte */);
}

.item-slot-quality-bar {
    position: absolute;
    bottom: 0;
    width: 49px;
    height: 100%;
    background-color: rgb(66, 227, 186);
    /* box-shadow: inset 0 0 0.25vh 0 rgb(0 0 0 / 20%); */
    border-radius: 73px;
}

.item-slot-quality p {
    color: transparent;
}

.item-slot-img {
    max-width: 100%;
    max-height: 100%;
    padding: 0.1vw;
}

.item-slot-img img {
    display: block;
    position: relative;
    margin: 0 auto;
    margin-top: 16.4%;
    width: auto;
    height: 5vh;
}

.item-slot-body-img {
    max-width: 100%;
    max-height: 100%;
    padding: 0.1vw;
}

.item-slot-body-img img {
    display: block;
    position: relative;
    margin: 0 auto;
    margin-top: 25%;
    width: auto;
    height: auto;
    max-width: 42px;
    max-height: 42px;
}

.item-slot-img-itembox {
    width: 27%;
}
.item-slot-img-itembox img {
    /* position: relative; */
    margin: 0 auto;
    /* padding-top: 5.5%; */
    margin-left: 5px;
    margin-top: 2px;
    width: 100%;
}
.item-box-img {
    width: 30px;
    right: 30px;
    top: 2%;
    background: #0094e9cc;
    position:absolute;
    border-radius: 3px;
    height: 30px;
    /* z-index: 10000; */
}

.boxbaranayazialan {
    margin-left: 8px;
    margin-top: 8px;
}

.item-slot-img2 img {
    display:block;
}

.ui-draggable-dragging {
    background: rgba(0, 0, 0, 0.3);
}

.body-inv-info {
    position: absolute;
    left: 7%;
    top: 80.2%;
    width: 27%;
    z-index: 1000;
    cursor: none;    
}
.body-inv-slots-left {
    position: absolute;
    left: 11.7vh;
    top: 34.1%;
    width: 6%;
    z-index: 1000;
    cursor: none;
}
.body-inv-slots-right {
    position: absolute;
    margin-top: 3%;
    left: 28.15%;
    top: 12%;
    width: 6%;
    top: 28.8%;
    z-index: 99;
    cursor: none;
}


.bodyy-inv-info {
    position: relative;
    right: 24.6%;
    top: 14.6%;
    z-index: 1000;
    cursor: none;
    display: flex;
    flex-wrap: wrap;
    float: right;

}
.inv-list-box{
    margin-top: -1.7%;
    width: 2rem;
    /* right: -51.6%; */
    position: relative;
    background: #07e0ad38;
    padding-left: 6.8px;
    padding-top: 6.3px;
    padding-right: 6px;
    padding-bottom: 6px;
    border-radius: 3px;
    margin-right: 5px;
}

.bodyyy-inv-info {
    position: absolute;
    width: 28.34%;
    z-index: 1000;
    height: 17vh;
    left: 113px;
    top: 112px;
    border: 2px solid #0000002e;
    background: #36363663;
    border-radius: 14px;
}

.iconalan {
    left: 4px;
    top: 4px;
    margin-bottom: 31px;
    width: 99%;
    position: relative;
}

.basbox{
    position: relative;
    background: #0fffd5;
    box-shadow:1px 1px 15px rgba(24, 239, 189, 0.548);
    width: 8px;
    height: 8px;
    letter-spacing: 0.01vh;
    left: 62vh;
    top: -15px;
    cursor: none;
}

#bas{
    position: relative;
    font-size: 14px;
    padding-bottom: 1px;
    padding-left: 1px;
    letter-spacing: 0.01vh;
    top: -22px;
    font-weight: 400;
    float: left;
    left: 45px;
    text-transform: normal;
    cursor: none;
    color: #ffffff;
    font-family: Optima, sans-serif;
}
#bas2{
    position: relative;
    font-size: 14px;
    padding-bottom: 1px;
    padding-left: 1px;
    letter-spacing: 0.01vh;
    top: -18px;
    font-weight: 400;
    float: left;
    left: 36px;
    text-transform: normal;
    cursor: none;
    color: #ffffff;
    font-family: Optima, sans-serif;
}

#info{
    position: relative;
    color: #686f7a;
    display: grid;
    border-left: 4px solid #1c4bcf;
    font-size: 12.5px;
    padding-bottom: 15px;
    padding-left: 8px;
    font-family: Optima, sans-serif;
    letter-spacing: 0.01vh;
    left: 50vh;
    top: 12px;
    width: 19vh;
    font-weight: 450;
    height: 3.4vh;
    float: left;
    text-transform: normal;
    cursor: none;
}
.altinfo{
    position: relative;
    color: rgb(255, 255, 255);
    font-size: 12.5px;
    padding-left: 0px; 
    letter-spacing: 0.02vh;
    left: 0px;
    top: -1.7px;
    font-weight: 400;
    float: left;
    font-family: Optima, sans-serif;
}

#info2{
    position: relative;
    color: rgb(104, 111, 122);
    font-size: 12.5px;
    padding-bottom: 15px;
    display: grid;
    height: 3.4vh;
    padding-left: 8px;
    font-family: Gilroy;
    letter-spacing: 0.01vh;
    left: 65.8vh;
    width: 19vh;
    top: 46px;
    font-weight: 450;
    float: left;
    cursor: none;
    border-left: 4px solid rgb(185, 236, 98);
}

.info3{
    position: relative;
    color: rgb(104, 111, 122);
    font-size: 12.5px;
    padding-bottom: 15px;
    padding-left: 8px;
    font-family: Gilroy;
    letter-spacing: 0.01vh;
    left: 68vh;
    top: -29px;
    display: grid;
    width: 19vh;
    font-weight: 450;
    height: 3.4vh;
    float: left;
    cursor: none;
    border-left: 4px solid rgb(162, 82, 238);
}

#info4{
    position: relative;
    color: rgb(104, 111, 122);
    font-size: 12.5px;
    padding-bottom: 15px;
    padding-left: 8px;
    font-family: Gilroy;
    display: grid;
    letter-spacing: 0.01vh;
    left: 87vh;
    top: 5px;
    height: 3.4vh;
    font-weight: 440;
    width: 19vh;
    float: left;
    cursor: none;
    border-left: 4px solid rgb(244, 180, 112);
}


.player-inv-info {
    position: absolute;
    left: 76px;
    top: -37px;
    width: 101.1%;
    z-index: 1001;
    cursor: none;
}

#player-inv-label {
    position: relative;
    color: #07e0af;
    font-size: 21px;
    font-family: 'Roboto', sans-serif !important;
    letter-spacing: 0.01vh;
    left: 12vh;
    top: 21.6px;
    float: left;
    text-transform: normal;
    cursor: none;
}

/* #player-inv-weight {
    position: relative;
    color: rgb(226, 226, 226);
    padding-left: 3px;
    padding-top: 3px;
    padding-bottom: 0.5px;
    padding-right: 3px;
    width: 67px;
    font-size: 11.6px;
    text-align: left;
    font-family: 'Roboto', sans-serif !important;
    letter-spacing: 0.1vh;
    bottom: 3.3rem;
    left: 11.8vh;
    right: -109%;
    float: left;
} */

/* #back-inv-weight {
    position: relative;
    color: rgb(226, 226, 226);
    padding-left: 3px;
    padding-top: 3px;
    padding-bottom: 0.5px;
    padding-right: 3px;
    width: 67px;
    font-size: 11.6px;
    text-align: left;
    font-family: 'Roboto', sans-serif !important;
    letter-spacing: 0.1vh;
    bottom: 3.3rem;
    left: 11.8vh;
    right: -109%;
    float: left;
} */

/* #body-inv-weight {
    position: relative;
    color: rgb(226, 226, 226);
    padding-left: 2px;
    padding-top: 0px;
    padding-bottom: 0.5px;
    padding-right: 3px;
    width: 67px;
    font-size: 11.6px;
    text-align: left;
    font-family: 'Roboto', sans-serif !important;
    letter-spacing: 0.1vh;
    top: -2px;
    right: -8%;
    float: left;
} */


.back-inv-info {
    position: absolute;
    left: 51px;
    top: -45px;
    width: 101.1%;
    z-index: 1000;
    cursor: none;
}

#back-inv-label {
    position: relative;
    color: #07e0af;
    font-size: 21px;
    font-family: 'Roboto', sans-serif !important;
    letter-spacing: 0.01vh;
     left: 12vh;
    top: 21.6px;
    float: left;
    text-transform: normal;
    cursor: none;
}


/* #other-inv-labell {
    position: relative;
    color: #67d5b7;
    text-shadow:1px 1px 15px #67d5b7;
    font-size: 21px;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 650;
    letter-spacing: 0.01vh;
    left: -7px;
    top: 10px;
    float: left;
    text-transform: normal;
    cursor: none;
} */

/* #other-inv-weight {
    position: relative;
    color: rgb(226, 226, 226);
    padding-left: 3px;
    padding-top: 3px;
    padding-bottom: 0.5px;
    padding-right: 3px;
    width: 80px;
    text-align: left;
    font-size: 11.6px;
    font-family: 'Roboto', sans-serif !important;
    letter-spacing: 0.1vh;
    bottom: -10px;
    right: -4.5rem;
    float: left;
    cursor: none;
} */
/* #other-inv-weight2 {
    position: relative;
    color: rgb(226, 226, 226);
    padding-left: 3px;
    padding-top: 3px;
    padding-bottom: 0.5px;
    padding-right: 3px;
    width: 100px;
    text-align: left;
    font-size: 11.6px;
    font-family: 'Roboto', sans-serif !important;
    letter-spacing: 0.1vh;
    bottom: -10.3px;
    right: -5rem;
    float: left;
    cursor: none;
} */

#other-inv-money {
    position:absolute;
    color: white;
    text-shadow:1px 1px 15px #d8d8d8c5;
    border: 1.4px solid rgba(255, 255, 255, 0.103);
    background: linear-gradient(to left, #3a3a3c 30% , #454545 70% , #3d3c3f 100%);
    border-radius: 0px;
    padding-left: 4px;
    padding-right: 5px;
    padding-top: 0px;
    padding-bottom: 0px;
    font-size: 13px;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 500;
    letter-spacing: 0.01vh;
    text-transform: normal;
    cursor: none;
    margin-top: 6.7%;
    left: -7.3px;
}

#player-cash {
    color: #67d5b7;
    text-shadow:1px 1px 15px #67d5b7;
}

button.save-settings {
    background-color: #689f38;
}

.settings-menu input {
    height: 2vh;
    margin: 5px 0;
    width: 5%;
}

.settings-menu {
    background: rgba(18, 21, 27, 0.89);
    border-radius: 10px;
    color: rgba(220, 220, 220, 1);
    display: none;
    font-size: 1.5vh;
    left: 0;
    margin: 0 auto;
    padding: 1%;
    position: absolute;
    right: 0;
    top: 37%;
    width: 21%;
    z-index: 6;
}



.player-inv-weight {
    position: absolute;
    left: 38%;
    top: 10%;
}

.player-inv-weight > p {
    color: white;
    font-size: 12px;
    font-family: 'Roboto', sans-serif !important;
}

.back-inv-weight {
    position: absolute;
    left: 38%;
    top: 10%;
}

.back-inv-weight > p {
    color: white;
    font-size: 12px;
    font-family: 'Roboto', sans-serif !important;
}

.body-inv-weight {
    position: absolute;
    left: 38%;
    top: 10%;
}

.body-inv-weight > p {
    color: white;
    font-size: 12px;
    font-family: 'Roboto', sans-serif !important;
}


/* .other-inv-info {
    position: relative;
    width: 93%;
    left: 0.5rem;
    background: #420c0c00;
    height: 13.5vh;
    z-index: 1000;
    margin-bottom: 0.2vh;
    } */

    .other-inv-info2 {
        z-index: 1000;
        margin-bottom: 0.3rem;
        height: 6vh;
        display: flex;
        width: 48.4vh;
        position: relative;
        left: 15px;
        border-width: 2px;
        border-style: solid;
        border-color: rgba(0, 0, 0, 0.18);
        border-image: initial;
        border-radius: 15px;
        background: rgba(54, 54, 54, 0.39);
        margin-top: 10px;
        }
/* #other-inv-label {
    color: rgb(7, 224, 175);
    position: relative;
    font-size: 20px;
    padding: 0px 4.6rem !important;
    top: 14px;
    } */
.other-inv-ackapa {
    color: var(--primary-color);
    text-shadow: 0px 0px 10px var(--primary-color);
    width: 4vh;
    height: 4vh;
    text-align: center;
    border-radius: 9px;
    border: 3px solid #0000003d;
    background: #36363663;
    margin-left: 6px;
}  
.other-inv-ackapa:hover{
    background: #5e746f42;
}

.robplayer {
    color: var(--primary-color);
    text-shadow: 0px 0px 10px var(--primary-color);
    width: 4vh;
    height: 4vh;
    text-align: center;
    border-radius: 9px;
    border: 3px solid #0000003d;
    background: #36363663;
    margin-left: 6px;
}  
.robplayer:hover{
    background: #5e746f42;
}
.other-inv-filtre {
    color: var(--primary-color);
    text-shadow: 0px 0px 10px var(--primary-color);
    width: 4vh;
    height: 4vh;
    text-align: center;
    border-radius: 9px;
    border: 3px solid #0000003d;
    background: #36363663;
    margin-left: 6px;
}  
.other-inv-filtre:hover{
   background: #5e746f42;
}
.img-ackapa {
    right: 30.4rem;
    width: 30.5%;
    top: 0rem;
    position: absolute;
}
     
.denem-inv-info {
    position: relative;
    width: 67%;
    height: 9%;
    left: 14.5vh;
    top: 35.5vh;
    z-index: 1000;
    
}

.ply-iteminfo-container {
    background: rgb(255 255 255 / 84%);
    border-radius: 4px;
    color: rgba(220, 220, 220, 1);
    border: 0px solid rgba(255, 255, 255, 0.02);
    font-size: 1.35vh;
    max-height: 25%;
    min-height: 50px;
    overflow: hidden;
    padding: 1px;
    pointer-events: none;
    position: absolute;
    text-decoration: none;
    width: auto;
    max-width: 18%;
    z-index: 10000;
    background: rgb(0 0 0 / 21%);
    backdrop-filter: blur(17.5px);
}
.item-info-div {
    width: 200px;
    padding-left: 18px;
    padding-right: 5px;
    padding-top: 19px;
    padding-bottom: 5px;
    margin-bottom: 0px;
    line-height: 1;
    color: rgb(241, 241, 241);
    position: relative;
    border-radius: 4px
}
.item-info-title {
    text-transform: normal;
    font-weight: 500;
    font-family: sans-serif;
    font-size: 15px;
    letter-spacing: 0.3px;
    line-height: 1;
    color: #f1f1f1;
    text-shadow: 1px 1px 15px #20ad9100;
    text-transform: capitalize;
    color: var(--primary-color);
    text-shadow: 0px 0px 10px var(--primary-color);
    font-family: Optima, sans-serif;
}

.item-info-line {
    position: absolute;
    font-family: 'Roboto', sans-serif !important;
    width: 85%;
    background-color: #6d6d6d00;
    height: 0.1vh;
    max-height: 0vh;
    left: 7.6%;
}

.item-info-description {
    font-size: 12px;
    line-height: 1.1;
    letter-spacing: 0.3px;
    color: rgb(255 255 255 / 80%);
    width: 200px;
    font-family: Optima, sans-serif;
    padding-left: 20px;
    padding-right: 5px;
    padding-top: 0px;
    padding-bottom: 3px;
    margin-bottom: 5px;
}

.item-info-bottom {
    text-transform: normal;
    font-weight: 400;
    font-family: sans-serif;
    font-size: 1.2vh;
    letter-spacing: 0.3px;
    line-height: 1;
    text-align: center;
    color: var(--primary-color);
    text-shadow:1px 1px 15px var(--primary-color);
    border: 1.4px solid rgba(255, 255, 255, 0.103);
    font-family: Optima, sans-serif;
    width: 200px;
    border-radius: 3px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 11px;
    padding-bottom: 11px;
    border-radius: 4px;
    background: rgb(0 0 0 / 21%);
    backdrop-filter: blur(17.5px);
}

.itemboxes-container {
    height: 33.9vh;
    min-width: 30px;
    max-width: 30vh;
    width: 9.6vw;
    position: absolute;
    right: 1%;
    bottom: 20%;
    overflow: hidden;
    padding-top: 0.2%;
    border-top: none;
}

.itemboxes-container:hover {
    cursor: default; /* Normalde değişmez */
}

.itemboxes-container::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 0;
    width: 95%;
    height: 8px; /* Border'ın yüksekliği kadar */
    cursor: pointer;
    pointer-events: auto; /* Sadece border üstünde etkin olur */
}
.template {
    display: none;
}

.itembox-container {
    display: none;
    position: relative;
    margin-right: 0vh;
    border-radius: 8px;
    width: 99%;
    right: -1%;
    height: 23%;
    margin-bottom: 5px;
    background: radial-gradient(31.98% 56.85% at 50% 50%, #141414de, #161616e7);
    border: 3px solid #9191911f;
}

#itembox-action {
    bottom: 32px;
    width: fit-content;
    color: var(--primary-color);
    background-color: #0000005e;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 1px;
    padding-bottom: 1px;
    border-radius: 3px;
}

.boxbarana2 {
    height: 6.5%;
    width: 95%;
    margin-left: 7px;
    border-radius: 3px;
    background: repeating-linear-gradient( 90deg, /* Hoek van de streepjes */ #575757a6, /* Startkleur van het streepje */ #575757a6 1.5px, /* Lengte van de kleur voor het streepje */ transparent 3px, /* Start van de transparante ruimte */ transparent 4px /* Lengte van de transparante ruimte */ );
    margin-left: auto;
    margin-right: auto;
    margin-top: 11px;
}

.boxbarmain2 {
    height: 100%;
    width: 50%;
    border-radius: 3px;
    box-shadow: 0px 0px 15px #2efa7c46;
    background: repeating-linear-gradient( 90deg, /* Hoek van de streepjes */ var(--primary-color), /* Startkleur van het streepje */ var(--primary-color) 1.5px, /* Lengte van de kleur voor het streepje */ transparent 3px, /* Start van de transparante ruimte */ transparent 4px /* Lengte van de transparante ruimte */ );
}

.boxbarana3 {
    height: 0.5vh;
    width: 94%;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    border-radius: 3px;
    background: repeating-linear-gradient( 90deg, /* Hoek van de streepjes */ #575757a6, /* Startkleur van het streepje */ #575757a6 1.5px, /* Lengte van de kleur voor het streepje */ transparent 3px, /* Start van de transparante ruimte */ transparent 4px /* Lengte van de transparante ruimte */ );
}

.boxbarmain3 {
    height: 100%;
    width: 60%;
    border-radius: 3px;
    box-shadow: 0px 0px 15px #2efa7c46;
    background: repeating-linear-gradient( 90deg, /* Hoek van de streepjes */ var(--primary-color), /* Startkleur van het streepje */ var(--primary-color) 1.5px, /* Lengte van de kleur voor het streepje */ transparent 3px, /* Start van de transparante ruimte */ transparent 4px /* Lengte van de transparante ruimte */ );
}

#itembox-boxins {
    position: absolute;
    bottom: 36px;
    background: var(--primary-color);
    left: 94%;
    box-shadow: 0px 0px 10px var(--primary-color);
    border-radius: 1px;
    width: 5px;
    height: 5px;
    top: 5px;
}
.boxbaranayazialanana {
    display: flex;
    height: fit-content;
    margin-top: 4%;
}

#itembox-boxinss {
    position: relative;
    background: var(--primary-color);
    left: 6px;
    margin-top: 6px;
    box-shadow: 0px 0px 10px var(--primary-color);
    border-radius: 1px;
    width: 5px;
    height: 5px;
}


#itembox-action > p {
    font-size: 10px;
    font-weight: 500;
    /* line-height: 1.7vh; */
    text-align: center;
    font-family: 'Roboto', sans-serif !important;
    white-space: pre;
    text-overflow: ellipsis;
    overflow: hidden;
}

#itembox-label {
    bottom: 50px;
    left: 64px;
}

#itembox-label > p {
    color: rgb(247, 247, 247);
    /* text-shadow: rgb(15, 16, 17) -1px 1px 0px, rgb(15, 16, 17) 1px 1px 0px, rgb(15, 16, 17) 1px -1px 0px, rgb(15, 16, 17) -1px -1px 0px; */
    font-size: 1.1vh;
    font-family: Optima, sans-serif;
    /* font-weight: bold; */
}


/* #itembox-boxinss-slot {
    position: absolute;
    padding-top: 5px;
    padding-bottom: 2px;
    width: fit-content;
    padding-right: 5px;
    padding-left: 5px;
    text-align: left;
    left: 3px;
    top: 3px;
    font-size: 12px;
    background: #02020259;
    line-height: 1.1vh;
    border-radius: 3px;
    color: var(--primary-color);
    text-shadow: 0px 0px 10px var(--primary-color);
    font-family: Optima, sans-serif;
    z-index: 999;
} */


.requiredItem-container {
    display: none;
    position: absolute;
    height: 100vh;
    width: 100vw;
}

.requiredItem-box {
    position: relative;
    top: 70%;
    left: 42%;
    width: 10vh;
    height: 11vh;
    border-radius: 0px;
    float: left;
    margin-left: 20px;
    background: rgba(29, 35, 48, 0.855);
}

#requiredItem-action {
    position: absolute;
    left: 0;
    top: 0;
    color: white;
    padding: 3px;
    font-size: 14px;
    font-family: 'Roboto', sans-serif !important;
}

#requiredItem-label {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #0fffd5;
    height: 0.3vh;
}

#requiredItem-label > p {
    color: #ffffff;
    font-size: 14px;
    text-align: center;
    top: -25px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    white-space: pre;
    text-overflow: ellipsis;
    overflow: hidden;
}

.item-slot-img-itembox-test img {
    display: block;
    position: relative;
    margin: 0 auto;
    margin-top: 1.3vh;
    padding: 5px;
    width: 20px;
    height: 80px;
    max-width: 100%;
    max-height: 100%;
}

.z-hotbar-inventory {
    display: none;
    position: absolute;
    bottom: 6;
    margin: 0 auto;
    left: 0;
    right: 0;
    width: 29.4vw;
    z-index: 105;
    height: 13vh;
    overflow-x: hidden;
    overflow-y: hidden;
    
  border-top: none;
}
.z-hotbar-inventory:hover {
    cursor: default; /* Normalde değişmez */
}

/* .z-hotbar-inventory::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 0;
    width: 95%;
    height: 8px;
    cursor: pointer;
    pointer-events: auto; 
} */
/* .z-hotbar-inventory > .z-hotbar-item-slot > .z-hotbar-item-slot-key > p {
    position: absolute;
    width: fit-content;;
    background: #02020259;
    border-radius: 3px;
    color: var(--primary-color);
    text-shadow: 0px 0px 10px var(--primary-color);
    font-family: Optima, sans-serif;
    z-index: 999;
    font-size: 37px;
    height: 100%;
    width: 100%;
    left: 0px;
    text-align: center;
    line-height: 120px;
    text-shadow: 0px 0px 30px;
    top: 0px;
} */

.z-hotbar-item-slot-key {
    background: #02020259;
    border-radius: 3px;
    color: var(--primary-color);
    font-family: Optima, sans-serif;
    z-index: 999;
    font-size: 37px;
    height: 100%;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    text-shadow: 0px 0px 30px;
}

.z-hotbar-item-slot {
    position: relative;
    width: 18.2%;
    height: 90%;
    float: left;
    margin-left: 2px;
    margin: 5px;
    margin-bottom: 0px;
    transition: opacity 0.2s;
    background: radial-gradient(31.98% 56.85% at 50% 50%, #141414de, #161616e7);
    border: 3px solid #9191911f;
    border-radius: 6px;
    color: #00000000;
    font-size: 0px;
    z-index: 9999;
}
.z-hot-img {
    width: 15px;
    height: fit-content;
    right: 12.6%;
    top: -1.5%;
    position:absolute;
    border-radius: 3px;
    z-index: 10000;
}
.z-hotbar-item-label {
    position: relative;
    width: 100%;
    background-color: rgba(18, 21, 27, 0);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    height: auto;
    top: -51px;
}

.z-hotbar-item-label > p {
    color: rgb(247, 247, 247);
    /* text-shadow: rgb(15, 16, 17) -1px 1px 0px, rgb(15, 16, 17) 1px 1px 0px, rgb(15, 16, 17) 1px -1px 0px, rgb(15, 16, 17) -1px -1px 0px; */
    font-size: 1.1vh;
    line-height: 2.2vh;
    padding-left: 6px;
    text-align: left;
    /* font-variant: small-caps; */
    font-family: Optima, sans-serif;
    /* font-weight: 500; */
    /* font-weight: bold; */
}

.z-hotbar-item-slot-amount {
    position: absolute;
    bottom: 99;
    color: #ffffff;
    width: fit-content;
    right: 4px;
    padding-left: 0px;
    padding-right: 0px;
    background-color: rgba(18, 21, 27, 0);
    border-radius: 3px;
    height: auto;
}

.z-hotbar-item-slot-amount > p {
    color: rgba(253, 253, 253, 0);
    font-weight: 650;
    text-align: center;
    font-size:0px;
}

.z-hotbar-item-slot-amount > p:after {
    content: "x";
}

.z-hotbar-item-slot-amount-name {
    position: relative;
    top: -22px;
}

.z-hotbar-item-slot-amount-name > p {
    color: #ffffff00;
    text-align: right;
    font-size: 0px;
}

.z-hotbar-item-slot-label {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: transparent;
    min-height: 2.2vh;
    height: fit-content;
}

.z-hotbar-item-slot-label > p {
    color: rgb(190, 129, 129);
    font-size: 11.5px;
    text-align: center;
    text-transform: lowercase;
    font-family: 'Roboto', sans-serif !important;
    /* font-variant: small-caps; */
}

.z-hotbar-item-slot-img {
    max-width: 100%;
    padding: 0.2vw;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    margin-bottom: auto;
    margin-top: auto;
    z-index: 10001;
}

.z-hotbar-item-slot-img img {
    width: 62%;
    height: auto;
    position: relative;
    margin-left: 20%;
    /* margin-top: 30%; */
    /* justify-content: center; */
    align-items: center;
    bottom: -11%;
}

.ammo-container {
    position: absolute;
    background-color: rgba(20, 18, 32, 0.2);
    width: 3.25%;
    height: 44.16%;
    top: 26%;
    left: 6%;
}

.ammo-container-header {
    position: absolute;
    top: 0;
    width: 100%;
    height: 5vh;
    background-color: rgba(120, 10, 20, 0.5);
    text-align: center;
    color: rgba(216, 216, 216, 0.897);
}

.ammo-container-header > i {
    line-height: 5vh;
    font-size: 1.8vh;
}

.ammo-box {
    position: relative;
    width: 100%;
    height: 6vh;
    top: 5vh;
    background-color: rgba(0, 0, 0, .4);
    margin-bottom: .5vh;
    margin-top: .5vh;
}

.ammo-box > img {
    position: absolute;
    top: .15vh;
    left: .2vh;
    width: 5.25vh;
    opacity: .25;
}

.ammo-box > span {
    position: absolute;
    color: rgba(255, 255, 255, 0.95);
    font-size: .93vh;
    bottom: 0;
    right: 0;
    margin: .3vh;
    font-family: 'Roboto', sans-serif !important;
}

.ammo-box-amount {
    position: absolute;
    width: 100%;
    background-color: rgba(36, 36, 36, 0.4);
    bottom: 0;
    max-height: 100%;
}

#pistol_ammo > .ammo-box-amount {
    height: 0%;
}

#smg_ammo > .ammo-box-amount {
    height: 0%;
}

#shotgun_ammo > .ammo-box-amount {
    height: 0%;
}

#rifle_ammo > .ammo-box-amount {
    height: 0%;
}

/* Weapon Attachments */

.weapon-attachments-container {
    position: absolute;
    left: -100vw;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.weapon-attachments-container-title {
    position: absolute;
    margin: 5vh;
    font-size: 3vh;
    color: rgb(255, 255, 255);
    font-family: 'Roboto', sans-serif !important;
}

.weapon-attachments-container-description {
    position: absolute;
    margin: 5vh;
    top: 5vh;
    font-size: 1.7vh;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Roboto', sans-serif !important;
}

.weapon-attachments-container-details {
    position: absolute;
    margin: 5vh;
    top: 9vh;
    font-size: 1.4vh;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Roboto', sans-serif !important;
}

.weapon-attachments-container-detail-durability {
    height: 1.5vh;
    width: 10vh;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 1px;
}

.weapon-attachments-container-detail-durability-total {
    height: 100%;
    width: 50%;
    background-color: #0fffd5;
}

.weapon-attachments-container-image {
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 32%;
    width: 30%;
}

.weapon-attachments {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 5vh;
    width: 50vh;
    height: 12.5vh;
}

.weapon-attachments-title {
    position: absolute;
    bottom: 14vh;
    left: 0;
    margin: 5vh;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Roboto', sans-serif !important;
    font-size: 1.4vh
}

.weapon-attachment {
    position: relative;
    height: 12.5vh;
    width: 10.5vh;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgb(75, 75, 75);
    margin-right: 1vh;
    float: left;
    transition: .05s linear;
}

.weapon-attachment:hover {
    background-color: rgba(0, 0, 0, 0.4);
    border: 1px solid rgb(29, 29, 29);
    transition: .05s linear;
}

.weapon-attachment-label {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba(var(--main-label-color), 0.3);
    padding: 2.1%;
}

.weapon-attachment-label > p {
    color: #ffffff;
    font-size: 1.1vh;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.9vh;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 100;
}

.weapon-attachment-img {
    max-width: 100%;
    max-height: 100%;
    padding: 0.5vw;
}

.weapon-attachment-img > img {
    display:block;
    position: relative;
    margin: 0 auto;
    margin-top: 10%;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.weapon-attachments-remove {
    position: absolute;
    width: 6.5vh;
    height: 6.5vh;
    background-color: rgb(15, 15, 15);
    border-radius: 1px;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 20vh;
    text-align: center;
    color: white;
    font-size: 2vh;
    transition: background-color .05s linear;
}

.weapon-attachments-remove:hover {
    background-color: rgb(18, 18, 18);
}

.weapon-attachments-remove > i {
    line-height: 6.5vh;
}

.weapon-attachments-remove-hover {
    background-color: #0fffd5;
}

.weapon-dragging-class {
    animation: ShakeEffect .75s;
    animation-iteration-count: infinite;
}

@keyframes ShakeEffect {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.weapon-attachments-back {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10vh;
    height: 6vh;
    margin: 5vh;
    background-color: rgb(15, 15, 15);
    border-radius: 1px;
    text-align: center;
    line-height: 6vh;
    color: white;
    font-family: 'Roboto', sans-serif !important;
    transition: .05s linear;
}

.weapon-attachments-back:hover {
    background-color: rgb(18, 18, 18);
}

.price-amount {
    position: absolute;
    left: 4px;
    border-radius: 3px;
    bottom: 0.4vh;
    z-index: 999;
    text-align: center;
    width: fit-content;
    background-color: rgb(108 108 108 / 26%);
    padding-top: 0.001rem;
    padding-right: 10px;
}

.price-amount>p {
    position: relative;
    color: #82ff4e;
    font-size: 1vh;
    left: 5px;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
    color: var(--primary-color);
    text-shadow: 0px 0px 10px var(--primary-color);
}

.item-slot-weight {
    position: absolute;
    bottom: 6.5vh;
    right: 0.25vw;
    background-color: rgb(255 255 255 / 0%);
    padding-top: 0.001rem;
    padding-left: 5px;
    text-shadow: 0px 0px 10px;
    color: white;
    border-radius: 5px;
    width: fit-content;
}

.item-slot-weight > p {
    border-radius: 3px;
    text-align: right;
    font-size: 0.5vh;
    cursor: none;
    font-family: sans-serif;
    font-size: 13px;
    color: #ffffff;
    text-shadow: 0px 0px 10px;
}

.ply-iteminfo-container-click {
    border-radius: 4px;
    color: rgba(220, 220, 220, 1);
    min-height: 50px;
    overflow: hidden;
    position: absolute;
    text-decoration: none;
    width: auto;
    padding-bottom: 13px;
    max-width: 18%;
    z-index: 10000;
    background: rgb(0 0 0 / 21%);
    backdrop-filter: blur(17.5px);
}
.item-info-selection {
    text-transform: normal;
    font-size: 13px;
    letter-spacing: 0.3px;
    line-height: 2;
    text-align: left;
    font-family: Optima, sans-serif;
    color: #ffffff;
    text-shadow:1px 1px 15px #ffffffb7;
    width: 81%;
    margin-bottom: 4px;
    padding-left: 5px;
    padding-right: 5px;
    height: 3.4vh;
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.11);
    backdrop-filter: blur(17.5px);
}
.item-info-selection>p {
    text-align: center;
    position: relative;
    display: block;
    font-size: 12px;
 
}
.item-info-selection:hover{
    background: rgba(209, 208, 208, 0.13);
    backdrop-filter: blur(17.5px);
}

.opt-button {
    font-size: 13px;
    text-align: left;
    font-family: Optima, sans-serif;
    color: rgb(255, 255, 255);
    text-shadow: rgb(255 255 255 / 72%) 1px 1px 15px;
    width: 100%;
    padding-left: 5px;
    padding-right: 5px;
    line-height: 37px;
    height: 3.4vh;
    display: block;
    margin-left: auto;
    margin-right: auto;
    backdrop-filter: blur(17.5px);
    border-radius: 3px;
    margin-bottom: 3px;
    background: rgba(207, 207, 207, 0.11);
}
.opt-button>p {
    text-align: center;
    position: relative;
    display: block;
    font-size: 15px;
 
}
.opt-button:hover{
    background: rgba(209, 208, 208, 0.13);
    backdrop-filter: blur(17.5px);
}

#value {
    background: #76767600;
    border: none;
    border-radius: 2px;
    color: var(--primary-color);
    text-align: left;
    padding-left: 0px;
    height: 22px;
    padding-top: 2px;
}

#value:focus {
    outline: none;
    border: 2px solid transparent;
    background: #3f3f3f7e;
    color: #fff;
    text-align: center;
}


#value:hover {
    opacity: 0.5;
}


.item-info-split{
    text-transform: normal;
    font-weight: 400;
    font-family: sans-serif;
    font-size: 1.2vh;
    letter-spacing: 0.3px;
    line-height: 2;
    text-align: left;
    color: #ffffff;
    text-shadow: 1px 1px 15px #ffffff45;
    border: 0px solid rgba(255, 255, 255, 0.103);
    font-family: 'Roboto', sans-serif !important;
    background: transparent;
    width: 170px;
    margin-bottom: 5px;
    border-radius: 4px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: -3px;
    padding-bottom: 11px;
    margin-left: auto;
    margin-right: auto;
}


  
.slider2 {
	color: var(--primary-color);
    --track-color: rgba(255, 255, 255, 0.192);
	--thumb-height: 1.125em;
	--track-height: 0.125em;
	--track-color: rgba(51, 51, 51, 0.363);
	--brightness-hover: 110%;
	--brightness-down: 80%;
	--clip-edges: 0.125em;
}





/* === range commons === */
.slider2 {
	width: 100%; /* Full-width */
    height: 25px; /* Specified height */
	background: #fff0;
	overflow: hidden;
    border-radius: 3px;
}

.slider2:active {
	cursor: grabbing;
}

.slider2:disabled {
	filter: grayscale(1);
	opacity: 0.3;
	cursor: not-allowed;
}

/* === WebKit specific styles === */
.slider2,
.slider2::-webkit-slider-runnable-track,
.slider2::-webkit-slider-thumb {
	-webkit-appearance: none;
	transition: all ease 100ms;
	height: var(--thumb-height);
}

.slider2::-webkit-slider-runnable-track,
.slider2::-webkit-slider-thumb {
	position: relative;
}

.slider2::-webkit-slider-thumb {
	--thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
	--clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
	--clip-bottom: calc(var(--thumb-height) - var(--clip-top));
	--clip-further: calc(100% + 1px);
	--box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0
		100vmax currentColor;

	width: var(--thumb-width, var(--thumb-height));
	background: linear-gradient(currentColor 0 0) scroll no-repeat left center /
		50% calc(var(--track-height) + 1px);
	background-color: currentColor;
	box-shadow: var(--box-fill);
	border-radius: var(--thumb-width, var(--thumb-height));

	filter: brightness(100%);
	clip-path: polygon(
		100% -1px,
		var(--clip-edges) -1px,
		0 var(--clip-top),
		-100vmax var(--clip-top),
		-100vmax var(--clip-bottom),
		0 var(--clip-bottom),
		var(--clip-edges) 100%,
		var(--clip-further) var(--clip-further)
	);
}

.slider2:hover::-webkit-slider-thumb {
	filter: brightness(var(--brightness-hover));
	cursor: grab;
}

.slider2:active::-webkit-slider-thumb {
	filter: brightness(var(--brightness-down));
	cursor: grabbing;
}

.slider2::-webkit-slider-runnable-track {
	background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center /
		100% calc(var(--track-height) + 1px);
}

.slider2:disabled::-webkit-slider-thumb {
	cursor: not-allowed;
}

/* === Firefox specific styles === */
.slider2,
.slider2::-moz-range-track,
.slider2::-moz-range-thumb {
	appearance: none;
	transition: all ease 100ms;
	height: var(--thumb-height);
}

.slider2::-moz-range-track,
.slider2::-moz-range-thumb,
.slider2::-moz-range-progress {
	background: #fff0;
}

.slider2::-moz-range-thumb {
	background: currentColor;
	border: 0;
	width: var(--thumb-width, var(--thumb-height));
	border-radius: var(--thumb-width, var(--thumb-height));
	cursor: grab;
}

.slider2:active::-moz-range-thumb {
	cursor: grabbing;
}

.slider2::-moz-range-track {
	width: 100%;
	background: var(--track-color);
}

.slider2::-moz-range-progress {
	appearance: none;
	background: currentColor;
	transition-delay: 30ms;
}

.slider2::-moz-range-track,
.slider2::-moz-range-progress {
	height: calc(var(--track-height) + 1px);
	border-radius: var(--track-height);
}

.slider2::-moz-range-thumb,
.slider2::-moz-range-progress {
	filter: brightness(100%);
}

.slider2:hover::-moz-range-thumb,
.slider2:hover::-moz-range-progress {
	filter: brightness(var(--brightness-hover));
}

.slider2:active::-moz-range-thumb,
.slider2:active::-moz-range-progress {
	filter: brightness(var(--brightness-down));
}

.slider2:disabled::-moz-range-thumb {
	cursor: not-allowed;
}


 /* Div laoder */
 .circle-spin {
    --size: 2vh;
    --stroke-width: calc(var(--size) / 4);
    --accent-opacity: .25;
    --color: #2efa7c;
    --animation-timing-function: linear;
    --animation-duration: 1s;
    position: absolute;
    width: 8.5vh;
    height: 8.5vh;
    background: #17181b;
    z-index: 1;
    display: block;
    border-radius: 4px;
    background: rgb(0 0 0 / 21%);
    backdrop-filter: blur(8.5px);
}
  
  .circle-spin::before,
  .circle-spin::after {
    content: '';
    position: absolute;
    inset: 0;
    border-width: var(--stroke-width);
    border-style: solid;
    border-radius: 50%;
    transform: rotate(0deg);
    animation: var(--animation-timing-function) var(--animation-duration) infinite circle-spin-animation;
    margin: 3vh;
  }
  
  .circle-spin::before {
    border-color: var(--color) var(--color) var(--color) transparent;
    opacity: var(--accent-opacity);
  }
  
  .circle-spin::after {
    border-color: transparent transparent transparent var(--color);
  }
  
  @keyframes circle-spin-animation {
    from {
      transform: rotate(0deg);
    }
  
    to {
      transform: rotate(360deg);
    }
  }



.rowsssiconse{
    font-family: 'Material Symbols Outlined';
    position: relative;
    font-size: 15px;
    border-radius: 4px;
    align-items: center;
    margin: 0.4vh;
    margin-right: 6px;
    color: var(--primary-color);
    text-shadow: 0px 0px 10px var(--primary-color);
}

.material-symbols-outlined2 {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    display: flex;
    position: relative;
    font-weight: bold;
    justify-content: center;
    font-size: 10px;
    color: rgb(12, 238, 191);
    border-radius: 4px;
    align-items: center;
    margin: 1vh;
}

.item-status-div {
    display: flex;
    width: 100%;
    height: 3vh;
    bottom: -8%;
    position: relative;
    left: -2%;
    margin-top: 5px;
}
.durability-bg {
    width: fit-content;
    background-color: rgba(0, 0, 0, 0.3);
    position: relative;
    display: flex;
    height: 68%;
    margin: 0.4vh;
    margin-left: 0.2vh;
    border-radius: 1.2px;
    line-height: 18px;
    font-family: Optima, sans-serif;
}
/* .durability-bg .durability-text {
    position: absolute;
    top: 50%;
    left: 65%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1.1vh;
} */
.weight {
    font-size: 15px;
    position: relative;
    top: 1%;
    left: 5%;
    transform: translate(-50%, -50%);
    color: white;
}
.weight2 {
    font-size: 13px;
    top: 5px;
    left: 4px;
    position: relative;
}

.weight-bg {
    width: fit-content;
    background-color: rgba(0, 0, 0, 0.3);
    position: relative;
    display: flex;
    height: 68%;
    margin: 0.4vh;
    margin-right: 0.1vh;
    border-radius: 1.2px;
    line-height: 18px;
    font-family: Optima, sans-serif;
}
/* .weight-bg .weight-text {
    position: absolute;
    top: 50%;
    left: 65%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1.1vh;
} */

.oraalan {
    height: 7vh;
    display: flex
;
}

.namealan {
    width: fit-content;
    position: relative;
    left: 0px;
    height: 2vh;
    display: flex;
    top: 8px;
    margin-right: auto;
    margin-left: auto;
}

.nametextalan {
    width: 100%;
    display: flex;
}

.namebar {
    width: 2px;
    height: 23px;
    background: #ffffff;
    border-radius: 5px;
    position: relative;
    box-shadow: 0px 0px 10px #ffffff;
    top: 6.3px;
    margin-right: 0px;
}

.nametextana {
    color: #8b8b8b;
    font-family: Optima, sans-serif;
    font-size: 13px;
}

.nametextana2 {
    color: #ffffff;
    font-family: Optima, sans-serif;
    font-size: 15px;
    margin-top: -4px;
}

::root {
    --val: 0;
  }
  
  /* svg {
    transform: rotate(-90deg);
  } */
  
  .percent {
    stroke-dasharray: 100;
    stroke-dashoffset: calc(100 - var(--val));
  }
  
  .fifty {
    --val: 50;
  }
  
  .sixty {
    --val: 60;
  }
  
  .ninety {
    --val: 90;
  }

  .ustagir {
    height: 6vh;
    display: flex;
    width: 28%;
    border-radius: 15px;
    position: absolute;
    top: 28.6vh;
    left: 10.6vh;
    z-index: 9999;
}

.iconalan1 {
    border-radius: 9px;
    border: 3px solid #00000000;
    background: #36363600;
    width: 5vh;
    height: 5vh;
    position: relative;
    top: 6px;
    text-align: center;
    left: 7px;
    margin-right: 7px;
    font-size: 20px;
    color: var(--primary-color);
    text-shadow: 0px 0px 10px var(--primary-color);
}
.pilayeralan {
    height: 4vh;
    position: relative;
    width: 29vh;
    top: 11px;
}
.rowtext {
    color: var(--primary-color);
    text-shadow: 0px 0px 10px var(--primary-color);
    font-family: Optima, sans-serif;
    font-size: 15px;
}
.agirlik {
    color: #ffffff;
    font-family: Optima, sans-serif;
    font-size: 12px;
    margin-top: 0px;
}

.cansalbirdurum {
    position: absolute;
    top: 83.4vh;
    z-index: 9;
    left: 112px;
    height: 5vh;
    display: flex;
    background: rgba(240, 248, 255, 0);
}
.can {
    width: 22vh;
    display: flex;
    margin-top: 15px;
}
.armor {
    width: 22vh;
    display: flex;
    margin-left: 26px;
    margin-right: 21px;
    margin-top: 15px;
}
.barana2 {
    height: 1.1vh;
    width: 23vh;
    position: relative;
    margin-left: 7px;
    top: 3px;
    border-radius: 3px;
    background: repeating-linear-gradient(
        90deg,          /* Hoek van de streepjes */
        #575757a6,       /* Startkleur van het streepje */
        #575757a6 1.5px,   /* Lengte van de kleur voor het streepje */
        transparent 3px, /* Start van de transparante ruimte */
        transparent 4px  /* Lengte van de transparante ruimte */
    );
}

.barmain2 {
    height: 100%;
    background: #2f85f5;
    width: 33%;
    border-radius: 3px;
    box-shadow: 0px 0px 15px #2f85f577;
    background: repeating-linear-gradient(
        90deg,          /* Hoek van de streepjes */
        #2f85f5,       /* Startkleur van het streepje */
        #2f85f5 1.5px,   /* Lengte van de kleur voor het streepje */
        transparent 3px, /* Start van de transparante ruimte */
        transparent 4px  /* Lengte van de transparante ruimte */
    );
}

.barana {
    height: 1.1vh;
    width: 23vh;
    position: relative;
    margin-left: 7px;
    top: 3px;
    border-radius: 3px;
    background: repeating-linear-gradient(
        90deg,          /* Hoek van de streepjes */
        #575757a6,       /* Startkleur van het streepje */
        #575757a6 1.5px,   /* Lengte van de kleur voor het streepje */
        transparent 3px, /* Start van de transparante ruimte */
        transparent 4px  /* Lengte van de transparante ruimte */
    );
}

.barmain {
    height: 100%;
    width: 50%;
    border-radius: 3px;
    box-shadow: 0px 0px 15px #2efa7c60;
    background: repeating-linear-gradient(
        90deg,          /* Hoek van de streepjes */
        #2efa7c,       /* Startkleur van het streepje */
        #2efa7c 1.5px,   /* Lengte van de kleur voor het streepje */
        transparent 3px, /* Start van de transparante ruimte */
        transparent 4px  /* Lengte van de transparante ruimte */
    );
}




.ustagir2 {
    height: 6vh;
    display: flex;
    width: 85%;
    border: 2px solid #0000002e;
    border-radius: 15px;
    position: absolute;
    background: #36363663;
    top: 51px;
}

.iconalan2 {
    border-radius: 9px;
    border: 3px solid #00000000;
    background: #36363600;
    width: 4vh;
    height: 5vh;
    position: relative;
    top: 5px;
    text-align: center;
    left: 7px;
    margin-right: 11px;
    font-size: 20px;
    color: var(--primary-color);
    text-shadow: 0px 0px 10px var(--primary-color);
}

.pilayeralan2 {
    position: relative;
    top: 10px;
    height: 4vh;
}
.rowtext2 {
    color: var(--primary-color);
    text-shadow: 0px 0px 10px var(--primary-color);
    font-family: Optima, sans-serif;
    font-size: 15px;
}

.agirlik2 {
    color: #ffffff;
    font-family: Optima, sans-serif;
    font-size: 12px;
    margin-top: -1px;
}

.lef-bolmeler {
    display: flex;
    width: 14vh;
    height: 4vh;
    position: relative;
    left: -6px;
    top: 9px;
}

.bolme {
    color: var(--primary-color);
    text-shadow: 0px 0px 10px var(--primary-color);
    width: 4vh;
    height: 4vh;
    text-align: center;
    border-radius: 9px;
    border: 3px solid #0000003d;
    background: #36363663;
    margin-left: 6px;
}


.ustagir3 {
    display: flex;
    position: relative;
    top: 124px;
}

.unputolacak2 {
    display: flex;
    border: 2px solid #0000002e;
    background: #36363663;
    border-radius: 10px;
    width: 23.2vh;
    height: 4vh;
    margin-left: 2px;
}

.inputicon2 {
    width: 4.5vh;
    color: var(--primary-color);
    text-shadow: 0px 0px 10px var(--primary-color);
    text-align: center;
}

input[type="text"] {
    width: 25vh;
    background: #f0f8ff00;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    height: 40px;
    text-align: left;
    font-family: Optima, sans-serif;
    color: var(--primary-color);
}

.lef-bolmeler3 {
    display: flex;
    position: relative;
    overflow-x: unset;
    overflow-y: hidden;
    max-width: 22vh;
    min-width: 20vh;
    height: 4.4vh;
    flex-wrap: nowrap;
    flex-direction: row;
    gap: 4px;
    margin-left: 4px;
}
.lef-bolmeler3::-webkit-scrollbar {
    height: 1px; /* Scrollbar yüksekliği */
}

.lef-bolmeler3::-webkit-scrollbar-thumb {
    background: #ffffff9c;
    border-radius: 10px;
}
.bolme2 {
    color: var(--primary-color);
    text-shadow: 0px 0px 10px var(--primary-color);
    width: 4vh;
    min-width: 4vh;
    height: 4vh;
    text-align: center;
    border-radius: 9px;
    border: 3px solid #0000003d;
    background: #36363663;
    /* margin-left: 4px; */
}

.bolme2:hover {
    background: #5c5c5c63;
}

::placeholder {
    color: rgba(255, 255, 255, 0.76);
    text-align: left;
    line-height: 48px;
    text-transform: normal;
    font-size: 1.3vh;
    font-family: 'Roboto', sans-serif !important;
}

.ustagir4 {
    height: 6vh;
    display: flex;
    width: 48.3vh;
    position: absolute;
    left: 26px;
    top: 8.3vh;
    border-width: 2px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.18);
    border-image: initial;
    border-radius: 15px;
    background: rgba(54, 54, 54, 0.39);
}

.ciziksell {
    background: #ffffff80;
    height: 1px;
    width: 89%;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    top: -18px;
}

.moclic {
    width: auto;
    height: 3ch;
    position: relative;
    top: -3px;
    margin-right: 8px;
}
.nametextalan5 {
    display: flex;
    margin-left: auto;
    margin-right: auto;
}
.namealan5 {
    font-size: 14px;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
}

.nametextana5 {
    color: #ffffffa3;
    font-family: Optima, sans-serif;
}


.ustagir5 {
    height: 6vh;
    display: flex;
    width: 48.4vh;
    position: relative;
    left: 15px;
    border-width: 2px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.18);
    border-image: initial;
    border-radius: 15px;
    background: rgba(54, 54, 54, 0.39);
    margin-top: 6px;
}

.lef-bolmelersex {
    display: flex;
    width: 15vh;
    height: 5vh;
    position: relative;
    top: 9px;
    left: 51px;
    display: flex;
    flex: revert;
    flex-direction: row-reverse;
    left: -7px;
}

.infoiconsse {
    text-align: center;
    width: 25px;
}
.weight-text {
    top: 50%;
    transform: none;
    color: white;
    font-size: 1.1vh;
    position: relative;
    width: fit-content;
    text-align: center;
    padding-left: 1px;
    top: 2px;
    padding-right: 6px;
}
.durability-text {
    top: 50%;
    transform: none;
    color: white;
    font-size: 1.1vh;
    position: relative;
    width: fit-content;
    text-align: center;
    padding-left: 1px;
    top: 2px;
    padding-right: 6px;
}

#inv-close {
    background: #f95a5a;
    text-align: center;
    height: 24px;
    border-radius: 5px;
    width: 24px;
    margin-left: 9px;
    margin-top: 1px;
    margin-right: 3px;
    color: white;
    text-shadow: 0px 0px 10px;
    transition: 0.2s all;;
}
#inv-close:hover{
    box-shadow: 0px 0px 10px #f95a5ae1;
    background: #e65252;
    color:  white;
    text-shadow: 0px 0px 15px;
    transition: 0.2s all;
  }

  
#settings-close {
    background: #f95a5a;
    text-align: center;
    height: 27px;
    border-radius: 4px;
    width: 27px;
    color: white;
    text-shadow: 0px 0px 10px #18181885;
}
#settings-reset {
    background: #2a6bff;
    text-align: center;
    height: 27px;
    border-radius: 4px;
    width: 27px;
    color: white;
    text-shadow: 0px 0px 10px #18181885;
}
#settings-reset:hover {
    box-shadow: 0px 0px 10px #2a6bff;
    opacity: 0.9;

}
#settings-close:hover {
    box-shadow: 0px 0px 10px #f95a5aab;
    opacity: 0.9;
  }
  #settings-save {
    background: rgb(46, 250, 124);
    text-align: center;
    height: 27px;
    border-radius: 4px;
    width: 27px;
    color: white;
    text-shadow: 0px 0px 10px #18181885;
}
#settings-save:hover {
    box-shadow: 0px 0px 10px #4eff54;
    opacity: 0.9;
  } 
.carpialan {
    position: absolute;
    right: 0;
    top: 0;
}
.carpialansex {
    position: absolute;
    right: 26px;
    padding: 5px 3px 5px 13px;
    top: 38px;
    line-height: 25px;
    background: rgba(54, 54, 54, 0.39);
    display: flex;
    border-radius: 5px;
}
.carpialan2 {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    flex-direction: row-reverse;
    gap: 4px;
    margin-right: 16px;
    margin-top: 3px;
}
.carpialan3 {
    position: absolute;
    right: 39px;
    background: #16161685;
    top: 39px;
    display: none;
    padding: 9px;
    border-radius: 5px;
    gap: 5px;
    flex-direction: row-reverse;
}
  
#edit-close {
    background: #f95a5a;
    text-align: center;
    height: 31px;
    border-radius: 4px;
    width: 31px;
    font-size: 14px;
    color: white;
    text-shadow: 0px 0px 10px #20202066;
}
#edit-close:hover {
    box-shadow: 0px 0px 10px #f95a5aab;
    color:  white;
    opacity: 0.8;
  }
  #edit-reset {
    background: #2a6bff;
    text-align: center;
    height: 31px;
    border-radius: 4px;
    margin-right: 0.2vh;
    width: 31px;
    font-size: 13px;
    color: white;
    text-shadow: 0px 0px 10px #1e1e1e;
}
#edit-reset:hover {
    box-shadow: 0px 0px 10px #2a6affbe;
    color:  white;
    opacity: 0.8;
  }
  #edit-save {
    text-align: center;
    height: 31px;
    border-radius: 4px;
    width: 31px;
    margin-right: 0.2vh;
    color: #ffffff;
    font-size: 13px;
    text-shadow: 0px 0px 10px #1212123d;
    background: rgb(46, 250, 124);
}
#edit-save:hover {
    box-shadow: 0px 0px 10px #49ff4fdc;
    color:  white;
    opacity: 0.8;
}
.capitext {
    position: relative;
    color: white;
    text-shadow: 0px 0px 10px;
}

.sexvar3 {
    position: relative;
    left: -8px;
    top: -22px;
}



.iconalanhalp {
    position: relative;
    display: flex;
    left: -15px;
}

.iconboxsshalp {
    position: relative;
    left: 4px;
}
#bashalp {
    color: white;
    position: relative;
    margin-left: 12px;
    font-size: 14px;
    top: 6px;
}

.texthalp {
    color: white;
    font-size: 12.5px;
    padding-top: 0px;
    padding-right: 26px;
}
.namealan10 {
    font-size: 14px;
    display: flex;
    width: fit-content;
    margin-bottom: 6px;
    margin-left: 19px;
}

.q-card__section--vert { padding-top: 0px;}
li {
    color: #afafaf;
}


.q-card3 {
    backdrop-filter: blur(17.5px);
    position: relative;
    height: fit-content;
    width: 47vh;
    font-family: Optima, sans-serif;
    background: rgba(0, 0, 0, 0.21);
    padding-bottom: 1vh;
    padding-top: 2vh;
}

.switch {
    --circle-dim: 1.4em;
    font-size: 17px;
    position: relative;
    display: inline-block;
    height: 2em;
    width: 42px;
    left: 64px;
  }

  /* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 19px;
    background-color: rgb(249, 90, 90);
    transition: .4s;
    border-radius: 5px;
  }
  
  .slider-card {
    position: absolute;
    content: "";
    border-radius: 20px;
    transition: .4s;
    pointer-events: none;
    bottom: 17px;
    width: 15px;
    height: 15px;
    left: 3px;
  }
  
  .slider-card-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    perspective: 1000px;
    border-radius: 5px;
    transition: .4s transform;
  }
  
  .slider-card-front {
    background-color: rgb(37, 37, 37);
  }
  
  .slider-card-back {
    background-color: rgb(37, 37, 37);
    transform: rotateY(180deg);
  }
  
  input:checked ~ .slider-card .slider-card-back {
    transform: rotateY(0);
  }
  
  input:checked ~ .slider-card .slider-card-front {
    transform: rotateY(-180deg);
  }
  
  input:checked ~ .slider-card {
    transform: translateX(1.23em);
  }
  
  input:checked ~ .slider {
    background-color: rgb(46, 250, 124);
  }

  .setingbox {
    display: flex;
    width: 100%;
    height: 1.8vh;
}

.setingtext {
    margin-left: 7px;
    width: 33vh;
}

.setingsbarr {
    height: 1px;
    background: #ffffff2b;
    width: 100%;
    margin-bottom: 15px;
    margin-top: 15px;
}

.colers {
    border-radius: 4px;
    width: 30px;
    padding: 0px;
    position: relative;
    padding-left: 2px;
    left: 78px;
    top: -6px;
    padding-right: 2px;
    height: 30px;
    background: #e1e1e114;
    border: none;
    backdrop-filter: blur(18.5px);
}

input.colers::-ms-value {
    border-radius: 4px;
}
.colers::-webkit-color-swatch {
    border-radius: 4px;
    border: none;
}

.sliderss {
    appearance: none;
    opacity: 0.7;
    width: 9vh;
    position: relative;
    left: 9px;
    backdrop-filter: blur(18.5px);
    height: 1.4vh;
    padding-right: 4px;
    padding-left: 4px;
    outline: none;
    transition: opacity 0.2s ease 0s;
    background: rgba(207, 207, 207, 0.11);
    border-radius: 2px;
  }
  
  .sliderss::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background-color: rgb(255, 255, 255);
    cursor: pointer;
    width: 10px;
    height: 10px;
    border-radius: 2px
  }
  
  .sliderss::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #0093E9;
    cursor: pointer;
  }

  .kaydirle {
    width: 18px;
    text-align: right;
    margin-right: 2px;
    margin-left: 4px;
    font-size: 18px;
    color: #ffffff9c;
    text-shadow: 0px 0px 10px;
}

.kaydirri {
    width: 18px;
    text-align: left;
    margin-right: 0px;
    margin-left: 3px;
    font-size: 18px;
    color: #ffffff9c;
    text-shadow: 0px 0px 10px;
}


.kaydirle:hover {
    color: #ffffff;
    text-shadow: 0px 0px 10px;
}


.kaydirri:hover {
    color: #ffffff;
    text-shadow: 0px 0px 10px;
}

.lef-bolmelergoz {
    display: flex;
    height: 4vh;
    position: relative;
    width: 5vh;
    left: 104px;
    top: 13px;
    left: -124px;
    top: 23px;
}

.bolmegoz {
    color: var(--primary-color);
    text-shadow: 0px 0px 10px var(--primary-color);
    width: 4vh;
    height: 4vh;
    text-align: center;
    border-radius: 9px;
    border: 3px solid #0000003d;
    background: #36363663;
    margin-left: 6px;
}

.bolmegoz:hover{
    background: #5e746f42;
 }

 .bolme:hover{
    background: #5e746f42;
 }
 #ayarlarbaba{
    display: none;
    justify-content: center; /* Yatayda ortalar */
    align-items: center; /* Dikeyde ortalar */
    height: fit-content; /* Ekranın tamamını kaplar */
    
    z-index: 1000;
 }
 #yardimana{
    display: none;
    justify-content: center; /* Yatayda ortalar */
    align-items: center; /* Dikeyde ortalar */
    height: 100vh; /* Ekranın tamamını kaplar */
    z-index: 1000;
 }
 
 .resizable {
   
    resize: none;
    overflow: hidden;
 
    border: 1px solid #333;
  }
  
  /* Sol üst köşeye özel handle ekleme */
  .resizable::after {
    content: "";
    width: 10px;
    height: 10px;
    background: red;
    position: absolute;
    top: -5px;
    left: -5px;
    cursor: nwse-resize;
  }
  .resize-handle {
    width: 20px;
    height: 20px;
    box-shadow: 0px 0px 5px #00000098;
    position: relative;
    top: 3px;
    left: 4px;
    border-radius: 4px;
    cursor: nwse-resize;
    z-index: 9999;
    text-align: center;
    font-size: 11px;
    margin-bottom: 4px;
    color: white;
    color: rgb(14, 14, 14);
    background: var(--primary-color);;
    text-shadow: 0px 0px 6px #00000059;
  }
  

  .resize-handle2 {
    height: 20px;
    box-shadow: 0px 0px 5px #00000098;
    position: absolute;
    top: 3px;
    left: 28px;
    border-radius: 4px;
    cursor: pointer;
     pointer-events: auto;
    z-index: 9999;
    text-align: center;
    font-size: 11px;
    width: 93.5%;
    text-align: inherit;
    padding-left: 8px;
    text-shadow: 0px 0px 6px var(--primary-color);
    background: radial-gradient(31.98% 56.85% at 50% 50%, rgba(20, 20, 20, 0.87), rgba(22, 22, 22, 0.906));
    color: var(--primary-color);
  }

  
  .resize-handle3 {
    height: 20px;
    box-shadow: 0px 0px 5px #00000098;
    position: absolute;
    top: 3px;
    left: 28px;
    border-radius: 4px;
    cursor: pointer;
    pointer-events: auto; 
    z-index: 9999;
    text-align: center;
    font-size: 11px;
    width: 93.5%;
    text-align: inherit;
    padding-left: 8px;
    text-shadow: 0px 0px 6px var(--primary-color);
    background: radial-gradient(31.98% 56.85% at 50% 50%, rgba(20, 20, 20, 0.87), rgba(22, 22, 22, 0.906));
    color: var(--primary-color);
  }

  