body:has(#legsContainer.active, .css-NMhjkYUI.active) {
  overflow: hidden;
}
.container {
  background: white;
  padding: 22px 15px 10px 15px;
  border-radius: 10px;
  box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 10%);
}
.topBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
#addLegBtn {
  border: none;
  background: #2563eb;
  color: white;
  padding: 12px 18px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 15px;
  transition: 0.2s;
}
.Css-fgfhlOP {
  display: flex;
  gap: 15px;
  width: 100%;
  margin-top: 8px;
}
.css-wiflfpIIR {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 10000000;
  left: 0;
  top: 0;
  display: flex;
  justify-content: start;
  align-items: center;
  background: #000000a8;
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
}
.css-wiflfpIIR.active {
  opacity: 1;
  pointer-events: auto;
}
.css-wiflfpIIR.active .css-wiflfpQQIIR {
  transform: translateX(0%);
}
.css-wiflfpQQIIR {
  height: 100%;
  background: #ffffff;
  transition: transform 0.2s ease, transform 0.2s ease;
  transform: translateX(-100%);
}
.css-EfwiflfpIIR {
  display: flex;
  align-items: center;
  justify-content: end;
  min-height: 44px;
  border-bottom: 1px solid #808080a6;
  position: relative;
}
.css-wiflfpEGIIR {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  pointer-events: none;
  font-size: 14px;
  font-weight: 600;
}
.css-wErlfpIIR {
  padding: 8px;
  font-size: 20px;
  background: none;
  border: none;
  cursor: pointer;
}
.css-RtwErlfpIIR {
  padding: 15px;
}
.css-ofiflpEYU {
  border: 1px solid #3f51b57d;
  padding: 7px 20px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  background: none;
  outline: none;
  color: #2b2b2b;
}
.css-ofiflpEYU.anchor {
  font-size: 14px;
  text-decoration: none;
}
.css-tfhrrfjWfuifj {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin-top: 10px;
  align-items: center;
}
.css-tfhfjfuiWfj {
  color: #555555;
  font-size: 14px;
}
.css-tfhfjfuifj {
  display: flex;
  border: 1px solid cornflowerblue;
  border-radius: 3px;
}
.css-oflfpTDGDH.active,
.css-oflfpTDGDHE.active {
  background: cornflowerblue;
  color: white;
  cursor: default;
}
.css-oflfpTDGDH,
.css-oflfpTDGDHE {
  border: none;
  font-size: 12px;
  background: none;
  padding: 4px 8px;
  cursor: pointer;
  min-width: 55px;
  outline: none;
}
.css-opflfopEE {
  display: grid;
  gap: 3px;
}
.css-ppfoflERR {
  font-size: 14px;
}
.css-ppfoflERR.up,
.css-pERoflERR.up {
  color: green;
}
.css-ppfoflERR.down,
.css-pERoflERR.down {
  color: red;
}
.css-pERoflERR {
  opacity: 0.5;
  font-family: "Roboto";
}
.css-ofiflpEYU.active {
  background: #3f51b5;
  color: white;
  cursor: default;
}
.css-ofiflpEYU:not(.active):hover {
  background: #3f51b512;
}
.css-lfofpUIRD {
  font-size: 15px !important;
  background: #edede0;
}
.css-oflfTYHDU {
  display: none;
}
.css-oflfTYHDU.active {
  display: table-cell;
}
.css-oflfTYHDU.itm {
  background: #f7f7ec;
}
.css-oflfTYHDU.otm {
  background: white;
}
.css-pflfopEE {
  margin-top: 10px;
}
.css-UlfopEE {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  border: 1px solid #8080803b;
}
.css-UlfopEE thead {
  background: #929292;
  color: white;
  display: table;
  width: 100%;
}
.css-UlfopEE tr {
  height: 30px;
  position: relative;
}
.css-UlfopEE th,
.css-UlfopEE td {
  width: 80px;
  border-bottom: 1px solid lightgrey;
  font-size: 14px;
  padding: 10px 0;
  text-align: center;
  font-family: "Roboto";
}
.css-UlfopEE td {
  opacity: 0.8;
}
.css-lfkefjeggkj {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: start;
  width: 50%;
  z-index: 1000;
  pointer-events: none;
}
.css-lfkefjeggkj.pe {
  justify-content: end;
  right: 0;
}
.css-efflirorod {
  display: flex;
  gap: 6px;
  margin: 0 15px;
  transition: transform 0.1s ease, opacity 0.1s ease;
  transform: scale(0);
}
.td_oi {
  min-width: 100px;
}
.css-lfkefjeggkj.ce .css-efflirorod {
  margin: 0 5px;
}
.css-lfkefjeggkj.active {
  pointer-events: auto;
}
.css-lfkefjeggkj.active .css-efflirorod {
  transform: scale(1);
}
.css-fhrurrlrg {
  border: none;
  color: white;
  padding: 5px 8px;
  border-radius: 3px;
  cursor: pointer;
  outline: none;
  box-shadow: 0px 0px 9px 1px rgb(0 0 0 / 40%);
  font-weight: 600;
}
.css-fhrurrlrg.buy {
  background: #2e32e3;
}
.css-fhrurrlrg.sell {
  background: #f9470f;
}
.css-fhrurrlrg.insight {
  background: #009688;
}
.css-UlfopEE tbody {
  height: calc(100dvh - 210px);
  overflow: auto;
  overflow-x: hidden;
  display: block;
  width: 100%;
  background-color: white;
}
.css-lidodpghbbd{
  display: grid;
}
.css-lidodpghbbdf{
  display: none;
}
.css-uifkfloE {
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
  color: #535353;
  margin-left: 5px;
  font-size: 15px;
}
.css-lopfolf {
  font-size: 12px;
  font-family: sans-serif;
}
.css-wEEgrlfpIIR {
  display: flex;
  gap: 5px;
}
#addLegBtn:hover {
  transform: translateY(-2px);
}
.css-tfyfjko {
  display: flex;
  margin-top: 15px;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.css-dfkflUI {
  background: none;
  border: 1px solid;
  padding: 5px 15px;
  border-radius: 3px;
  color: red;
  cursor: pointer;
}
.css-dfkflUI:hover {
  border: 1px solid #ff5722;
  background: #ff5722;
  color: white;
}
.css-ioERpTYUQQ {
  width: 100%;
}
.css-ioflpTYUQQ {
  display: flex;
  align-items: center;
  border: 1px solid #2196f330;
  border-radius: 8px;
  padding: 2px;
}
.css-uidlopd {
  font-size: 17px;
}
.css-ufifopl {
  background: none;
  border: none;
  padding: 6px 25px;
  cursor: pointer;
  font-size: 12px;
  border-radius: 5px;
  color: #454545;
  outline: none;
}
.css-ufifopl.active {
  background: #0c8df3;
  color: white;
  cursor: default;
  font-weight: 600;
}
.css-ufifopl:not(.active):hover {
  background: #8080801c;
}
.css-ufifopl.trade {
  display: flex;
  gap: 8px;
  align-items: center;
}
.css-ufifopl.projection {
  display: none;
}
.css-WffklE {
  display: none;
  align-items: center;
  gap: 5px;
}
.css-WffklE.active {
  display: flex;
}
.css-WffRRklE {
  font-weight: 600;
}
.css-WffRRklE.up {
  color: green;
}
.css-WffRRklE.down {
  color: #ff5722;
}
.css-ifoflTpRR {
  margin-bottom: 6px;
  border-bottom: 1px solid #80808030;
  padding-bottom: 12px;
}
.legCard {
  background: white;
  border-radius: 12px;
  padding: 20px;
}
.css-olfRTCCYQ {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: "Roboto";
  padding-left: 15px;
}
.css-olfRTCCYQ.up {
  color: #078707;
}
.css-olfRTCCYQ.down {
  color: #ff5722;
}
.css-rthkhlhl.active td {
  background: #80808024 !important;
}
.css-rthkhlhl.active .css-lfofpUIRD {
  background: #3f51b5 !important;
  color: white;
}
.css-olfRTYQ-spot {
  font-weight: 600;
  font-size: 17px;
}
.css-olfpEENM {
  display: flex;
  align-items: center;
  gap: 10px;
}
.css-lfofkfpEE {
  color: #3f51b5;
  font-size: 16px;
  margin-left: 5px;
}
.css-olfRTYQ {
  font-size: 14px;
}
.legTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}
.css-ufierlow {
  display: flex;
  align-items: center;
  gap: 10px;
}
.css-ufiffow {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  opacity: 0.8;
}
.legTitle {
  font-size: 18px;
  font-weight: 600;
}

