.card-shadow {box-shadow: 4px 2px 4px -1px #181717;}

.xbg-black {
    background: linear-gradient(45deg, black, #191919e8);
}

.footer__contact__item {

    color: white;
}
.las i {
    color: white;
}

.faq__content p {
    color: #ffffff;
    font-size: 1.2rem;
}

.faq__title .title {
    color: #ded9d9;
}

.banner-title {
    color: white;
}

.banner-text {
    color: white;
}

.meta__item {
    color: white;
}

.predict-type-item .title {
    color: white;
}


.pools h5 {
    font-size: 15px;
    margin-bottom: 10px;

}

.pools h4 {
    color: #282828;
}
.pools p {
    color: white;
}
.table td {
    /*! color: white; */
}
.table tr td:last-child {
    /*! text-align: right; */
}

.card img {
    height: 270px;
}

@media (max-width: 480px) {
    .card img {
        height: 200px;
    }
}



.xnav .nav-link {
    color: beige;
}
.xnav .nav-link:hover {
    color: #eae1bc;
}

.nav-active {
    color: #35d77c !important;
}

.text-gold {
    color: #e0b715;
}

/* Define color variables with color names */
:root {
    --color-dark-blue: #13213B;
    --color-blue: #07288C;
    --color-light-blue: #ADB8D9;
    --color-light-gold: #F2EBD5;
    --color-gold: #F2D479;
    --color-dark-gold: #f9e28f;
  }
  
  /* Text color classes */
  .x-text-dark-blue {
    color: var(--color-dark-blue);
  }
  
  .x-text-blue {
    color: var(--color-blue);
  }
  
  .x-text-light-blue {
    color: var(--color-light-blue);
  }
  
  .x-text-light-gold {
    color: var(--color-light-gold);
  }
  
  .x-text-gold {
    color: var(--color-gold);
  }
  
  .x-text-dark-gold {
    color: var(--color-dark-gold);
  }
  
  /* Background color classes */
  .x-bg-dark-blue {
    background-color: #121111;
  }
  
  .x-bg-blue {
    background-color: var(--color-blue);
  }
  
  .x-bg-light-blue {
    background-color: var(--color-light-blue);
  }
  
  .x-bg-light-gold {
    background-color: var(--color-light-gold);
  }
  
  .x-bg-gold {
    background-color: var(--color-gold);
  }
  
  .x-bg-dark-gold {
    background-color: var(--color-dark-gold);
  }
  
  /* Button classes */
  .x-btn {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 4px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  /* Transparent button classes */
  .x-btn-transparent {
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff;
  }
  
  /* Hover effects for buttons */
  .x-btn-dark-blue:hover {
    background-color: var(--color-dark-blue);
  }
  
  .x-btn-blue:hover {
    background-color: var(--color-blue);
  }
  
  .x-btn-light-blue:hover {
    background-color: var(--color-light-blue);
  }
  
  .x-btn-light-gold:hover {
    background-color: var(--color-light-gold);
  }
  
  .x-btn-gold:hover {
    background-color: var(--color-gold);
  }
  
  .x-btn-dark-gold:hover {
    background-color: var(--color-dark-gold);
  }

  .x-feature-img {
    width: 100%;
    max-width: 350px;
  }

  .progress-title{
    font-size: 18px;
    font-weight: 700;
    color: #000;
    margin: 0 0 10px;
}
.progress-outer{
    background: #fff;
    padding: 5px 60px 5px 5px;
    border: 2px solid #ffda6b;
    border-radius: 10px;
    margin-bottom: 20px;
    position: relative;
}
.progress{
    background: #bebfbf;
    border-radius: 20px;
    margin: 0;
}
.progress .progress-bar{
    border-radius: 20px;
    box-shadow: none;
    animation: animate-positive 2s;
}
.progress .progress-value{
    font-size: 15px;
    font-weight: 700;
    color: #6b7880;
    position: absolute;
    top: 3px;
    right: 10px;
}

@keyframes animate-positive{
    0%{ width: 0; }
}

.x-footer {
  bottom: 0px;
  width: 100%;
}

@media (max-width: 480px) {
  .x-footer {
    /*! position: fixed; */
  }
}

.box {
  width: 100%;
  height: 100%;
  display: table-row;
}




.x-loading {
  display: flex;
}
.x-loading .dot {
  position: relative;
  width: 2em;
  height: 2em;
  margin: 0.8em;
  border-radius: 50%;
}
.x-loading .dot::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  animation: wave 2s ease-out infinite;
}
.x-loading .dot:nth-child(1) {
  background: #7ef9ff;
}
.x-loading .dot:nth-child(1)::before {
  animation-delay: 0.2s;
}
.x-loading .dot:nth-child(2) {
  background: #89cff0;
}
.x-loading .dot:nth-child(2)::before {
  animation-delay: 0.4s;
}
.x-loading .dot:nth-child(3) {
  background: #4682b4;
}
.x-loading .dot:nth-child(3)::before {
  animation-delay: 0.6s;
}
.x-loading .dot:nth-child(4) {
  background: #0f52ba;
}
.x-loading .dot:nth-child(4)::before {
  animation-delay: 0.8s;
}
.x-loading .dot:nth-child(5) {
  background: #000080;
}
.x-loading .dot:nth-child(5)::before {
  animation-delay: 1s;
}
@keyframes wave {
  50%, 75% {
    transform: scale(2.5);
  }
  80%, 100% {
    opacity: 0;
  }
}


.pools h5 {
  font-size: 10px;
  margin-bottom: 10px;

}
.table td {
  color: white;
}
.table tr td:last-child {
  /*text-align: right;*/
}
.badge {
  font-size: 11px;
}

.trend-img {
  width: 16px;
  height: 16px !important;
  padding-left: 2px;
}
.a-price {
  font-size: 0.75rem;
}
.a-pair {
  font-size: 0.8rem;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  color: #495057;
  background-color: #f5f6f9;
  border-color: #dee2e6 #dee2e6 #fff;
  color: #020202;
}
.nav-tabs {
  border-bottom: 4px solid #13213b;
}


.x-bg-apex {
  background: linear-gradient(rgba(148, 39, 179, 0.88), rgb(88, 68, 185));
}


.x-text-apex {
  color: #f9e28f;
}

.x-text-shadow {
  text-shadow: 2px 2px 0px black;
}


.text-right {
  text-align: right;
}
.text-left {
  text-align: left;
}


.usdt {
  font-size: 1rem;
color: #78d778;
}





/*Custom ScrollBars*/

.scrollbar {
  /*height: 300px;*/
  width: 50%;
  overflow: auto;
  padding: 0 10px;
}
/*       ScrollBar 1        */

#scrollbar1::-webkit-scrollbar {
  width: 10px;
}

#scrollbar1::-webkit-scrollbar-track {
  border-radius: 8px;
  background-color: #e7e7e7;
  border: 1px solid #cacaca;
}

