* {
      margin: 0;
      padding: 0;
      font-family: Tajawal, sans-serif;
      transition: 0.5 all;
    }

    
    .panel {
      position: absolute;
      font-family: 'Tajawal', sans-serif;
      width: 1100px;
      height: 765px;
      display: none;
      left: 365px;
      margin-top: 139px;
      border-radius: 38px;
      background-image: linear-gradient(133.84deg, #530000 -16.05%, #440202 9.35%, #610000 35.02%, #610000 65.05%, #440202 85.45%, #530000 111.11%);
      border: rgb(25, 25, 25) solid 6px;
      cursor: all-scroll;
    }


    .avatar {
      width: 2.8vw;
      height: 2.8vw;
      margin-left: 53vw;
      margin-top: 0.6vw;
      position: absolute;
      background-image: url();
      background-repeat: no-repeat;
      background-size: cover;
      border-radius: 50vw;
      border: rgb(25, 25, 25) solid 2px;
      cursor: pointer;
    }


    .cash {
      position: absolute;
      margin-left: 48.5vw;
      top: 42px;
      height: 300px;
      font-size: 16px;
      font-family: 'Tajawal', sans-serif;
      font-weight: bold;
      color: #ffffff;
    }

    
    .bank {
      position: absolute;
      margin-left: 48.5vw;
      top: 22px;
      height: 300px;
      font-size: 16px;
      font-family: 'Tajawal', sans-serif;
      font-weight: bold;
     color: #ffffff;
    }


    .close {
      width: 1.8vw;
      height: 1.8vw;
      margin-left: 1.2vw;
      margin-top: 0.8vw;
      position: absolute;
      background-image: url("https://cdn-icons-png.flaticon.com/128/463/463612.png");
      background-repeat: no-repeat;
      background-size: cover;
      border-radius: 30vw;
      cursor: pointer;
    }


    .hid {
      position: relative;
      display: inline-block;
      margin-right: 2%;
      margin-bottom: 2%;
      width: 240px;
      height: 225px;
      top: 50px;
      left: 25px;
      border: hsl(0, 0%, 100%) solid 1px;
      background-image: linear-gradient(133.84deg, #444444 -16.05%, #252525 9.35%, #2A2A2A 35.02%, #2A2A2A 65.05%, #252525 85.45%, #444444 111.11%);
      border-radius: 1.1875pc;
      padding: 0%;
    }


    .button {
      position: absolute;
      width: 200px;
      height: 40px;
      top: 172px;
      left: 20px;
      background: rgb(25, 25, 25);
      border: rgb(0, 0, 0) solid 1px;
      border-radius: 10px;
      font-size: 25px;
      font-family: 'Tajawal', sans-serif;
      color: rgb(255, 255, 255);
      cursor: pointer;
      transition: 0.1s all;
    }

    
    .button:hover,
    .button:focus {
      transform: scale(0.94);
    }

    .img {
      width: 11vw;
      height: 6vw;
      border-radius: 10%;
      margin-left: 0.7vw;
      margin-top: 5.5%;
      position: absolute;
      background-repeat: no-repeat;
      background-size: cover;
      background-image: linear-gradient(133.84deg, #444444 -16.05%, #252525 9.35%, #2A2A2A 35.02%, #2A2A2A 65.05%, #252525 85.45%, #444444 111.11%);
      border: hsl(0, 0%, 100%) solid 1px;
    }

    #scrol {
      height: 680px;
      margin-top: 76px;
      overflow: scroll;

    }

    ::-webkit-scrollbar {
      display: none;
    }


    .text {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 305px;
      font-size: 20px;
      font-family: 'Tajawal', sans-serif;
      font-weight: bold;
      color: white;
    }


    .ServerName {
      position: absolute;
      left: 425px;
      top: 5px;
      height: 67px;
      color: white;
      font-size: 30px;
      font-weight: bold;
      font-family: 'Noto Kufi Arabic', sans-serif;
    }


    #color {
      position: absolute;
      left: 50px;
      top: 75px;
      width: 150px;
      height: 50px;
      border-radius: 6px;
      background-color: rgb(20, 18, 18);
      border: rgba(122, 86, 177, 255) 2px solid;
      box-shadow: rgba(122, 86, 177, 255) 0px 0em 1em 2px;
      cursor: pointer;
      transition: 0.5s all;
    }

    #color:hover,
    #color:focus {
      transform: scale(0.93);
    }
    

    .text2 {
    text-align: center;
    margin-top: 8px;
    }

    .exit {
    margin-left: 210px;
    margin-top: -20px;
    font-size: 20px;
    color: rgb(20, 18, 18);
    cursor: pointer;
    }


    .profile {
      display: none;
      position: absolute;
      background-color: red;
      width: 25vh;
      height: 39vh;
      top: 22%;
      left: 400px;
      border-radius: 20px;
      background: #0a0a0a25;
      box-shadow: #ffffff 0px 0em 1em 2px;
      border: #ffffff solid 2px;
      text-align: center;
      color: white;
      font-weight: bold;
    }


  
    .banner {
      width: 25vh;
      height: 9vh;
      border-radius: 2.2ch 2.2ch 0 0;
      position: absolute;
      background-image: url(https://cdn.discordapp.com/attachments/857714065710776320/1180941705827065866/bb29e8570e47812edf3f82a6f088453c.jpg?ex=65887b2b&is=6576062b&hm=104d021cf1e86c5a5ae57b53733447fa8096be080e35af39d7b90e9a8bc17c26&);
      background-repeat: no-repeat;
      background-size: cover;
      box-shadow: #7b5c94 0px 0em 1em 2px;
      border: #7b5c94 solid 1px;
    }


    .avatar2 {
      width: 3.5vw;
      height: 3.5vw;
      margin-left: 1vw;
      margin-top: 3vw;
      position: absolute;
      background-image: url(https://cdn.discordapp.com/avatars/756557212876406864/55c3750e2e72111369d79c2dd1660ca0.png?size=1024);
      background-repeat: no-repeat;
      background-size: cover;
      border-radius: 50vw;

    }


    .info_panel {
    text-align: center;
    left: 3.3%;
    top: 35%;
    width: 23.3vh;
    height: 24vh;
    border-radius: 1.2ch
}


    
    .player_name {
      position: absolute;
      left: 10px;
      top: 28px;
      height: 400px;
      font-size: 12px;
      font-family: 'Tajawal', sans-serif;
      color: white;
    }


    .ht4 {
      position: absolute;
      top: 55px;
      width: 100%;
      height: 1px;
      background: linear-gradient(to right, #0a0a0a25, #ffffff 50%, #0a0a0a25 100%);
    }


    .cash2 {
      text-align: center;
      margin-top: 80px;
      height: 400px;
      font-size: 15px;
      font-family: 'Tajawal', sans-serif;
      color: white;
    }

    .Bank2 {
      text-align: center;
      margin-top: -360px;
      height: 400px;
      font-size: 15px;
      font-family: 'Tajawal', sans-serif;
      color: white;
    }

    .role {
      text-align: center;
     margin-top: -355px;
      font-size: 15px;
      font-family: 'Tajawal', sans-serif;
      color:white;
    }

    
    .ht5 {
      position: absolute;
      top: 215px;
      width: 100%;
      height: 1px;
      background: linear-gradient(to right, #ffffff25, #ffffff 50%, #ffffff25 100%);
    }

    .close2 {
      width: 1.6vw;
      height: 1.6vw;
      margin-left: 6vw;
      margin-top: 1.8vw;
      position: absolute;
      background-image: url();
      background-repeat: no-repeat;
      background-size: cover;
      border-radius: 30vw;
      cursor: pointer;
    }
   
    .msg{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 220px;
   }

   .msg span{
    color: white;
    font-size: 40px;
    font-weight: bold;
    text-shadow: 2px 7px 5px rgba(0, 0, 0, .3), 0 -4px 10px rgba(255, 255, 255, .3);
    }