.removeBtn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

.row {
  display: grid;
  min-width: 300px;
  gap: 16px;
  flex-wrap: wrap;
}
#legsContainer {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #00000094;
  z-index: 1000000;
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
}
.css-yfufjKLOPD {
}
.css-yfufjKYPD {
  width: 100%;
  background: #3f51b5;
  color: white;
  border: none;
  padding: 14px;
  border-radius: 3px;
  font-size: 15px;
  cursor: pointer;
}
.legCard {
  transition: transform 0.2s ease, opacity 0.2s ease;
  transform: scale(0);
}
#legsContainer.active {
  opacity: 1;
  pointer-events: auto;
}
#legsContainer.active .legCard {
  transform: scale(1);
}
.field {
  flex: 1;
  min-width: 150px;
}
label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  color: #6b7280;
}

input,
select {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  border: 1px solid #d7dce5 !important;
  padding: 0 14px;
  font-size: 15px;
  background: white;
  outline: none;
  color: black;
}
.css-yrurjloP {
  margin: 5px 0;
  opacity: 0;
  height: 0;
  pointer-events: none;
}
.css-yrurjloP.active {
  display: block;
  opacity: 1;
  height: auto;
  pointer-events: auto;
}
.spotCard {
  border-radius: 18px;
  margin-top: 45px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  width: 50%;
}
.css-pflfpRTR {
  display: flex;
  gap: 10px;
  align-items: center;
}
.css-rtkflopEW {
  display: flex;
  margin-left: 10px;
  gap: 20px;
  font-size: 13px;
  color: #434343;
}
.css-rtkEopEW {
  display: flex;
  gap: 5px;
  align-items: center;
}
.css-rtkEopEW span {
  font-family: "Roboto";
  text-decoration: none;
}
.css-dflfkoff {
  font-weight: 600;
}
.css-ifoflpYYUI {
  border-radius: 8px;
  cursor: pointer;
  max-width: 140px;
  outline: none;
  height: 35px;
  background: none;
}
.spotHeader {
  display: flex;
  justify-content: space-between;
}
.spotHeader span {
  font-size: 13px;
  font-weight: 600;
  min-width: 90px;
}
.css-ioflpwrr {
  height: auto;
  padding: 5px 10px;
  font-size: 12px;
  margin-left: 5px;
}
#spotSlider {
  width: calc(100% - 80px);
}
.valueTag {
  position: absolute;
  top: -32px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 20;
  pointer-events: none;
}
.valueTag span {
  background: #0750d6;
  color: white;
  min-width: 44px;
  text-align: center;
  padding: 5px 7px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  border-radius: 0;
  border-radius: 3px;
}
.arrow {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid #0750d6;
}
.spotCard input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: #b5b5b5c4;
  height: 5px;
  border: none;
  outline: none;
  padding: 0;
}
#lowTagDTE {
  margin-left: 5px;
}
.spotCard input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 15px;
  border-radius: 8px;
  background: #0750d6;
  cursor: pointer;
}
.metricsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  margin-top: 15px;
  border-right: 1px solid #8080801f;
  border-top: 1px solid #8080801f;
  border-left: 1px solid #8080801f;
  border-radius: 8px;
}

