.card-custom {
  background-color: #1f1f1f;
  border: none;
  border-radius: 8px;
  margin-bottom: 2px;
  padding: 20px;
  color: white;
}

.progress {
  height: 8px;
  background-color: #2e2e2e;
}

.progress-bar {
  background-color: #fcd535;
}

.btn-yellow {
  background-color: #fcd535;
  color: black;
  font-weight: 500;
}

.btn-yellow:hover {
  background-color: #e6c422;
}

.label-red {
  color: #ff4d4f;
  font-weight: bold;
}

.section-title {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
  border-bottom: 1px solid #333;
  padding-bottom: 5px;
}

.myaccount-page-image {
  position: relative;
}

.myaccount-page-profile {
  width: 80px;
}

.myaccount-page-edit {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 20px;
}

@media (max-width:986px) {
  .card-custom {
    padding: 5px;
  }

  .card-custom .d-flex {
    gap: 10px !important;
  }
}


@media (max-width:786px) {
  .myaccount-page-profile {
    width: 60px;
  }
}

@media (max-width:486px) {
  .card-custom .d-flex div {
    font-size: 14px;
  }
}

.myaccount-page {
  background-color: #181A20 !important;
}

.myaccount-page .container-fluid {
  padding-right: 2px !important;
  padding-left: 2px !important;
}

.myaccount-page .myaccount-sidebar .nav {
  gap: 20px
}

.myaccount-page .myaccount-page-content .nav-item .dropdown-toggle {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-block: 20px;
  align-items: center;
  font-size: 20px;
}


 /* ----------------------------- */
 .myaccount-marget-page-container{
    margin-inline: 20px;
 }
 .market-title {
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 20px;
    }

    .market-title span {
      color: white;
    }

    .myaccount-page-content-card {
      background-color: #000 !important;
      border: none;
      border-radius: 1rem !important;
      padding: 15px;
    }

    .myaccount-page-content-card-title {
      font-size: 14px;
      color: white !important;
    }

    .myaccount-page-content-card .myaccount-page-content-more-link {
      font-size: 13px;
      color: #999;
      float: right;
    }

    .myaccount-page-content-coin-list span {
      display: flex;
      gap: 10px;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 5px;
      font-size: 14px;
    }
        .myaccount-page-content-coin-list span span{
            flex:1 1 0%;
        }

    .myaccount-page-content-coin-name {
      font-weight: 600;
      color: #fff;
    }
.myaccount-page-content-coin-name img{
    width: 30px;
}
    .myaccount-page-content-coin-value {
      color: #ccc;
      margin-left: 5px;
    }

    .coin-change {
      float: right;
      font-weight: 500;
    }

    .down {
      color: #e63946;
    }

    .up {
      color: #06d6a0;
    }

    .chart-card {
      text-align: center;
      font-size: 13px;
    }
    .more-link{
        text-decoration: none;
    }

    .chart {
      width: 100%;
      height: 60px;
      background: linear-gradient(to right, #00f5c966, #00c2ff66);
      margin: 10px 0;
      border-radius: 6px;
    }

    .table-dark {
      background-color: #1c1c1c;
      border-radius: 12px;
      overflow: hidden;
    }

    .table-dark thead th {
      color: #aaa;
      font-size: 13px;
      background-color: #1c1c1c;
    }

    .table-dark tbody td {
      color: #ddd;
      font-size: 14px;
      vertical-align: middle;
    }

    .table-dark tbody tr {
      border-bottom: 1px solid #333;
    }

    .coin-icon {
      width: 20px;
      height: 20px;
      margin-right: 6px;
    }

    .market-section {
      margin-bottom: 30px;
    }

      .myaccount-page-content-crypto-card{
      height: 141px;
      background-color: #000 !important;
      padding: 10px;
      color: white;
      position: relative;
      box-shadow: 0 0 10px #00ccff22;
      border-radius: 0.5rem;
      font-family: Arial, sans-serif;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .crypto-card-content{
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .pair-title {
      font-size: 1.1rem;
      font-weight: bold;
    }

    .pair-price {
      color: #00ff00;
      font-size: 1rem;
    }

    .pair-change {
      color: #ff4c4c;
      font-size: 0.85rem;
    }

    .pair-change .red {
      color: #ff4c4c;
    }

    .pair-volume {
      color: #999;
      font-size: 0.85rem;
    }

    .pair-volume .light {
      color: #ccc;
    }

    .sparkline {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 100px;
      height: 50px;
    }

    .sparkline canvas {
      width: 100% !important;
      height: 100% !important;
    }
    .myaccount-page-content-table-responsive{
        background-color: #000 !important;
        padding:10px;
    }
  
    .myaccount-page-content-table-responsive tr{
            text-align: center;
        }
    .myaccount-page-content-table-responsive table{
         background-color: #000 !important;
         width: 100% !important;
    }
   
     
    .myaccount-page-content-table-responsive tr{
        padding:10px 20px !important;
        height: 50px;
        padding-left: 20px;
        color:white;
        border-bottom: 1px solid rgba(255, 255, 255, 0.404);
    }

      /* Mobile Market Cards */
    .myaccount-page-content-mobile-market-cards {
      display: none;
    }

    .myaccount-page-content-market-card {
      background-color: #1c1c1c;
      padding: 15px;
      border-radius: 10px;
      margin-bottom: 15px;
      box-shadow: 0 0 8px rgba(0, 204, 255, 0.15);
      color: #ddd;
      font-size: 14px;
    }

    .myaccount-page-content-market-card div {
      margin-bottom: 6px;
    }

    .myaccount-page-content-market-card strong {
      color: #aaa;
      margin-right: 4px;
    }

    .myaccount-page-content-market-card .coin-icon {
      width: 18px;
      height: 18px;
      vertical-align: middle;
      margin-left: 4px;
    }

    /* Responsive behavior */
    @media (max-width: 768px) {
      .myaccount-page-content-table-responsive {
        display: none;
      }

      .myaccount-page-content-mobile-market-cards {
        display: block;
      }
    }

    @media (min-width: 769px) {
      .myaccount-page-content-mobile-market-cards {
        display: none;
      }
    }