:root {
  --desktop-modal-width: clamp(330px, 28vw, 375px);
  --desktop-modal-gap: 1.75rem;
  --desktop-content-width: calc(100% - var(--desktop-modal-width) - var(--desktop-modal-gap));
  --color-item-bg-dark: #161617;
  --color-border-gray-dark: #242629;
}

html {
  overflow-x: initial;
}

.strategy-outer {
  display: flex;
  flex-direction: row-reverse;
  gap: var(--desktop-modal-gap);
}

.strategy-inner {
  min-width: var(--desktop-content-width);
  width: var(--desktop-content-width);
  max-width: var(--desktop-content-width);
}

.strategy-header {
  display: flex;
}

.strategy-header-inner {
  padding-top: 2rem;
  min-width: var(--desktop-content-width);
  width: var(--desktop-content-width);
  max-width: var(--desktop-content-width);
}

.strategy-title {
  display: inline-block;
}

.strategy-title > h1,
.strategy-title > h2 {
  font-size: clamp(28px, 3.5vw, 36px);
  font-weight: 500;
  color: var(--color-quiver-white-light);
}

#strategyReturn {
  display: flex;
  align-items: center;
  gap: .33rem;
  padding-top: .5rem;
  transition: opacity .5s ease-in;
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 400;
  color: var(--color-quiver-white-2);
  
  span {
    letter-spacing: .25px;
    font-weight: 500;
  }
}

.desc-toggle-mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -.5rem;
  cursor: pointer;

  > i {
    font-size: clamp(11px, 2vw, 12px);
    color: var(--color-quiver-gray-2);
  }
}

.desc-toggle-mobile.desc-toggle-mobile-active {
  margin-top: 1rem;

  > i {
    color: var(--color-quiver-white-2);
  }
}

.strategy-description-mobile {
  display: none;
  padding: 1.5rem 0 1rem;
}

.strategy-description-outer {
  position: sticky;
  top: calc(var(--header-height) + 1rem);
  right: 0;
  margin-top: -80px;
  border: 1px solid var(--color-border-gray);
  border-radius: 8px;
  padding: 1.5rem;
  min-width: var(--desktop-modal-width);
  width: var(--desktop-modal-width);
  max-width: var(--desktop-modal-width);
  height: fit-content;
  background-color: var(--color-item-bg-dark);
}

.strategy-description {
  display: flex;
  flex-direction: column;
}

.strategy-description p,
.strategy-description-mobile p {
  margin: 1rem 0 .75rem;
  max-width: 80ch;
  font-size: clamp(13px, 2vw, 14px);
  font-weight: 350;
  line-height: 1.8;
  color: var(--color-quiver-white-4);
}

.strategy-description-mobile p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 1rem 1.5rem .75rem 0;
}

.strategy-description-mobile p.show-all {
  display: block;
  -webkit-box-orient: unset;
  -webkit-line-clamp: unset;
  overflow: unset;
  text-overflow: unset;
}

.strategy-description p a:hover {
  text-decoration: underline;
}

.strategy-description .description-metrics {
  display: flex;
  flex-wrap: wrap;
  padding: .75rem 0 .75rem 0;
}

.description-metrics > div {
  display: flex;
  flex-direction: column;
  width: 50%;
  padding-bottom: 1rem;
}

.description-metrics > div strong {
  padding-bottom: .25rem;
  font-size: clamp(13px, 2vw, 13px);
  font-weight: 300;
  color: var(--color-quiver-gray-3);
}

.description-metrics > div span {
  font-size: clamp(15px, 2vw, 16px);
  font-weight: 350;
  color: var(--color-quiver-white-2);
}

.description-metrics div.backtest-date {
  > span {
    font-size: clamp(14px, 2vw, 15px);
  }
}

div.backtest-date-mobile {
  display: none;

  strong {
    font-size: clamp(13px, 2vw, 13px);
    font-weight: 400;
    color: var(--color-quiver-white-4);
    padding: .25rem 0;
  }
  span {
    font-size: clamp(14px, 2vw, 15px);
    font-weight: 400;
    color: var(--color-quiver-gray-4);
  }
}

.description-metrics {
  border-bottom: 1px solid #2c2c2e;
}

.strategy-dataset span {
  position: absolute;
  top: .25rem;
  left: calc(100% + .5rem);
  display: block;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  border-radius: 9999px;
  padding: .125rem .6rem;
  opacity: .85;
}

.actions.strategy-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1.5rem;
}