.metricCard {
  background: white;
  border-radius: 6px;
  padding: 14px 18px;
  border-bottom: 1px solid #8080802e;
}
.css-yfufolk {
  display: flex;
  align-items: center;
  gap: 12px;
}
.css-dfhgkglg {
  height: 18px;
  width: 18px;
  cursor: pointer;
  -webkit-appearance: none;
  background: #fff;
  transition: 0.2s;
  border: 2px solid #4caf50;
  border-radius: 4px;
  padding: 0;
}
.css-yfufolk input[type="checkbox"]:checked {
  border-color: #088d0b8f;
}
.css-yfufolk input[type="checkbox"]:checked::before {
  content: "✓";
  color: #4caf50;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  margin-top: -2px;
}
.css-klfopfyuiER.tr-type.Buy {
  color: #2196f3;
}
.css-klfopfyuiER.tr-type.Sell {
  color: #ff5722;
}
.metricCard span {
  font-size: 14px;
  color: #6b7280;
}
.css-lofkioplRR.temp-hide .css-klfopfyuiER {
  opacity: 0.3;
}
.css-klfopfyuiER.pnl.up,
.css-uidlopd.up {
  color: #06a106;
}
.css-klfopfyuiER.pnl.down,
.css-uidlopd.down {
  color: red;
}
.metricCard h2 {
  margin-top: 10px;
  font-size: 18px;
}
#margin {
  margin-bottom: 10px;
}
.css-rtrytiii {
  font-size: 12px;
}
.css-QFofpflpYY {
  background: no-repeat;
  border: none;
  margin: 12px 5px 8px 5px;
  font-size: 12px;
  color: #3f51b5;
  text-decoration: underline;
  padding: 0;
  cursor: pointer;
  font-weight: 600;
}
.css-tyhfkfiplOE {
  display: none;
}
.css-tyhfkfiplOE.active {
  display: block;
}
.css-tyhfkfiplOE.payoff.active {
  display: flex;
  align-items: center;
}
.css-poslosppu {
  margin: 12px 5px 8px 5px;
  font-size: 12px;
}

.css-ifofplYUWW .toggleSwitch {
  position: relative;

  display: inline-block;

  width: 36px;
  height: 19px;
  margin-bottom: 0;
}

.css-ifofplYUWW .toggleSwitch input {
  display: none;
}

