* {
  box-sizing: border-box;
}

body,
html {
  height: 100%;
  margin: 0;  
  padding: 0;
}
:root {
  --secondary-color: rgba(11, 13, 25, 1);
  --label-color: rgba(229, 231, 235, 1);
  --accent-olor: rgb(28, 100, 242);
}
@font-face {
  font-family: "Segoe UI";
  src: url('https://dashboard.sharkfunded.com/fonts/segoe-ui-this/segoeuithis.ttf');
}
a {
  text-decoration: none;
  color: rgb(40, 111, 255);
}
h1 {
  font-family: "Segoe UI";
  font-weight: 700;
}
h2,
h3,
h4,
p,
li {
  font-family: "Inter", sans-serif !important;
  font-weight: 600;
}
p {
  color: #ffffff;
  font-weight: 400;
}
.secondary-color {
  background-color: var(--secondary-color);
}
.subhead {
  color: rgba(156, 163, 175, 1);
}
.dark-section {
  background-color: rgb(2, 4, 10);
  overflow: hidden;
}
.form-logo {
  max-width: 150px;
  width: 100%;
}
.container_flex {
  display: flex;
  align-items: center;
  justify-content: center;
  /* height: 100vh; */
  /* overflow: hidden; */
}

.register-form {
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  background-color: rgba(11, 13, 25, 1);
  padding: 60px 40px 40px;
  border-radius: 12px;
  overflow: hidden;
  z-index: 1;
}

.register-form::before {
  content: "";
  position: absolute;
  top: -260px;
  left: 50%;
  transform: translateX(-50%);
  width: 450px;
  height: 380px;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 43, 255, 1),
    transparent
  );
  filter: blur(80px);
  z-index: -1;
}

.register-form * {
  position: relative;
  z-index: 1;
}

.register-form input[type="text"],
.register-form input[type="email"],
.register-form input[type="password"],
.register-form input[type="number"] {
  width: 100%;
  padding: 10px 10px 10px 32px;
  margin: 8px 0 16px;
  border: 2px solid rgba(22, 25, 35, 1);
  border-radius: 4px;
  background-color: rgba(22, 25, 35, 1);
}
.register-form label {
  color: var(--label-color);
}
.terms-container {
  display: inline-flex;
  gap: 2px;
}
.register-form input[type="radio"] {
  margin: 0;
  margin-right: 5px;
  padding: 10px;
  border: 2px solid rgba(22, 25, 35, 1);
  border-radius: 4px;
  background-color: rgba(22, 25, 35, 1);
}
.icons {
  position: absolute;
  top: 50%;
  left: 10px;
  z-index: 2;
  transform: translateY(-25%);
  pointer-events: none;
  font-size: 16px;
  color: #888;
}

.primary-btn {
  width: 100%;
  padding: 10px;
  background-color: rgba(1, 61, 239, 1);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/*  **  **  **  **  **  **  *My Deposit Report Request*  **  **  **  **  **  */
.date-div {
  border: 1.5px solid rgba(255, 255, 255, 0.05);
  background-color: var(--secondary-color);
}
label {
  color: var(--label-color);
}
input#to,
input#from {
  position: relative;
  width: 100%;
  padding: 10px 10px 10px 32px;
  margin: 8px 0 16px;
  border: 2px solid rgba(30, 41, 59, 1);
  border-radius: 4px;
  background-color: rgba(22, 25, 35, 1);
  color: rgba(148, 163, 184, 1);
}
input#to::placeholder,
input#from::placeholder {
  color: rgba(148, 163, 184, 1);
}
.caledar-icon {
  left: 15px;
  z-index: 1;
  transform: translateY(-25%);
}
.ui-widget-content {
  border: 1px solid #dddddd;
  background: #0b0c19;
  color: #8d9bb0;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
  border: 1px solid #1e293b;
  background: #161923;
  font-weight: normal;
  color: #94a3b9;
}
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  border: 1px solid #e7e6fc;
  background: #0843f0;
  color: #000000;
}