.actions > button,
.actions > a {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(13px, 2vw, 14px);
  font-weight: 450;
  padding: .25rem .75rem;
  border: 1px solid var(--color-quiver-green);
  border-radius: 9999px;
  color: var(--color-quiver-green);
  background-color: transparent;
  opacity: .95;
  width: 100%;
  height: 42px;
  cursor: pointer;
  transition: .1s;

  white-space: nowrap;

  i {
    margin-top: 2px;
    margin-right: .5rem;
    font-size: clamp(11px, 1.75vw, 11px);
  }
}

.actions > #watch-btn.dim-watchlist-btn,
.actions > #watch-btn-mobile.dim-watchlist-btn,
.actions > #watch-btn.inactive,
.actions > #watch-btn-mobile.inactive {
  pointer-events: none;
  opacity: .5;
}

.actions #watch-btn.remove-btn,
.actions #watch-btn-mobile.remove-btn {
  border: 1px solid var(--color-error-red);
  color: var(--color-error-red);
}

.actions #watch-btn.remove-btn:hover {
  background-color: #fe555543;
  color: var(--color-quiver-white);
}

.actions > button:hover {
  background-color: #57d7b942;
  color: var(--color-quiver-white);
}

.actions > a.copy {
  font-weight: 550;
  color: black;

  i {
    font-size: clamp(11px, 1.75vw, 11px);
    margin-right: .65rem;
  }
}

.actions.strategy-actions.strategy-actions-mobile {
  display: none;
  gap: .5rem;
  padding-top: 0;
}

.actions.strategy-actions-mobile > button,
.actions.strategy-actions-mobile > a {
  height: 28px;
  font-size: clamp(13px, 1.5vw, 14px);
}

.price-graph-outer {
  position: relative;
  width: 100%;
}

#price_graph {
  position: relative;
  margin: .75rem 0 0;
  width: 100%;
  height: 300px;
}

.graph-toggles-outer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .5rem;
  gap: 1.5rem;
  border-bottom: 1px solid var(--color-border-gray);
  padding: 0 .75rem 0 0;
  opacity: .5;
  pointer-events: none;
  transition: opacity .2s ease-in;
}

.graph-toggles-gear {
  display: none;
  position: absolute;
  bottom: .5rem;
  right: .5rem;
  padding: .25rem;

  > i {
    font-size: 17px;
    color: #454f55;
    cursor: pointer;
  }
}

ul.graph-toggles-range {
  display: flex;
  align-items: center;
  gap: .75rem;

  > li {
    margin-bottom: -1px;
    padding: .55rem .4rem;
    font-size: clamp(12px, 2vw, 13px);
    font-weight: 400;
    color: var(--color-quiver-white);
    border-bottom: 1px solid transparent;

    &.active {
      font-weight: 500;
    }
  }
}

.graph-toggles-outer.toggles-active {
  opacity: 1;
  pointer-events: all;

  li {
    cursor: pointer;
  }
}

div.graph-toggles-lines {
  display: flex;
  align-items: center;
  gap: 1rem;

  > label {
    position: relative;
    display: flex;
    align-items: center;
    gap: .25rem;
    padding-right: 19px;
    font-size: clamp(12px, 2vw, 13px);
    font-weight: 400;
    color: var(--color-quiver-gray-4);
    cursor: pointer;
  }
}

/* custom checkbox */
/* Hide the browser's default checkbox */
.graph-toggles-lines input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* custom checkbox */
.checkmark {
  position: absolute;
  top: 0px;
  right: 0;
  height: 14px;
  width: 14px;
  background-color: #121212;
  border-radius: 1px;
  border: 1px solid var(--color-quiver-gray-4);
}

/* On mouse-over, add a background color */
.graph-toggles-lines label:hover input ~ .checkmark {
  background-color: #1e1f24;
}

/* When the checkbox is checked, add a background */
.graph-toggles-lines input:checked ~ .checkmark {
  background-color: #1e1f24;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.graph-toggles-lines input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.graph-toggles-lines .checkmark:after {
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--color-quiver-white-4);
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.metrics-header,
.holdings-header {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 3rem 0 1rem;
}

.holdings-header {
  margin: 2rem 0 .75rem;
}

.metrics-header > h2,
.holdings-header > h2,
.faqs-outer h5 {
  position: relative;
  display: inline;
  font-size: clamp(22px, 2.5vw, 27px);
  font-weight: 400;
  color: var(--color-quiver-white-light);
}

.strategy-description-header,
.strategy-description-header-mobile,
.metrics-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;

  > i.fa-copy,
  span.descriptions-toggle i {
    cursor: pointer;
    color: var(--color-quiver-gray-3);
    font-size: clamp(13px, 2vw, 14px);
    margin-right: .5rem;
  } 
}

