main .small-menu {
  margin-top: 3.5rem;
  height: 2.5rem;
  background: var(--primary);
}
main .small-menu .button-wrapper {
  height: 100%;
}
main .small-menu .button-wrapper a {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.1s ease-in-out;
}
main .small-menu .button-wrapper a::after {
  content: "";
  position: absolute;
  height: 0.25rem;
  width: 0%;
  bottom: 0;
  border-radius: 2px;
  background: var(--accent);
  transition: all 0.2s ease-in-out;
}
main .small-menu .button-wrapper a.active {
  color: var(--secondary);
  /*fake a font-weight grow to avoid flickering (and without setting a fixed width on "a"*/
  text-shadow: -0.33px -0.33px 0 var(--secondary), 0.33px -0.33px 0 var(--secondary), -0.33px 0.33px 0 var(--secondary), 0.33px 0.33px 0 var(--secondary);
}
main .small-menu .button-wrapper a.active::after {
  width: 120%;
}
main .trading-window {
  position: relative;
  background: linear-gradient(140deg, #e5fdff, #f3efff);
  width: 100vw;
  min-height: calc(100vh - 2.5rem - 3.5rem);
  /*viewport height - navbar height - small menu height - nav height*/
}
main .trading-window .trade-section {
  display: none;
}
main .trading-window .trade-section.show-window {
  display: flex;
}
main .trading-window .trading-window-wrapper {
  margin: 0 auto;
  padding-top: 3rem;
}
main .trading-window .trading-window-wrapper .graph {
  display: flex;
  padding: var(--cards-padding);
  border: solid 1px var(--card-shadow);
  border-radius: var(--cards-border-radius);
  background: var(--card-background);
  box-shadow: 0px 2px 0px 0px var(--card-shadow);
  min-height: 40vh;
  width: 100%;
  max-width: 50rem;
  transition: opacity 0.15s 0.3s, width 0.3s ease-in-out 0s;
}
main .trading-window .trading-window-wrapper .graph.hide {
  width: 0%;
  opacity: 0;
  transition: opacity 0.15s 0s, width 0.3s ease-in-out 0s;
  pointer-events: none;
}
main .trading-window .trading-window-wrapper .graph .tooltip-area #tooltip-value {
  margin-right: 0.5ch;
}
main .trading-window .trading-window-wrapper .graph .time-range-selection {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 2rem;
  margin-left: auto;
  background-color: #EFF4F5;
  border: solid 1px var(--card-shadow);
  border-radius: 1rem;
}
main .trading-window .trading-window-wrapper .graph .time-range-selection .time-range-button {
  position: relative;
  width: 3rem;
  border-radius: 1rem;
  background: none;
  color: var(--accent);
  font: var(--link);
  z-index: 0;
}
main .trading-window .trading-window-wrapper .graph .time-range-selection .time-range-button::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  border-radius: inherit;
  background: var(--accent);
  scale: 0;
  z-index: -1;
  transition: cubic-bezier(0.5, 0, 1, 0.5) 0.2s;
}
main .trading-window .trading-window-wrapper .graph .time-range-selection .time-range-button.active {
  color: var(--primary);
}
main .trading-window .trading-window-wrapper .graph .time-range-selection .time-range-button.active::after {
  scale: 1;
  transition: cubic-bezier(0, 0.5, 0.5, 1.5) 0.2s;
}
main .trading-window .trading-window-wrapper .graph .chart-area {
  display: flex;
  position: relative;
  height: 100%;
}
main .trading-window .trading-window-wrapper .graph .chart-area .chart-loader {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: var(--card-background);
  pointer-events: none;
}
main .trading-window .trading-window-wrapper .graph .chart-area .chart-loader.faded {
  opacity: 0;
  transition: opacity 0.3s ease-in-out 0s;
}
main .trading-window .trading-window-wrapper .graph .chart-area .chart-loader.loading .svg-elem-1 {
  -webkit-animation: animate-svg-stroke-1 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both infinite, animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both infinite;
  animation: animate-svg-stroke-1 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both infinite, animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both infinite;
}
main .trading-window .trading-window-wrapper .graph .chart-area .chart-loader.loading .svg-elem-2 {
  -webkit-animation: animate-svg-stroke-2 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s both infinite, animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both infinite;
  animation: animate-svg-stroke-2 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s both infinite, animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both infinite;
}
main .trading-window .trading-window-wrapper .graph .chart-area canvas {
  width: 100%;
}
main .trading-window .trade {
  justify-content: space-between;
  min-width: 20.5rem;
  border: solid 1px var(--card-shadow);
  border-radius: var(--cards-border-radius);
  background: var(--card-background);
  box-shadow: 0px 2px 0px 0px var(--card-shadow);
}
main .trading-window .trade .trade-header {
  border-bottom: 1px solid var(--card-shadow);
  padding: var(--cards-padding);
}
main .trading-window .trade .trade-header .trade-buttons .trade-button {
  height: 1.5rem;
  width: 1.5rem;
  background-color: transparent;
}
main .trading-window .trade .trade-header .trade-buttons .trade-button:hover {
  opacity: 0.66;
}
main .trading-window .trade .trade-form {
  padding: var(--cards-padding);
}
main .trading-window .trade .trade-form h4 {
  margin-bottom: 0;
  display: flex;
  align-items: center;
}
main .trading-window .trade .trade-form #invert {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  padding: 5px;
  background: #EEEAF4;
}
main .trading-window .trade .trade-form #invert img {
  width: 100%;
  -o-object-fit: none;
     object-fit: none;
  vertical-align: unset;
}
main .trading-window .trade .trade-form #invert.active {
  -webkit-animation: turn 0.3s cubic-bezier(0.25, 0, 0.25, 1.25) 1 normal backwards;
          animation: turn 0.3s cubic-bezier(0.25, 0, 0.25, 1.25) 1 normal backwards;
}
main .trading-window .trade .trade-form .form-input-container input {
  width: 100%;
  text-align: end;
  border-radius: 10px;
  height: var(--button-height);
  padding: var(--button-padding);
  background: #EEEAF4;
  text-decoration: none;
}
main .trading-window .trade .trade-form .form-input-container input::-webkit-outer-spin-button, main .trading-window .trade .trade-form .form-input-container input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
main .trading-window .trade .trade-form .form-input-container input:focus {
  outline: none;
}
main .trading-window .trade .trade-form ::-webkit-input-placeholder {
  text-align: end;
}