.css-dfjfklpo{
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  opacity: 0;
  pointer-events: none;
  height: 0;
  width: 0;
}
.css-erujfklpo{
  padding: 60px 50px;
  display: grid;
  gap: 15px;
  border: 1px dashed #808080a8;
  border-radius: 10px;
  transition: transform 0.2s ease, opacity 0.2s ease;
  transform: scale(0);
}
.css-dfjfklpo.active{
  opacity: 1;
  pointer-events: auto;
  height: auto;
  width: auto;
}
.css-dfjfklpo.active .css-erujfklpo{
  transform: scale(1);
}
.css-yujfklpo{
  display: grid;
  justify-content: center;
  text-align: center;
  gap: 8px;
}
.css-oflfpofof.icon{
  font-size: 52px;
  color: #009688;
}
.css-oflfpofof.title{
  font-weight: 600;
  font-size: 18px;
  margin-top: 6px;
}
.css-olfpfoklpd{
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 15px;
  align-items: center;
}
.css-olsfoklpd.add-leg{
  padding: 16px 35px;
  border-radius: 5px;
  background: #3F51B5;
  border: none;
  cursor: pointer;
  color: white;
  font-size: 15px;
}
.css-erfklpo{
  font-weight: 600;
  font-size: 15px;
}
.css-olsfoklpd.open-chain{
  padding: 16px 35px;
  border-radius: 5px;
  background: #716d6d00;
  border: 1px solid #80808070;
  cursor: pointer;
  color: #2f2f2f;
  font-size: 15px;
}
body:has(.css-dfjfklpo.active) .css-oflfpolOPWW,
body:has(.css-dfjfklpo.active) .css-yrurjloP.active .Css-fgfhlOP,
body:has(.css-dfjfklpo.active) .css-yrurjloP .Css-fgfhlOP
{
  display: none;
}

body:has(.css-dfjfklpo.active) .css-yrurjloP .css-ufilfofpE,
body:has(.css-dfjfklpo.active) .css-yrurjloP.active .css-ufilfofpE{
  opacity: 0;
  height: 0;
  pointer-events: none;
}
body:has(.css-wiflfpIIR.active) body{
  overflow: hidden !important;
}

body:has(.css-wiflfpIIR.active) .css-yrurjloP {
  opacity: 1;
  height: auto;
  pointer-events: auto;
}

.css-ifofplYUWW .slider {
  position: absolute;

  inset: 0;

  background: #cbd5e1;

  border-radius: 100px;

  cursor: pointer;

  transition: 0.25s;
}

.css-ifofplYUWW .slider::before {
  content: "";

  position: absolute;

  width: 13px;
  height: 13px;

  left: 3px;
  top: 3px;

  background: white;

  border-radius: 50%;

  transition: 0.25s;
}
.css-ifofplYUWW {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: end;
  margin-bottom: 25px;
}
.css-pflfopTDD {
  font-family: "Roboto";
  color: #4d4d4d;
  font-weight: 600;
}
.css-ifofplYUWW .toggleSwitch input:checked + .slider {
  background: #2563eb;
}

