:root {
  --color-content: light-dark(#474747, #f9f9f9);
  --color-black: light-dark(#000000, #ffffff);
  --color-black-same: light-dark(#000000, #000000);
  --color-white: light-dark(#ffffff, #000000);
  --color-white-same: light-dark(#ffffff, #ffffff);
  --color-mute: light-dark(#717182, #ececf0);
  --bg-color-muted: light-dark(#ececf0, #6f6f6f);
  --color-red: #e7000b;
  --color-red-50: #fef2f2;
  --color-red-100: #ffe2e2;
  --color-red-200: #ffc9c9;
  --color-red-500: #fb2c36;
  --color-red-600: #e7000b;
  --color-red-700: #c10007;
  --color-orange-50: #fff7ed;
  --color-orange-100: #ffedd4;
  --color-orange-200: #ffd7a8;
  --color-orange-300: #ffb86a;
  --color-orange-600: #f54a00;
  --color-orange-700: #ca3500;
  --color-green: #10b981;
  --color-green-50: #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-300: #7bf1a8;
  --color-green-500: #00c951;
  --color-green-600: #00a63e;
  --color-green-700: #008236;
  --color-blue-50: light-dark(#eff6ff, #bedbff);
  --color-blue-100: #dbeafe;
  --color-blue-200: #bedbff;
  --color-blue-300: #8ec5ff;
  --color-blue-500: #2b7fff;
  --color-blue-600: #155dfc;
  --color-blue-700: #1447e6;
  --color-purple: #9810fa;
  --color-purple-50: #faf5ff;
  --color-purple-100: #f3e8ff;
  --color-purple-200: #e9d4ff;
  --color-purple-500: #ad46ff;
  --color-purple-600: #9810fa;
  --color-purple-700: #8200db;
  --color-yellow-50: #fefce8;
  --color-yellow-100: #fef9c2;
  --color-yellow-200: #fff085;
  --color-yellow-300: #ffdf20;
  --color-yellow-400: #fdc700;
  --color-yellow-500: #f0b100;
  --color-yellow-600: #d08700;
  --color-gray-50: light-dark(#fbf9fa, #101828);
  --color-gray-100: light-dark(#f6f3f4, #1f2937);
  --color-gray-200: light-dark(#e5e7e9, #1f2937);
  --color-gray-300: #d1d5dc;
  --color-gray-400: #99a1af;
  --color-gray-500: light-dark(#6a7282, #f6f3f4);
  --color-gray-600: light-dark(#4a5565, #d1d5dc);
  --color-gray-700: light-dark(#364153, #d1d5dc);
  --color-gray-800: #1f2937;
  --color-gray-900: light-dark(#101828, #f6f3f4);
  --bg-light1: light-dark(#f8fafc, #212121);
  --bg-light2: light-dark(#f1f5f9, #2d2d2d);
  --bg-light3: light-dark(#f3f3f5, #3a3a3a);
  --bg-light4: light-dark(#99a1af, #99a1af);
  --border-color: light-dark(#e5e7eb, #374151);
}



@keyframes screenerSpin {
  to {
    transform: rotate(360deg);
  }
}

.finance-page-style {
  &.main-section {
    padding-left: 80px;
    .market-card {
      position: relative;
      border: 2px solid var(--color-gray-200);
    }
    .thin-scrollbar {
      scrollbar-width: thin;
    }

    .img-gap img {margin-left: -8px;border: 3px solid var(--color-white);}
    .img-gap img:first-child {margin-left: 0;}

    /* FONT SIZE */
    .mainHeading{font-size:2.5rem;font-weight:700;line-height:1.2;}
    .largeHeading{font-size:2.2rem;font-weight:600;line-height:1.3;}
    .subHeading {font-size: 1.4rem;font-weight: 500;line-height: 1.6;}
    .thirdHeading {font-size: 1.2rem;font-weight: 400;line-height: 1.5;}
    .text-xxxl {font-size: 4.5rem !important;line-height: 1.3 !important;}
    .text-xxl {font-size: 1.5rem !important;line-height: 1.3 !important;}
    .text-xl {font-size: 1.25rem !important;line-height:1.5 !important;}
    .text-lg {font-size: 1.125rem !important;line-height:1.2 !important;}
    .text-md {font-size: 1rem !important;line-height: normal !important;}
    .text-sm {font-size: 0.875rem !important;line-height: 1.6 !important;}
    .text-xs {font-size: 0.75rem !important;line-height: normal !important;}
    .text-xxs {font-size: 0.65rem !important;line-height: normal !important;}

    .cursor-pointer {cursor: pointer;}
    .w-fit-content {width: fit-content !important;}
    .min-w-fit-content {min-width: fit-content !important;}
    .w-max-content {width: max-content !important;}
    .scroll-x {overflow-y: hidden;overflow-x: auto;scrollbar-width: thin;}
    .scroll-y {overflow-y: auto;overflow-x: hidden;scrollbar-width: thin;}
    .py-0-5{padding: 0.1rem}
    .max-height-300{max-height: 300px;}
    .hover-bg-gray-200:hover {background-color: var(--color-gray-200) !important;transition: background-color 0.3s ease;}
    .data-active-bg-black[data-active="true"] {background-color: var(--color-black) !important;color: var(--color-white) !important;border-color: var(--color-black) !important;}
    .data-active-bg-black[data-active="true"] span {color: var(--color-white) !important;}
    .max-height-315 {max-height: 315px;}
    .accordion .accordion-button {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        padding: 14px !important;
        font-size: 1rem;
        font-weight: 600;
        text-align: left;
        background-color: var(--color-white-same);
        border: 0;
        border-radius: 0;
        overflow-anchor: none;
        transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, border-radius .15s
    }

    /* MARKET SNAPSHOT STYLES */
    .market-card {
        position: relative;
        transition: all var(--transition-fast);
        border: 2px solid var(--color-gray-200);
    }
    .market-card:hover {box-shadow: var(--shadow-md);border-color: var(--color-blue-200);}
    .info-icon, .star-icon {cursor: pointer;}
    .market-chart {height: 60px;position: relative;}
    .market-chart svg {width: 100%;height: 100%;}
    .chart-area {opacity: 0.1;}
    .chart-line {fill: none;stroke-width: 2;}
    .positive .chart-line {stroke: var(--color-green-600);}
    .positive .chart-area {fill: var(--color-green-600);}
    .negative .chart-line {stroke: var(--color-red-600);}
    .negative .chart-area {fill: var(--color-red-600);}
    .stock-progress-bar{height: 5px}
    .signal-hold {color:var(--color-orange-700);}
    .signal-sell {color: var(--color-red-700);}
    .signal-buy {color: var(--color-green-700);}
    .volume-badge,.momentum-badge {padding: 0.15rem 0.425rem;}
    .custom-font-size-tooltip{font-size: 0.7rem;}

    /*ARTCILE NEWS */
    .article-card {min-height: 480px;overflow: hidden;}
    .article-card img,.article-small-card img {width: 100%;height: 100%;object-fit: cover;}
    .article-card-overlay {position: absolute;inset: 0;top: 0;background: var(--gradient1);}
    .article-card-content {position: absolute;bottom: 0;padding: 2rem;color: var(--color-white-same);}
    .saved-article-button{position: absolute;top: 5px;right: 5px;z-index: 1000;width: 30px;height: 30px}
    /* SUB SECTION NEWS */
    .article-card.article-small-card {min-height: 240px;max-height: 240px;}
    .article-card.article-small-card .article-card-content{padding: 1rem}
    /* latest-announcements-table */
    .latest-announcements-table tr{background: var(--color-gray-100);border: 0;margin: 5px 0;
        border-radius: 5px;position: relative;}
    .latest-announcements-table td{padding: .2rem .5rem; background: transparent;border: 0}
    .latest-announcements-table{border-collapse: separate;border-spacing: 0 5px;white-space: nowrap;}
    /* SAVED AND READ ARTICLES */
    .remove-article-button{display: none;opacity: 0}
    .articles-card-body .articles-card:hover .remove-article-button{display: inline-block;opacity: 1}

    /* FONT WIGHT */
    .fw-400 {font-weight: 400 !important;}
    .fw-500 {font-weight: 500 !important;}
    .fw-600 {font-weight: 600 !important;}
    .fw-700 {font-weight: 700 !important;}

    /*==================== BACKGROUND STYLES ======================*/  
    .bg-color-black{background-color:var(--color-black) !important;}
    .bg-color-black-same{background-color:var(--color-black-same) !important;}
    .bg-color-white {background-color: var(--color-white) !important;}
    .bg-color-white-same {background-color: var(--color-white-same) !important;}
    .bg-color-first-same{background-color:var(--color-first-same) !important;}
    .bg-color-second{background-color:var(--color-second) !important;}
    .bg-color-second-same{background-color:var(--color-second-same) !important;}
    .bg-color-black{background-color:var(--color-black) !important;}
    .bg-color-black-same{background-color:var(--color-black-same) !important;}
    .bg-color-white {background-color: var(--color-white) !important;}
    .bg-color-white-same {background-color: var(--color-white-same) !important;}
    .bg-color-mute {background-color: var(--color-mute) !important;}
    .bg-color-content{color:var(--color-content) !important;}
    /*-- red--*/
    .bg-color-red-50{background-color:var(--color-red-50) !important;}
    .bg-color-red-100{background-color:var(--color-red-100) !important;}
    .bg-color-red-200{background-color:var(--color-red-200) !important;}
    .bg-color-red-500{background-color:var(--color-red-500) !important;}
    .bg-color-red-700{background-color:var(--color-red-700) !important;}
    /*-- orange--*/
    .bg-color-orange-50{background-color:var(--color-orange-50) !important;}
    .bg-color-orange-100{background-color:var(--color-orange-100) !important;}
    .bg-color-orange-200{background-color:var(--color-orange-200) !important;}
    .bg-color-orange-300{background-color:var(--color-orange-300) !important;}
    .bg-color-orange-600{background-color:var(--color-orange-600) !important;}
    .bg-color-orange-700{background-color:var(--color-orange-700) !important;}
    /*-- green--*/
    .bg-color-green-50{background-color:var(--color-green-50) !important;}
    .bg-color-green-100{background-color:var(--color-green-100) !important;}
    .bg-color-green-300{background-color:var(--color-green-300) !important;}
    .bg-color-green-500{background-color:var(--color-green-500) !important;}
    .bg-color-green-600{background-color:var(--color-green-600) !important;}
    .bg-color-green-700{background-color:var(--color-green-700) !important;}
    /*-- blue--*/
    .bg-color-blue-50{background-color:var(--color-blue-50) !important;}
    .bg-color-blue-100{background-color:var(--color-blue-100) !important;}
    .bg-color-blue-200{background-color:var(--color-blue-200) !important;}
    .bg-color-blue-300{background-color:var(--color-blue-300) !important;}
    .bg-color-blue-500{background-color:var(--color-blue-500) !important;}
    .bg-color-blue-600{background-color:var(--color-blue-600) !important;}
    .bg-color-blue-700{background-color:var(--color-blue-700) !important;}
    /*-- purple--*/
    .bg-color-purple-50{background-color:var(--color-purple-50) !important;}
    .bg-color-purple-100{background-color:var(--color-purple-100) !important;}
    .bg-color-purple-200{background-color:var(--color-purple-200) !important;}
    .bg-color-purple-500{background-color:var(--color-purple-500) !important;}
    .bg-color-purple-600{background-color:var(--color-purple-600) !important;}
    .bg-color-purple-700{background-color:var(--color-purple-700) !important;}
    /*-- yellow --*/
    .bg-color-yellow-50{background-color:var(--color-yellow-50) !important;}
    .bg-color-yellow-100{background-color:var(--color-yellow-100) !important;}
    .bg-color-yellow-200{background-color:var(--color-yellow-200) !important;}
    .bg-color-yellow-300{background-color:var(--color-yellow-300) !important;}
    .bg-color-yellow-400{background-color:var(--color-yellow-400) !important;}
    .bg-color-yellow-500{background-color:var(--color-yellow-500) !important;}
    .bg-color-yellow-600{background-color:var(--color-yellow-600) !important;}
    /*-- gray--*/
    .bg-color-gray-50{background-color:var(--color-gray-50) !important;}
    .bg-color-gray-100{background-color:var(--color-gray-100) !important;}
    .bg-color-gray-200{background-color:var(--color-gray-200) !important;}
    .bg-color-gray-300{background-color:var(--color-gray-300) !important;}
    .bg-color-gray-400{background-color:var(--color-gray-400) !important;}
    .bg-color-gray-500{background-color:var(--color-gray-500) !important;}
    .bg-color-gray-600{background-color:var(--color-gray-600) !important;}
    .bg-color-gray-700{background-color:var(--color-gray-700) !important;}
    .bg-color-gray-900{background-color:var(--color-gray-900) !important;}
    /*-- LIGHT --*/
    .bg-light1{background-color:var(--bg-light1) !important;}
    .bg-light2{background-color:var(--bg-light2) !important;}
    .bg-light3{background-color:var(--bg-light3) !important;}
/*==================== COLOR STYLES ===========================*/
    .color-black{color:var(--color-black) !important;}
    .color-black-same{color:var(--color-black-same) !important;}
    .color-white{color:var(--color-white) !important;}
    .color-white-same{color:var(--color-white-same) !important;}
    .color-mute {color: var(--color-mute) !important;}
    .color-content{color:var(--color-content) !important;}
    /*-- red--*/
    .color-red-50{color:var(--color-red-50) !important;}
    .color-red-100{color:var(--color-red-100) !important;}
    .color-red-200{color:var(--color-red-200) !important;}
    .color-red-500{color:var(--color-red-500) !important;}
    .color-red-700{color:var(--color-red-700) !important;}
    /*-- orange--*/
    .color-orange-50{color:var(--color-orange-50) !important;}
    .color-orange-100{color:var(--color-orange-100) !important;}
    .color-orange-200{color:var(--color-orange-200) !important;}
    .color-orange-300{color:var(--color-orange-300) !important;}
    .color-orange-600{color:var(--color-orange-600) !important;}
    .color-orange-700{color:var(--color-orange-700) !important;}
    /*-- green--*/
    .color-green-50{color:var(--color-green-50) !important;}
    .color-green-100{color:var(--color-green-100) !important;}
    .color-green-300{color:var(--color-green-300) !important;}
    .color-green-500{color:var(--color-green-500) !important;}
    .color-green-600{color:var(--color-green-600) !important;}
    .color-green-700{color:var(--color-green-700) !important;}
    /*-- blue--*/
    .color-blue-50{color:var(--color-blue-50) !important;}
    .color-blue-100{color:var(--color-blue-100) !important;}
    .color-blue-200{color:var(--color-blue-200) !important;}
    .color-blue-300{color:var(--color-blue-300) !important;}
    .color-blue-500{color:var(--color-blue-500) !important;}
    .color-blue-600{color:var(--color-blue-600) !important;}
    .color-blue-700{color:var(--color-blue-700) !important;}
    /*-- purple--*/
    .color-purple-50{color:var(--color-purple-50) !important;}
    .color-purple-100{color:var(--color-purple-100) !important;}
    .color-purple-200{color:var(--color-purple-200) !important;}
    .color-purple-500{color:var(--color-purple-500) !important;}
    .color-purple-600{color:var(--color-purple-600) !important;}
    .color-purple-700{color:var(--color-purple-700) !important;}
    /*-- yellow--*/
    .color-yellow-50{color:var(--color-yellow-50) !important;}
    .color-yellow-100{color:var(--color-yellow-100) !important;}
    .color-yellow-200{color:var(--color-yellow-200) !important;}
    .color-yellow-300{color:var(--color-yellow-300) !important;}
    .color-yellow-400{color:var(--color-yellow-400) !important;}
    .color-yellow-500{color:var(--color-yellow-500) !important;}
    .color-yellow-600{color:var(--color-yellow-600) !important;}
    /*-- gray--*/
    .color-gray-50{color:var(--color-gray-50) !important;}
    .color-gray-100{color:var(--color-gray-100) !important;}
    .color-gray-200{color:var(--color-gray-200) !important;}
    .color-gray-300{color:var(--color-gray-300) !important;}
    .color-gray-400{color:var(--color-gray-400) !important;}
    .color-gray-500{color:var(--color-gray-500) !important;}
    .color-gray-600{color:var(--color-gray-600) !important;}
    .color-gray-700{color:var(--color-gray-700) !important;}
    .color-gray-800{color:var(--color-gray-800) !important;}
    .color-gray-900{color:var(--color-gray-900) !important;}
    .text-success {color: var(--color-green-600);}
    .text-error {color: var(--color-red-600);}
    /*color end*/ 
    input, button {
      border-color: transparent;
      outline: none;
    }
  }

  /* SVG COLOR STYLES */
  /*-- svg fill --*/
  .svg-fill-first,
  .svg-fill-first path {
    fill: var(--color-first) !important;
  }

  .svg-fill-second,
  .svg-fill-second path {
    fill: var(--color-second) !important;
  }

  .svg-fill-black,
  .svg-fill-black path {
    fill: var(--color-black) !important;
  }

  .svg-fill-white,
  .svg-fill-white path {
    fill: var(--color-white) !important;
  }

  .svg-fill-light1,
  .svg-fill-light1 path {
    fill: var(--bg-light1) !important;
  }

  .svg-fill-light2,
  .svg-fill-light2 path {
    fill: var(--bg-light2) !important;
  }

  .svg-fill-light3,
  .svg-fill-light3 path {
    fill: var(--bg-light3) !important;
  }

  .svg-fill-light4,
  .svg-fill-light4 path {
    fill: var(--bg-light4) !important;
  }

  /* svg fill in light/dark mode --*/
  .svg-fill-black-same,
  .svg-fill-black-same path {
    fill: var(--color-black-same) !important;
  }

  .svg-fill-white-same,
  .svg-fill-white-same path {
    fill: var(--color-white-same) !important;
  }

  /*-- svg stroke --*/
  .svg-stroke-first,
  .svg-stroke-first path {
    stroke: var(--color-first) !important;
  }

  .svg-stroke-second,
  .svg-stroke-second path {
    stroke: var(--color-second) !important;
  }

  .svg-stroke-black,
  .svg-stroke-black path {
    stroke: var(--color-black) !important;
  }

  .svg-stroke-white,
  .svg-stroke-white path {
    stroke: var(--color-white) !important;
  }

  .svg-stroke-light1,
  .svg-stroke-light1 path {
    stroke: var(--bg-light1) !important;
  }

  .svg-stroke-light2,
  .svg-stroke-light2 path {
    stroke: var(--bg-light2) !important;
  }

  .svg-stroke-light3,
  .svg-stroke-light3 path {
    stroke: var(--bg-light3) !important;
  }

  .svg-stroke-light4,
  .svg-stroke-light4 path {
    stroke: var(--bg-light4) !important;
  }

  /* svg stroke in light/dark mode --*/
  .svg-stroke-black-same,
  .svg-stroke-black-same path {
    stroke: var(--color-black-same) !important;
  }

  .svg-stroke-white-same,
  .svg-stroke-white-same path {
    stroke: var(--color-white-same) !important;
  }

  .svg-stroke-purple-700,
  .svg-stroke-purple-700 path {
    stroke: var(--color-purple-700) !important
  }

  .svg-fill-purple-700,
  .svg-fill-purple-700 path {
    fill: var(--color-purple-700) !important
  }

  .svg-stroke-gray-500,
  .svg-stroke-gray-500 path {
    stroke: var(--color-gray-500) !important
  }

  .svg-fill-gray-500,
  .svg-fill-gray-500 path {
    fill: var(--color-gray-500) !important;
  }

  .svg-stroke-green-500,
  .svg-stroke-green-500 path {
    stroke: var(--color-green-500) !important
  }

  .svg-fill-red,
  .svg-fill-red path {
    fill: var(--color-red) !important;
  }

  .svg-stroke-red,
  .svg-stroke-red path {
    stroke: var(--color-red) !important
  }

  .svg-fill-green,
  .svg-fill-green path {
    fill: var(--color-green) !important;
  }

  .svg-stroke-green,
  .svg-stroke-green path {
    stroke: var(--color-green) !important
  }

  .svg-fill-green-500,
  .svg-fill-green-500 path {
    fill: var(--color-green-500) !important;
  }

  .svg-stroke-blue-600,
  .svg-stroke-blue-600 path {
    stroke: var(--color-blue-600) !important
  }

  .svg-fill-blue-600,
  .svg-fill-blue-600 path {
    fill: var(--color-blue-600) !important;
  }

  /* green --*/
  .svg-fill-green-100,
  .svg-fill-green-100 path {
    fill: var(--color-green-100);
  }

  .svg-stroke-green-100,
  .svg-stroke-green-100 path {
    stroke: var(--color-green-100);
  }

  .svg-fill-green-300,
  .svg-fill-green-300 path {
    fill: var(--color-green-300);
  }

  .svg-stroke-green-300,
  .svg-stroke-green-300 path {
    stroke: var(--color-green-300);
  }

  .svg-fill-green-500,
  .svg-fill-green-500 path {
    fill: var(--color-green-500);
  }

  .svg-stroke-green-500,
  .svg-stroke-green-500 path {
    stroke: var(--color-green-500);
  }

  .svg-fill-green-700,
  .svg-fill-green-700 path {
    fill: var(--color-green-700);
  }

  .svg-stroke-green-700,
  .svg-stroke-green-700 path {
    stroke: var(--color-green-700);
  }

  /* svg red --*/
  .svg-fill-red-100,
  .svg-fill-red-100 path {
    fill: var(--color-red-100);
  }

  .svg-stroke-red-100,
  .svg-stroke-red-100 path {
    stroke: var(--color-red-100);
  }

  .svg-fill-red-300,
  .svg-fill-red-300 path {
    fill: var(--color-red-300);
  }

  .svg-stroke-red-300,
  .svg-stroke-red-300 path {
    stroke: var(--color-red-300);
  }

  .svg-fill-red-500,
  .svg-fill-red-500 path {
    fill: var(--color-red-500);
  }

  .svg-stroke-red-500,
  .svg-stroke-red-500 path {
    stroke: var(--color-red-500);
  }

  .svg-fill-red-700,
  .svg-fill-red-700 path {
    fill: var(--color-red-700);
  }

  .svg-stroke-red-700,
  .svg-stroke-red-700 path {
    stroke: var(--color-red-700);
  }

  /* svg orange --*/
  .svg-fill-orange-100,
  .svg-fill-orange-100 path {
    fill: var(--color-orange-100);
  }

  .svg-stroke-orange-100,
  .svg-stroke-orange-100 path {
    stroke: var(--color-orange-100);
  }

  .svg-fill-orange-300,
  .svg-fill-orange-300 path {
    fill: var(--color-orange-300);
  }

  .svg-stroke-orange-300,
  .svg-stroke-orange-300 path {
    stroke: var(--color-orange-300);
  }

  .svg-fill-orange-600,
  .svg-fill-orange-600 path {
    fill: var(--color-orange-600);
  }

  .svg-stroke-orange-600,
  .svg-stroke-orange-600 path {
    stroke: var(--color-orange-600);
  }

  .svg-fill-orange-700,
  .svg-fill-orange-700 path {
    fill: var(--color-orange-700);
  }

  .svg-stroke-orange-700,
  .svg-stroke-orange-700 path {
    stroke: var(--color-orange-700);
  }

  /* svg purple --*/
  .svg-fill-purple-50,
  .svg-fill-purple-50 path {
    fill: var(--color-purple-50);
  }

  .svg-stroke-purple-50,
  .svg-stroke-purple-50 path {
    stroke: var(--color-purple-50);
  }

  .svg-fill-purple-100,
  .svg-fill-purple-100 path {
    fill: var(--color-purple-100);
  }

  .svg-stroke-purple-100,
  .svg-stroke-purple-100 path {
    stroke: var(--color-purple-100);
  }

  .svg-fill-purple-200,
  .svg-fill-purple-200 path {
    fill: var(--color-purple-200);
  }

  .svg-stroke-purple-200,
  .svg-stroke-purple-200 path {
    stroke: var(--color-purple-200);
  }

  .svg-fill-purple-500,
  .svg-fill-purple-500 path {
    fill: var(--color-purple-500);
  }

  .svg-stroke-purple-500,
  .svg-stroke-purple-500 path {
    stroke: var(--color-purple-500);
  }

  .svg-fill-purple-600,
  .svg-fill-purple-600 path {
    fill: var(--color-purple-600);
  }

  .svg-stroke-purple-600,
  .svg-stroke-purple-600 path {
    stroke: var(--color-purple-600);
  }

  .svg-fill-purple-700,
  .svg-fill-purple-700 path {
    fill: var(--color-purple-700);
  }

  .svg-stroke-purple-700,
  .svg-stroke-purple-700 path {
    stroke: var(--color-purple-700);
  }

  /* svg yellow --*/
  .svg-fill-yellow-50,
  .svg-fill-yellow-50 path {
    fill: var(--color-yellow-50);
  }

  .svg-stroke-yellow-50,
  .svg-stroke-yellow-50 path {
    stroke: var(--color-yellow-50);
  }

  .svg-fill-yellow-100,
  .svg-fill-yellow-100 path {
    fill: var(--color-yellow-100);
  }

  .svg-stroke-yellow-100,
  .svg-stroke-yellow-100 path {
    stroke: var(--color-yellow-100);
  }

  .svg-fill-yellow-200,
  .svg-fill-yellow-200 path {
    fill: var(--color-yellow-200);
  }

  .svg-stroke-yellow-200,
  .svg-stroke-yellow-200 path {
    stroke: var(--color-yellow-200);
  }

  .svg-fill-yellow-300,
  .svg-fill-yellow-300 path {
    fill: var(--color-yellow-300);
  }

  .svg-stroke-yellow-300,
  .svg-stroke-yellow-300 path {
    stroke: var(--color-yellow-300);
  }

  .svg-fill-yellow-400,
  .svg-fill-yellow-400 path {
    fill: var(--color-yellow-400);
  }

  .svg-stroke-yellow-400,
  .svg-stroke-yellow-400 path {
    stroke: var(--color-yellow-400);
  }

  .svg-fill-yellow-500,
  .svg-fill-yellow-500 path {
    fill: var(--color-yellow-500);
  }

  .svg-stroke-yellow-500,
  .svg-stroke-yellow-500 path {
    stroke: var(--color-yellow-500);
  }

  .svg-fill-yellow-600,
  .svg-fill-yellow-600 path {
    fill: var(--color-yellow-600);
  }

  .svg-stroke-yellow-600,
  .svg-stroke-yellow-600 path {
    stroke: var(--color-yellow-600);
  }

  /* svg gray --*/
  .svg-fill-gray-50,
  .svg-fill-gray-50 path {
    fill: var(--color-gray-50);
  }

  .svg-stroke-gray-50,
  .svg-stroke-gray-50 path {
    stroke: var(--color-gray-50);
  }

  .svg-fill-gray-100,
  .svg-fill-gray-100 path {
    fill: var(--color-gray-100);
  }

  .svg-stroke-gray-100,
  .svg-stroke-gray-100 path {
    stroke: var(--color-gray-100);
  }

  .svg-fill-gray-200,
  .svg-fill-gray-200 path {
    fill: var(--color-gray-200);
  }

  .svg-stroke-gray-200,
  .svg-stroke-gray-200 path {
    stroke: var(--color-gray-200);
  }

  .svg-fill-gray-300,
  .svg-fill-gray-300 path {
    fill: var(--color-gray-300);
  }

  .svg-stroke-gray-300,
  .svg-stroke-gray-300 path {
    stroke: var(--color-gray-300);
  }

  .svg-fill-gray-500,
  .svg-fill-gray-500 path {
    fill: var(--color-gray-500);
  }

  .svg-fill-gray-400,
  .svg-fill-gray-400 path {
    fill: var(--color-gray-400);
  }

  .svg-stroke-gray-400,
  .svg-stroke-gray-400 path {
    stroke: var(--color-gray-400);
  }

  .svg-fill-gray-500,
  .svg-fill-gray-500 path {
    fill: var(--color-gray-500);
  }

  .svg-stroke-gray-500,
  .svg-stroke-gray-500 path {
    stroke: var(--color-gray-500);
  }

  .svg-fill-gray-600,
  .svg-fill-gray-600 path {
    fill: var(--color-gray-600);
  }

  .svg-stroke-gray-600,
  .svg-stroke-gray-600 path {
    stroke: var(--color-gray-600);
  }

  .svg-fill-gray-700,
  .svg-fill-gray-700 path {
    fill: var(--color-gray-700);
  }

  .svg-stroke-gray-700,
  .svg-stroke-gray-700 path {
    stroke: var(--color-gray-700);
  }

  .svg-fill-gray-800,
  .svg-fill-gray-800 path {
    fill: var(--color-gray-800);
  }

  .svg-stroke-gray-800,
  .svg-stroke-gray-800 path {
    stroke: var(--color-gray-800);
  }

  .svg-fill-gray-900,
  .svg-fill-gray-900 path {
    fill: var(--color-gray-900);
  }

  .svg-stroke-gray-900,
  .svg-stroke-gray-900 path {
    stroke: var(--color-gray-900);
  }

  /* SVG SIZES STYLES */
  .iconSize-0 {
    width: 0px;
    height: 0px;
  }

  .iconSize-6 {
    width: 6px;
    height: 6px;
  }

  .iconSize-8 {
    width: 8px;
    height: 8px;
  }

  .iconSize-10 {
    width: 10px;
    height: 10px;
  }

  .iconSize-12 {
    width: 12px;
    height: 12px;
  }

  .iconSize-14 {
    width: 14px;
    height: 14px;
  }

  .iconSize-15 {
    width: 15px;
    height: 15px;
  }

  .iconSize-16 {
    width: 16px;
    height: 16px;
  }

  .iconSize-18 {
    width: 18px;
    height: 18px;
  }

  .iconSize-20 {
    width: 20px;
    height: 20px;
  }

  .iconSize-22 {
    width: 22px;
    height: 22px;
  }

  .iconSize-24 {
    width: 24px;
    height: 24px;
  }

  .iconSize-25 {
    width: 25px;
    height: 25px;
  }

  .iconSize-28 {
    width: 28px;
    height: 28px;
  }

  .iconSize-30 {
    width: 30px;
    height: 30px;
  }

  .iconSize-32 {
    width: 32px;
    height: 32px;
  }

  .iconSize-34 {
    width: 34px;
    height: 34px;
  }

  .iconSize-35 {
    width: 35px;
    height: 35px;
  }

  .iconSize-36 {
    width: 36px;
    height: 36px;
  }

  .iconSize-38 {
    width: 38px;
    height: 38px;
  }

  .iconSize-40 {
    width: 40px;
    height: 40px;
  }

  .iconSize-42 {
    width: 42px;
    height: 42px;
  }

  .iconSize-44 {
    width: 44px;
    height: 44px;
  }

  .iconSize-45 {
    width: 45px;
    height: 45px;
  }

  .iconSize-48 {
    width: 48px;
    height: 48px;
  }

  .iconSize-50 {
    width: 50px;
    height: 50px;
  }

  .iconSize-80 {
    width: 80px;
    height: 80px;
  }

  .iconSize-100 {
    width: 100px;
    height: 100px;
  }

  .iconSize-150 {
    width: 150px;
    height: 150px;
  }

  .iconSize-200 {
    width: 200px;
    height: 200px;
  }

  .dropdown .dropdown-menu .dropdown-item:is(:active, :focus-visible) {
    background: transparent;
    outline: none;
  }

  .market-snapshot-tabs-dropdown {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .market-snapshot-tabs-dropdown .general-tabs-nav,
  .market-snapshot-tabs-dropdown .dropdown {
    overflow: auto;
  }

  .market-snapshot-tabs-dropdown .dropdown-menu {
    margin-top: 0;
    position: fixed;
    z-index: 1080;
  }

  .market-snapshot-tabs-dropdown .dropdown-menu *:is(:focus, :focus-visible, :focus-within) {
    outline: none;
    background: transparent;
    border: 0
  }

  .market-snapshot-tabs-dropdown .dropdown-menu .dropdown-item.active,
  .market-snapshot-tabs-dropdown .dropdown-menu .dropdown-item:active {
    background-color: unset;
    color: unset;
  }

  .market-snapshot-tabs-dropdown .market-tab-dropdown {
    position: relative;
  }

  .market-snapshot-tabs-dropdown .market-tab-dropdown-group {
    border-radius: calc(4px + 0.625rem);
    overflow: hidden;
  }

  .market-snapshot-tabs-dropdown .market-tab-dropdown-group:has(.nav-link.active) {
    background-color: var(--color-dark);
  }

  .market-snapshot-tabs-dropdown .market-tab-dropdown-group:has(.nav-link.active) .market-tab-dropdown-toggle svg,
  .market-snapshot-tabs-dropdown .market-tab-dropdown-group:has(.nav-link.active) .market-tab-dropdown-toggle svg path {
    stroke: var(--color-black) !important;
  }

  .market-snapshot-tabs-dropdown .market-tab-dropdown-group .nav-link,
  .market-snapshot-tabs-dropdown .market-tab-dropdown-group .nav-link.active {
    background-color: transparent;
    border-radius: 0;
    color: var(--color-black-same);
  }

  .market-snapshot-tabs-dropdown .market-tab-dropdown-group .nav-link.active {
    color: var(--color-black);
  }

  .market-snapshot-tabs-dropdown .market-tab-dropdown-group .nav-link:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .market-snapshot-tabs-dropdown .market-tab-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background-color: transparent;
    border: 0;
    color: var(--color-black);
  }

  /* Hide tick by default */
  .market-snapshot-tabs-dropdown .dropdown-item svg {
    opacity: 0;
    visibility: hidden;
  }

  /* Show only for selected */
  .market-snapshot-tabs-dropdown .dropdown-item.selected-market svg {
    opacity: 1;
    visibility: visible;
  }

  .sentiment-bar {
    width: 60px;
    height: 10px;
    background: var(--color-gray-200);
    position: relative;
    overflow: hidden;
    display: inline-block;
    --val: 0;
  }

  .sentiment-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: calc((var(--val) / 10) * 100%);
    background-color: var(--color-green-600);
    transition: width 0.3s ease, background-color 0.3s ease;
  }

  .sentiment-bar.is-negative::before {
    background-color: var(--color-red-500);
  }

  .sentiment-bar-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(90deg, transparent 2px, var(--color-white) 2px);
    background-size: 6px 100%;
    z-index: 2;
  }

  .market-intelligence-heatmap {
    width: 100%;
    height: auto;
    display: block;
  }

  .market-heatmap-stage {
    position: relative;
    width: 100%;
  }

  .market-heatmap-tooltip {
    position: absolute;
    left: 0;
    top: 0;
    width: min(520px, calc(100% - 24px));
    padding: 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(14px);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 12px, 0);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    z-index: 3;
  }

  .market-heatmap-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
  }

  .market-heatmap-tooltip-logo {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #76b900;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
  }

  .market-heatmap-tooltip-copy {
    min-height: 120px;
  }

  .market-heatmap-legend {
    gap: 0.375rem;
    flex-wrap: wrap;
  }

  .market-heatmap-brand {
    color: var(--color-gray-500);
    letter-spacing: -0.02em;
  }

  .market-heatmap-node {
    cursor: pointer;
  }

  .market-heatmap-node rect {
    transition: opacity 0.15s ease, stroke 0.15s ease, stroke-width 0.15s ease;
  }

  .market-heatmap-node:hover rect,
  .market-heatmap-node.is-active rect {
    opacity: 0.95;
    stroke: rgba(0, 0, 0, 0.26);
    stroke-width: 1.5px;
  }

  .market-heatmap-expanded {
    position: fixed;
    inset: 18px;
    z-index: 1090;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: calc(100vh - 36px);
  }

  .market-heatmap-expanded .card {
    border-radius: 26px;
  }

  .market-heatmap-expanded .card-body {
    height: calc(100% - 86px);
    display: flex;
    flex-direction: column;
  }

  .market-heatmap-expanded .market-heatmap-shell,
  .market-heatmap-expanded .market-heatmap-stage,
  .market-heatmap-expanded .market-intelligence-heatmap {
    height: 100%;
  }

  .market-heatmap-expanded .market-intelligence-heatmap {
    max-height: calc(100vh - 190px);
  }

  .market-heatmap-close {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--color-gray-200);
    background: rgba(255, 255, 255, 0.96);
    color: var(--color-black);
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }

  .market-heatmap-expanded .market-heatmap-close {
    display: inline-flex;
  }

  .market-heatmap-expanded .card-header .color-black {
    color: var(--color-white) !important;
  }

  .market-heatmap-expanded .card-header .color-gray-600 {
    color: var(--color-gray-300) !important;
  }

  .market-heatmap-expanded [data-heatmap-expand] {
    display: none !important;
  }

  .market-heatmap-backdrop {
    position: fixed;
    inset: 0;
    background: rgb(20 24 35 / 65%);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0.18s ease;
    z-index: 1085;
  }

  .market-heatmap-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
  }

  body.market-heatmap-lock {
    overflow: hidden;
  }

  .market-intelligence-heatmap text {
    font-family: inherit;
  }

  .heatmap-sector-label {
    fill: var(--color-gray-700);
    font-size: 13px;
    font-weight: 600;
  }

  .heatmap-ticker {
    fill: var(--color-black-same);
    font-size: 20px !important;
    font-weight: 500 !important;
  }

  .heatmap-change {
    fill: var(--color-second);
    font-size: 18px !important;
    font-weight: 500;
  }

  .heatmap-ticker-sm {
    fill: var(--color-black);
    font-size: 11px;
    font-weight: 600;
  }

  .heatmap-change-sm {
    fill: var(--color-gray-700);
    font-size: 10px;
    font-weight: 500;
  }

  .heatmap-up-strong {
    fill: #a7e08e;
    background-color: #a7e08e;
  }

  .heatmap-up {
    fill: #cfeeb9;
    background-color: #cfeeb9;
  }

  .heatmap-up-soft {
    fill: #e5f7d8;
    background-color: #e5f7d8;
  }

  .heatmap-down {
    fill: #f6c2cb;
    background-color: #f6c2cb;
  }

  .heatmap-down-strong {
    fill: #ee8ea0;
    background-color: #ee8ea0;
  }

  .heatmap-flat {
    fill: #f3f4f6;
    background-color: #f3f4f6;
  }

  .heatmap-legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.04);
    flex: 0 0 12px;
  }

  .prediction-list-card {
    border-top: 1px solid var(--color-gray-200);
  }

  .market-intelligence-body {
    padding-top: 0;
  }

  .prediction-option-row+.prediction-option-row {
    border-top: 1px dashed var(--color-gray-200);
  }

  .prediction-change-badge {
    min-width: 66px;
  }

  .dataTables_wrapper.no-footer .dataTables_info,
  .dataTables_wrapper.no-footer .dataTables_paginate {
    display: none;
  }

  .earnings-calendar {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
  }

  .calendar-card {
    min-width: 140px;
    background: var(--color-gray-100);
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
  }

  .calendar-card.active {
    border: 2px solid var(--color-first);
    background: var(--color-blue-50);
  }

  .calendar-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    ;
    gap: 4px;
    margin-top: 5px;
  }

  .screener {
    position: relative;
  }

  /* INPUT */
  .screener__input {
    position: relative;
    margin-bottom: 16px;
  }

  .screener__textarea {
    width: 100%;
    padding: 14px 50px 14px 14px;
    border-radius: 16px;
    resize: none;
    font-size: 14px;
  }

  .screener__btn {
    position: absolute;
    right: 10px;
    bottom: 15px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #666;
    color: var(--color-white);
    cursor: pointer;
  }

  /* DEFAULT STATE (idle pe skeleton visible) */
  .screener.is-idle .screener__loading {
    display: block;
  }

  /* ensure result hidden by default */
  .screener.is-idle .screener__result {
    display: none;
  }

  .screener__loading,
  .screener__result {
    transition: opacity 0.3s ease;
  }

  /* ICON SWITCH */
  .screener__icon--loader {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-white);
    border-top: 2px solid transparent;
    border-radius: 50%;
  }

  /* STATES */
  .screener__loading,
  .screener__result {
    display: none;
  }

  .screener.is-loading .screener__loading {
    display: block;
  }

  .screener.is-result .screener__result {
    display: block;
  }

  /* BUTTON LOADING */
  .screener.is-loading .screener__icon--send {
    display: none;
  }

  .screener.is-loading .screener__icon--loader {
    display: inline-block;
    animation: screenerSpin 1s linear infinite;
  }

  /* DOT GRID */
  .screener__loading {
    height: 250px;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
  }

  .screener__dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(#ddd 1px, transparent 1px);
    background-size: 16px 16px;
  }

  /* DEFAULT (NO animation) */
  .screener__dots::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(#444 1.5px, transparent 1.5px);
    background-size: 32px 32px;
    opacity: 0;
    /* hidden by default */
    transition: opacity 0.3s ease;
  }

  /* ONLY animate during loading */
  .screener.is-loading .screener__dots::after {
    opacity: 0.4;
    animation: screenerDots 2s linear infinite;
  }

  @keyframes screenerDots {
    from {
      background-position: 0 0;
    }

    to {
      background-position: 32px 32px;
    }
  }

  /* MESSAGE CENTER */
  .screener__message {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #666;
    z-index: 2;
  }

  .daterangepicker td.active,
  .daterangepicker td.active:hover {
    background-color: var(--color-first);
  }

  .timeline {
    position: relative;
  }

  .timeline-line {
    width: 2px;
    background: #dee2e6;
    height: 100%;
    position: relative;
  }

  .timeline-dot {
    width: 10px;
    height: 10px;
    background: var(--color-gray-400);
    border-radius: 50%;
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%) !important;
  }

  .timeline-dot.active {
    background-color: var(--color-first);
    top: 0;
  }

  /* Optional animated active dot */
  .timeline-item .timeline-dot.active {
    animation: pulse 1.5s infinite;
  }

  @keyframes pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.5);
    }

    70% {
      box-shadow: 0 0 0 10px rgba(13, 110, 253, 0);
    }

    100% {
      box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);
    }
  }

  .custom-datepicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    position: relative;
  }

  .date-trigger {
    font-size: 16px;
    cursor: pointer;
  }

  .daterangepicker {
    z-index: 99999 !important;
    position: absolute !important;
  }

  /* hide input */
  .date-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .daterangepicker .calendar-table td.off {
    background-color: transparent !important;
  }

  /* FIX DATEPICKER POSITION */
  .daterangepicker {
    z-index: 99999 !important;
  }

  .daterangepicker .calendar-table {
    background-color: var(--color-white);
  }

  .daterangepicker.opensleft:before {
    right: unset !important;
    left: 4px !important;
  }

  .daterangepicker.opensleft:after {
    display: none !important;
  }

  .daterangepicker {
    z-index: 99999 !important;
    position: absolute !important;
    will-change: top, left;
    background-color: var(--color-white);
  }

  .daterangepicker .drp-buttons .btn.applyBtn {
    background-color: var(--color-first) !important;
    border: 0;
  }

  .chart-card1 .counts {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

  .chart-card1 .bearish {
    color: var(--color-red-700);
  }

  .chart-card1 .neutral {
    color: var(--color-gray-300);
  }

  .chart-card1 .bullish {
    color: var(--color-green-700);
  }

  .chart-card1 .bar {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
  }

  .chart-card1 .segment {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--color-gray-300);
  }

  .chart-card1 .segment.red {
    background: var(--color-red-700);
  }

  .chart-card1 .segment.gray {
    background: var(--color-gray-300);
  }

  .chart-card1 .segment.green {
    background: var(--color-green-700);
  }

  .chart-card1 .slider {
    position: relative;
    height: 6px;
    background: linear-gradient(to right, var(--color-red-700), var(--color-gray-300), var(--color-green-700));
    border-radius: 4px;
  }

  .chart-card1 .dot-area {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    transform: translateX(-50%);
  }

  .chart-card1 .dot {
    display: block;
    min-width: 10px;
    width: 10px;
    min-height: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid transparent;
  }

  .chart-card1 .slider .dot {
    min-width: 14px;
    width: 14px;
    min-height: 14px;
    height: 14px;
    border: 2px solid var(--color-white);
  }

  .chart-card1 .low {
    background: var(--color-red-700);
  }

  .chart-card1 .current {
    background: var(--color-white);
    border: 2px solid var(--color-gray-400) !important;
  }

  .chart-card1 .average {
    background: var(--color-white);
    border: 2px solid var(--color-green-700) !important;
  }

  .chart-card1 .high {
    background: var(--color-green-700);
  }

  .border-desktop-start {
    border-left: 1px solid transparent !important;
  }

  .border-desktop-end {
    border-right: 1px solid transparent !important;
  }

  /*---------- card tab css -----------*/
  /* General Tabs CSS */
  .general-tabs-wapper {
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: auto;
  }

  .general-tabs-nav {
    display: inline-flex;
    align-items: center;
    background-color: var(--gray-100);
    padding: 4px 3px;
    border-radius: calc(4px + 0.625rem);
    
    .search-input {
      border: none;
      display: block;
      width: 100%;
      height: 35px;
      line-height: 35px;
      font-size: 0.8rem;
      padding: 0;
      outline: 0;
      float: left;
      color: var(--color-black);
      padding-right: 10px;
      padding-left: 35px;
    }
    .searchIcons {
      position: absolute;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      top: 0;
      left: 0px;
      bottom: 0;
      margin: auto 0;
      width: 34px;
      height: 34px;
      z-index: 3;
      border-radius: 50%;
      background-color: transparent;
    }
  }

  .general-tabs-nav .nav-link {
    padding: 0.25rem 1rem;
    border-radius: calc(4px + 0.625rem);
    color: var(--color-black-same);
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .general-tabs-nav .nav-link.active {
    background: var(--color-dark);
    color: var(--color-black);
  }

  /* Common Card Css */
  .common-card {
    padding: 1rem;
    background-color: var(--color-dark);
    border: 1px solid var(--bg-light3);
    transition: all .3s;
  }

  a.common-card:hover {
    border-color: var(--color-gray-300);
    box-shadow: var(--shadow-md);
  }

  /* Filter and custom search */
  .filter-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .filter-search .filter-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    overflow-x: auto;
    white-space: nowrap;
  }

  .filter-search .filter-pills .pill {
    border: 1px solid var(--color-gray-200);
    background-color: transparent;
    padding: 0.45rem 0.875rem;
    font-weight: 500;
    border-radius: 10px;
    line-height: normal;
    font-size: 0.725rem;
  }

  .filter-search .filter-pills .pill.active {
    background-color: var(--color-black);
    color: var(--color-white);
  }

  /* Common Table Css */
  .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {
    border-bottom: 0;
  }

  .dataTables_wrapper .dataTable.common-table thead tr th {
    background-color: var(--bg-light1);
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--color-mute) !important;
    border-color: var(--border-color);
    border-top: 1px solid var(--border-color);
  }

  .dataTables_wrapper .dataTable.common-table tbody tr td {
    font-size: 0.875rem;
    color: var(--color-mute);
    border-color: var(--border-color);
    background-color: transparent;
    padding: 0.75rem;
  }

  .dataTables_wrapper .dataTable.common-table tbody tr:hover {
    background-color: var(--bg-light1);
  }

  .tableFooter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0.5rem 0.875rem;
  }

  .tableFooter .dataTables_info {
    color: var(--color-mute);
    font-size: 0.875rem;
  }

  .tableFooter .dataTables_paginate {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .tableFooter .dataTables_paginate span {
    display: flex;
    gap: 5px;
  }

  .tableFooter .dataTables_paginate a.paginate_button {
    background-color: var(--color-gray-200);
    padding: 0.35rem 0.675rem;
    font-size: 0.875rem;
    color: var(--color-black);
    cursor: pointer;
    border-radius: 6px;
  }

  .tableFooter .dataTables_paginate a.paginate_button.disabled {
    opacity: 0.5;
  }

  .tableFooter .dataTables_paginate a.paginate_button.current {
    background-color: var(--color-black);
    color: var(--color-white);
  }

  /* Custom Search */
  input.custom-search {
    min-height: auto;
    border: 1px solid var(--color-gray-200);
  }

  .watchlist-toast .btn-close {
    font-size: 0.575rem !important;
  }

  html[data-bs-theme=dark] .watchlist-toast .btn-close {
    background-color: var(--color-black) !important;
  }

  .watchlist-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    transition: background-color .3s;
  }

  .watchlist-btn:hover {
    background-color: var(--color-gray-200);
  }

  .watchlist-btn[data-textvalue="watchlist"] svg.watchlist-on {
    fill: rgb(255, 204, 0);
  }

  .watchlist-btn[data-textvalue="articles"] svg.watchlist-on {
    stroke: var(--color-blue-700);
  }

  .watchlist-btn[data-textvalue="notification"] svg.watchlist-on {
    stroke: var(--color-gray-400);
  }

  @media (max-width: 768px) {
    .filter-search {
      flex-wrap: wrap-reverse;
    }

    .filter-search .customSearch {
      width: 100%;
    }
  }

  @media(max-width: 412px) {
    .trading-stocks .col-sm-6 {
      width: 100%;
    }
  }

  @media (min-width: 768px) {

    .border-desktop-start,
    .border-desktop-end {
      border-color: var(--bs-border-color) !important;
    }
  }

  @media (max-width: 991.98px) {
    .market-intelligence-sidebar {
      max-width: 100%;
    }

    .market-heatmap-expanded {
      inset: 10px;
      height: calc(100vh - 20px);
    }

    .market-heatmap-tooltip {
      width: calc(100% - 16px);
      padding: 1rem;
    }

    &.main-section {
      padding-left: 0;
    }
  }


  @media (max-width: 768px) {
    .timeline-item {
      flex-direction: column;
    }

    .timeline-item .col-3 {
      text-align: left !important;
      margin-bottom: 5px;
    }

    .timeline-item .col-1 {
      display: none;
    }

    .timeline-item .col-8 {
      padding-left: 0 !important;
    }
  }

  @media (max-width: 575px) {
    .border-desktop-top {
      border-top: 1px solid var(--bs-border-color) !important;
    }

    .border-desktop-bottom {
      border-bottom: 1px solid var(--bs-border-color) !important;
    }
  }
  @media screen and (max-width: 1024px) {
    .mainHeading{font-size:2.3rem;}
    .largeHeading{font-size:2rem;}
    .subHeading {font-size: 1.2rem;}
    .thirdHeading {font-size: 1.1rem;}
  }
  @media screen and (max-width: 992px) {
      .mainHeading{font-size:2.1rem;}
      .largeHeading{font-size:1.8rem;}
      .subHeading {font-size: 1.1rem;}
      .thirdHeading {font-size: 1rem;}
      /*Home*/
      .article-card {min-height: 420px;}
      .article-small-card {height: 200px;}
      .site-footer__right {border-left: none;padding-left: 0;}
      .site-newsletter__form {flex-direction: column;}
      .site-newsletter__form button {width: 100%;}
      .remove-article-button{display: inline-block;opacity:1}
  }
  @media screen and (max-width: 768px) {
      .article-card-content{padding: 1rem}
  }
  @media screen and (max-width: 575px) {
      .mainHeading {font-size: 1.8rem;}
      .largeHeading {font-size: 1.5rem;}
      .subHeading {font-size: 1.1rem;}
      .thirdHeading {font-size: 1rem;}
  }
}