@charset "UTF-8";



/* CSS Document */
@import url("https://perfstats.autochartist.com/performance-stats-v3/css/performance_stats_v3.css");

@import url('https://fonts.googleapis.com/css2?family=Manrope:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Permanent+Marker&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');



/* =============================
   VARIABLES
============================= */
:root {
  /* Colors */
  --main-brand-color: #0b1118;
  --main-heading-color: #ffffff;
  --main-high-light-color: #daecfa;
  --overall-text-color: #000000;
  --page-background-color: #ffffff;
  --blocks-border-color: #ad121214;
  --selected-block-background-color: #f4f4f5;
  --active-pattern-name-text-color: #000000;
  --active-percentage-text-color: #ff0000;
  --inner-box-selected-background-color: #dbe2e6;
  --inner-box-non-selected-background-color: #eaeaea;
  --inner-box-inactive-pattern-name-text-color: #000000;
  --active-instrument-color: #000000;
  --inactive-instrument-text-color: #000000;
  --selected-instrument-pattern-percentage-colors: #000000;
  --deselected-instrument-pattern-percentage-colors: #000000;
  --deselected-inner-border-colors: #e0ecf8;
  --disclaimer-link-color: #0b1118;
  --color-gray-light: rgb(236 238 241);
  --color-neutral: rgb(26 27 36);
  --color-positive: rgb(16 185 129);
  --color-negative: rgb(225 29 72);
  --color-very-negative: rgb(223 68 106);
  --pattern-type-text-color: #dab5b5;

  /* Backgrounds */
  --bg-dark: #0d0e22;
  --bg-layout: #141632;

  /* Typography */
  --font-main: 'Poppins', sans-serif !important;
  --font-size-lg: 14px;

  /* Shadows */
  --shadow-card: 0px 9px 11px 0px #88888817;
  --shadow-ac-stat: 0 4px 6px -1px rgb(0 0 0 / 0.1),
                    0 2px 4px -2px rgb(0 0 0 / 0.1);

  /* Spacing */
  --h-header: 60px;
  --border-radius: 10px 10px 10px 10px !important;
}

/* =============================
   TYPOGRAPHY
============================= */
.font-Manrope {
  font-family: var(--font-main) ;
  font-size: var(--font-size-md);
}
.text-sm {
  font-size: var(--font-size-sm);
  line-height: 1.25rem;
}
.text-emerald-500 {
  --tw-text-opacity: 1;
  /* color: var(--main-brand-color); */
  font-weight: bold;
}
.text-ac-gray-200,
.text-ac-gray-300,
.text-ac-gray-400 {
  --tw-text-opacity: 1;
  color: var(--overall-text-color);
}
.text-ac-gray-300,
.text-ac-gray-400 {
  font-weight: 700;
}
.ac-description-full {
  font-weight: 400;
}
.ac-active .ac-stat .ac-instrument {
  font-weight: 600;
  --tw-text-opacity: 1 !important;
  color: var(--active-instrument-color) !important;
}
a {
  color: var(--main-brand-color) !important;
  text-decoration: inherit;
  font-weight: 400 !important;
}

/* =============================
   LAYOUT
============================= */
.h-20 {
  height: var(--h-header);
}
.ac-layout {
  background-color: var(--bg-layout) !important;
}
.ac-stat {
  background-color: var(--bg-dark);
}
div.flex.flex-col.md\:flex-row.flex-wrap.lg\:flex-nowrap.lg\:flex-row.items-baseline.lg\:items-center.justify-between.w-full.h-20.pt-6.lg\:pb-2.lg\:space-y-0.bg-ac-gray-50.dark\:bg-ac-gray-900.rounded-t-lg {
  padding-right: 10px !important;
  border-radius: var(--border-radius) !important;
}

