*{
    font-family: poppins;
}
body{
    background-color: black;
    overflow-x: hidden;
}
#main-container{
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

header{
    display: flex;
    justify-content: space-between;
    height: 7rem;
    padding: 0px;
    margin: 0px;
}
header h1{
    margin-bottom: 0px;
    width: fit-content;
}
header p{
    margin-left: 1.2rem;
}

header div{
   color: #87CEEB;
    padding: 0px;
    margin: 0px;
}
#telgramContainer{
    display: none;
}

#close-requestBtn{
    cursor: pointer;
    font-size: 20px;
    background-color: rgb(62, 60, 60);
    border-radius: 10px;
    margin-top: 10px;
    border: 1px solid #87CEEB;
    width: fit-content;
    padding: 10px;
    font-weight: 900;
}
.fa-bell{
    font-size: 30px;
}
.switch {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 34px;;
    }

    /* Hide the default checkbox */
    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    /* Slider (the visible part) */
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      transition: 0.4s;
      border-radius: 34px;
    }

    /* The circle inside the slider */
    .slider::before {
      position: absolute;
      content: "";
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      transition: 0.4s;
      border-radius: 50%;
    }

    /* When checked */
    input:checked + .slider {
      background-color: #87CEEB; /* green */
    }

    input:checked + .slider::before {
      transform: translateX(26px);
    }
header #header-div2{
    margin-top: 2rem;
    margin-right: 1rem;
}

#container{
    width: 100%;
    padding: 0px;
    margin: 0px;
    display: flex;
    justify-content: center;
    color: white;
    margin-top: 40px;
}

#container form{
    flex-direction: column;
    display: flex;
    background-color: rgb(10, 10, 10);
    border-radius: 10px;
    height: fit-content;
    width: 70rem;
    padding: 20px;
}

form input{
    background-color: rgb(71, 63, 63);
    height: 3rem;
    margin-bottom: 20px;
    border-radius: 7px;
    border: none;
    color: white;
    padding: 4px;
}
form p{
    margin-bottom: 10px;
}
input::placeholder{
    color: white;
    padding: 10px;
}
form button{
    height: 3.4rem;
    font-size: 17px;
    margin-bottom: 20px;
    border: none;
    border-radius: 7px;
    background-color: #87CEEB;
    cursor: pointer;
}
form button i{
    margin-right: 10px;
}

#heading{
    color: #87CEEB;
    margin: 0px;
}

#login-form{
    width: 25rem;
    border: 1px solid black;
    padding: 10px;
    flex-direction: column;
    display: flex;
    align-items: center;
}

.user-info{
    width: 20rem;
    margin-bottom: 15px;
    height: 1.1rem;
    padding: 10px;
    margin-bottom: 20px;
}

#login-btn{
    width: 21.5rem;
    height: 2.5rem;
    background-color: #87CEEB;
    border: none;
    cursor: pointer;
    margin-bottom: 10p;
}

#trackerForm{
    width: 30rem;
    border: 1px solid black;
    height: fit-content;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#wallet , #telegram{
    width: 25rem;
    margin-bottom: 15px;
    height: 1.5rem;
    padding: 10px;
}

#main-heading{
    margin-bottom: 0px;
    width: fit-content;
    height: fit-content;
}

#sunmit-btn{
    width: 26.5rem;
    height: 2.5rem;
    background-color: #87CEEB;
    border: none;
    cursor: pointer;
}

#data-container{
    display: flex;
    height: fit-content;
    justify-content: center;
    width: 100%;
    color: white;
    padding: 20px;
    overflow-x: hidden;
    gap: 50px;
}

#telgramContainer input{
    width: 80%;
    margin-top: 10px;
}
#connect-Btn{
    cursor: pointer;
    background-color: #87CEEB;
    padding: 13px;
    width: 77%;
    border-radius: 6px;
    text-align: center;
}
.data-divs{
    width: 45%;
    box-shadow: -1px 2px 5px 10px rgba(0,0,0,0.2);
   -webkit-box-shadow: -1px 2px 5px 10px rgba(0,0,0,0.2);
   -moz-box-shadow: -1px 2px 5px 10px rgba(0,0,0,0.2);
    border-radius: 10px;
    height: fit-content;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgb(10, 10, 10);
    padding-bottom: 20px;
}