.css-ifofplYUWW .toggleSwitch input:checked + .slider::before {
  transform: translateX(17px);
}
.css-ofpfloEEFQ {
  position: absolute;
  left: 10px;
  top: 10px;
}
.css-ioffpLP {
  background: none;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #808080bf;
  margin-left: 5px;
  cursor: pointer;
  outline: none;
}
.css-ofpfloEEF {
  padding: 5px 12px;
  background: none;
  border: 1px solid #03a9f454;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
  color: #0f88e7;
  font-family: "Roboto";
  outline: none;
}
.css-ofpfloEEF:hover {
  background: #0f88e71c;
}
.css-yoslosppu {
  font-weight: 600;
}
.css-ufilfofpE {
  display: flex;
  width: 100%;
  gap: 40px;
  margin-bottom: 10px;
  background: #297bbb08;
  padding: 0px 15px 10px 15px;
  border-radius: 10px;
  border: 1px solid #2196f33b;
  margin-top: 30px;
  position: relative;
}
.css-poflpodoo {
  font-size: 18px;
  margin-right: 5px;
}
.css-poflpodoo.max-profit {
  color: green;
}
.css-poflpodoo.max-loss {
  color: red;
}
.css-poflpodoo.be {
  color: #ff9800;
}
.css-poflpodoo.rr {
  color: #2196f3;
}
.css-poflpodoo.pop {
  color: #009688;
}
.css-poflpodoo.margin {
  color: #8bc34a;
}
.css-ifofplYUWW {
  display: none;
}
#DTESlider,
.valueTag {
  display: none;
}
#DTESlider.active,
.valueTag.active {
  display: block;
}
#breakevens {
  margin-top: 10px;
  display: flex;
  max-width: 150px;
  column-gap: 5px;
  row-gap: 10px;
  flex-wrap: wrap;
  row-gap: 12px;
}
.css-lopfkipo {
  margin-top: 20px;
  font-size: 14px;
  margin-left: 5px;
  text-align: center;
  opacity: 0.7;
}
.breakevenItem {
  border-radius: 10px;
  font-size: 18px;
}
.jfkflopE {
  background: none;
  outline: none;
  color: #2196f3;
  border-radius: 3px;
  padding: 7px 8px;
  cursor: pointer;
  border: 1px solid #2196f39e;
  box-shadow: 0px 0px 3px 0px rgb(162 224 251);
}
.jfDflopE {
  background: #03a9f4;
  color: white;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 12px;
}
.css-iofpflooEE {
  display: flex;
  gap: 5px;
}
.chartCard,
.css-oSSpYUDD {
  background: white;
  border-radius: 10px;
  /* padding: 20px 10px 10px 10px; */
  margin-top: 8px;
  width: 100%;
  min-height: calc(100% - 50px);
}
.chartCard {
  box-shadow: none;
  padding: 0;
  padding-left: 8px;
}
.css-YujlfpYUDD {
  width: 100%;
  text-align: center;
  border: 1px solid #80808030;
  border-radius: 5px;
  border-bottom: none;
}
.css-lofkioplRR {
  position: relative;
}
.css-oflDfpYUDD {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 5px;
  position: absolute;
  left: 0;
  top: 5px;
  width: calc(100% - 50px);
  padding: 10px;
  background: #ffffffde;
  pointer-events: none;
  opacity: 0;
}
.css-oflfpYUDD {
  border: none;
  background: none;
  font-size: 18px;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
  transform: scale(0);
}
.css-oflDfpYUDD.active {
  pointer-events: auto;
  opacity: 1;
}
.css-oflDfpYUDD.active .css-oflfpYUDD {
  transform: scale(1);
}
.css-oflfpYUDD.edit {
  color: #3f51b5;
}
.css-oflfpYUDD.delete {
  color: #f44336;
}
.css-YujlfpYUDD th,
.css-YujlfpYUDD td {
  padding: 15px 20px;
  border-bottom: 1px solid #80808021;
  font-size: 14px;
  font-family: "Roboto";
}
.css-YujlfpYUDD th {
  font-size: 13px;
}
.css-YujlfpYUDD.projected th {
  color: #3f51b5;
}
.css-YujlfpYUDD td {
  color: #4d4d4d;
}
#maxProfit {
  color: darkgreen;
}
#maxLoss {
  color: #cd0303;
}

canvas {
  /* width: 100% !important;
  height: 420px !important; */
  max-height: 500px;
}

/* chain */
.op_table thead,
.op_table tfoot {
  color: white;
  display: table;
  width: 100%;
  background: #9e9e9e;
}
.op_table tbody {
  overflow: auto;
  overflow-x: hidden;
  display: block;
  width: 100%;
  background-color: white;
  height: calc(100vh - 180px);
}
.css-lfofpHJKDYUJI {
  text-align: center;
  font-size: 13px;
}
.op_table tbody {
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.op_table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
  position: relative;
  height: 25px;
  min-height: 52px;
  border-bottom: 1px solid lightgrey;
}
.css-ufjflpRTYW.active,
.op_table tbody tr {
  transition: transform 0.1s ease, opacity 0.1s ease;
}
#option-chain-data td.active {
  display: table-cell;
}
.css-oflfTYHDU.itm {
  background: #f7f7ec;
}
.op_table th,
.op_table td {
  width: unset;
  font-size: 14px;
  /* color: #575757; */
  /* padding: 3px 0; */
  /* border-bottom: 1px solid lightgrey; */
}
.op_table td {
  color: #575757f0;
}
.css-poflfipRTYOO {
  display: flex;
  justify-content: center;
  gap: 5px;
  align-items: center;
}
#option-chain-data button {
  width: 100%;
  text-align: center;
  display: grid;
  gap: 3px;
  padding: 5px;
  align-items: center;
}
.css-ifofpliomm.buy:not(:disabled) {
  background: #cbd7ed0d;
  color: cornflowerblue !important;
  border: 1px solid #6495ed85 !important;
}
.css-ifofpliomm.sell:not(:disabled) {
  background: #edc4b714;
  color: #ff5722 !important;
  border: 1px solid #d5623e75 !important;
}
.css-ifofpliomm {
  min-height: 35px;
  min-width: 32px;
  border-radius: 3px;
}
.op_table table {
  width: 100%;
  font-size: 14px;
  border-collapse: collapse;
  border-spacing: 0;
}
.css-wEEgrlfpIIR {
  display: none;
}
.css-wiflfpQQIIR {
  width: 100%;
  max-width: 732px;
}
.css-iflfopRTGDTED,
.css-ifoflpEE {
  display: none;
}
.css-RtwErlfpIIR {
  padding: 3px;
}
.css-iflfopRTGDTED.active,
.css-oflfTYHDU.action.active {
  display: table-cell;
}
#op_table_thead tr {
  border-bottom: 1px solid #ffffff75;
}
#op_table_thead th {
  padding: 5px 0;
}
.animate-chain-td {
  opacity: 0.5;
}
.css-yfufjlopE {
  display: table-cell;
}
.css-NMhjkYUI {
  display: none;
}
.total-greeks td {
  font-weight: 500;
}
.css-olfpfiyy{
  display: none;
  justify-content: center;
  min-height: calc(60% - 60px);
  align-items: center;
}
.css-olfpfiyy.active{
  display: flex;
}
.css-olfpfiyy span{
  height: 50px;
  width: 50px;
  border: 3px solid;
  border-color: #4CAF50 transparent #FF5722;
  border-radius: 50%;
}
.css-olfpfiyy.active span{
  animation: rotate 1.2s linear infinite;
}
body:has(.css-olfpfiyy.active) .Css-fgfhlOP{
  display: none;
}
body:has(.css-wiflfpIIR.active) .css-olfpfiyy.active{
  display: none;
}

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