/* =============================
   BACKGROUNDS & BORDERS
============================= */
.from-ac-gray-50 {
  --tw-gradient-from: var(--page-background-color) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.bg-\[\#0C0C0C\] {
  background-color: var(--page-background-color);
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: var(--page-background-color);
}
.bg-ac-gray-50 {
  --tw-bg-opacity: 1;
  background-color: var(--main-brand-color);
  border-radius: var(--border-radius);
  padding-top: 5px;
  margin-bottom: 25px;
}
.border-ac-gray-100 {
  --tw-border-opacity: 1;
}

/* =============================
   SLIDER
============================= */
.ac-slider.slider-sticky {
  --tw-bg-opacity: 1;
  background-color: var(--page-background-color);
  box-shadow: var(--shadow-card);
  border-radius: var(--border-radius);
  border: 1px solid #eee;
  top: 61px !important;
}

/* =============================
   PATTERNS & ICONS
============================= */
.ac-icon-pattern .pattern,
.ac-icon-pattern .lines {
  stroke: var(--overall-text-color);
}
.ac-stat-button.ac-active .ac-pattern {
  --tw-text-opacity: 1 !important;
  color: var(--overall-text-color) !important;
}

/* =============================
   ACTIVE STATES - BASE
============================= */
.ac-active .ac-stat {
  --tw-border-opacity: 1 !important;
  border-left-color: var(--color-gray-light) !important;
  --tw-bg-opacity: 1;
  background-color: var(--selected-block-background-color);
  box-shadow: var(--shadow-ac-stat);
  border: 1px solid var(--main-brand-color);
}
.ac-active .ac-stat-button {
  --tw-border-opacity: 1 !important;
  border-color: var(--color-gray-light) !important;
  flex-grow: 0.3;
  border-color: var(--deselected-inner-border-colors) !important;
  background-color: var(--inner-box-non-selected-background-color);
}

.ac-active .ac-stat-button .ac-emerging {
  --tw-border-opacity: 1 !important;
  border-color: var(--color-gray-light) !important;
  flex-grow: 0.3;
  border: 1px solid !important;
  background-color: var(--inner-box-non-selected-background-color);
}

/* Positive */
.ac-active.positive .ac-stat {
  border-left-color: var(--color-positive) !important;
  border-left-width: 6px;
}
.ac-active.positive .ac-stat-button.ac-active {
  border-color: var(--color-positive) !important;
}
.ac-active.positive .ac-stat-button.ac-active .ac-details {
  color: var(--color-positive) !important;
}

/* Very Positive */
.ac-active.very-positive .ac-stat {
  /* border-left-color: var(--main-brand-color) !important; */
  border-left-width: 6px;
}
.ac-active.very-positive .ac-stat-button.ac-active {
  border-color: var(--main-brand-color) !important;
  background-color: var(--inner-box-selected-background-color);
}
.ac-active.very-positive .ac-stat-button.ac-active .ac-details {
  color: var(--main-brand-color) !important;
}

/* Negative */
.ac-active.negative .ac-stat {
  border-left-color: var(--color-negative) !important;
  border-left-width: 6px;
}
.ac-active.negative .ac-stat-button.ac-active {
  border-color: var(--color-negative) !important;
}
.ac-active.negative .ac-stat-button.ac-active .ac-details {
  color: var(--color-negative) !important;
}

/* Very Negative */
.ac-active.very-negative .ac-stat {
  border-left-color: var(--color-very-negative) !important;
  border-left-width: 6px;
}
.ac-active.very-negative .ac-stat-button.ac-active {
  border-color: var(--color-very-negative) !important;
}
.ac-active.very-negative .ac-stat-button.ac-active .ac-details {
  color: var(--color-very-negative) !important;
}

/* Neutral */
.ac-active.neutral .ac-stat {
  border-left-color: var(--color-neutral) !important;
  border-left-width: 6px;
}
.ac-active.neutral .ac-stat-button.ac-active {
  border-color: var(--color-neutral) !important;
}
.ac-active.neutral .ac-stat-button.ac-active .ac-details {
  color: var(--color-neutral) !important;
}

/* =============================
   HOVERS
============================= */
@media (hover: hover) and (poManrope: fine) {
  .hover\:border-ac-gray-100:hover {
    border-color: var(--main-brand-color);
  }
  .hover\:bg-ac-gray-50:hover {
    background-color: var(--main-high-light-color);
  }
  .group:hover .group-hover\:text-ac-gray-400 {
    color: var(--overall-text-color);
  }
}

/* =============================
   RESPONSIVE
============================= */
@media (min-width: 768px) {
  .md\:text-xl {
    font-size: var(--font-size-lg);
    line-height: 1.75rem;
  }
}
@media (min-width: 1024px) {
  .lg\:inline {
    display: inline;
    font-size: var(--font-size-sm);
  }
}

#ac-performance-stats {
    * {
        scrollbar-color: var(--main-brand-color) transparent !important;
    }
}