/* BUY ASSESSMENT */
.challenge-card {
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 1.41 2.82 rgba(0, 0, 0, 0.05);
}
hr {
  border-top: 1px solid var(--label-color);
}
.challenge-card h3,
.challenge-card p,
.challenge-card h4 {
  color: var(--label-color);
}
.challenge-card select,
.challenge-card input {
  border: 2px solid rgba(255, 255, 255, 0.05);
  background-color: rgba(22, 27, 45, 1);
  color: var(--label-color);
}
.accent-back {
  background-color: var(--accent-olor);
}
.challenge-card .nav-link {
  padding: 5px 20px;
  color: #fff;
  background-color: rgba(9, 11, 21, 1);
  box-shadow: 0 0 0 1.41px rgba(107, 114, 128, 1);
}
.challenge-card .nav-pills .nav-link.active {
  background-color: var(--accent-olor);
  box-shadow: none;
}
.accent-btn {
  background-color: var(--accent-olor);
  border: none;
  color: var(--label-color);
}
.order-summary {
  border: 1.41px solid rgba(100, 116, 139, 1);
  background-color: rgba(51, 65, 85, 1);
}

.order-span {
  font-size: 14px;
  color: rgba(229, 231, 235, 1);
}
.order-text {
  color: rgba(229, 231, 235, 1);
}
.challenge-card .agree {
  border: 1.41px solid rgba(100, 116, 139, 1);
  background-color: rgba(30, 41, 59, 1);
  box-shadow: 0 1.41px 0 rgba(0, 0, 0, 0.05);
}
.size-14 {
  font-size: 14px;
}
.challenge-card .agree .terms {
  top: -12px;
}
.challenge-card li {
  color: var(--label-color);
}
.bottom-b {
  border-bottom: 1px solid var(--accent-olor);
}

/* DASHBOARD */
.lgray-color {
  color: var(--label-color);
}
.gray-text {
  color: rgba(168, 162, 158, 1);
}
.credentials-btn {
  background-color: rgba(75, 85, 99, 1) !important;
  color: #fff;
}
.avatar {
  width: 80px;
  height: 80px;
  background-color: rgba(182, 195, 236, 1);
}
.avatar img {
  top: -5px;
  left: 0;
}
.segio {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.mt-blue {
  background-color: rgba(63, 131, 248, 0.4);
}
.step-white {
  background-color: rgba(225, 239, 254, 1);
}
.pending-yellow {
  background-color: rgba(255, 187, 126, 1);
}
.gray-border {
  border: 1.5px solid rgba(75, 85, 99, 1);
}
.accent-text {
  color: var(--accent-olor);
}
.progress-container {
  background: #2e2e40;
  border-radius: 10px;
  height: 8px;
  overflow: hidden;
  margin-bottom: 5px;
}
.progress-container-overall {
  background: #2e2e40;
  border-radius: 10px;
  height: 8px;
  overflow: hidden;
  margin-bottom: 5px;
}
.progress-container-success {
  background: #2e2e40;
  border-radius: 10px;
  height: 8px;
  overflow: hidden;
  margin-bottom: 5px;
}

.progress-bar {
  background: #3a80f7;
  height: 100%;
  transition: width 0.5s;
}
.progress-bar-overall {
  background: #3a80f7;
  height: 100%;
  transition: width 0.5s;
}
.progress-bar-success {
  background: #3a80f7;
  height: 100%;
  transition: width 0.5s;
}
.green-overlay {
  background-color: rgba(188, 240, 218, 0.2);
  border-radius: 50%;
  padding: 5px;
}
.timer-div {
  background-color: rgba(28, 100, 242, 0.5);
}
.range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #ccc;
}
.value-display {
  color: rgba(38, 139, 255, 1);
  font-weight: 600;
  font-size: 16px;
  margin-top: 5px;
}

input[type="range"] {
  width: 100%;
  margin-top: 10px;
  -webkit-appearance: none;
  height: 2px;
  border-radius: 4px;
  background: #444;
  outline: none;
}

/* input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      height: 16px;
      width: 16px;
      border-radius: 50%;
      background: #3a80f7;
      cursor: pointer;
      border: none;
      margin-top: -6px;
    } */
/* 
    input[type="range"]::-moz-range-thumb {
      height: 16px;
      width: 16px;
      border-radius: 50%;
      background: #3a80f7;
      cursor: pointer;
      border: none;
    } */

.grid-boxes {
  z-index: 10;
  overflow: hidden;
}
.grid-boxes::before {
  content: '';
  position: absolute;
  top: -170px;
  left: 70%;
   transform: translateX(-50%);
  width: 450px;
  height: 180px;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 43, 255, 1),
    transparent
  );
  z-index: 0;
  filter: blur(60px);
}
.red-text{
  color:rgba(240, 82, 82, 1);;
}
.green-text{
  color: rgba(91, 255, 178, 1);
}
.blue-text{
  color: rgba(38, 139, 255, 1);
}