@media (max-width: 750px) {
  .valueTag{
    top: -25px;
    margin-left: 35px;
  }
  .arrow{
    display: none;
  }
  #lowTagDTE{
    margin-left: 25px;
  }
  .container{
    margin: 6px;
  }
  .css-ifoflTpRR{
    margin-bottom: 12px;
  }
  .css-uiflpEWW{
    padding-left: 20px;
  }
  .css-olsfoklpd.add-leg{
    min-width: 250px;
    min-height: 50px;
  }
  .css-olfpfoklpd{
    display: grid;
  }
  .css-erfklpo{
    text-align: center;
  }
  .css-EfwiflfpIIR{
    justify-content: start;
  }
  .op_table tbody{
    height: calc(100vh - 185px);
  }
  .css-yfufjElopER{
    display: none;
  }
  .op_table {
    display: block;
  }
  .css-pflfopEE {
    display: none;
  }
  .css-ofpflppd,
  .css-ofpflppdE {
    display: none;
  }
  .Css-oflfpRTT .toggle-switch {
    position: relative;
    display: inline-block;
    width: 45px;
    height: 23px;
    margin-bottom: 0;
  }

  .Css-oflfpRTT .toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .Css-oflfpRTT .slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: #d1d5db;
    border-radius: 999px;
    transition: 0.25s ease;
  }

  .Css-oflfpRTT .slider::before {
    content: "";
    position: absolute;
    width: 17px;
    height: 17px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.25s ease;
  }

  .Css-oflfpRTT .toggle-switch input:checked + .slider {
    background: #4f46e5;
  }

  .Css-oflfpRTT .toggle-switch input:checked + .slider::before {
    transform: translateX(22px);
  }
  .css-dfhgkglg,
  .css-ofiflpEYU.anchor {
    display: none;
  }
  .css-foflRTT {
    max-width: 100%;
  }
  .css-ioflpwrr {
    width: 100%;
    font-size: 14px;
    padding: 8px 10px;
  }
  .op_table {
    margin-top: 5px;
  }
  .css-wEEgrlfpIIR {
    display: flex;
  }
  .css-iofpflooEE {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .css-ofiflpEYU {
    min-width: 165px;
    justify-content: center;
    padding: 8px 15px;
  }
  .css-NMhjkYUI.active {
    display: flex;
  }
  .css-NMhjkYUI {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000000000;
    display: none;
    align-items: end;
    backdrop-filter: blur(3px);
    background: #000000ad;
  }
  .css-tfyfhjkYRUI.active {
    transform: translateY(0%);
  }
  .css-tfyfhjkYRUI {
    border-radius: 0;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    width: 100%;
    transform: translateY(100%);
    min-width: 250px;
    transition: transform 0.1s ease, opacity 0.1s ease;
    box-shadow: 0px -4px 11px 1px rgb(0 0 0 / 18%);
    min-height: 300px;
    background: linear-gradient(
      90deg,
      rgb(0 25 51 / 98%) 0%,
      rgb(0 41 70 / 88%) 50%
    );
  }
  .Css-oflfpRTT {
    margin-left: 10px;
  }
  .css-tfLkjkYUI {
    border-bottom: 1px solid lightgrey;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 70px;
  }
  .css-lfofpJKMUIO {
    color: whitesmoke;
    position: absolute;
    width: 100%;
    font-size: 16px;
    margin-top: 3px;
    text-align: center;
    pointer-events: none;
    opacity: 0.8;
  }
  .css-tNyfhjkYUI,
  .css-oltptujtitol {
    font-size: 18px;
    color: white;
    display: flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    height: 65px;
  }
  .css-lffofyHJKL {
    display: none;
    align-items: start;
    gap: 10px;
    padding: 18px;
  }
  .css-lffofyHJKL.active {
    display: grid;
  }
  .css-ofElfUIJKLTT {
    color: white;
    display: flex;
    justify-content: space-around;
    padding-bottom: 5px;
  }
  .css-klfpfyidop {
    display: none;
  }
  .css-iolfpoER {
    opacity: 0.5;
  }
  .css-lkfopRTYEE {
    display: grid;
    text-align: center;
    width: 30%;
    font-size: 14px;
    gap: 8px;
  }
  .css-olfkfijuu {
    font-size: 20px;
  }
  .css-oflfofpfoYUYD {
    display: grid;
    gap: 15px;
    border-top: 1px solid #d3d3d329;
    margin-top: 15px;
    padding-top: 15px;
  }
  .css-tyfhfjf {
    color: white;
    font-size: 17px;
    display: flex;
    justify-content: space-between;
    align-items: anchor-center;
    gap: 5px;
    border-radius: 0;
    padding: 10px 0px;
    background: transparent;
    border: none;
  }
  .css-tyfhfjf.delete {
    color: #ffa589;
  }
  h1 {
    font-size: 20px;
    margin: 14px 10px;
  }

  .topBar {
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
  }

  .row {
    flex-direction: column;
  }
  .metricsGrid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  .Css-fgfhlOP {
    display: grid;
  }
  .jfkflopE {
    display: none;
  }
  .css-ufilfofpE {
    display: grid;
    gap: 0px;
    position: fixed;
    bottom: 0;
    background: #3f51b5;
    left: 0;
    margin: 0;
    height: 50px;
    overflow: hidden;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    box-shadow: -1px -5px 7px 0px rgba(0, 0, 0, 0.2);
    z-index: 10;
    padding: 0;
  }
  .css-ufilfofpE.active {
    height: auto;
    background: white;
    z-index: 10;
    animation: control_full 0.2s forwards;
    padding: 0px 15px 10px 15px;
    border-top: 2px solid #2196f363;
  }
  body:has(.css-ufilfofpE.active) .container {
    padding-bottom: 230px;
  }
  .css-ufilfofpE.active .css-podldopE {
    color: black;
    justify-content: end;
    padding-right: 0;
  }
  .css-ufilfofpE.active .css-podldWEopE {
    display: none;
  }
  .css-ufilfofpE.active .css-duodldodyupE i {
    transform: rotate(180deg);
  }
  .spotCard {
    width: 100%;
    margin-top: 35px;
    opacity: 0;
    pointer-events: none;
  }
  .spotCard.dte {
    margin-top: 60px;
    display: grid;
  }
  .css-foflRTT {
    margin-top: 12px;
    margin-left: -6px;
  }
  .css-rtkEopEW {
    min-width: 90px;
    justify-content: center;
  }
  .css-rtkflopEW {
    align-items: center;
    gap: 5px;
  }
  .css-olfRTCCYQ {
    min-width: 220px;
    justify-content: center;
    padding-left: 0;
    margin-left: -15px;
  }
  .css-sdkglgopER {
    min-width: 250px;
  }
  .css-uiflpEWW {
    display: flex;
    overflow: auto;
    align-items: center;
    scrollbar-width: none;
    padding-left: 15px;
  }
  .css-pflfpRTR {
    display: grid;
    gap: 15px;
  }
  .css-ifoflpYYUI {
    min-width: calc(50% - 5px);
  }
  .css-fiofplTYY .css-dfkflUI {
    display: none;
  }
  .css-tfyfjko {
    position: relative;
  }
  .css-fiofplTYY .css-ifoflpERE {
    display: block;
    font-size: 20px;
    padding: 3px 8px 3px 12px;
    background: none;
    border: none;
    position: absolute;
    right: -10px;
    top: 3px;
    color: #c70606;
    opacity: 0.85;
  }
  .chartCard {
    padding-left: 0px;
  }
  .css-uifloDV {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  #legsContainer {
    align-items: end;
  }
  .legCard {
    width: 100%;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    transform: translateY(100%);
  }
  #legsContainer.active .legCard {
    transform: translateY(0%);
  }
  .container {
    padding: 22px 10px 60px 10px;
  }
  .css-ufifopl {
    padding: 6px 22px;
  }
  .css-oflfpolOPWW {
    margin-top: 12px;
  }
  .css-YujlfpYUDD th,
  .css-YujlfpYUDD td {
    padding: 15px 5px;
  }
  .css-yfufolk {
    gap: 5px;
    align-items: start;
  }
  .css-klfopfyuiER.instrument {
    max-width: 80px;
    text-align: center;
    line-height: 20px;
  }
  .css-dfhgkglg {
    height: 24px;
    width: 24px;
    margin-top: 2px;
  }
  .css-yfufolk input[type="checkbox"]:checked::before {
    margin-top: 0px;
    font-size: 14px;
  }
  .css-ofpfloEEFQ {
    opacity: 0;
    pointer-events: none;
  }
  .css-ufilfofpE.active .css-ofpfloEEFQ,
  .css-ufilfofpE.active .spotCard {
    opacity: 1;
    pointer-events: auto;
  }
  .css-podldopE {
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
  }
  .css-podldWEopE {
    display: grid;
    gap: 3px;
  }
  .css-podldopEsd {
    font-size: 13px;
    opacity: 0.6;
    font-family: "Roboto";
  }
  .css-podldodupE {
    font-family: "Roboto";
    font-size: 15px;
  }
  .css-duodldodyupE {
    font-size: 22px;
  }

  .css-yfufjElopE {
    background: none;
    border: none;
    font-size: 18px;
    opacity: 0.7;
  }
  .css-ifofplYUWW {
    justify-content: start;
    margin-bottom: 15px;
    margin-top: 20px;
    margin-left: 3px;
  }
  .css-oSSpYUDD {
    /* border-top: 1px solid #d3d3d35e; */
    border-radius: 0;
    min-height: 500px;
  }
  .metricCard {
    padding: 10px 18px;
  }

  @keyframes control_full {
    0% {
      height: 10%;
    }
    60% {
      height: 25%;
    }
    100% {
      height: auto;
    }
  }
}