#msg{
    color: white;
    display: none;
    width: 97%;
    text-align: center;
    height: 2rem;
    padding: 10px;
    border-radius: 10px;
    position: fixed;
    font-size: 20px;
    background: rgba(97, 135, 97, 0.4); /* green asi ine transparency */
    backdrop-filter: blur(1px);       /* inopa glass effect */
    -webkit-backdrop-filter: blur(6px); /* Safari support */
    border: 1px solid rgba(255, 255, 255, 0.3);
    margin-top: 1rem;
    transition: opacity .3s ease;
}

.name{
    cursor: pointer;
    color: grey;
}

#wallet-container{
    overflow-y: scroll;
    height: 25rem;
    scrollbar-width: thin;
    scrollbar-color:  #212020 #111;
}

#wallet-container::-webkit-scrollbar{
    width: 1px;
}

.wallet-data2{
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
    width: 25rem;
    margin-top: 10px;
    margin-bottom: 20px;
    background-color: rgb(15, 14, 14);
    border-radius: 10px;
    padding: 5px;
}

hr{
    width: 30rem;
    height: 2px;
    border: none;
    background-color: rgb(68, 54, 54);
}

.wallet-you-track{
    background-color: rgb(15, 14, 14);
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    cursor: pointer;
}

#wallet-address-you-track{
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color:  #212020 #111;
    height: 29rem;
    width: fit-content;
}

#totalWalletValue{
    color: rgb(191, 240, 191);
    font-weight: 800;
}
.data-divs h3{
    margin-bottom: 5px;
    font-size: 25px;
}

#wallet-address-numbers{
    color: white;
}

#total-data-div{
    display: flex;
    width: 100%;
    padding: 2px;
    margin-top: 10px;
}

#pnl{
    color: green;
}
#total-data-div div{
    width: 50%;
    background-color: rgb(19, 18, 18);
}
#chart-div{
    width: 14rem;
    margin-top: 20px;
}

#chart-div i{
    position: absolute;
    top: 119%;
    font-size: 35px;
    margin-left: -15.5px;
}
.chartStats{
    width: 100%;
    height: fit-content;
    overflow-y: scroll;
}

#chart-data{
    display: flex;
    width: 100%;
    height: fit-content;
    margin-bottom: 10px;
    justify-content: space-between;
    padding: 0;
}
#chart-data div{
    width: 25%;
    padding: 0;
    border: 1px solid red;
}
#chart-div div span,p{
    padding: 0;
    margin: 0;
}
#no-available-data-el , #no-available-data-el2{
    box-sizing: border-box;
    width: 100%;
    margin-top: 80px;
    padding: 20px;
}
.chartStats::-webkit-scrollbar{
    display: none;
}

#chart-div-container{
    color: white;
    display: flex;
    flex-direction: column; 
    align-items: center;  
    justify-content: center;
    height: 100vh; 
    width: 100%;
    height: fit-content;
}

#chart-div-container div{
    width: 90%;
    background-color: rgb(15, 14, 14);
    border-radius: 10px;
}

#checkUnknown{
    color: white;
    text-align: center;
}

#chart-search{
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    height: fit-content;
}
#chart-search button{
    background-color: #87CEEB;
    border: none;
    height: 3rem;
    margin-left: 5px;
    width: 8.4rem;
    border-radius: 5px;
    font-size: 15px;
    cursor: pointer;
}

#chart-search input{
    background-color: rgb(71, 63, 63);
    border: none;
    width: 85%;
    border-radius: 5px;
    height: 2rem;
    padding: 10px;
}

#coin-data{
    margin-top: 5px;
    margin-bottom: 15px;
    height: fit-content;
    width: 100%;
    display: flex;
    padding: 10px;
}

#coin-data div{
    width: 100%;
    padding: 10px;
}

