@import url('https://fonts.googleapis.com/css2?family=Abel&family=Almarai:wght@300;400;700;800&family=Cairo:wght@200..1000&family=Dosis:wght@200..800&family=Mada:wght@200..900&family=Noticia+Text:ital,wght@0,400;0,700;1,400;1,700&family=Poetsen+One&family=Rajdhani:wght@300;400;500;600;700&family=Rubik:ital,wght@0,300..900;1,300..900&family=Saira+Semi+Condensed:wght@100;200;300;400;500;600;700;800;900&family=Signika+Negative:wght@300..700&family=Tajawal:wght@200;300;400;500;700;800;900&family=Ubuntu+Sans+Mono:ital,wght@0,400..700;1,400..700&family=Ubuntu+Sans:ital,wght@0,100..800;1,100..800&display=swap');


body{
margin: 0;
padding: 0;
box-sizing: border-box;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

.Panel {
    position: absolute;
    width: 120vh;
    height: 70vh;
    user-select: none;
    left: 38vh;
    top: 17vh;
    display: block;
    border-radius: 3vh;
    background: rgba(104, 87, 43, 0.636);
    border:2px solid transparent;
    box-shadow: #1d1d1d 0px 0em 0em 0.7vh;
}

.Header {
    position: relative;
    color: white;
    font-family: A9eelsh;
    font-weight: bold;
    left: 0vh;
    font-size: 2vh;
    top: 2vh;
    height: 7vh;
    border-radius: 2vh;
}

.Heros {
position: absolute;
overflow: hidden;
overflow-y: auto;
overflow-x: hidden;
height: 55vh;
top: 13vh;
width: 84vh;
left: vh;
}  
.Heros::-webkit-scrollbar {
overflow-y: hidden;
}
.container {
display: inline-block;
left: 1vh;
position: relative;
background: linear-gradient(270deg, rgba(53, 51, 46, 0.404) 0%, rgba(255, 255, 255, 0.267) 90%);
width: 15vh;
height: 16vh;
border-radius: 0.9vh;
box-shadow: hsla(47, 15%, 88%, 0.503) 0px 0em 0em 0.1vh;
margin: 0.2vh
}
.ServerName {
    position: relative;
    color: white;
    top: 0vh;
    left: 42vh;
    font-size: 3vh;
    font-family: "Cairo", sans-serif;
    font-weight: bold;
}
.ServerName1 {
    position: relative;
    color: #f9bb02;
    top: -5.6vh;
    left: 58.5vh;
    font-size: 3vh;
    font-family: "Cairo", sans-serif;
    font-weight: bold;
}

.CloseMenu {
    position: absolute;
    top: 0vh;
    left: 112vh;
    width: 6vh;
    height: 6vh;

}

/* صورة الديسكورد */
.PlayerAvatar {
    position: absolute;
    left: 0.5vh;
    top: 0.5vh;
    width: 6vh;
    height: 6vh;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 3px solid #ffffff;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.7);
    z-index: 10;
}

.search-input {
    width: 20vh;
    height: 2vh;
    font-family: "Cairo", sans-serif;
    font-weight: bold;
    text-align: right; 
    padding: 0.5vh;
    font-size: 1.4vh;
    background-color: #700c0c00;
    color: #fff; 
    position: absolute;
    right: 18vh;
    outline: none;
    border: none;
    top: 1vh; 
    z-index: 999;
}
.search-input::placeholder {
    color: #ffffff;
    font-weight: bold;
    font-size: 1.5vh;
    font-family: "Cairo", sans-serif;
    z-index: 999;
}
.line_search {
position: absolute;
top: 4vh;
left: 79vh;
width: 24vh;
height: 0.2vh;
background: linear-gradient(to left, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 50%, rgb(255, 255, 255) 100%);
}
.Shop {
position: absolute;
width: 32vh;
height: 48vh;
display: flex;
top: 15vh;
left: 85vh;
border-radius: 1.0vh;
text-align: center;
background: linear-gradient(270deg, rgba(255, 207, 32, 0.37) 0%, rgba(255, 255, 255, 0.267) 150%);
border:0.4vh solid #f9bf0298 ;
border-left: 1vh;
border-right: 1vh;
}
.Shop_Line {
position: absolute;
width: 32vh;
height: 3.8vh;
display: flex;
top: 59.5vh;
left: 85vh;
border-radius: 0vh;
border-bottom-left-radius: 1vh;
border-bottom-right-radius: 1vh;
text-align: center;
background: linear-gradient(100deg, rgba(229, 187, 2, 0.257) 50%, rgba(229, 202, 78, 0.097) 40%);
border-left: 1vh;
border-right: 1vh;
z-index: 99;
}
.buy {
position: absolute;
width: 8vh;
height: 3vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
top: 60vh;
left: 108vh;
border-radius: 0.5vh;
background-color: #3f8351;
border: 1px solid #18a728;
text-shadow: 0px 1px 0px #2f6627;
font-weight: bold;
font-family: "Cairo", sans-serif;
font-size: 1.3vh;
color: #ffffff;
white-space: nowrap;
z-index: 9999;
}
.buy:hover{
    background-color: #0a8842cb;
}
.AllMoney{
position: absolute;
color: #ffffff;
font-weight: bold;
font-family: "Cairo", sans-serif;
font-size: 1.3vh;
color: #ffffff;
white-space: nowrap;
top: 60vh;
left: 86vh;
z-index: 9999;
}
.allcash {
position: absolute;
color: #ffffff;
font-weight: bold;
font-family: "Cairo", sans-serif;
font-size: 1.3vh;
color: #ffffff;
white-space: nowrap;
top: 60vh;
left: 92.5vh;
z-index: 9999;
}
.fort {
position: absolute;
top: 13vh;
width: 100%;
left: -0vh;
height: 3vh;
background: linear-gradient(100deg, rgba(255, 209, 2, 0.137) 50%, rgba(255, 209, 2, 0.137) 40%);
border-bottom-left-radius: 2vh;
border-bottom-right-radius: 2vh;
}
.Cash{
position: absolute;
font-weight: bold;
font-size: 1.3vh;
color: #ffffff;
top: 1.5vh;
font-family: "Cairo", sans-serif;
left: 10vh;
}
.CashIcon{
position: absolute;
font-weight: bold;
font-size: 1.3vh;
color: #ffffff;
top: 2vh;
left: 8vh;
}
.Bank{
position: absolute;
font-weight: bold;
font-family: "Cairo", sans-serif;
font-size: 1.3vh;
color: #ffffff;
top: 3.5vh;
left: 10vh;
}
.BankIcon{
position: absolute;
font-weight: bold;
font-size: 1.3vh;
color: #ffffff;
top: 4.1vh;
left: 8vh;
}
.searchIcon{
position: absolute;
font-weight: bold;
font-size: 1.3vh;
color: #ffffff;
top: 2vh;
left:80vh;
}
.Money {
width: 15vh;
position: relative;
font-family: "Cairo", sans-serif;
color: #1aca14;
font-size: 1.3vh;
font-weight: bold;
z-index: 10;
overflow: hidden;
margin-left: -1vh;
direction: rtl;
display: block;
}
.icon {
position: absolute;
left: 1vh;
top: 14vh;
z-index: 10;
width: 2vh;
height: 1.5vh;
}
.NamePanel {
position: absolute;
left: 6vh;
top: 13.2vh;
z-index: 10;
width: 2vh;
height: 2vh;
font-family: "Cairo", sans-serif;
color: #ffffff;
font-size: 1.5vh;
font-weight: bold;
white-space: nowrap;
}
.background {
position: absolute;
left: 3.5vh;
top: 2.5vh;
z-index: 10;
width: 8vh;
height: 7vh;
}
.Food {
position: relative;
left: 6.5vh;
top: 7vh;
z-index: 10;
width: 2vh;
height: 2vh;
font-family: "Cairo", sans-serif;
color: #ffffff;
font-size: 1.5vh;
font-weight: bold;
white-space: nowrap;
justify-content: center;
align-items: left;
text-align: left;
display: flex;
}




.HMDSec {
position: absolute;
height: 43vh;
top: 1vh;
width: 32vh;
left: -0vh;
overflow: hidden;
overflow-x: hidden;
overflow-y: auto;
}
.HMDSec::-webkit-scrollbar {
display: none;
}

.Cont {
position: relative;
display: inline-block;
margin: 01%;
width: 30vh;
height: 4vh;
background: rgba(105, 105, 105, 0.534);
border:0.2vh solid #ffffff ;
border-left: 1vh;
border-right: 1vh;
border-top: 1vh;
border-top-left-radius: 1vh;
border-top-right-radius: 1vh;
}

.Sorh {
position: absolute;
left: 24vh;
top: 0vh;
z-index: 10;
width: 5vh;
height: 4vh;
}
.ShopFood {
position: relative;
left: 19vh;
top: 0.8vh;
z-index: 10;
width: 2vh;
height: 2vh;
font-family: "Cairo", sans-serif;
color: #ffffff;
font-size: 1.3vh;
font-weight: bold;
white-space: nowrap;
justify-content: center;
align-items: left;
text-align: left;
display: flex;
}  
.ShopMoney {
position: relative;
left: 14vh;
top: -1vh;
z-index: 10;
width: 2vh;
height: 2vh;
font-family: "Cairo", sans-serif;
color: #fd0101;
font-size: 1.3vh;
font-weight: bold;
white-space: nowrap;
justify-content: center;
align-items: left;
text-align: left;
display: flex;
}
.delete{
position: absolute;
left: 1vh;
top: 0.7vh;
z-index: 10;
}
.delete:hover{
cursor: pointer;
}
.counter {
position: absolute;
display: flex;
font-size: 2.4vh;
left: 1vh;
top: 0vh;
}
.salb {
position: absolute;
width: 3.5vh;
height: 3vh;
align-items: center;
justify-content: center;
border: none;
font-size: 2.4vh;
color: #ff1100;
user-select: none;
top: -0.5vh;
left: 1.5vh;
z-index: 999;

}
.salb:hover {
  cursor: pointer;
}
.mojb {
position: absolute;
width: 3.5vh;
height: 3.5vh;
display: flex;
align-items: center;
justify-content: center;
border: none;
font-size: 2.4vh;
color: #c3ff36;
user-select: none;
top: -0.5vh;
left: 7vh;
z-index: 999;
}
.mojb:hover {
  cursor: pointer;
}
.value {
position: absolute;
width: 3vh;
text-align: center;
color: #ffffff;
font-size: 1.5vh;
top: 0.3vh;
left: 4.2vh;
z-index: 999;
}   
.backgroundsalb{
position: absolute;
width: 8vh;
height: 2.5vh;
top: 0.1vh;
left: 2vh;
border-radius: 0.5vh;
text-align: center;
background: rgba(255, 255, 255, 0.363);
}