@media (min-width: 750px) {
  .arrow.spot{
    margin-left: 60px;
    margin-top: 5px;
  }
  .arrow.dte{
    margin-left: 15px;
    margin-top: 5px;
  }
  #lowTagDTE {
    margin-left: 15px;
  }
  .valueTag{
    top: -21px;
  }
  .op_table {
    display: none;
  }
  .css-pflfopEE {
    display: block;
  }
  .css-dkglgopER {
    display: flex;
    gap: 5px;
  }
  .css-uiflpEWW {
    display: flex;
    gap: 10px;
  }
  .css-podldopE,
  .css-ifoflpERE,
  .css-yfufjElopE{
    display: none;
  }
  .css-uifloDV {
    display: flex;
    align-items: center;
    width: auto;
    gap: 5px;
  }
  .css-yfufjElopER{
    font-size: 17px;
    cursor: pointer;
  }
  .css-uifloDV.active {
    width: 100%;
  }
  #option-chain-data button {
    padding: 6px 10px;
  }
  #op_table_thead th {
    min-width: 50px;
    padding: 8px 0;
  }
  .css-wEEgrlfpIIR {
    display: flex;
    margin-bottom: 8px;
    margin-top: 5px;
  }
  .op_table tbody {
    height: calc(100vh - 200px);
  }
  .css-iflfopRTGDTED,
  .css-ifoflpEE {
    display: table-cell;
  }
  .css-ifofplYUWW {
    margin-bottom: 12px;
  }
  .css-oSSpYUDD {
    margin-top: 20px;
  }
  .css-ofpflppd,
  .css-ofpflppdE {
    display: table-cell;
  }
}