.metrics-header {
  justify-content: flex-start;
}

.strategy-description-header > h2,
.strategy-description-header-mobile > h2 {
  font-size: clamp(21px, 2.5vw, 23px);
  font-weight: 400;
  color: var(--color-quiver-white-light);
}

span.toggle-additional-metrics {
  margin-right: .75rem;
  padding-top: .75rem;
  display: block;
  text-align: right;
  margin-left: auto;
  font-weight: 350;
  font-size: 13px;
  color: var(--color-quiver-gray-4);
  cursor: pointer;
}

.metrics-header span.descriptions-toggle {
  display: flex;
}

.metrics-header i {
  font-size: clamp(13px, 1.5vw, 15px);
}

.strategy-metrics-outer {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: .5rem;
}

.strategy-metrics-outer #additional-metrics {
  display: flex;
  flex-wrap: wrap;
  max-height: 0;
  transition: max-height .2s ease-out;
  overflow: hidden;
  width: 100%;
}

#additional-metrics.show-additional-metrics {
  max-height: 500px;
  transition: max-height .2s ease-in;
}

.strategy-metrics-inner {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.strategy-metrics-inner > .inner-item {
  display: flex;
  width: 50%;
}

.strategy-metrics-inner > div > div {
  margin: 4px 8px 4px 0px;
  padding: .9rem 1rem;
  border-radius: 4px;
  width:130px;
  white-space: nowrap;
  background-color: #222731;
  box-shadow: 2px 2px 2px rgb(14, 14, 18);
}

.strategy-metrics-inner  h3 {
  padding-bottom: .33rem;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-quiver-gray-2);
}

.strategy-metrics-inner span {
  font-size: 18px;
  font-weight: 400;
  color: var(--color-quiver-white-2);
}

.metrics-descriptions-outer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  overflow: hidden;
  z-index: 99;
  background-color: rgba(0,0,0,.75);
}

.metrics-descriptions-outer.show-descriptions {
  display: flex;
  align-items: center;
  justify-content: center;
}

.metrics-descriptions-inner {
  border-radius: 4px;
  padding: 1.5rem;
  width: 100%;
  max-width: 550px;
  background-color: var(--color-item-bg-dark);
  box-shadow: 2px 2px 4px rgba(0,0,0,1);
}

.metrics-descriptions-inner .definitions-header {
  display: flex;
  justify-content: space-between;
}

.definitions-header i {
  font-size: 22px;
  cursor: pointer;
  color: var(--color-error-red);
  opacity: .75;
  transition: .2s;
}

.definitions-header i:hover {
  opacity: 1;
}

.metrics-descriptions-inner > ul {
  height: 400px;
  overflow-y: auto;
}

.metrics-descriptions-inner li {
  padding: 0 2rem 2rem 0;
}

.metrics-descriptions-inner h5 {
  padding-bottom: 1.25rem;
  font-size: 22px;
  font-weight: 400;
}

.metrics-descriptions-inner h6 {
  font-size: 15px;
  font-weight: 400;
  padding-bottom: .25rem;
}

.metrics-descriptions-inner p {
  font-size: 13px;
  color: var(--color-quiver-gray);
  line-height: 1.4;
}

.metrics-descriptions-inner span {
  display: block;
  font-size: 12px;
  font-weight: 300;
}

.metrics-descriptions-inner a {
  color: var(--color-quiver-green);
  font-size: 13px;
}

.metrics-descriptions-inner a:hover {
  text-decoration: underline;
}

#strategyPageOuter .strategy-metrics-inner > div > div {
  background-color: var(--color-item-bg-dark);
}

#strategyPageOuter .strategy-metrics-inner > div > div {
  width: 50%;
  box-shadow: 3px 3px 2px rgb(12, 12, 12);
}