#scrollbar1::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: #d55959;
}
/*       ScrollBar 2        */

#scrollbar2::-webkit-scrollbar {
  width: 12px;
}

#scrollbar2::-webkit-scrollbar-track {
  border-radius: 8px;
  background-color: #e7e7e7;
  border: 1px solid #cacaca;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}

#scrollbar2::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: #363636;
}
/*        ScrollBar 3    */

#scrollbar3::-webkit-scrollbar {
  width: 12px;
}

#scrollbar3::-webkit-scrollbar-track {
  background-color: #e7e7e7;
  border: 1px solid #cacaca;
}

#scrollbar3::-webkit-scrollbar-thumb {
  background-color: #060b9a;
}
/*        ScrollBar 4    */

#scrollbar4::-webkit-scrollbar {
  width: 12px;
}

#scrollbar4::-webkit-scrollbar-track {
  background-color: transparent;
  border: 1.5px solid #7e7e7e;
  border-radius: 8px;
}

#scrollbar4::-webkit-scrollbar-thumb {
  background-color: #f1f1f1;
  border: 2px solid #616161;
  border-radius: 8px;
}
/*        ScrollBar 5    */

#scrollbar5::-webkit-scrollbar {
  background-color: #000;
  width: 12px;
  border-radius: 10px;
}

#scrollbar5::-webkit-scrollbar-track {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
}

#scrollbar5::-webkit-scrollbar-thumb {
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(.5, #a520ca), color-stop(1, #2681cc));
  border-radius: 10px;
}
/*       ScrollBar 6        */

#scrollbar6::-webkit-scrollbar {
  width: 12px;
}

#scrollbar6::-webkit-scrollbar-track {
  border-radius: 8px;
  background-color: #95a5a6;
  border: 1px solid #cacaca;
}

#scrollbar6::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: #2c3e50;
}

.font-xs {
  font-size: 0.7rem;
}

       /* VARIABLES */
       :root {
        --bg-color: #424242;
        --hl-color: #2196F3;
        --muted-color: rgba(255, 255, 255, 0.7);
        --trans-time: 300ms;
        --width: 320px;
      }
      
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }
      
      /* Remove autofill background styles */
      input:-webkit-autofill,
      textarea:-webkit-autofill {
        background-color: transparent !important;
        transition: background-color 5000s ease-in-out 0s;
        -webkit-text-fill-color: var(--muted-color) !important; /* Ensure text color remains consistent */
      }
      
      input:-webkit-autofill:focus,
      textarea:-webkit-autofill:focus {
        background-color: transparent !important;
      }
      
      
      .group {
        position: relative;
        margin: 45px 0;
      }
      
      /* INPUTS */
      .group textarea {
        resize: none;
      }
      
      .group input,
      textarea {
        background: none;
        color: var(--muted-color);
        font-size: 18px;
        padding: 10px 10px 10px 5px;
        display: block;
        width: 100%;
        border: none;
        border-radius: 0;
        border-bottom: 1px solid var(--muted-color);
      }
      
      .group input:focus,
      textarea:focus {
        outline: none;
      }
      
      .group input:focus ~ label,
      textarea:focus ~ label,
      input:valid ~ label,
      input:invalid ~ label,
      textarea:valid ~ label,
      textarea:invalid ~ label,
      input:-webkit-autofill ~ label {
        top: -14px;
        font-size: 12px;
        color: var(--color-dark-gold);
      }
      
      .group input:focus ~ .bar::before,
      textarea:focus ~ .bar::before {
        width: 100%;
      }
      
      .group input[type="password"] {
        letter-spacing: 0.3em;
      }
      
      .group label {
        color: var(--muted-color);
        font-size: 16px;
        font-weight: normal;
        position: absolute;
        pointer-events: none;
        left: 5px;
        top: 10px;
        transition: var(--trans-time) ease all;
      }
      
      .group .bar {
        position: relative;
        display: block;
        width: 100%;
      }
      
      .group .bar::before {
        content: '';
        height: 2px;
        width: 0;
        bottom: 0;
        position: absolute;
        background: var(--hl-color);
        transition: var(--trans-time) ease all;
        left: 0;
      }