/* tab view */
@media ((min-width: 750px) and (max-width: 1024px) and (min-height:1020px)){
  .container{
    margin: 10px;
  }
  .css-pflfpRTR{
    display: grid;
    gap: 15px;
  }
  .css-oflfpolOPWW{
    margin-top: 10px;
  }
  h1 {
    margin: 15px 10px;
    font-size: 20px;
  }
  .Css-fgfhlOP{
    display: grid;
  }
  .chartCard, .css-oSSpYUDD{
    min-height: 600px;
  }
  .css-ufilfofpE{
    position: fixed;
    bottom: 5px;
    left: 16px;
    width: calc(100% - 31px);
    background: white;
    box-shadow: 1px -5px 13px 0px rgb(3 169 244 / 8%);
    border: 1px solid #03a9f475;
  }
  .css-tyhfkfiplOE.payoff.active{
    align-items: start;
    margin-top: 15px;
  }
  .css-uiflpEWW{
    flex-wrap: wrap;
  }
  .css-YujlfpYUDD td,.css-yfufjlopE{
    display: table-cell;
  }
  .css-oflDfpYUDD{
    gap: 8px;
    padding: 4px;
  }
  .css-oflfpYUDD{
    padding: 15px;
  }
  .css-YujlfpYUDD th, .css-YujlfpYUDD td{
    padding: 15px 10px;
  }
  .css-dfhgkglg{
    height: 25px;
    width: 25px;
  }
  .css-yfufolk input[type="checkbox"]:checked::before{
    font-size: 15px;
    margin-top: -1px;
  }
  .css-ufifopl{
    padding: 8px 25px;
    font-size: 14px;
  }
  .css-dfkflUI{
    padding: 9px 17px;
  }
  .jfkflopE{
    padding: 11px 13px;
  }
  .css-lidodpghbbdf{
    display: block;
    opacity: 0.4;
  }
  .css-oflfpTDGDH, .css-oflfpTDGDHE{
    font-size: 14px;
    padding: 8px 8px;
  }
  .css-UlfopEE tbody{
    height: calc(100dvh - 230px);
  }
  .css-tfhrrfjWfuifj{
    margin-top: 10px;
  }
}