:root {
  /* Core Colors */
  --bs-primary: #3B82F6;       /* Blue */
  --bs-secondary: #7F8CAA;     /* Gray */
  --bs-success: #10B981;       /* Green */
  --bs-danger: #EF4444;        /* Red */
  --bs-warning: #ffb83a;       /* Orange/Yellow */
  --bs-info: #0EA5E9;          /* Teal/Light Blue */
  --bs-light: #F3F4F6;         /* Light Gray */
  --bs-dark: #111827;          /* Dark Gray/Black */
  --bs-orange: #FF8040;        /* Orange (same as warning) */
  --bs-alt-purple: #AE75DA;    /* Extra color */

  /* RGB Versions for hover/rgba */
  --bs-primary-rgb: 59,130,246;
  --bs-secondary-rgb: 170,170,182;
  --bs-success-rgb: 16,185,129;
  --bs-danger-rgb: 239,68,68;
  --bs-warning-rgb: 255,128,64;
  --bs-info-rgb: 14,165,233;
  --bs-light-rgb: 243,244,246;
  --bs-dark-rgb: 17,24,39;
  --bs-orange-rgb: 255,128,64;
  --bs-alt-purple-rgb: 174,117,218;

  /* Text colors */
  --bs-body-color: #1F2937;     /* Dark text */
  --bs-body-color-rgb: 31,41,55;
  --bs-body-bg: #FFFFFF;        /* Background color */
  --bs-body-bg-rgb: 255,255,255;

  /* Links */
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: rgba(var(--bs-primary-rgb), 0.8);
}

/* ------------------- Buttons ------------------- */
.btn-primary {
  background-color: var(--bs-primary)!important;
  border-color: var(--bs-primary)!important;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: rgba(var(--bs-primary-rgb), 0.8)!important;
  border-color: rgba(var(--bs-primary-rgb), 0.8)!important;
}

.btn-secondary {
  background-color: var(--bs-secondary)!important;
  border-color: var(--bs-secondary)!important;
}
.btn-secondary:hover, .btn-secondary:focus {
  background-color: rgba(var(--bs-secondary-rgb), 0.8)!important;
  border-color: rgba(var(--bs-secondary-rgb), 0.8)!important;
}

.btn-success {
  background-color: var(--bs-success)!important;
  border-color: var(--bs-success)!important;
}
.btn-success:hover, .btn-success:focus {
  background-color: rgba(var(--bs-success-rgb), 0.8)!important;
  border-color: rgba(var(--bs-success-rgb), 0.8)!important;
}

.btn-danger {
  background-color: var(--bs-danger)!important;
  border-color: var(--bs-danger)!important;
}
.btn-danger:hover, .btn-danger:focus {
  background-color: rgba(var(--bs-danger-rgb), 0.8)!important;
  border-color: rgba(var(--bs-danger-rgb), 0.8)!important;
}

.btn-warning {
  background-color: var(--bs-warning)!important;
  border-color: var(--bs-warning)!important;
}

.btn-warning:hover,
.btn-warning:focus {
  background-color: rgba(252, 181, 58, 0.7) !important;
  border-color: rgba(252, 181, 58, 0.7) !important;
}

.btn-info {
  background-color: var(--bs-info)!important;
  border-color: var(--bs-info)!important;
}
.btn-info:hover, .btn-info:focus {
  background-color: rgba(var(--bs-info-rgb), 0.8)!important;
  border-color: rgba(var(--bs-info-rgb), 0.8)!important;
}

.btn-orange {
  background-color: var(--bs-orange)!important;
  border-color: var(--bs-orange)!important;
}
.btn-orange:hover, .btn-orange:focus {
  background-color: rgba(var(--bs-orange-rgb), 0.8)!important;
  border-color: rgba(var(--bs-orange-rgb), 0.8)!important;
}

.btn-alt-purple {
  background-color: var(--bs-alt-purple)!important;
  border-color: var(--bs-alt-purple)!important;
  color: #fff !important;
}
.btn-alt-purple:hover, .btn-alt-purple:focus {
  background-color: rgba(var(--bs-alt-purple-rgb), 0.8)!important;
  border-color: rgba(var(--bs-alt-purple-rgb), 0.8)!important;
}

/* ------------------- Text Colors ------------------- */
.text-alt-primary { color: var(--bs-primary) !important; }
.text-secondary { color: var(--bs-secondary) !important; }
.text-alt-success { color: var(--bs-success) !important; }
.text-alt-danger { color: var(--bs-danger) !important; }
.text-warning { color: var(--bs-warning) !important; }
.text-info { color: var(--bs-info) !important; }
.text-light { color: var(--bs-light) !important; }
.text-dark { color: var(--bs-dark) !important; }
.text-alt-orange { color: var(--bs-orange) !important; }
.text-alt-purple { color: var(--bs-alt-purple) !important; }

/* ------------------- Background Colors ------------------- */
.bg-alt-primary { background-color: var(--bs-primary) !important; }
.bg-secondary { background-color: var(--bs-secondary) !important; }
.bg-alt-success { background-color: var(--bs-success) !important; }
.bg-alt-danger { background-color: var(--bs-danger) !important; }
.bg-alt-warning { background-color: var(--bs-warning) !important; }
.bg-info { background-color: var(--bs-info) !important; }
.bg-light { background-color: var(--bs-light) !important; }
.bg-dark { background-color: var(--bs-dark) !important; }
.bg-body { background-color: var(--bs-body-bg) !important; }
.bg-orange { background-color: var(--bs-orange) !important; }
.bg-alt-orange { background-color: var(--bs-orange) !important; }
.bg-alt-purple { background-color: var(--bs-alt-purple) !important; color: #fff !important; }

/* ------------------- Links ------------------- */
a { color: var(--bs-link-color); }
a:hover { color: var(--bs-link-hover-color); }

.backbtn{
  background-color:#313647  !important;
  border-color:#313647 !important;
}
.backbtn:hover,
.backbtn:focus {
  background-color: rgba(49, 54, 71, 0.8) !important; /* #313647 with alpha */
  border-color: rgba(49, 54, 71, 0.8) !important;
}