/* styles.css */

/* Custom Styles to Fine-tune Bootstrap */

@font-face {
    font-family: "Object Sans Medium";
    src: url("../fonts/ObjectSans-Medium.ttf") format("truetype");
    font-weight: 400;
  }
  @font-face {
    font-family: "Object Sans";
    src: url("../fonts/ObjectSans-Regular.ttf") format("truetype");
    font-weight: 300;
  }
  @font-face {
    font-family: "Object Sans Bold";
    src: url("../fonts/ObjectSans-Bold.ttf") format("truetype");
    font-weight: 700;
  }
  
  :root {
    --font-family-bold: "Object Sans Bold";
    --font-family-regular: "Object Sans";
    --font-family-medium: "Object Sans Medium";
  }
  
  /* General Styles */
  body {
      font-family: var(--font-family-regular);
      background-color: #f5f5f7;
      color: #1d1d1f;
  }
  
  h1, h2 {
      font-family: var(--font-family-bold);
  }
  
  .navbar-brand, .nav-link {
      font-family: var(--font-family-medium);
  }
  
  .navbar {
      margin-bottom: 20px;
  }
  
  .user-form select {
      width: 212px;
      height: 28px;
  }
  
  .container {
      width: 100%;
      max-width: 1460px;
      padding: 0 15px;
      margin: 0 auto;
  }
  
  /* Card Styles */
  .card {
      border: none;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }
  
  .card-header {
      background-color: #f5f5f7;
      border-bottom: none;
      font-size: 1.25rem;
  }
  
  .card-body {
      padding: 1.5rem;
  }
  
  .card-footer {
      background-color: #f5f5f7;
      border-top: none;
  }
  
  /* List Group */
  .list-group-item {
      border: none;
      border-bottom: 1px solid #e5e5ea;
  }
  
  .list-group-item:last-child {
      border-bottom: none;
  }
  
  .list-group-item a {
      color: #1d1d1f;
      text-decoration: none;
  }
  
  .list-group-item a:hover {
      color: #007aff;
  }
  
  /* Buttons */
  .btn-primary {
      background-color: #0496FF;
      border-color: #0496FF;
  }
  
  .btn-primary:hover {
      background-color: #0051a8;
      border-color: #0051a8;
  }
  
  .btn-secondary {
      background-color: #8e8e93;
      border-color: #8e8e93;
  }
  
  .btn-secondary:hover {
      background-color: #6c6c70;
      border-color: #6c6c70;
  }
  
  .btn-link {
      color: #007aff;
      font-weight: 500;
  }
  
  .btn-link:hover {
      color: #0051a8;
      text-decoration: none;
  }
  
  .text-primary {
      color: #0496FF !important;
  }
  
  .border-primary {
      border-color: #0496FF !important;
  }
  
  /* Pagination */
  .pagination .page-link {
      color: black;
      border-radius: 50% !important;
      width: 52px;
      height: 52px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: unset;
      border: none;
      padding-top: 0.7rem;
  }
  
  .page-item.disabled .page-link {
      background-color: unset;
  }
  
  .pagination .page-item.active .page-link {
      background-color: #0496FF;
      border-color: #0496FF;
      color: #fff;
  }

  /* Sort by chips (user list ranking/sort) */
  .sort-by {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.5rem 1rem;
      font-family: var(--font-family-medium);
  }
  .sort-by__label {
      font-size: 1rem;
      color: #1d1d1f;
      margin-right: 0.25rem;
  }
  .sort-by__chips {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
  }
  .sort-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.5rem 0.8rem 0.4rem;
      border-radius: 9999px;
      background-color: #fff;
      color: #1d1d1f;
      font-size: 0.8rem;
      font-family: var(--font-family-regular);
      text-transform: uppercase;
      letter-spacing: 0.02em;
      text-decoration: none;
      transition: background-color 0.15s, border-color 0.15s, color 0.15s;
  }
  .sort-chip:hover {
      background-color: #e8f4fd;
      color: #1d1d1f;
      text-decoration: none;
  }
  .sort-chip--selected {
      background-color: #e0f2ff;
      color: #1d1d1f;
  }
  .sort-chip__label {
    padding-top: 0.2rem;
  }
  .sort-chip--selected:hover {
      background-color: #bae0ff;
      text-decoration: none;
  }
  .sort-chip__icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      flex-shrink: 0;
  }
  .sort-chip__circle {
      width: 14px;
      height: 14px;
      border: 1.5px solid #0496FF;
      border-radius: 50%;
      background: transparent;
  }
  .sort-chip__check {
      color: #0496FF;
  }
  .sort-chip--selected .sort-chip__icon {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background-color: #0496FF;
      color: #fff;
  }
  .sort-chip--selected .sort-chip__check {
      color: #fff;
  }
  
  .text-cashout {
      color: #006BB7;
  }
  
  .text-irrrl {
      color: #DB6835;
  }
  
  .text-fha {
      color: #008F5A;
  }
  
  /* Alerts */
  .alert-info {
      background-color: #e5f3ff;
      color: #007aff;
      border: none;
  }
  
  /* Form Controls */
  .form-control {
      border-radius: 8px;
  }
  
  .form-control:focus {
      border-color: #007aff;
      box-shadow: none;
  }
  
  /* Hover Effects */
  .card:hover, .list-group-item:hover {
      background-color: #f0f0f0;
  }
  .card:hover:not(.no-hover), .list-group-item:hover {
      background-color: #ffffff;
  }
  
  /* Custom Toggles */
  .toggle-btn {
      background: none;
      border: none;
      color: #007aff;
      padding: 0;
      cursor: pointer;
      font-size: 0.9rem;
  }
  
  .toggle-btn:hover {
      text-decoration: underline;
  }
  
  /* Miscellaneous */
  .mb-2 {
      margin-bottom: 0.5rem !important;
  }
  
  .mb-3 {
      margin-bottom: 1rem !important;
  }
  
  .mt-2 {
      margin-top: 0.5rem !important;
  }
  
  /* Responsive Adjustments */
  @media (max-width: 767px) {
      body {
          font-size: 14px;
      }
  
      h1, h2 {
          font-size: 1.5rem;
      }
  
      .navbar {
          margin-bottom: 10px;
      }
  
      .card-body {
          padding: 1rem;
      }
  
      .btn {
          font-size: 0.9rem;
          padding: 0.5rem 1rem;
      }
  
      .navbar-brand {
          font-size: 1.2rem;
      }
  }
  
  /* Disable hover effects on touch devices */
  @media (hover: none) {
      .list-group-item:hover,
      .card:hover {
          background-color: inherit;
      }
  }
  
  .btn-modern {
    border-radius: 999px;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.5rem 0.5rem;
    height: 44px;
    text-decoration: none;
  }
  
  .dropdown-toggle::after {
      content: "›";
      transform: rotate(90deg);
      margin-left: 0.8em;
      border: none;
  }
  
  .btn-outline-light:not(:disabled):not(.disabled).active, .btn-outline-light:not(:disabled):not(.disabled):active, .show>.btn-outline-light.dropdown-toggle {
      color: #0496FF;
      background-color: transparent;
      border-color: #0496FF;
  }
  
  .btn-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
  }
  
  .btn-modern.btn-primary {
    background-color: #0496FF;
    border: 2px solid #0496FF;
    color: #ffffff;
  }
  .btn-modern.btn-primary:hover {
    background-color: #0051a8;
    border-color: #0051a8;
  }
  
  .btn-modern.btn-outline-light {
    background-color: transparent;
    border: 2px solid #0496FF;
    color: #0496FF;
  }
  .btn-modern.btn-outline-light:hover {
    background-color: #f8f8f8;
    border-color: #0051a8;
    color: #0051a8;
  }
  
  .mortgage-badge-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .mortgage-badge-group button {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  
  .col-overview {
    display: flex;
    flex-direction: column;
    padding: 0.25rem;
  }
  
  @media (max-width: 575.98px) {
    .col-overview {
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      max-width: 100%;
      width: 100%;
      padding: 0.25rem;
    }
    
    .overview-card {
      padding: 0.75rem;
      text-align: center;
      margin-bottom: 0.5rem;
    }
    
    .overview-card p {
      font-size: 0.9rem;
    }
    
    .detail-item-title {
      font-size: 0.8rem;
    }
  }
  
  @media (min-width: 576px) and (max-width: 767.98px) {
    .col-overview {
      -ms-flex: 0 0 50%;
      flex: 0 0 50%;
      max-width: 50%;
      width: 100%;
      padding: 0.5rem;
    }
    
    .overview-card {
      padding: 0.75rem;
      text-align: center;
    }
    
    .overview-card p {
      font-size: 0.9rem;
    }
  }
  
  @media (min-width: 768px) and (max-width: 991.98px) {
    .col-overview {
      -ms-flex: 0 0 33.333333%;
      flex: 0 0 33.333333%;
      max-width: 33.333333%;
      width: 100%;
      padding: 0.5rem;
    }
    
    .overview-card {
      padding: 0.75rem;
      text-align: center;
    }
  }
  
  @media (min-width: 992px) and (max-width: 1199.98px) {
    .col-overview {
      -ms-flex: 0 0 25%;
      flex: 0 0 25%;
      max-width: 25%;
      width: 100%;
      padding: 0.5rem;
    }
    
    .overview-card {
      padding: 0.75rem;
    }
  }
  
  @media (min-width: 1200px) {
    .col-overview {
      -ms-flex: 0 0 20%;
      flex: 0 0 20%;
      max-width: 20%;
      width: 100%;
      padding: 0.75rem;
    }
    
    .overview-card {
      padding: 0.75rem;
    }
  }
  
  .overview-card {
    border-bottom: 1px solid #E8E8E8;
    flex: 1;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 80px;
    transition: all 0.3s ease;
  }
  
  @media (max-width: 575.98px) {
    .overview-card {
      min-height: 70px;
      margin-bottom: 0.5rem;
    }
    
    .overview-card:last-child {
      margin-bottom: 0;
      border-bottom: 0;
    }
  }
  
  @media (min-width: 576px) and (max-width: 767.98px) {
    .overview-card {
      min-height: 75px;
    }
  }
  
  @media (min-width: 768px) and (max-width: 991.98px) {
    .overview-card {
      min-height: 80px;
    }
  }
  
  .overview-card.success-card {
    border-radius: 0.5rem;
    border: 1px solid;
  }
  
  .overview-card.no-border {
    border-bottom: none;
  }
  
  .interest-payment-table th {
    border: none !important;
  }
  
  .interest-payment-table td {
    border-top: none !important;
    border-bottom: 1px solid #E8E8E8 !important;
  }
  
  .interest-payment-table .no-border {
    border: none !important;
  }
  
  .detail-item-title {
      font-family: var(--font-family-medium);
  }
  
  .card-item-title {
      font-family: var(--font-family-bold);
      text-transform: uppercase;
  }
  
  .finance-table th {
      background-color: #EBF6FF;
      border: none !important;
      font-family: var(--font-family-medium);
  }
  
  .finance-table td {
      border: none !important;
  }
  
  .show-detail {
      color: #0496FF;
      font-size: 0.9rem;
      cursor: pointer;
      text-decoration: underline;
  }
  
  .search-user-form input.form-control {
    width: 380px;
  }
  
  .user-table tbody tr:first-child td {
    border-top: none;
  }
  
  .search-user-form input, .search-user-form select,
  .soft-pull-card input, .soft-pull-card select {
    height: 44px;
  }
  
  .btn .btn-text {
    position: relative;
    top: 0.1rem;
  }

  .toogle-icon {
    color: #0496FF;
    transform: rotate(90deg);
    transition: transform 0.2s;
  }

  .accordion .card-header[aria-expanded="true"] .toogle-icon {
    transform: rotate(270deg);
  }

  .detail-accordion .card-header {
    background-color: #FFF;
    cursor: pointer;
  }

  .text-base-rate {
    color: #898989;
    text-transform: uppercase;
    margin-bottom: 0;
    line-height: 1;
    position: relative;
    top: 0.2rem;
  }

  .base-rate-value {
    color: #0496FF;
    font-family: var(--font-family-bold);
    font-size: 2.5rem;
    margin-bottom: 0;
    line-height: 1;
    position: relative;
    top: 0.3rem;
  }

  .base-input-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid #E8E8E8;
    border-radius: 0.5rem;
    background-color: white;
    padding: 0.45rem 0.5rem 0.25rem;
  }

  .base-input-wrapper input, .base-input-wrapper input:focus {
    border: none;
    outline: none;
    color: #141414;
  }

  .base-input-wrapper span {
    color: #141414;
  }

  .base-rate-wrapper > div {
    display: flex;
  }

  .base-rate-wrapper > div label {
    color: #898989;
    text-transform: uppercase;
    margin-bottom: 0;
    line-height: 1;
    position: relative;
    top: 0.2rem;
  }

  .base-rate-wrapper > div input {
    margin-right: 0.75rem;
  }

  #rate-form {
    display: flex;
    align-items: center;
  }

  #percentage-display {
    display: flex;
    align-items: center;
  }

  .base-rate-alert-info {
    display: flex;
    justify-content: flex-end;
  }
  
  .benefits-overview-section {
    margin-bottom: 2rem;
  }
  
  .benefits-overview-section h4 {
    margin-bottom: 1rem;
    font-size: 1.5rem;
  }
  
  @media (max-width: 575.98px) {
    .benefits-overview-section h4 {
      font-size: 1.25rem;
      text-align: center;
    }
    
    .benefits-overview-section .card-body {
      padding: 1rem 0.5rem;
    }

    .difference-overview-section {
      margin-left: 0;
      margin-right: 0;
    }
  }
  
  @media (min-width: 576px) and (max-width: 767.98px) {
    .benefits-overview-section h4 {
      font-size: 1.35rem;
    }
  }
  
  @media (max-width: 767.98px) {
    .benefits-overview-section .row {
      margin-bottom: 0.5rem;
    }
    
    .benefits-overview-section .row:last-child {
      margin-bottom: 0;
    }
  }
  
  @media (min-width: 1400px) {
    .col-overview {
      padding: 1rem;
    }
    
    .overview-card {
      padding: 0.6rem;
      min-height: 90px;
    }
  }
  
  @media (max-width: 399.98px) {
    .col-overview {
      padding: 0.125rem;
    }
    
    .overview-card {
      padding: 0.5rem;
      min-height: 60px;
    }
    
    .overview-card p {
      font-size: 0.8rem;
    }
    
    .detail-item-title {
      font-size: 0.7rem;
    }
  }
  
  .user-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
  }
  
  .user-action-buttons .btn-group {
    margin-right: 0.75rem;
  }
  
  .user-action-buttons .btn-group:last-child {
    margin-right: 0;
  }
  
  @media (max-width: 575.98px) {
    .user-action-buttons {
      flex-direction: column;
      align-items: stretch;
      gap: 0.75rem;
    }
    
    .user-action-buttons .d-flex {
      flex-direction: column;
      width: 100%;
    }
    
    .user-action-buttons .d-flex > div {
      margin-right: 0;
      margin-bottom: 0.5rem;
      width: 100%;
    }
    
    .user-action-buttons .d-flex > div:last-child {
      margin-bottom: 0;
    }
    
    .user-action-buttons .btn-group {
      margin-right: 0;
      margin-bottom: 0.5rem;
      width: 100%;
    }
    
    .user-action-buttons .btn-group:last-child {
      margin-bottom: 0;
    }
    
    .user-action-buttons .btn {
      width: 100%;
      margin-bottom: 0.5rem;
    }
    
    .user-action-buttons .btn:last-child {
      margin-bottom: 0;
    }
    
    .user-action-buttons .dropdown-menu {
      width: 100%;
      border: 1px solid #dee2e6;
      box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }
    
    .base-rate-wrapper {
      flex-direction: column;
      align-items: stretch;
      gap: 0.5rem;
    }
    
    .base-rate-wrapper > div {
      margin-right: 0;
      margin-bottom: 0.5rem;
    }
    
    .base-rate-wrapper > div:last-child {
      margin-bottom: 0;
    }
    
    .text-base-rate {
      font-size: 0.8rem;
      text-align: center;
    }
    
    .base-rate-value {
      font-size: 2rem;
      text-align: center;
      margin: 0.5rem 0;
    }
  }
  
  @media (min-width: 576px) and (max-width: 767.98px) {
    .user-action-buttons {
      flex-direction: column;
      align-items: stretch;
      gap: 0.75rem;
    }
    
    .user-action-buttons .d-flex {
      flex-wrap: wrap;
      gap: 0.5rem;
    }
    
    .user-action-buttons .d-flex > div {
      margin-right: 0.5rem;
      margin-bottom: 0.5rem;
      flex: 1 1 calc(50% - 0.25rem);
      min-width: 0;
    }
    
    .user-action-buttons .btn-group {
      margin-right: 0.5rem;
      margin-bottom: 0.5rem;
      flex: 1 1 calc(50% - 0.25rem);
      min-width: 0;
    }
    
    .user-action-buttons .btn {
      width: 100%;
    }
    
    .base-rate-wrapper {
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
    }
    
    .text-base-rate {
      font-size: 0.9rem;
    }
    
    .base-rate-value {
      font-size: 2.2rem;
    }
  }
  
  @media (min-width: 768px) and (max-width: 991.98px) {
    .user-action-buttons {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 0.5rem;
    }
    
    .user-action-buttons .d-flex {
      flex-wrap: wrap;
      gap: 0.5rem;
    }
    
    .user-action-buttons .d-flex > div {
      margin-right: 0.5rem;
      margin-bottom: 0.5rem;
      flex: 1 1 auto;
      min-width: 0;
    }
    
    .user-action-buttons .btn-group {
      margin-right: 0.5rem;
      margin-bottom: 0.5rem;
      flex: 1 1 auto;
      min-width: 0;
    }
    
    .user-action-buttons .btn {
      white-space: nowrap;
    }
    
    .base-rate-wrapper {
      flex-direction: row;
      align-items: center;
      gap: 0.75rem;
    }
  }
  
  @media (min-width: 992px) {
    .user-action-buttons {
      flex-direction: row;
      flex-wrap: nowrap;
      gap: 0.75rem;
    }
    
    .user-action-buttons .d-flex {
      flex-wrap: nowrap;
      gap: 0.75rem;
    }
    
    .user-action-buttons .d-flex > div {
      margin-right: 0.75rem;
      margin-bottom: 0;
      flex: 0 0 auto;
    }
    
    .user-action-buttons .btn-group {
      margin-right: 0.75rem;
      margin-bottom: 0;
      flex: 0 0 auto;
    }
    
    .user-action-buttons .btn {
      white-space: nowrap;
    }
    
    .base-rate-wrapper {
      flex-direction: row;
      align-items: center;
      gap: 1rem;
    }
  }
  
  @media (min-width: 1400px) {
    .user-action-buttons {
      gap: 1rem;
    }
    
    .user-action-buttons .d-flex {
      gap: 1rem;
    }
    
    .user-action-buttons .d-flex > div {
      margin-right: 1rem;
    }
    
    .user-action-buttons .btn-group {
      margin-right: 1rem;
    }
    
    .base-rate-wrapper {
      gap: 1.5rem;
    }
  }

  .soft-pull-card input {
    padding-top: 0.7rem;
  }

  .add-credit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #0496FF
  }

  .add-credit img {
    margin-top: -0.2rem;
    transition: transform 0.3s ease;
  }

  .add-credit:hover img {
    transform: scale(1.1);
  }

  .credit-row {
    animation: slideDown 0.3s ease-out;
  }

  @keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
  }

  .finance-table input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
  }

  .finance-table th, .finance-table td {
    vertical-align: middle !important;
  }
  
  .finance-table .editing-row {
    background-color: #F5F9FC !important;
  }
  
  .finance-table .editing-row td {
    background-color: #F5F9FC !important;
  }

  .credit-header {
    display: flex;
    align-items: center;
    padding: 5px 5px;
    background-color: #F6FAFE;
    margin-bottom: 7px;
    border-radius: 5px;
  }

  .name-column {
    display: flex;
    align-items: center;
    color: #898989;
    flex: 1.4;
    gap: 0.5rem;
  }

  .name-column input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
  }

  .balance-column {
    display: flex;
    align-items: center;
    color: #898989;
    flex: 1;
    gap: 0.5rem;
  }
  
  .payment-column {
    display: flex;
    align-items: center;
    color: #898989;
    flex: 1;
    gap: 0.5rem;
  }

  .weight-column {
    display: flex;
    align-items: center;
    color: #898989;
    flex: 1;
    gap: 0.5rem;
  }

  .edit-column {
    display: flex;
    align-items: center;
    color: #898989;
    gap: 1rem !important;
    flex: 0.6;
  }

  @media (min-width: 1200px) {
    .name-column {
      flex: 1;
    }
  
    .balance-column {
      width: 15%;
      flex: unset;
    }
    
    .payment-column {
      width: 15%;
      flex: unset;
    }
  
    .weight-column {
      width: 15%;
      flex: unset;
    }
  
    .edit-column {
      width: 8rem;
      flex: unset;
    }
  }

  .entry-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px 8px 5px;
    background-color: #D8E9F7;
    border-radius: 8px;
    cursor: pointer;
  }

  .entry-header .name-column {
    color: black;
    font-family: var(--font-family-bold);
  }

  .entry-header .toogle-icon {
    color: black;
  }

  .entry-row {
    display: flex;
    align-items: center;
    padding: 8px 5px;
  }

  .entry-row .name-column {
    color: black;
  }

  .entry-row .balance-column {
    color: black;
  }

  .entry-row .payment-column {
    color: black;
  }

  .entry-row .weight-column {
    color: #9AAFC2;
  }

  .entry-row .edit-column {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2rem;
  }

  .entry-row .edit-column img {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
  }

  .add-entry-row {
    display: flex;
    align-items: center;
    padding: 8px 5px;
  }

  .add-entry-row .add-credit {
    color: #0496FF;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .total-row {
    display: flex;
    align-items: center;
    padding: 5px;
    background-color: #F6FAFE;
    border-radius: 5px;
  }

  .total-row .name-column {
    color: #D0D0D0;
  }

  .total-row .balance-column {
    color: #0884E4;
  }

  .total-row .payment-column {
    color: #0884E4;
  }

  .final-total-row {
    display: flex;
    align-items: center;
    padding: 5px;
    border-radius: 5px;
  }

  .final-total-row .name-column {
    color: black;
    font-weight: bold;
  }

  .final-total-row .balance-column {
    color: black;
  }

  .final-total-row .payment-column {
    color: black;
  }

  .sortable-column {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
  }
  .sortable-column:hover {
      background-color: #f8f9fa;
  }
  .sortable-column:hover .sort-icon {
      opacity: 0.6;
  }
  .sort-icon {
      font-size: 1.2em;
      margin-left: 5px;
      opacity: 0;
      transition: all 0.2s ease;
      display: inline-block;
  }
  .sort-icon.sort-asc {
      opacity: 1;
      color: #007bff;
      transform: rotate(-90deg);
  }
  .sort-icon.sort-desc {
      opacity: 1;
      color: #007bff;
      transform: rotate(90deg);
  }


  .btn-ltv {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1.05rem 0.3rem;
    font-size: 0.9rem;
    border-radius: 2rem;
    border: 1px solid #E9AA16;
    background-color: #FFF8E8;
  }

  .favorite-icon img {
    margin-top: -4px;
  }

  .cycle-card .card {
    box-shadow: none;
  }

  #ctx-open-new-window:focus {
    outline: none;
    border: none;
  }

  #ctx-open-new-window:active {
    color: black;
  }

  #ctx-open-new-window:hover {
    background-color: #f8f9fa;
  }