:root {
  --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
  --color-blue-500: oklch(62.3% 0.214 259.815);
  --color-gray-300: oklch(87.2% 0.01 258.338);
  --color-gray-700: oklch(37.3% 0.034 259.733);
  --color-gray-800: oklch(27.8% 0.033 256.848);
  --color-white: #fff;
  --spacing: 0.25rem;
  --container-lg: 32rem;
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-3xl: 1.875rem;
  --text-3xl--line-height: calc(2.25 / 1.875);
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --radius-md: 0.375rem;
  --radius-xl: 0.75rem;
  --default-font-family: var(--font-sans);
  --default-mono-font-family: var(--font-mono);
  --tw-border-style: solid;
  --tw-font-weight: initial;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-color: initial;
  --tw-shadow-alpha: 100%;
  --tw-inset-shadow: 0 0 #0000;
  --tw-inset-shadow-color: initial;
  --tw-inset-shadow-alpha: 100%;
  --tw-ring-color: initial;
  --tw-ring-shadow: 0 0 #0000;
  --tw-inset-ring-color: initial;
  --tw-inset-ring-shadow: 0 0 #0000;
  --tw-ring-inset: initial;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-offset-shadow: 0 0 #0000;
}

/* ChartJS CSS */

/* Tailwind CSS */
.relative{position:relative}.mx-auto{margin-inline:auto}.mt-4{margin-top:calc(var(--spacing) * 4)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.block{display:block}.flex{display:flex}.min-h-\[180px\]{min-height:180px}.w-full{width:100%}.max-w-lg{max-width:var(--container-lg)}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-gray-300{border-color:var(--color-gray-300)}.bg-white{background-color:var(--color-white)}.p-6{padding:calc(var(--spacing) * 6)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-2{padding-block:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:border-blue-500{&:focus{border-color:var(--color-blue-500)}}.focus\:ring-2{&:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus\:ring-blue-500{&:focus{--tw-ring-color:var(--color-blue-500)}}.focus\:outline-none{&:focus{--tw-outline-style:none;outline-style:none}}.xl\:w-1\/2{@media (width>=80rem){width:calc(1/2 * 100%)}}.xl\:flex-row{@media (width>=80rem){flex-direction:row}}.xl\:flex-row-reverse{@media (width>=80rem){flex-direction:row-reverse}}


.chart-name{
  font-size:2.75rem;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.comparisonTabBtn,
.sortTabBtn {
  border: 0;
}

.sortSelect,
.fundSelect {
  max-width: 18rem !important;
  margin: 0 auto;
}

/* Container styling for the main application area */
.fect-chart-container {
  background-color: #ffffff;
  /* White background */
  border-radius: 12px;
  /* Rounded corners */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  /* Subtle shadow */
  padding: 10px;
  /* Inner padding */
  width: 100%;
  /* Full width within its parent */
  max-width: 1100px;
  /* Max width for better readability on large screens */
  margin-left: auto;
  /* Center the container */
  margin-right: auto;
  /* Center the container */
}

/* Canvas styling to ensure responsiveness */
.fect-chart-container canvas {
  max-width: 100%;
  /* Ensures the canvas fits within its parent */
  height: auto;
  /* Maintains aspect ratio during resizing */
}

.comparisonChartContainer,
.sortChartContainer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.comparisonChartContainer .relative {
  height:100%;
}

/* Style for sort order controls */
.fect-chart-container .sort-order-controls {
  display: flex;
  justify-content: center;
  font-size: .8rem;
  gap: 1.5rem;
  margin-top: 10px;
}

.fect-chart-container .sort-order-controls>div {
  display: flex;
  align-items: center;
}

.fect-chart-container .sort-order-controls>div>label {
  margin-bottom: 0;
}

.fect-chart-container .sort-order-controls input:focus {
  outline: none;
}

.fect-chart-container .disclaimer{
  font-size:0.75rem;
  max-width:800px;
  color:#666;
  text-align:center;
  margin:15px auto 15px;
}