@-webkit-keyframes turn {
  0% {
    rotate: 0;
  }
  100% {
    rotate: 1turn;
  }
}

@keyframes turn {
  0% {
    rotate: 0;
  }
  100% {
    rotate: 1turn;
  }
}
@media screen and (max-width: 768px) {
  .trading-window {
    min-height: calc(100vh - 2.5rem - 3.5rem - 3rem);
  }
  .trading-window:has(.liquidity.show-window) {
    min-height: unset;
    height: calc(100vh - 2.5rem - 3.5rem - 3rem);
  }
}
@media screen and (max-width: 1200px) {
  main .trading-window {
    padding: 5vw;
  }
  main .trading-window .trading-window-wrapper {
    padding: 0;
    flex-direction: column;
    align-items: center;
  }
  main .trading-window .trading-window-wrapper .trade {
    min-width: unset;
    width: 100%;
  }
  main .trading-window .trading-window-wrapper .graph-header {
    flex-direction: column;
    gap: 0.5rem;
  }
}
:root:has(#dark-mode:checked) .trading-window {
  background: linear-gradient(140deg, #313d5c, #3d2a54);
}
:root:has(#dark-mode:checked) .trade-form input, :root:has(#dark-mode:checked) #invert, :root:has(#dark-mode:checked) .time-range-selection {
  background: #372f47;
}/*# sourceMappingURL=trades.css.map */