#price_graph {
  .axis path,
  .axis line {
    fill: none;
    stroke: var(--color-border-gray);
    stroke-width: 1.5px;
    opacity: .5;
    shape-rendering: crispEdges;
  }
  .line {
    fill: none;
    stroke-width: 2px;
  }
  .line-spy {
    fill: none;
    stroke: rgb(89, 90, 91);
    stroke-width: 1px;
  }
  .start-price-line {
    stroke: rgb(60, 61, 61);
    stroke-width: 1px;
  }
  .overlay {
    fill: none;
    pointer-events: all;
  }
  .focus circle {
    fill: rgb(169, 164, 195);
  }
  .grid {
    opacity: .5;
  }
  .grid .tick {
    stroke: var(--color-quiver-gray);
    opacity: 0.1;
  }
  .focus text{
    fill: silver;
  }
  .area {
      fill: #377CC3;
      opacity: .75;
      stroke-width: 0;
  }
  .bar {
    fill: steelblue;
  }
  .bar:hover {
    fill: lightblue;
  }
  .axis text {
    font-size: 12px;  
    font-weight: 300;
    stroke: transparent;
    stroke-width: 1px;
    fill: var(--color-quiver-gray-4);
  }
  .tooltip {
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    background-color: var(--color-item-bg-dark);
    border-radius: 2px;
    border: 1px solid var(--color-border-gray);
    padding: .75rem .75rem .5rem;
    white-space: nowrap;
  }
  .tooltip strong {
    color: var(--color-quiver-gray);
    font-size: 12px;
    font-weight: 500;
    padding-bottom: .25rem;
  }
  .tooltip p, 
  .tooltip span {
    display: flex;
    align-items: center;
    font-size: 13px;
    padding-top: .75rem;
    font-weight: 400;
    color: var(--color-quiver-white-2);
  }
  .tooltip div {
    display: flex;
    justify-content: space-between;
  }
  .tooltip span {
    padding-left: 1.5rem;
    font-family: "Roboto", sans-serif;
    letter-spacing: .5px;
  }
  .tooltip span.return {
    display: inline-block;
    margin-left: auto;
    color: var(--color-quiver-gray-4);
    font-size: 12px;
    padding-top: .4rem;
    padding-bottom: .25rem;
  }
  .tooltip span.above-bench {
    color: var(--color-quiver-green);
  }
  .tooltip span.below-bench {
    color: var(--color-error-red);
  }
  .tooltip span.tooltip-marker {
    display: inline-block;
    padding: 0;
    padding-left: 0;
    margin: 0 .33rem 0 0;
    width: 7px;
    height: 7px;
  }
  circle {
    fill: none;
    stroke-width: 1px;
  }
}

@media screen and (max-width: 1023px) {
  .strategy-outer,
  .strategy-inner,
  .strategy-header-inner{
    min-width: 100%;
    width: 100%;
    max-width: 100%;
  }
  .strategy-header-inner {
    position: sticky;
    top: 0;
    background-color: #121212;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
  }
  .strategy-inner {
    margin-right: 0;
  }
  .strategy-description-outer {
    display: none;
  }
  .strategy-description-mobile {
    display: block;
  }
  .actions.strategy-actions.strategy-actions-mobile {
    display: flex;
  }
  .actions.strategy-actions-mobile > button,
  .actions.strategy-actions-mobile > a {
    border-radius: 4px;
  }
  #price_graph {
    margin-bottom: 0;
    border-bottom: none;
    margin-top: 0;
    height: 250px;
      .line {
        stroke-width: 1px;
      }
  }
  .metrics-header {
    margin-top: .5rem;
  }
}


@media screen and (max-width: 800px) {
  .strategy-title > ,
  .strategy-title > h2 {
    font-size: 22px;
  }
  .strategy-dataset span {
    font-size: 11px;
  }
  .metrics-header > span,
  .strategy-metrics-inner h3 {
    font-size: 12px;
  }
  .metrics-header > h2,
  .strategy-description-header-mobile > h2 {
    font-size: 21px;
  }
  .metrics-descriptions-inner {
    padding: 1rem;
    max-width: 95%; 
  }
  .strategy-metrics-inner > div > div {
    padding: .75rem;
    width: 125px;
  }
  .strategy-metrics-inner span {
    font-size: 16px;
  }
  #price_graph {
    .axis text {
      font-size: 11px; 
    }
    .focus text{
      font-size: 14px;
    }
    .tooltip strong {
      font-size: 11px;
    }
    .tooltip p, 
    .tooltip span {
      font-size: 13px;
    }
  }
}

@media screen and (max-width: 500px) {
  .strategy-header-inner {
    flex-direction: column;
    gap: 1rem;
  }
  .actions.strategy-actions.strategy-actions-mobile {
    flex-direction: row;
  }
  .actions > #watch-btn-mobile {
    max-width: 50%;
  }
  .graph-toggles-gear {
    display: block;
  }
  .graph-toggles-gear.graph-toggles-active-mobile {
    > i {
      color: #4a555c;
    }
  }
  .graph-toggles-outer {
    display: none;
    flex-direction: column-reverse;
    gap: .75rem;

    &.graph-toggles-active-mobile {
      display: flex;
    }
  }
  .strategy-metrics-inner {
    flex-direction: column;
  }
  .strategy-metrics-inner > .inner-item {
    width: 100%;
  }
}