.custom-transparent-table tbody tr td,
.custom-transparent-table tbody tr th {
  background-color: transparent !important;
  border-bottom: 1.6px solid rgba(75, 85, 99, 1) !important;
  color: rgba(226, 232, 240, 1);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 400;
  padding: 10px 0;
}


.thead-dark-custom tr th{
  background-color: rgb(2, 4, 10); 
  color: rgba(226, 232, 240, 1);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 400;
  border: 0 !important;
}

.custom-transparent-table2 tbody tr td,
.custom-transparent-table2 tbody tr th{
  background-color: transparent !important;
  border-bottom: 1.6px solid rgba(75, 85, 99, 1) !important;
  color: rgba(226, 232, 240, 1);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 400;
  padding: 10px 10px;
}
.custom-transparent-table2 tbody tr td:nth-child(1),
.custom-transparent-table2 tbody tr th:nth-child(1){
  background-color: rgb(2, 4, 10) !important;
  border-bottom: 1.6px solid rgba(75, 85, 99, 1) !important;
  color: rgba(226, 232, 240, 1);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 400;
  padding: 10px;
}
.custom-transparent-table tbody tr:last-child td,
.custom-transparent-table tbody tr:last-child th,
.custom-transparent-table2 tbody tr:last-child th,
.custom-transparent-table2 tbody tr:last-child td {
  border-bottom: 0 !important;
}
.red-ul{
  list-style-type: disc;
  color: rgba(240, 82, 82, 1);
}
.bg-yellow{
    background:#6f6f28;
}
.bg-green {
  background-color: green;
}
.bg-red {
  background-color: red;
}
.pforpackage {
  font-size : 1rem !important;
}
.pad10px{
  padding: 10px !important;
}
/* COMPLIANCE DOC UPLOAD */
.drop-zone {
  border: 2px dashed #2a2d3e;
  border-radius: 10px;
  padding: 30px;
  text-align: center;
  margin-top: 15px;
  position: relative;
}

.browse-btn {
  display: inline-block;
  margin: 10px auto;
  padding: 10px 20px;
  background-color: rgba(41, 50, 78, 1);
  cursor: pointer;
}

.file-name {
  margin-top: 10px;
  font-size: 14px;
  color: #ccc;
}
.preview-area {
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.preview-area img,
.preview-area iframe {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border: 1px solid #444;
  border-radius: 5px;
}
.top-border {
  border-top: 1.6px solid rgba(255, 255, 255, 0.05);
}
.imp-info {
  list-style-type: disc;
}

/* COMPLIANCE BANK DETAILS */
.account-info input,
.account-info select,
.certificate input,
.certificate select,
.search-tickets input,
.new-ticket input,
.new-ticket select,
.new-ticket textarea {
  width: 100%;
  padding: 10px 10px 10px 32px;
  margin: 8px 0 16px;
  border: 2px solid rgba(255, 255, 255, 0.05);
  background-color: rgba(22, 27, 45, 1);
  color: #fff;
}
.account-info input::placeholder {
  color: rgba(161, 161, 170, 1);
}

/* MYFUND DEPOSITE */
.payment-methods {
  z-index: 10;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.payment-methods::before {
  content: "";
  position: absolute;
  top: -99px;
  left: 77%;
  transform: translateX(-50%);
  width: 300px;
  height: 180px;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 43, 255, 1),
    transparent
  );
  z-index: 0;
  filter: blur(50px);
}
.grad-back {
  background: linear-gradient(
    90deg,
    rgba(1, 61, 239, 1),
    rgba(1, 61, 239, 0.1)
  );
}
.inst-span {
  background-color: rgba(39, 39, 42, 0.8);
  top: 17%;
  right: -50px;
  backdrop-filter: blur(10px);
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.green-dot {
  background-color: rgba(34, 197, 94, 1);
}
.yellow-dot {
  background-color: rgba(234, 179, 8, 1);
}
.blue-dot {
  background-color: rgba(59, 130, 246, 1);
}
.dark-btn {
  background-color: rgba(255, 255, 255, 0.05);
}
/* CERTIFICATE */
.search-icon {
  transform: translateY(-67%);
}
.certi-nav.active {
  background-color: var(--primary-blue) !important;
}
.certificate-boxes {
  overflow: hidden;
  position: relative;
  z-index: 10;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background-color: rgba(11, 13, 25, 1);
}
.certificate-boxes::before {
  content: "";
  position: absolute;
  top: -129px;
  left: 90%;
  transform: translateX(-50%);
  width: 400px;
  height: 280px;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 43, 255, 1),
    transparent
  );
  z-index: 0;
  filter: blur(100px);
}
.new {
  z-index: 10;
  top: -5px;
  right: -5px;
}
.active-pill {
  color: #fff;
  font-weight: 400;
}
.active-pill.active {
  background-color: var(--primary-blue) !important;
}