#coin-div1{
    display: flex;
    margin-top: 0;
}
#coin-div1 div{
    width: fit-content;
}
#coin-div1 i{
    background-color: rgb(71, 63, 63);
    width: 50px;
    height: 50px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 27px;
}
#coin-div2{
    display: flex;
    flex-direction: column;  
    justify-content: flex-end;
    align-items: flex-end;                   
    gap: 0.25rem ;  
    padding-right: 40px;
}

#trading-view-container{
    padding: 10px;
}

#tradingview-chart{
    box-sizing: border-box;
    background-color: red;
    width: 100%;
    height: 10rem;
}

/*Loading animation to show progress when fetching data*/

#loader-div{
    width: 97vw;
    position: absolute;
    overflow-x: hidden;
    height: 100vh;
    align-items: center;
    display: none;
    justify-content: center;
    background: rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 4px 2px rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
}

.glass-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8),
    transparent,
    rgba(255, 255, 255, 0.3)
  );
}
.loader {
  width: 22px;
  height: 22px;
  aspect-ratio: 3;
  border-radius: 50%;
  background: #F10C49;
  animation: l10 1.5s infinite linear;
}

@keyframes l10 {
  0%    {box-shadow: 
          0 -30px #F4DD51, calc(30px*0.707) calc(-30px*0.707) #E3AAD6,30px 0 #F4DD51, 0 0 #E3AAD6,
          0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
  12.5% {box-shadow: 
          0 0 #F4DD51, calc(30px*0.707) calc(-30px*0.707) #E3AAD6,30px 0 #F4DD51, calc(30px*0.707) calc(30px*0.707) #E3AAD6,
          0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
  25%   {box-shadow: 
          0 0 #F4DD51, 0 0 #E3AAD6,30px 0 #F4DD51, calc(30px*0.707) calc(30px*0.707) #E3AAD6,
          0 30px #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
  37.5% {box-shadow: 
          0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, calc(30px*0.707) calc(30px*0.707) #E3AAD6,
          0 30px #F4DD51, calc(-30px*0.707) calc(30px*0.707) #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
  50%   {box-shadow: 
          0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
          0 30px #F4DD51, calc(-30px*0.707) calc(30px*0.707) #E3AAD6,-30px 0 #F4DD51, 0 0 #E3AAD6}
  62.5% {box-shadow: 
          0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
          0 0 #F4DD51, calc(-30px*0.707) calc(30px*0.707) #E3AAD6,-30px 0 #F4DD51, calc(-30px*0.707) calc(-30px*0.707) #E3AAD6}
  75%   {box-shadow: 
          0 -30px #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
          0 0 #F4DD51, 0 0 #E3AAD6,-30px 0 #F4DD51, calc(-30px*0.707) calc(-30px*0.707) #E3AAD6}
  87.5% {box-shadow: 
          0 -30px #F4DD51, calc(30px*0.707) calc(-30px*0.707) #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
          0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, calc(-30px*0.707) calc(-30px*0.707) #E3AAD6}
  100%  {box-shadow: 
          0 -30px #F4DD51, calc(30px*0.707) calc(-30px*0.707) #E3AAD6,30px 0 #F4DD51, 0 0 #E3AAD6,
          0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}

}
#fetching-Data{
    color: white;
    font-size: 30px;
}
@media (max-width: 1024px) {
  #data-container {
    display: flex;
    flex-direction: column;
    padding: 0px;
    width: 100%;
  }
  u{
    display: none;
  }
  .fa-otter{
    font-size: 50px;
    margin-left: 10px;
    margin-top: 10px;
  }
  .fa-bell{
    font-size: 40px;
    margin-top: 0px;
  }
  .button{
    font-size: 25px;
    margin-top: 80px;
  }
  #toggleSwitch{
    margin-top: 32px;
  }
  .data-divs{
    width: 100%;
  }
  #wallet-container{
    width: 100%;
    padding: 10px;
  }
  .wallet-data2{
    width: 100%;
    padding: 10px;
  }
  hr{
    width: 90vw;
  }
  #header-div1 p{
    display: none;
  }
  #telgramContainer{
    width: 90%;
  }
}
u{
    text-decoration: none;
}