div.ac-layout.mx-auto.w-full.max-w-\[1400px\] {
  background: var(--page-background-color) !important;
}


span.ac-pattern.uppercase.tracking-wide {
  /* color: blue; */
}

.ac-active .ac-pattern {
    color: #000000 !important;
}

.border-ac-gray-100
 {
    border-color: #00000014;
}

.rounded-lg {
    border-radius: var(--border-radius);
}

.rounded-t-lg {
    border-top-left-radius:  var(--border-radius) !important;
    border-top-right-radius:  var(--border-radius) !important;
}

a.hover\:underline.text-ac-gray-400.dark\:text-ac-gray-500.focus\:outline-none.focus-visible\:underline {
  color: var(--disclaimer-link-color) !important;
  font-weight: 500 !important;
}
h1.lg\:mx-0.pl-4.md\:pl-10.text-lg.font-medium.text-ac-gray-400.dark\:text-white {
  color:  var(--main-heading-color);
  font-size: 14px;
}

h1.lg\:mx-0.pl-4.md\:pl-10.text-lg.font-medium.text-ac-gray-400.dark\:text-white a:link{
  color:  var(--main-heading-color);
}

button.ac-disclaimer.ac-scroll-to.hidden.md\:flex.justify-end.lg\:order-3.lg\:mx-0.pl-4.pr-4.md\:pr-10.mb-4.md\:mb-0.w-auto.text-ac-gray-300.dark\:text-ac-gray-500.focus\:outline-none.focus-visible\:text-ac-gray-400.dark\:focus-visible\:text-white.relative.z-0 {
  color:  var(--main-heading-color);
  text-transform: capitalize;
}

.ac-instrument {color: var(--inactive-instrument-text-color);}



/* 🔹 Breakout button */
.ac-stat .ac-breakout .ac-pattern {
  color: var(--selected-instrument-pattern-percentage-colors) !important;
}

.ac-stat .ac-breakout .ac-details .inline-block {
  color: var(--deselected-instrument-pattern-percentage-colors) !important;
}

.ac-stat .ac-breakout.ac-active .ac-details .inline-block {
  color: var(--selected-instrument-pattern-percentage-colors) !important;
}



/* 🔹 Emerging button */
.ac-stat .ac-emerging .ac-pattern {
  color: var(--selected-instrument-pattern-percentage-colors) !important;
}

.ac-stat .ac-emerging .ac-details .inline-block {
  color: var(--deselected-instrument-pattern-percentage-colors) ;
}

.ac-stat .ac-emerging.ac-active .ac-details .inline-block {
  color: var(--selected-instrument-pattern-percentage-colors)!important;
}

@media (min-width: 768px) {
    .md\:px-10 {
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media (min-width: 768px) {
    .md\:px-7 {
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media (min-width: 768px) {
    .md\:px-3 {
        padding-left: 0px;
        padding-right: 10px;
    }
}


* {
  scrollbar-width: thin;
  scrollbar-color: #042820 #f2f2f2;
}

body {
    margin: 0;
    line-height: inherit;
    font-size: 14px;
}