@media (max-width: 768px) {
  .sidebar {    
    padding-top: 122px;
  }
  .main_content{
    padding-left: 0;
    padding-right: 0;
  }
}














.backsethar:hover{
        
        border : 1px solid white;
        background: #1a56db !important;
    }
    .backsethar{
        
        border-radius: 10px;
        padding:20px;   
        color: white !important;
        background: #1c64f2 !important;
    }

    .backsetharticket{
        
        border-radius: 10px;
        padding:20px;
        margin-top: 20px;        
        
    }
    .blueclrback{
        border-bottom: 2px solid #518af2;
    }
    .h-28 {
        height: 7rem !important;
    }


    .trading-card {
      background-color: #111827;
      border-radius: 12px;
      border: 1px solid #3a3a3c;
      color: white;
      padding: 20px;      
      box-shadow: 0 0 10px rgba(0,0,0,0.5);
      margin-bottom : 10px;
    }

    .trading-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .trading-card-left-info {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .trading-card-avatar {
      font-size: 32px;
    }

    .trading-card-meta-info {
      display: flex;
      flex-direction: column;
    }

    .trading-card-meta-info strong {
      font-size: 16px;
    }

    .trading-card-badge {
      background-color: #444;
      padding: 2px 8px;
      border-radius: 8px;
      font-size: 11px;
      margin-left: 5px;
    }

    .trading-card-status {
      background-color: #0a84ff;
      color: white;
      font-size: 12px;
      padding: 4px 10px;
      border-radius: 999px;
    }

    .trading-card-status-success {
      background-color: green;
      color: white;
      font-size: 12px;
      padding: 4px 10px;
      border-radius: 999px;
    }

    .trading-card-status-failed {
      background-color: red;
      color: white;
      font-size: 12px;
      padding: 4px 10px;
      border-radius: 999px;
    }

    .trading-card-body {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid #3a3a3c;
      margin-bottom: 15px;
    }

    .trading-card-metric {
      text-align: center;
    }

    .trading-card-metric-icon {
      font-size: 20px;
      margin-bottom: 5px;
    }

    .trading-card-metric-label {
      font-size: 12px;
      color: #ccc;
    }

    .trading-card-metric-value {
      font-size: 18px;
      font-weight: 600;
    }

    .trading-card-footer {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
    }

    .trading-card-btn {
      flex: 1;
      padding: 10px;
      border-radius: 8px;
      font-size: 14px;
      cursor: pointer;
      text-align: center;
    }

    .trading-card-btn.credentials {
      background-color: #3a3a3c;
      color: white;
      margin-right: 10px;
    }

    .trading-card-btn.dashboard {
      background-color: #0a84ff;
      color: white;
    }
    
     /* NEW: Scrollable container */
    .trading-card-scroll-container {
        max-height: 500px;  /* Set height as needed */
        overflow-y: auto;
        padding-right: 5px;
    }

    .trading-card-scroll-container::-webkit-scrollbar {
        width: 6px;
    }

    .trading-card-scroll-container::-webkit-scrollbar-thumb {
        background-color: #555;
        border-radius: 4px;
    }

      .overview-container {
      background-color: #111827;
      border-radius: 12px;
      padding: 20px;
    }
    .title {
      font-size: 20px;
      font-weight: bold;
    }
    .subtitle {
      font-size: 14px;
      color: #9ca3af;
    }
    .stats {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
    }
    .stat-box {
      flex: 1;
      text-align: center;
      font-size: 14px;
    }
    .green { color: #10b981; }
    .red { color: #ef4444; }
    .gray { color: #9ca3af; }
    canvas {
      margin-top: 20px;
    }

    .mr10px{
      margin-right: 10px !important;
    }