#header-vagas {
  color: rgb(85, 80, 135);
}

#texto-vagas {
  text-align: left !important;
}

.humans {
  display: none;
}

.calendar-dol {
  display: none;
}

#chart-header {
  font-size: 35px;
}

.sub-sub-box{
  display: flex;
  flex-direction: row;
}


#commodity-col .sub-col select, #commodity-col .sub-col input {
  width: 100%;
}
#submit-registration {
  position: relative;
  width: 190px;
  height: 50px;
  align-self: center;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  color: white;
  background-color: rgb(85, 80, 139);
  text-transform: uppercase;
}

#submit-change-pass {
  position: relative;
  left: 40%;
  height: 50px;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  color: white;
  background-color: rgb(85, 80, 139);
  /* text-transform: uppercase; */
}

#submit-spread-table {
  position: relative;
  left: 40%;
  height: 50px;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  color: white;
  background-color: rgb(85, 80, 139);
  /* text-transform: uppercase; */
}

#edit-spread-table, #edit-mark-vol-spread-table {
  position: relative;
  left: 40%;
  height: 50px;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  color: white;
  background-color: rgb(85, 80, 139);
  /* text-transform: uppercase; */
}

#submit-change-infos {
  position: relative;
  left: 40%;
  height: 50px;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  color: white;
  background-color: rgb(85, 80, 139);
  /* text-transform: uppercase; */
}

@media only screen and (max-width: 600px) {
  #chart-header {
    margin-left: 0px;
    font-size: 35px;
  }
}

.btn-lg {
  color: white;
  background-color: #55508B;
}

.btn-outline-primary2 {
  color: #ffffff;
  background-color: transparent;
  background-image: none;
}

.btn-outline-primary3 {
  position: absolute;
  top: 0px;
  right: 0px;
  color: #ffffff;
  background-color: transparent;
  background-image: none;
}

.btn2 {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  margin-right: 12px;
  padding: .375rem .75rem;
  font-size: 1.9rem;
  line-height: 1.5;
  border-radius: .35rem;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

.btn3 {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  color: #ffffff;
  background-color: #C6A55A;
  border: 1px solid transparent;
  border-color: #C6A55A;
  margin-right: 12px;
  padding: .375rem .75rem;
  font-size: 1.9rem;
  line-height: 1.5;
  border-radius: .35rem;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

.chart-header-custom {
  text-align: center;
  font-size: 40px;
  color: rgb(85, 80, 139);
}

@media only screen and (max-width: 600px) {
  .chart-header-custom {
    margin-top: 0px;
  }
}

.chart_performance {
  margin-top: 10px;
}

.col-xs-13 {
  width: 20%;
  float: left;
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px
}

@media (max-width: 800px) {
  .col-sm-2 {
    position: initial !important;
  }
}

.ct-legend {
  position: relative;
  z-index: 10;

  li {
    position: relative;
    padding-left: 23px;
    margin-bottom: 3px;
  }

  li:before {
    width: 12px;
    height: 12px;
    position: absolute;
    left: 0;
    content: '';
    border: 3px solid transparent;
    border-radius: 2px;
  }

  li.inactive:before {
    background: transparent;
  }

  &.ct-legend-inside {
    position: absolute;
    top: 0;
    right: 0;
  }

  @for $i from 0 to length($ct-series-colors) {
    .ct-series-#{$i}:before {
      background-color: nth($ct-series-colors, $i + 1);
      border-color: nth($ct-series-colors, $i + 1);
    }
  }
}

.legend-dot {
  display: inline-block;
  margin-right: 12px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: black;
}

.legend-dot-a {
  background-color: rgb(85, 80, 139);
}

.legend-dot-b {
  background-color: #6DB744;
}

.legend-label {
  font-family: Avenir, 'Helvetica Neue';
  color: #453937;
}

#simulation-chart2 .ct-label {
  font-size: 12px;
}

#simulation-chart3 .ct-label {
  font-size: 12px;
}

#simulation-chart .ct-label {
  font-size: 9px;
}

@media (min-width: 768px) {
  #simulation-chart .ct-label {
    font-size: 12px;
  }
}

#simulation-chart .ct-grids .ct-horizontal {
  stroke-dasharray: 0;
}

#simulation-chart .ct-line {
  stroke-width: 3px;
}

#simulation-chart .ct-circle {
  stroke-width: 2px;
}

@media (max-width: 768px) {
  #simulation-chart .ct-circle {
    display: none;
  }
}


.modal-overlayer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
  height: 100vh;
  width: 100vw;
  padding-left: 4px;
  padding-right: 4px;
  background-color: rgba(0, 0, 0, 0.2);
}


#modal-overlayer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
  height: 100vh;
  width: 100vw;
  padding-left: 4px;
  padding-right: 4px;
  background-color: rgba(0, 0, 0, 0.2);
}

#modal-overlayer #overlayer-row {
  height: 100vh;
}

#modal-col {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding-top: 16px;
  padding-bottom: 40px;
}

#modal-header {
  display: flex;
  justify-content: space-between;
  padding: 20px 16px;
  border-bottom: 1px solid #CED4DA;
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 100;
}

#modal-header h3 {
  display: inline;
  margin: 0;
  margin-right: 8px;
  font-size: 20px;
}

#modal-header #close-modal {
  display: inline;
  height: 18px;
  width: 18px;
  padding: 0;
  border: none;
  background-color: transparent;
}

#modal-header #close-modal img {
  height: 16px;
  width: 16px;
  object-fit: contain;
  margin: 0;
}


#modal-header .close-modal {
  display: inline;
  height: 18px;
  width: 18px;
  padding: 0;
  border: none;
  background-color: transparent;
}

#modal-header .close-modal img {
  height: 16px;
  width: 16px;
  object-fit: contain;
  margin: 0;
}

#customclose {
  display: inline;
  height: 18px;
  width: 18px;
  padding: 0;
  border: none;
  background-color: transparent;
}

#customclose img {
  height: 16px;
  width: 16px;
  object-fit: contain;
  margin: 0;
}

#themeswitch {
  display: inline;
  height: 18px;
  width: 18px;
  padding: 0;
  border: none;
  background-color: transparent;
  -webkit-filter: invert(1) !important;
  filter: invert(1) !important;
}
#modal-header #reload-iframe {
  display: inline;
  height: 18px;
  width: 18px;
  padding: 0;
  border: none;
  background-color: transparent;
  margin-left: 70px;
  transform: rotate(-50deg);
  outline: none;
}

#modal-header #reload-iframe img {
  height: 16px;
  width: 16px;
  object-fit: contain;
  margin: 0;
}

#modal-header #close-iframe {
  display: inline;
  height: 18px;
  width: 18px;
  padding: 0;
  border: none;
  background-color: transparent;
}

#modal-header #close-iframe img {
  height: 16px;
  width: 16px;
  object-fit: contain;
  margin: 0;
}

#modal-body {
  padding-top: 20px;
  padding-left: 48px;
  padding-right: 48px;
  padding-bottom: 20px;
}

#modal-body input, #modal-body select {
 margin-bottom:20px;
}

#modal-body input[type="radio"] {
  height: 16px;
}

#modal-body label {
  font-size: 16px;
  /* font-family: "Times New Roman"; */
  font-weight: normal;
}

#modal-body .radio-label {
  margin-right: 16px;
}

#modal-body .radio-label2 {
  margin-right: 16px;
}

#modal-body select {
  width: 100%;
  height: 30px;
  font-size: 16px;
}

#modal-body input[type='text'], #modal-body input[type='number'] {
  width: 100%;
  border: unset;
  border: 1px solid #CED4DA;
  border-radius: 4px;
}

#modal-body label[for="strike"] {
  color: #28A745;
}

#modal-body #strike {
  border: unset;
  border: 1px solid #28A745;
}

#modal-body #payoff-wrapper {
  display: flex;
}

@media (max-width: 768px) {
  #modal-body #payoff-wrapper {
    flex-wrap: wrap;
  }
}

#modal-body #payoff-wrapper input[type="checkbox"] {
  height: 16px;
  margin-right: 4px;
  margin-bottom: 2px;
  flex-shrink: 0;
}

#modal-body #payoff-wrapper label[for="binary-payoff"] {
  margin-right: 8px;
  flex-shrink: 0;
}

#modal-body #payoff-wrapper #binary-payoff {
  display: inline-block;
  right: 0;
  flex-shrink: 2;
}

@media (max-width: 768px) {
  #modal-body #payoff-wrapper #binary-payoff {
    width: 100%;
    flex-shrink: 0;
  }
}

#modal-body-book {
  padding-top: 20px;
  padding-left: 48px;
  padding-right: 48px;
  padding-bottom: 20px;
}

#modal-body-book input, #modal-body-book select {
  margin-bottom:20px;
}

#modal-body-book input[type="radio"] {
  height: 16px;
}

#modal-body-book label {
  font-size: 16px;
  /* font-family: "Times New Roman"; */
  font-weight: normal;
}

#modal-body-book .radio-label {
  margin-right: 16px;
}

#modal-body-book .radio-label2 {
  margin-right: 16px;
}

#modal-body-book select {
  width: 100%;
  height: 30px;
  font-size: 16px;
}

.glyphicon-question-sign:before {
  color: #333;
}

#modal-body-book input[type='text'], #modal-body-book input[type='number'] {
  width: 100%;
  border: unset;
  border: 1px solid #CED4DA;
  border-radius: 4px;
}

#modal-body-book label[for="strike"] {
  color: #28A745;
}

#modal-body-book #strike {
  border: unset;
  border: 1px solid #28A745;
}

#modal-body-book #payoff-wrapper {
  display: flex;
}

@media (max-width: 768px) {
  #modal-body-book #payoff-wrapper {
    flex-wrap: wrap;
  }
}

#modal-body-book #payoff-wrapper input[type="checkbox"] {
  height: 16px;
  margin-right: 4px;
  margin-bottom: 2px;
  flex-shrink: 0;
}

#modal-body-book #payoff-wrapper label[for="binary-payoff"] {
  margin-right: 8px;
  flex-shrink: 0;
}

#modal-body-book #payoff-wrapper #binary-payoff {
  display: inline-block;
  right: 0;
  flex-shrink: 2;
}

@media (max-width: 768px) {
  #modal-body-book #payoff-wrapper #binary-payoff {
    width: 100%;
    flex-shrink: 0;
  }
}

#modal-footer {
  display: flex;
  justify-content: flex-end;
  padding: 16px;
  border-top: 1px solid #CED4DA;
}

#modal-footer input[type="submit"] {
  width: 100px;
  height: 30px;
  border: none;
  border-radius: 4px;
  margin-bottom: 0;
  text-transform: uppercase;
  color: white;
  background-color: #00AEBC;
}

/* dadadad */

#modal2-overlayer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
  height: 100vh;
  width: 100vw;
  padding-left: 4px;
  padding-right: 4px;
  background-color: rgba(0, 0, 0, 0.2);
}

#modal2-overlayer #overlayer2-row {
  height: 100vh;
}

#modal3-overlayer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
  height: 100vh;
  width: 100vw;
  padding-left: 4px;
  padding-right: 4px;
  background-color: rgba(0, 0, 0, 0.2);
}

#modal3-overlayer {
  height: 100vh;
}

#modal2-col {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding-top: 16px;
  padding-bottom: 40px;
}

#modal2-header {
  display: flex;
  justify-content: space-between;
  padding: 20px 16px;
  border-bottom: 1px solid #CED4DA;
  min-width: 360px;
}

#modal2-header h3 {
  display: inline;
  margin: 0;
  margin-right: 8px;
  font-size: 20px;
}

#modal2-header #close2-modal {
  display: inline;
  height: 18px;
  width: 18px;
  padding: 0;
  border: none;
  background-color: transparent;
}

#modal2-header #close2-modal img {
  height: 16px;
  width: 16px;
  object-fit: contain;
  margin: 0;
}

#modal2-body {
  padding-top: 20px;
  padding-left: 48px;
  padding-right: 48px;
}

.modal2-module input select {
  cursor: default !important;
  background-color: #ffffff !important;
}

#modal2-body input, #modal2-body select {
  margin-bottom: 20px;
}

#modal2-body input[type="radio"] {
  height: 16px;
}

#modal2-body label {
  font-size: 16px;
  /* font-family: "Times New Roman"; */
  font-weight: normal;
}

#modal2-body .radio-label {
  margin-right: 16px;
}

#modal2-body .radio-label2 {
  margin-right: 16px;
}

#modal2-body select {
  width: 100%;
  height: 30px;
  font-size: 16px;
}

#modal2-body input[type='text'], #modal2-body input[type='number'] {
  width: 100%;
  border: unset;
  border: 1px solid #CED4DA;
  border-radius: 4px;
}

#modal2-body label[for="strike"] {
  color: #28A745;
}

#modal2-body #strike {
  border: unset;
  border: 1px solid #28A745;
}

#modal2-body #payoff-wrapper {
  display: flex;
}

#modal3-form {
  background-color: #fff;
  color: #000;
}

#modal3-col {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding-top: 16px;
  padding-bottom: 40px;
}

#modal3-header {
  display: flex;
  justify-content: space-between;
  padding: 20px 16px;
  border-bottom: 1px solid #CED4DA;
  background-color: #fff;
}

#modal3-header h3 {
  display: inline;
  margin: 0;
  margin-right: 8px;
  font-size: 20px;
  color: #000;
}

#modal3-header #close2-modal {
  display: inline;
  height: 18px;
  width: 18px;
  padding: 0;
  border: none;
  background-color: transparent;
}

#modal3-header #close2-modal img {
  height: 16px;
  width: 16px;
  object-fit: contain;
  margin: 0;
}

#modal3-body {
  background-color: #fff;
  padding-top: 20px;
  padding-left: 48px;
  padding-right: 48px;
}

.modal3-module input select {
  cursor: default !important;
  background-color: #ffffff !important;
}

#modal3-body input, #modal3-body select {
  margin-bottom: 20px;
}

#modal3-body input[type="radio"] {
  height: 16px;
}

#modal3-body label {
  font-size: 16px;
  /* font-family: "Times New Roman"; */
  font-weight: normal;
}

#modal3-body .radio-label {
  margin-right: 16px;
}

#modal3-body .radio-label2 {
  margin-right: 16px;
}

#modal3-body select {
  width: 100%;
  height: 30px;
  font-size: 16px;
}

#modal3-body input[type='text'], #modal3-body input[type='number'] {
  width: 100%;
  border: unset;
  border: 1px solid #CED4DA;
  border-radius: 4px;
}

#modal3-body label[for="strike"] {
  color: #28A745;
}

#modal3-body #strike {
  border: unset;
  border: 1px solid #28A745;
}

@media (max-width: 768px) {
  #modal2-body #payoff-wrapper {
    flex-wrap: wrap;
  }
}

#modal2-body #payoff-wrapper input[type="checkbox"] {
  height: 16px;
  margin-right: 4px;
  margin-bottom: 2px;
  flex-shrink: 0;
}

#modal2-body #payoff-wrapper label[for="binary-payoff"] {
  margin-right: 8px;
  flex-shrink: 0;
}

#modal2-body #payoff-wrapper #binary-payoff {
  display: inline-block;
  right: 0;
  flex-shrink: 2;
}

@media (max-width: 768px) {
  #modal2-body #payoff-wrapper #binary-payoff {
    width: 100%;
    flex-shrink: 0;
  }
}

#modal2-footer {
  display: flex;
  justify-content: flex-end;
  padding: 16px;
  /* border-top: 1px solid #CED4DA; */
}

#modal3-footer {
  display: flex;
  justify-content: flex-end;
  padding: 16px;
  padding-right: 250px;
  /* border-top: 1px solid #CED4DA; */
}

#modal2-footer input[type="submit"] {
  width: 100px;
  height: 30px;
  border: none;
  border-radius: 4px;
  margin-bottom: 0;
  text-transform: uppercase;
  color: white;
  background-color: #00AEBC;
}

/* dadasda */

#botom-footer, #simu-footer, #consult-footer {
  display: flex;
  justify-content: flex-end;
  padding: 16px;
  border-top: 1px solid #CED4DA;
}

#simu-footer {
  justify-content: space-between;
}

#botom-footer input[type="submit"], #simu-footer input[type="submit"], #consult-footer input[type="submit"], #btn-chart, #book-btn, #btn-calc, #show-btn, #simu-btn, #calculate-structure {
  width: 100px;
  height: 30px;
  border: none;
  border-radius: 4px;
  margin-bottom: 0;
  text-transform: uppercase;
  color: white;
  background-color: rgb(85, 80, 139);
}

#btn-collapse {
  width: 100px;
  height: 30px;
  border: solid 1px rgb(85, 80, 139);
  border-radius: 4px;
  border-width: 2px 2px;
  text-transform: uppercase;
  color: rgb(85, 80, 139);
  background-color: #fff;
  float: left;
}

#btn-recalc {
  width:auto;
  height: 30px;
  border: none;
  border-radius: 4px;
  margin-bottom: 0;
  text-transform: uppercase;
  color: white;
  background-color: #C6A55A;
}
#recalculate_span{
  font-weight: 150%;
  font-size:110%;
}

.botom-footer {
  display: flex;
  justify-content: flex-end;
  padding: 16px;
  border-top: 1px solid #CED4DA;
}

.botom-footer input[type="submit"] {
  width: 100px;
  height: 30px;
  border: none;
  border-radius: 4px;
  margin-bottom: 0;
  text-transform: uppercase;
  color: white;
  background-color: rgb(85, 80, 139);
}

#botom-header {
  display:flex;
  justify-content: flex-end;
  padding: 16px;
  border-bottom: 1px solid #CED4DA;
  border: none; 

}
#loadinginfo {
  text-align: center;
  display:block;
  font-size: 120%;

  padding: 16px;
  border-bottom: 1px solid #CED4DA;
}
#botom-header input[type="submit"] {
  width: 100px;
  height: 30px;
  border: none;
  border-radius: 4px;
  margin-bottom: 0;
  text-transform: uppercase;
  color: white;
  background-color: rgb(85, 80, 139);
}

#modal-form {
  overflow-y: auto;
  max-height: 100% !important;
  max-width: 495px;
  min-height: 625px;
  border-radius: 4px;
  background-color: white;
}

#modal-form.form-all input[type="radio"], #modal-form.form-all .radio-label, #modal-form.form-all #strike, #modal-form.form-all label[for="strike"], #modal-form.form-all #volume, #modal-form.form-all label[for="volume"], #modal-form.form-all #barrier-type, #modal-form.form-all label[for="barrier-type"], #modal-form.form-all #barrier-level, #modal-form.form-all label[for="barrier-level"], #modal-form.form-all #porto, #modal-form.form-all label[for="porto"], #modal-form.form-all #frete, #modal-form.form-all label[for="frete"], #modal-form.form-all #physical-table, #modal-form.form-all label[for="physical-table"], #modal-form.form-all #payoff-wrapper {
  display: none;
}

#modal-form.form-fwd #call-radio, #modal-form.form-fwd label[for="call-radio"], #modal-form.form-fwd #put-radio, #modal-form.form-fwd label[for="put-radio"], #modal-form.form-fwd #consumer-producer, #modal-form.form-fwd label[for="consumer-producer"], #modal-form.form-fwd #strike, #modal-form.form-fwd label[for="strike"], #modal-form.form-fwd #barrier-type, #modal-form.form-fwd label[for="barrier-type"], #modal-form.form-fwd #barrier-level, #modal-form.form-fwd label[for="barrier-level"], #modal-form.form-fwd #porto, #modal-form.form-fwd label[for="porto"], #modal-form.form-fwd #frete, #modal-form.form-fwd label[for="frete"], #modal-form.form-fwd #physical-table, #modal-form.form-fwd label[for="physical-table"], #modal-form.form-fwd #payoff-wrapper {
  display: none;
}

#modal-form.form-future #call-radio, #modal-form.form-future label[for="call-radio"], #modal-form.form-future #put-radio, #modal-form.form-future label[for="put-radio"], #modal-form.form-future #consumer-producer, #modal-form.form-future label[for="consumer-producer"], #modal-form.form-future #strike, #modal-form.form-future label[for="strike"], #modal-form.form-future #barrier-type, #modal-form.form-future label[for="barrier-type"], #modal-form.form-future #barrier-level, #modal-form.form-future label[for="barrier-level"], #modal-form.form-future #porto, #modal-form.form-future label[for="porto"], #modal-form.form-future #frete, #modal-form.form-future #physical-table, #modal-form.form-future label[for="physical-table"], #modal-form.form-future label[for="frete"], #modal-form.form-future #payoff-wrapper {
  display: none;
}

#modal-form.form-vanilla #consumer-producer, #modal-form.form-vanilla label[for="consumer-producer"], #modal-form.form-vanilla #barrier-type, #modal-form.form-vanilla label[for="barrier-type"], #modal-form.form-vanilla #barrier-level, #modal-form.form-vanilla label[for="barrier-level"], #modal-form.form-vanilla #porto, #modal-form.form-vanilla label[for="porto"], #modal-form.form-vanilla #frete, #modal-form.form-vanilla label[for="frete"], #modal-form.form-vanilla #physical-table, #modal-form.form-vanilla label[for="physical-table"], #modal-form.form-vanilla #payoff-wrapper, #modal-form.form-compos #consumer-producer, #modal-form.form-compos label[for="consumer-producer"], #modal-form.form-compos #barrier-type, #modal-form.form-compos label[for="barrier-type"], #modal-form.form-compos #barrier-level, #modal-form.form-compos label[for="barrier-level"], #modal-form.form-compos #porto, #modal-form.form-compos label[for="porto"], #modal-form.form-compos #frete, #modal-form.form-compos label[for="frete"], #modal-form.form-compos #physical-table, #modal-form.form-compos label[for="physical-table"], #modal-form.form-compos #payoff-wrapper {
  display: none;
}

#modal-form.form-vanilla-digital #consumer-producer, #modal-form.form-vanilla-digital label[for="consumer-producer"], #modal-form.form-vanilla-digital #barrier-type, #modal-form.form-vanilla-digital label[for="barrier-type"], #modal-form.form-vanilla-digital #barrier-level, #modal-form.form-vanilla-digital label[for="barrier-level"], #modal-form.form-vanilla-strip #consumer-producer, #modal-form.form-vanilla-strip label[for="consumer-producer"], #modal-form.form-vanilla-strip #barrier-type, #modal-form.form-vanilla-strip label[for="barrier-type"], #modal-form.form-vanilla-strip #barrier-level, #modal-form.form-vanilla-strip label[for="barrier-level"], #modal-form.form-vanilla-strip #porto, #modal-form.form-vanilla-strip label[for="porto"], #modal-form.form-vanilla-strip #frete, #modal-form.form-vanilla-strip label[for="frete"], #modal-form.form-vanilla-strip #physical-table, #modal-form.form-vanilla-strip label[for="physical-table"], #modal-form.form-vanilla-strip #payoff-wrapper {
  display: none;
}

#modal-form.form-vanilla-digital-strip #consumer-producer, #modal-form.form-vanilla-digital-strip label[for="consumer-producer"], #modal-form.form-vanilla-digital-strip #barrier-type, #modal-form.form-vanilla-digital-strip label[for="barrier-type"], #modal-form.form-vanilla-digital-strip #barrier-level, #modal-form.form-vanilla-digital-strip label[for="barrier-level"], #modal-form.form-vanilla-digital-strip #porto, #modal-form.form-vanilla-digital-strip label[for="porto"], #modal-form.form-vanilla-digital-strip #frete, #modal-form.form-vanilla-digital-strip label[for="frete"], #modal-form.form-vanilla-digital-strip #physical-table, #modal-form.form-vanilla-digital-strip label[for="physical-table"], #modal-form.form-compo-option #consumer-producer, #modal-form.form-compo-option label[for="consumer-producer"], #modal-form.form-compo-option #barrier-type, #modal-form.form-compo-option label[for="barrier-type"], #modal-form.form-compo-option #barrier-level, #modal-form.form-compo-option label[for="barrier-level"], #modal-form.form-compo-option #porto, #modal-form.form-compo-option label[for="porto"], #modal-form.form-compo-option #frete, #modal-form.form-compo-option label[for="frete"], #modal-form.form-compo-option #physical-table, #modal-form.form-compo-option label[for="physical-table"], #modal-form.form-compo-option #payoff-wrapper {
  display: none;
}

#modal-form.form-vanilla-digital-strip #cash-option, #modal-form.form-vanilla-digital-strip label[for="cash-option"], #modal-form.form-compo-digital-option #cash-option, #modal-form.form-compo-digital-option label[for="cash-option"], #modal-form.form-compo-barrier-digital-option #cash-option, #modal-form.form-compo-barrier-digital-option label[for="cash-option"], #modal-form.form-compo-barrier-digital-strip #cash-option, #modal-form.form-compo-barrier-digital-strip label[for="cash-option"] {
  display: none;
}

#modal-form.form-compo-digital-option #consumer-producer, #modal-form.form-compo-digital-option label[for="consumer-producer"], #modal-form.form-compo-digital-option #barrier-type, #modal-form.form-compo-digital-option label[for="barrier-type"], #modal-form.form-compo-digital-option #barrier-level, #modal-form.form-compo-digital-option label[for="barrier-level"], #modal-form.form-compo-digital-option #porto, #modal-form.form-compo-digital-option label[for="porto"], #modal-form.form-compo-digital-option #frete, #modal-form.form-compo-digital-option label[for="frete"], #modal-form.form-compo-digital-option #physical-table, #modal-form.form-compo-digital-option label[for="physical-table"], #modal-form.form-compo-digital-option #payoff-wrapper {
  display: none;
}

#modal-form.form-compo-barrier-option #consumer-producer, #modal-form.form-compo-barrier-option label[for="consumer-producer"], #modal-form.form-compo-barrier-option #porto, #modal-form.form-compo-barrier-option label[for="porto"], #modal-form.form-compo-barrier-option #frete, #modal-form.form-compo-barrier-option label[for="frete"], #modal-form.form-compo-barrier-option #physical-table, #modal-form.form-compo-barrier-option label[for="physical-table"], #modal-form.form-compo-barrier-option #payoff-wrapper {
  display: none;
}

#modal-form.form-compo-barrier-digital-option #consumer-producer, #modal-form.form-compo-barrier-digital-option label[for="consumer-producer"], #modal-form.form-compo-barrier-digital-option #porto, #modal-form.form-compo-barrier-digital-option label[for="porto"], #modal-form.form-compo-barrier-digital-option #frete, #modal-form.form-compo-barrier-digital-option label[for="frete"], #modal-form.form-compo-barrier-digital-option #physical-table, #modal-form.form-compo-barrier-digital-option label[for="physical-table"], #modal-form.form-compo-barrier-option-strip #consumer-producer, #modal-form.form-compo-barrier-option-strip label[for="consumer-producer"], #modal-form.form-compo-barrier-option-strip #porto, #modal-form.form-compo-barrier-option-strip label[for="porto"], #modal-form.form-compo-barrier-option-strip #frete, #modal-form.form-compo-barrier-option-strip label[for="frete"], #modal-form.form-compo-barrier-option-strip #physical-table, #modal-form.form-compo-barrier-option-strip label[for="physical-table"], #modal-form.form-compo-barrier-option-strip #payoff-wrapper {
  display: none;
}

#modal-form.form-compo-barrier-digital-strip #consumer-producer, #modal-form.form-compo-barrier-digital-strip label[for="consumer-producer"], #modal-form.form-compo-barrier-digital-strip #porto, #modal-form.form-compo-barrier-digital-strip label[for="porto"], #modal-form.form-compo-barrier-digital-strip #frete, #modal-form.form-compo-barrier-digital-strip label[for="frete"], #modal-form.form-compo-barrier-digital-strip #physical-table, #modal-form.form-compo-barrier-digital-strip label[for="physical-table"], #modal-form.form-accum input[type="radio"], #modal-form.form-accum .radio-label, #modal-form.form-accum #barrier-type, #modal-form.form-accum label[for="barrier-type"], #modal-form.form-accum #strike, #modal-form.form-accum label[for="strike"], #modal-form.form-accum #porto, #modal-form.form-accum label[for="porto"], #modal-form.form-accum #frete, #modal-form.form-accum label[for="frete"], #modal-form.form-accum #physical-table, #modal-form.form-accum label[for="physical-table"], #modal-form.form-accum #payoff-wrapper, #modal-form.form-compo-barrier-digital-strip #cash-option, #modal-form.form-compo-barrier-digital-strip #cash-optionL {
  display: none;
}

#modal-form.form-physics #consumer-producer, #modal-form.form-physics label[for="consumer-producer"], #modal-form.form-physics #call-radio, #modal-form.form-physics label[for="call-radio"], #modal-form.form-physics #put-radio, #modal-form.form-physics label[for="put-radio"], #modal-form.form-physics #strike, #modal-form.form-physics label[for="strike"],
/*#modal-form.form-physics #volume,
      #modal-form.form-physics label[for="volume"],*/

#modal-form.form-physics #barrier-type, #modal-form.form-physics label[for="barrier-type"], #modal-form.form-physics #barrier-level, #modal-form.form-physics label[for="barrier-level"], #modal-form.form-physics #porto, #modal-form.form-physics label[for="porto"], #modal-form.form-physics #frete, #modal-form.form-physics label[for="frete"], #modal-form.form-physics #payoff-wrapper {
  display: none;
}

/* dadadada */

#modal2-form {
  overflow-y: auto;
  max-height: 100%;
  max-width: 495px;
  border-radius: 4px;
  background-color: white;
}

#modal2-form.form-all input[type="radio"], #modal2-form.form-all .radio-label, #modal2-form.form-all #strike, #modal2-form.form-all label[for="strike"], #modal2-form.form-all #barrier-type, #modal2-form.form-all label[for="barrier-type"], #modal2-form.form-all #barrier-level, #modal2-form.form-all label[for="barrier-level"], #modal2-form.form-all #payoff-wrapper {
  display: none;
}

#modal2-form.form-vanilla #consumer-producer, #modal2-form.form-vanilla label[for="consumer-producer"], #modal2-form.form-vanilla #barrier-type, #modal2-form.form-vanilla label[for="barrier-type"], #modal2-form.form-vanilla #barrier-level, #modal2-form.form-vanilla label[for="barrier-level"], #modal2-form.form-vanilla #payoff-wrapper {
  display: none;
}

#modal2-form.form-vanilla-digital #consumer-producer, #modal2-form.form-vanilla-digital label[for="consumer-producer"], #modal2-form.form-vanilla-digital #barrier-type, #modal2-form.form-vanilla-digital label[for="barrier-type"], #modal2-form.form-vanilla-digital #barrier-level, #modal2-form.form-vanilla-digital label[for="barrier-level"], #modal2-form.form-vanilla-strip #consumer-producer, #modal2-form.form-vanilla-strip label[for="consumer-producer"], #modal2-form.form-vanilla-strip #barrier-type, #modal2-form.form-vanilla-strip label[for="barrier-type"], #modal2-form.form-vanilla-strip #barrier-level, #modal2-form.form-vanilla-strip label[for="barrier-level"], #modal2-form.form-vanilla-strip #payoff-wrapper {
  display: none;
}

#modal2-form.form-vanilla-digital-strip #consumer-producer, #modal2-form.form-vanilla-digital-strip label[for="consumer-producer"], #modal2-form.form-vanilla-digital-strip #barrier-type, #modal2-form.form-vanilla-digital-strip label[for="barrier-type"], #modal2-form.form-vanilla-digital-strip #barrier-level, #modal2-form.form-vanilla-digital-strip label[for="barrier-level"], #modal2-form.form-compo-option #consumer-producer, #modal2-form.form-compo-option label[for="consumer-producer"], #modal2-form.form-compo-option #barrier-type, #modal2-form.form-compo-option label[for="barrier-type"], #modal2-form.form-compo-option #barrier-level, #modal2-form.form-compo-option label[for="barrier-level"], #modal2-form.form-compo-option #payoff-wrapper {
  display: none;
}

#modal2-form.form-compo-digital-option #consumer-producer, #modal2-form.form-compo-digital-option label[for="consumer-producer"], #modal2-form.form-compo-digital-option #barrier-type, #modal2-form.form-compo-digital-option label[for="barrier-type"], #modal2-form.form-compo-digital-option #barrier-level, #modal2-form.form-compo-digital-option label[for="barrier-level"], #modal2-form.form-compo-digital-option #payoff-wrapper {
  display: none;
}

#modal2-form.form-compo-barrier-option #consumer-producer, #modal2-form.form-compo-barrier-option label[for="consumer-producer"], #modal2-form.form-compo-barrier-option #payoff-wrapper {
  display: none;
}

#modal2-form.form-compo-barrier-digital-option #consumer-producer, #modal2-form.form-compo-barrier-digital-option label[for="consumer-producer"], #modal2-form.form-compo-barrier-option-strip #consumer-producer, #modal2-form.form-compo-barrier-option-strip label[for="consumer-producer"], #modal2-form.form-compo-barrier-option-strip #payoff-wrapper {
  display: none;
}

#modal2-form.form-compo-barrier-digital-strip #consumer-producer, #modal2-form.form-compo-barrier-digital-strip label[for="consumer-producer"], #modal2-form.form-accum input[type="radio"], #modal2-form.form-accum .radio-label, #modal2-form.form-accum #barrier-type, #modal2-form.form-accum label[for="barrier-type"], #modal2-form.form-accum #strike, #modal2-form.form-accum label[for="strike"], #modal2-form.form-accum #payoff-wrapper {
  display: none;
}

/* adadadada */
.sub-box {
    margin: 10px;
    padding: 0; 
    border: 1px  rgba(0, 0, 0, 0.01);
    border-radius: 8px;
    background-color:rgba(247, 241, 241, 0) ;
    width:fit-content;
    color: white;
    display: flex; 
    flex-direction:column; 
    align-items:center; 
    align-self: flex-start;
}

.rosario-box {
  margin-top: 5px;
  padding: 0; 
  border-radius: 8px;
  width:fit-content;
  display: flex; 
  flex-direction:column;
  gap: 5px; 
  align-items:start; 
}

.sub-box2 {
  padding: 0; 
  border-radius: 4px;
  background-color:rgba(247, 241, 241, 0) ;
  width:fit-content;
  color: white;
  height: fit-content;
  row-gap: 10px;
  display: flex; 
  flex-direction:column; 
  margin-top: 10px;
  position:absolute;
  align-items:start;
  margin-left: 10%;
  background-color: rgba(240, 240, 240, 0.6);

}

.sub-box-button {
  width:250px;
  height: max-content;
  margin: 0;
  border: none;
  margin-right: 10px;
  border-radius: 5px 5px 5px 5px;
  padding: 10px;
  color: white;
  background-color: rgb(85, 80, 139);
  transition: background-color 0.3s; 
}

.sub-box-button:hover {
  background-color: rgb(101, 95, 165);
}


.scroll-locked {
  overflow-y: hidden;
  overflow-x: hidden;
}

.action-btn {
  width: 130px;
  height: 40px;
  margin-top: 10px;
  margin-left: 960px;
  border: none;
  border-radius: 4px;
  margin-bottom: 0;
  text-transform: uppercase;
  color: white;
  background-color: #00AEBC;
}

.action-btn2 {
  width: 130px;
  height: 40px;
  margin-top: 10px;
  margin-right: 370px;
  border: none;
  border-radius: 4px;
  margin-bottom: 0;
  text-transform: uppercase;
  color: white;
  background-color: #00AEBC;
}

.account-btn {
  height: 40px;
  margin-top: 10px;
  margin-right: 10px;
  border: none;
  border-radius: 4px;
  margin-bottom: 0;
  font-size: small;
  text-transform: uppercase;
  color: white;
  background-color: rgb(85, 80, 139);
  transition: background-color 0.3s;
}

.account-btn2 {
  min-width: 140px;
  width: max-content; 
  height: 50px;
  margin-top: 10px;
  margin-right: 10px;
  border: none;
  border-radius: 4px;
  margin-bottom: 5px;
  font-size: small;
  text-transform: uppercase;
  color: rgb(101, 95, 165);
  background-color: white;
  transition: background-color 0.3s;
}
.account-btn:hover {
  background-color: rgb(101, 95, 165);
}
.account-btn:active {
  background-color: rgb(101, 95, 165);
}

#derivatives-col{
  background-color: white;
}

.account-btn3 {
  width:fit-content; 
  height: fit-content;
  align-items: start;
  border: none;
  font-size: small;
  text-transform: uppercase;
  color: rgb(101, 95, 165);
  background-color:#00000000;
}

.account-btn4 {
  width:fit-content; 
  height: fit-content;
  align-items: start;
  border: none;
  font-size: small;
  text-transform: uppercase;
  color: rgb(101, 95, 165);
  background-color:rgba(57, 57, 57, 0.6);
}

.account-btn2:hover {
  background-color: rgba(236, 234, 234, 0.8);
}

.Header-menu {
  align-self: center;
  font-size: 18px;
  color: white;
}

.text {
  color: white;
  padding-right: 14px;
  padding-left: 14px;
}

.hidden2 {
  display: none;
  visibility: none;
}

header {
  z-index: 10;
  top: 0;
  left: 0;
  justify-content: space-between;
  /* height: 100%; */
  width: 100%;
 
  background-color: rgb(85, 80, 139);
}

header img {
  align-self: left;
  height: 100%;
  object-fit: contain;
  max-width: 40%;
}

@media (min-width: 768px) {
  header img {
    min-width: unset;
  }
}

header span {
  display: inline-block;
  align-self: center;
  color: white;
  font-size: 12px;
}

@media (min-width: 768px) {
  header span {
    font-size: 14px;
  }
}

#main-container {
  /* margin-top: calc(55px + 50px); */
  margin-top: 0px;
}

@media (min-width: 1200px) {
  #main-container {
    margin-top: calc(30px);
  }
}

#main-container label {
  font-weight: 400;
}

#main-container .row {
  margin-left: 0;
  margin-right: 0;
  position: relative;
}

.row2 {
  /* margin-top: 73px; */
  margin-left: 0;
  margin-right: 0;
  min-width: 400px;
  max-height: calc(100vh - 200px); 
  width: fit-content;
  position: absolute;
  align-self: center;
  z-index: 1000;
  border-radius: 5px;
  border-color: transparent;
  overflow: auto; 
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3 ease, visibility 0s 0.3s;
  z-index: 999; 
}


.close-btn{
  position: absolute;
  right: 0;
  top: 0;
  width: fit-content;
  height: fit-content;
  color: white;
  background-color: #00000000;
  border-color: #00000000;
  border-radius: 5px;
}

#commodity-col {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 30px;
}

#commodity-col2{
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;

}

#commodity-col .sub-col {
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 10px;
}

@media (max-width: 700px) {
  #commodity-col {
    display: flex;
    flex-direction: column;
  }
  #commodity-col .sub-col  {
    width: 100%;
  }
}
.calculator-filter .sub-col {
  width: fit-content;
}

#commodity-col .sub-col label {
  color: #4E4878;
  font-family: "arial";
  font-size: 20px;
}

#commodity-col .sub-col select, #commodity-col .sub-col input {
  width: 100%;
}

@media (min-width: 768px) {
  #commodity-col .sub-col select {
    display: inline;
    color: #47525E;
    opacity: 1.0;
    font-size: 20px;
  }

  #commodity-col .sub-col input {
    /* height: 28px; */
    /* width: 97%; */
    border-radius: 4px 4px 4px 4px;
    /* display: block; */
  }

  #commodity-col .sub-col:first-child {
    padding-left: 0;
  }

  #commodity-col .sub-col:last-child {
    padding-right: 0;
  }
}

.image_graph {
  width: 100%;
  padding-top: 30px;
}

#carregando {
  position: absolute;
  height: 100%;
}

.box_result {
  width: 21%;
  float: left;
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

@media only screen and (max-width: 600px) {
  .box_result {
    width: 100%;
    position: relative;
    margin-bottom: 20px;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
  }
}

.box_result2 {
  width: 19%;
  float: left;
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  border-left: 1px solid #C6A55A;
}

@media only screen and (max-width: 600px) {
  .box_result2 {
    float: none;
    margin-bottom: 20px;
    border-left: none;
  }
}

.box_result3 {
  float: left;
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

@media only screen and (max-width: 600px) {
  .box_result3 {
    float: none;
    margin-bottom: 20px;
    border-left: none;
  }
}

/*CARTEIRA COM VAR*/

@media (min-width: 1800px) {
  #main-container {
    width: 100% !important;
  }
}

@media (max-width: 1799px) {
  #main-container {
    width: 100% !important;
  }
}

.container-box-result {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-self: flex-start;
}

.riskmap-img {
  width: 1400px;
}

.box_result5 {
  /* display: flex; */
  /* flex-direction: column; */
  width: max-content;
  margin-right: 5px;
  margin-bottom: 5px;
  position: relative;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
  border: 1.8px solid rgba(85, 80, 139, 0.301);
  border-radius: 10px;
  background-color: #fff;
  /* box-shadow: 1.5px 2px 0px 0px rgba(0, 0, 0, 0.3); */
}

.box_result5 span {
  color: #434A54;
}

.box_result5 label .tooltip-inner {
  width: 90px;
}

.box_result5 span::before {
  z-index: 3;
}

@media only screen and (max-width: 600px) {
  .box_result4, .box_result5, .box_result51, .box_result6 {
    width: 100%;
    float: none;
    margin-bottom: 5px;
    border: none;
    padding-left: 10px;
    box-shadow: none;
  }
}

.blink_me {
  animation: blinker 2s linear infinite;
}


@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.text-result {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 0;
  font-weight: 300;
  font-family: "arial";
  color: #4E4878;
  font-size: 18px;
  opacity: 0.7;
  display: flex;
  align-items: baseline;
}

.values_result {
  font-family: "arial";
  color: #00AEBC;
  font-size: 20px;
}

.values_result2 {
  font-family: "arial";
  color: #4E4878;
  font-size: 20px;
}

label[for='day-recomendation'] {
  font-size: 14px;
}

.uhedge-box-header {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 100%;
  margin-top: 0;
  margin-bottom: 16px;
  padding-left: 24px;
  background-color: rgb(85, 80, 139);
  border-radius: 4px 4px 0 0;
}

.uhedge-box-header-date {
  display: flex;
  align-items: center;
  vertical-align: middle;
  top: 0;
  left: 0;
  width: 100%;
  margin-top: 0;
  font-size: 10px;
  color: white;
  margin-bottom: 16px;
  padding-left: 24px;
  background-color: rgb(85, 80, 139);
  border-radius: 4px 4px 0 0;
}

.uhedge-box-header h3, span {
  margin-top: 20px;
  margin-bottom: 10px;
  align-self: center;
  margin: 0;
  color: white;
  font-size: 20px;
  font-weight: 300;
}

.uhedge-box-header-price {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 100%;
  margin-top: 0;
  margin-bottom: 16px;
  padding-left: 24px;
  background-color: #C6A55A;
  border-radius: 4px 4px 0 0;
}

.uhedge-box-header-price h3 {
  align-self: center;
  margin: 0;
  color: white;
  font-size: 20px;
  font-weight: 300;
}

.uhedge-box {
  position: relative;
  min-height: 60px;
  margin-bottom: 28px;
  padding: calc(12px + 40px) 24px 12px 24px;
  border: 1px solid rgba(55, 55, 55, 0.1);
  border-radius: 4px;
  box-shadow: 0 1px 1px 0px rgba(0, 0, 0, 0.2);
}

@media (min-width: 768px) {
  .uhedge-box {
    display: inline-block;
    min-height: 60px;
    margin-bottom: 28px;
    padding: calc(12px + 40px) 24px 12px 24px;
    border: 1px solid rgba(55, 55, 55, 0.1);
    border-radius: 4px;
    box-shadow: 0 1px 1px 0px rgba(0, 0, 0, 0.2);
  }
}

#recomendation-col #recomendation-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

#recomendation-col #recomendation-content #checkbox-kit {
  align-self: flex-start;
}

#recomendation-col #recomendation-content #execute-recomendation {
  align-self: flex-end;
}

@media (min-width: 768px) {
  #recomendation-col #recomendation-content {
    flex-direction: row;
  }

  #recomendation-col #recomendation-content #checkbox-kit {
    align-self: center;
  }

  #recomendation-col #recomendation-content #execute-recomendation {
    align-self: center;
  }
}

@media (max-width: 768px) {
  #recomendation-col {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (min-width: 768px) {
  #derivatives-col, #simulation-col, #execution-col {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.disabled {
  pointer-events: none;
  user-interaction: none;
  opacity: 0.7;
}

#derivatives-selection {
  border-radius: 4px;
}

#derivatives-selection .derivative-option {
  padding: 8px 16px;
  display: flex;
  border: 1px solid #E6E9ED;
  font-size: 14px;
  color: #434A54;
  cursor: pointer;
}

#derivatives-selection .derivative-option span {
  align-self: flex-start;
  margin-left: 5px;
  color: #434A54;
}

#derivatives-selection .derivative-option.selected, #derivatives-selection .derivative-option:hover {
  color: white;
  background-color: #00AEBC;
}

#derivatives-selection .derivative-option:hover span {
  color: white !important;
}

#derivatives-selection .derivative-option:first-child {
  border-radius: 4px 4px 0 0;
}

#derivatives-selection .derivative-option:last-child {
  border-radius: 0 0 4px 4px;
}

/* asdadsda */

#table-selection {
  border-radius: 4px;
}

#table-selection .table-option {
  padding: 8px 24px;
  border: 1px solid #E6E9ED;
  font-size: 14px;
  color: #434A54;
  cursor: pointer;
}

#table-selection .table-option.selected, #table-selection .table-option:hover {
  color: white;
  background-color: #00AEBC;
}

#table-selection .table-option:first-child {
  border-radius: 4px 4px 0 0;
}

#table-selection .table-option:last-child {
  border-radius: 0 0 4px 4px;
}

/* adasdadasdas */

#simulation-col #cash-at-risk {
  margin-top: 10px;
  margin-bottom: 4px;
  font-size: 18px;
  color: #E77B48;
  font-weight: 500;
}

#simulation-col #risk-legend {
  color: #737373;
  font-weight: 200;
  font-style: italic;
}

#banks-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#banks-box .bank-button {
  width: calc(50% - 8px);
  clear: both;
  margin: 8px 4px;
  padding: 0;
  border: none;
  background-color: transparent;
}

@media (min-width: 768px) {
  #banks-box .bank-button {
    width: unset;
  }
}

#banks-box img {
  object-fit: contain;
}

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  /* Safari */
  animation: spin 2s linear infinite;
}

.hide-loader {
  display: none;
}

/* Safari */

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*# sourceMappingURL=main.css.map */

.simulationChart {
  margin-bottom: 20px;
  display: inline-block;
}

@media only screen and (max-width: 600px) {
  .simulationChart {
    margin-bottom: 300px;
    display: inline-block;
  }
}

.simulationChart2 {
  margin-bottom: 20px;
  display: inline-block;
}

@media only screen and (max-width: 600px) {
  .simulationChart2 {
    margin-bottom: 300px;
    display: flex;
  }
}

/* .myImg {
  margin-left: 15vw;
}

@media only screen and (max-width: 600px) {
  .myImg {
    margin-left: -40vw;
  }
} */
.newnav {

  z-index: 1!important;
  background-color: rgb(85, 80, 139);
  min-height:70px;
  
}
.newnav a{
    color: #f2f2f2;
    font-size: 17px;
    text-decoration: none;
    
}
.newnav > li {
  margin-top:10px;
  text-align: center;
  margin-left:5px;
  margin-right:5px;
}

.tgd:active, .open .tgd {
  background-color:   rgba(252, 62, 62, 0.726)!important;
  
}
.tgd{
  background-color: rgb(252, 62, 62) !important;
  border: 1px solid inherit;
  border-radius: .35rem;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}
.nav-active{
  font-weight: 400;
  text-align: center;
  background-color: #C6A55A;
  border: 1px solid inherit;
  border-radius: .35rem;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}
.newnav > li > a:hover, .newnav > li > a:focus{
  font-weight: 400;
  text-align: center;
  background-color:  rgb(101, 95, 165);
  border: 1px solid inherit;
  border-radius: .35rem;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

.topnav {
  overflow: auto;
  overflow-y:auto;
  width: 100%;
  background-color: rgb(85, 80, 139);
  margin-bottom: 20px;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
}

.active {
  color: white;
}

.topnav .icon {
  display: none;
}
#comp{
  overflow:visible !important;
  font-size: 33px;
  float: left;
  max-height:100%;
  height: auto;
  text-align: center;
  padding: 14px 16px;

  
}
#comp:hover{
  background-color:transparent;
}
@media (max-width: 1220px) {
  .topnav a {
    font-size: 14px;
    padding: 12px 14px;
  }
}

@media (max-width: 1020px) {
  .topnav a {
    font-size: 17px;
    padding: 14px 16px;
  }
}

@media screen and (max-width: 700px) {
  .topnav {
    position: absolute;
  }

  .topnav a:not(:first-child) {
    display: none;
  }

  .topnav a.changeLang {
    display: none !important;
  }

  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 700px) {
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  .topnav.responsive a {
    float: none !important;
    margin: 0;
    display: block;
    text-align: left;
  }

  .topnav.responsive a.changeLang {
    display: flex !important;
  }
}

.header_i {
  margin: 15px;
  float: left;
  max-width: 200px;
}

@media screen and (max-width: 700px) {
  .header_i {
    margin: 15px;
    max-width: 200px;
    float: none;
  }
}

.changeLang {
  float: right !important;
  margin-top: 20px;
  width: max-content;
  display: flex;
}

.changeLang:hover {
  background-color: transparent !important;
}

.changeLang button {
  color: #f2f2f2;
  text-align: center;
  font-size: 17px;
  background-color: transparent;
  border: none;
  outline: none;
}

.changeLang div {
  background-color: #f2f2f279;
  height: 30px;
  margin: 0 5px;
  width: 0.5px;
}

.changeLang button[select='true'] {
  color: #C6A55A !important;
}

.changeLang button[select='false'] {
  color: #fff;
}

.form-control2 {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #ddd;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.form-control2:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

.form-control2::-moz-placeholder {
  color: #999;
  opacity: 1;
}

.form-control2:-ms-input-placeholder {
  color: #999;
}

.form-control2::-webkit-input-placeholder {
  color: #999;
}

.form-control2[disabled], .form-control2[readonly], fieldset[disabled] .form-control2 {
  -webkit-appearance: none !important;
  cursor: default;
  background-color: #fff;
  opacity: 1;
}

textarea.form-control2 {
  height: auto;
}

input[type="search"] {
  -webkit-appearance: none;
}

#modal2-body div {
  cursor: default;
  margin-bottom: 20px;
}

/* Tabela de boletas */

.contracts-table {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  min-height: 600px;
}

.contracts-table-header {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: min-content;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.contracts-table-header h2 {
  color: #534F8B;
  align-self: center;
  justify-self: center;
  text-align: center;
}

.contracts-table-header img {
  position: absolute;
  z-index: 2;
  align-self: flex-end;
  cursor: pointer;
  float: right;
  width: 40px;
  height: 30px;
  right: 50px;
  padding-right: 10px;
}

.contracts-table-informations {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.contracts-table-title {
  display: flex;
  align-self: center;
  width: min-content;
}

.contracts-table-lines {
  display: flex;
  align-self: center;
  width: min-content;
  flex-direction: column;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

@media (max-height: 300px) {
  .contracts-table-lines {
    max-height: 100vh;
  }
}

.contracts-table-footer {
  display: flex;
  align-self: center;
  width: min-content;
}

.contracts-table-footer td {
  padding: 8px;
  margin-right: 2px;
  font-weight: bold;
  justify-self: center;
  align-self: center;
  text-align: center;
}

.contracts-table-line {
  display: flex;
  align-self: start;
  width: max-content;
  cursor: pointer;
  height: 50px;
  vertical-align: middle;
  border-bottom: 1px solid #CCC;
}

.contracts-table-line:hover {
  background-color: rgba(0, 0, 0, 0.144) !important;
}

.contracts-table-title th {
  padding: 8px;
  border-bottom: none;
  justify-self: center;
  font-weight: 500;
  align-self: center;
  text-align: center;
  border-radius: 10px 10px 0 0;
  margin-right: 2px;
  background-color: #8E8CA6;
  color: #fff;
  display: flex;
  flex-direction: column;
  text-transform: uppercase;
  position: relative;
}


.contracts-table-title img {
  width: 20px;
  position: absolute;
  right: 7px;
}

.contracts-table-title p {
  width: 100%;
}

.contracts-table-informations td, .contracts-table-informations p {
  min-width: 100px;
  justify-self: center;
  align-self: center;
  text-align: center;
  margin: 0;
  text-transform: capitalize;
  margin-right: 2px;
}

.contracts-table-lines td {
  padding: 0 8px 0 8px;
  overflow-wrap: break-word;
}

.contracts-table-informations .start_date {
  width: 150px;
}

.contracts-table-informations .type {
  width: 180px;
}

.contracts-table-informations .commodity {
  width: 170px;
}

.contracts-table-informations .underlying, .physical_item {
  width: 200px;
}

.contracts-table-informations .book, .contracts-table-informations .subbook, .contracts-table-informations .concessionvolume, .contracts-table-informations .concessionprice, .contracts-table-informations .notional {
  width: 200px;
}

.contracts-table-informations .cap_level {
  width: 200px;
}

.contracts-table-informations .producer-consumer {
  width: 200px;
}

.contracts-table-informations .floor_level {
  width: 200px;
}

.contracts-table-informations .ceiling_level {
  width: 200px;
}
.contracts-table-informations .enhancement_level {
  width: 200px;
}

.contracts-table-informations .guaranteed_level {
  width: 200px;
}

.contracts-table-informations .enhancement_level1 {
  width: 200px;
}

.contracts-table-informations .enhancement_level2 {
  width: 200px;
}

.contracts-table-informations .enhancement_level3 {
  width: 200px;
}

.contracts-table-informations .trigger_level {
  width: 200px;
}

.contracts-table-informations .double_up_type {
  width: 200px;
}

.contracts-table-informations .id {
  width: 170px;
}

.contracts-table-informations .id_internal {
  width: 200px;
}

.contracts-table-informations .value {
  width: 170px;
}

.contracts-table-informations .maturity {
  width: 170px;
}

.contracts-table-informations .counterparty {
  width: 200px;
}

.contracts-table-lines .counterparty {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.contracts-table-informations .operation_date {
  width: 170px;
}

.contracts-table-informations .operation {
  width: 170px;
}

.contracts-table-informations .strike {
  width: 170px;
}

.contracts-table-informations .call-put {
  width: 170px;
}

.contracts-table-informations .payoff {
  width: 170px;
}

.contracts-table-informations .lots-quantity, .contracts-table-informations .expiry_date, .contracts-table-informations .cash_value, .contracts-table-informations .cashorfix_cash_amount {
  width: 200px;
}

.contracts-table-informations .delta, .contracts-table-informations .deltafx,  .contracts-table-informations .deltaunit, .contracts-table-informations .financial_beta, .contracts-table-informations .div, .contracts-table-informations .ir {
  width: 150px;
}

.contracts-table-informations .gama, .contracts-table-informations .gamafx, .contracts-table-informations .pgamafx, .contracts-table-informations .pgama, .contracts-table-informations .gamaunit, .contracts-table-informations .pgamaunit {
  width: 150px;
}

.contracts-table-informations .vega, .contracts-table-informations .vanna, .contracts-table-informations .volga, .contracts-table-informations .vegafx {
  width: 150px;
}

.contracts-table-informations .theta, .contracts-table-informations .thetafx {
  width: 150px;
}

.contracts-table-informations .p_l, .contracts-table-informations .fxpair {
  width: 200px;
}

.contracts-table-informations .unit_price, .contracts-table-informations .average_price, .contracts-table-informations .trading_days, .contracts-table-informations .accumulated_days, .contracts-table-informations .remaining_days {
  width: 200px;
}

.contracts-table-informations .p_l-daily, .contracts-table-informations .p_l-gamma, .contracts-table-informations .p_l-delta, .contracts-table-informations .p_l-vega, .contracts-table-informations .p_l-vanna, .contracts-table-informations .p_l-volga, .contracts-table-informations .p_l-theta, .contracts-table-informations .p_l-residual,  .contracts-table-informations .p_l-day {
  width: 200px;
}

.contracts-table-informations .p_l-ytd {
  width: 200px;
}

.contracts-table-informations .p_l-mtd {
  width: 200px;
}

.contracts-table-informations .price, .contracts-table-informations .physical_table {
  width: 200px;
  text-transform: none !important;
}

.contracts-table-informations .barrier {
  width: 150px;
}

.contracts-table-informations .vol {
  width: 150px;
}

.contracts-table-informations .user {
  width: 150px;
}

.contracts-table-informations .settlement_type {
  width: 200px;
}

.tab_filter_div {
  position: absolute;
  background: white;
  width: 100%;
  left: 0;
  top: 36px;
  border: solid 1px #888;
  border-radius: 0px 0px 5px 5px;
  display: flex;
  flex-direction: column;
  align-items: baseline;
  z-index: 2;
  max-height: 500px;
  overflow-y: scroll;
}

.tab_filter_div label {
  color: #000;
  text-transform: none;
  margin-left: 5px;
}

.tab_filter_item {
  padding: 0px 5px;
  display: flex;
  justify-content: flex-start;
}

.tab_filter_div button {
  align-self: end;
  margin: 0px 5px 5px 0px;
  border-color: #888;
}

.background {
  width: 100%;
  height: 100vh;
  position: absolute;
  z-index: 1;
}

.modal-settings {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-settings-background {
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.45);
  position: fixed;
  width: 100%;
  height: 100vh;
}

.modal-settings-body {
  z-index: 1003;
  width: 400px;
  background-color: #F5F4F8;
  position: fixed;
  height: min-content;
  border-radius: 10px;
  padding: 30px;
  max-height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
}

.modal-settings-body p {
  font-size: large;
  text-align: center;
}

.modal-settings-body form {
  display: grid;
  justify-content: space-between;
  grid-template-columns: 200px 200px;
}

.modal-settings-body label {
  font-weight: 500;
  cursor: pointer;
}

.modal-settings-body input {
  cursor: pointer;
}

.modal-settings-line {
  width: 100%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.158);
  margin-top: 10px;
  margin-bottom: 10px;
}

.modal-settings span {
  font-size: 16px;
  color: rgb(190, 53, 53);
}

.filters-container {
  display: flex;
  padding: 10px;
  padding-left: 40px;
  width: 100%;
}

.filters-container div {
  padding-left: 50 !important;

}

.filter-container {
  width: max-content !important;
  /* margin-right: 50px; */
}

.div-cont {
  width: 100% !important;
  max-width: 500px !important;
}
.div-cont div{
  width: 100% !important;
  max-width: 500px !important;
}
#derivative-type-filter-container, #derivative-type-filter-simulate-container {
  width: 200px;
}

#curve_vol-filter-container, #curve_vol-filter-simulate-container {
  width: 200px;
}

@media (max-width: 1350px) {
  .filters-container {
    flex-wrap: wrap;
    padding: 10px;
  }
}

.change-wallet {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding-right: 20px;
  margin-bottom: 10px;
}

.change-wallet button {
  outline: none;
  border: none;
  height: 30px;
  /* font-weight: 600; */
  width: 200px;
  color: #FFF;
  text-transform: uppercase;
}

@media (max-width: 460px) {
  .change-wallet button {
    font-size: smaller;
    width: 150px;
  }
}

#consult-btn {
  border-radius: 4px 0 0 4px;
}

#simulate-btn {
  border-radius: 0px 4px 4px 0px;
}

#consult-btn:hover, #simulate-btn:hover {
  box-shadow: inset 50px 50px 50px 50px rgba(0, 0, 0, 0.1);
}

.change-wallet button {
  transition: background-color 0.5s;
}

.change-wallet button[select='true'] {
  box-shadow: none !important;
  background-color: #C6A55A !important;
  cursor: default;
}

.change-wallet button[select='false'] {
  background-color: #ccb580;
}

.filterOption {
  padding: 0 !important;
  display: flex;
  flex-direction: row !important;
  align-items: flex-end;
  justify-content: flex-end;
}

.filterOption p {
  justify-self: center !important;
}

.filterOption img {
  width: 10px;
  height: 10px;
  float: right;
  cursor: pointer;
}

#book-filterDiv, #type-filterDiv, #counterparty-filterDiv, #operation-filterDiv, #callput-filterDiv, #user-filterDiv {
  position: absolute;
  width: 150px;
  top: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  background-color: transparent;
}

#book-filter, #type-filter, #counterparty-filter-table, #operation-filter, #callput-filter, #user-filter {
  width: 100%;
  height: 36px;
  background-color: transparent;
}

#book-filterDiv section, #type-filterDiv section, #counterparty-filterDiv section, #operation-filterDiv section, #callput-filterDiv section, #user-filterDiv section {
  background-color: white;
  width: 150px;
  border-radius: 0 0 10px 10px;
  padding-left: 5px;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

#book-filterDiv section div, #type-filterDiv section div, #counterparty-filterDiv section div, #operation-filterDiv section div, #callput-filterDiv section div, #user-filterDiv section div {
  display: flex;
  width: 100%;
  padding: 0;
  background-color: transparent;
  color: #000;
  flex-direction: row;
  align-items: baseline;
}

#book-filterDiv section div label, #type-filterDiv section div label, #counterparty-filterDiv section div label, #operation-filterDiv section div label, #callput-filterDiv section div label, #user-filterDiv section div label {
  padding-left: 5px;
  cursor: pointer;
}

.aux {
  cursor: default;
}

#underlying-maturity-select-simulate {
  position: relative;
  display: flex;
  cursor: pointer;
  flex-direction: row;
  overflow: hidden;
  align-items: center;
  padding: 10px !important;
  vertical-align: center;
}

#underlying-maturity-select-simulate p {
  margin: 0;
  margin-right: 5px;
}

#underlying-maturity-select-simulate button {
  background-color: #C6A55A;
  position: absolute;
  width: 25px;
  height: 25px;
  outline: none;
  border: none;
  border-radius: 25px;
  font-size: larger;
  text-align: center;
  justify-content: center;
  color: #FFF;
  top: 4px;
  right: 5px;
}

.simulate-input-modal-container,.equivalent-price-modal-container,.unwind-confirm-container,.delete-confirm-container,.unwind-cash-container,.unwind-loading-container,.unwind-accumulator-container,.modal-container,.add-hedge-container,.earlyexercise-confirm-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.219);
  z-index: 3;
}

.simulate-input-modal, .equivalent-price-modal, .unwind-confirm, .delete-confirm,.unwind-cash, .add-hedge ,.unwind-accumulator, .modal3, .earlyexercise-confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 400px;
  background-color: white;
  border-radius: 10px;
  z-index: 4;
  max-height: 95vh;
  overflow: scroll;
}

.simulate-input-modal h3, .equivalent-price-modal h3, .unwind-confirm h3, .delete-confirm h3 .unwind-cash h3, .unwind-accumulator h3, .modal3 h3, .add-hedge h3, .earlyexercise-confirm h3 {
  color: #534F8B;
}

.unwind-confirm p, .delete-confirm p, .unwind-accumulator p, .earlyexercise-confirm p {
  margin-right: 5px;
  font-weight: bold;
  color: #444;
}

.added-inputs {
  width: 95%;
  display: flex;
  flex-wrap: wrap;
  background-color: #f2f2f2;
  border-radius: 5px;
  padding: 5px;
  padding-bottom: 0;
  margin-bottom: 15px;
}

.added-inputs .inputs {
  display: flex;
  width: fit-content;
  height: min-content;
  justify-content: space-between;
  min-width: 100px;
  border-radius: 5px;
  background-color: #fff;
  margin-right: 15px;
  margin-bottom: 5px;
}

.added-inputs .inputs p {
  padding: 5px;
  margin: 0;
}

.added-inputs .inputs button {
  outline: none;
  border-radius: 0 5px 5px 0;
  border: none;
  color: white;
  background-color: #C6A55A;
}

.add-new-inputs {
  display: flex;
  height: 60px;
  width: 95%;
}

.underlying-input, .maturity-input {
  display: flex;
  flex-direction: column;
  width: 50%;
  height: min-content;
}

.maturity-input select {
  width: calc(-5px + 100%);
}

#add-input {
  border: none;
  outline: none;
  background-color: #534F8B;
  color: #FFF;
  margin: 10px;
  border-radius: 2px;
  align-self: flex-end;
}

#confirm-add-inputs, #close-equiv-modal {
  border: none;
  outline: none;
  background-color: #C6A55A;
  width: 100px;
  padding: 5px;
  color: #FFF;
  margin: 10px;
  border-radius: 5px;
  align-self: flex-end;
}

.equivalent-price-modal table {
  margin: 10px 0;
}

.equivalent-price-modal th {
  padding: 5px 10px;
  text-align: left;
  /* background-color: #8E8CA6; */
  /* color: #FFF; */
  /* font-weight: 500; */
  /* border-right: solid 1px #fff; */
  /* border-radius: 10px 10px 0 0; */
  border-bottom: solid 2px #CCC;
}

.equivalent-price-modal td {
  padding: 2px 10px;
  text-align: center;
}

.equivalent-price-modal tr {
  border-bottom: solid 1px #CCC;
}

.equivalent-price-modal {
  z-index: 2;
  width: max-content;
  padding: 0 15px;
  border-radius: 5px;
}

#close-equiv-modal {
  margin-right: 0;
  padding: 2px;
}

#explicacao {
  width: 21px;
  height: 21px;
  border-radius: 21px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  text-align: center;
  margin-left: 5px;
  cursor: pointer;
}

#explicacaoPrecoEquiv {
  color: white;
  position: absolute;
  background-color: #333333;
  width: 150px;
  font-size: small;
  top: 10px;
  border-radius: 0 10px 10px 10px;
  padding: 5px;
}

.downloads-btn {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 30px;
  align-items: flex-end;
  width: 200px;
}

.downloads-btn #menu {
  background-image: url(../assets/images/menu.png);
  color: #fff;
  width: 20px;
  margin-bottom: 0;
  padding: 5px;
  border-radius: 2px;
  cursor: pointer;
  height: 20px;
  background-repeat: no-repeat;
  background-size: cover;
}

.downloads-btn button {
  background-color: white;
  border: none;
  outline: none;
  text-align: inherit;
  font-size: small;
}

#menu:hover {
  background-color: transparent;
}

.downloads-btn button:hover {
  background-color: #AFAEC0;
  color: #FFF;
}

.download-btnDiv {
  display: flex;
  box-shadow: 0 2px 10px 0 rgb(0 0 0 / 16%), 0 2px 5px 0 rgb(0 0 0 / 26%);
  flex-direction: column;
  border: solid 1px #777;
  /* border-top: none; */
  position: absolute;
  top: 21px;
  z-index: 3;
}

#close-btns {
  width: 100%;
  position: absolute;
  height: 100vh;
  top: 0;
  left: 0;
}

.TwoFA-status {
  display: flex;
  width: max-content;
  border: solid 1px rgb(194, 53, 53);
}

/* .tfa-disabled {
  } */

.TwoFA-status p {
  margin-bottom: 0;
  font-size: 24px;
  padding: 10px;
}

.tfa-disabled, .tfa-enabled {
  display: flex;
  align-self: baseline;
}

.tfa-disabled button {
  display: flex;
  background-color: #4E4878;
  color: white;
  margin-left: 20px;
  height: min-content;
  outline: none !important;
  /* border: none; */
}

.tfa-disabled button:focus, .tfa-enabled button:focus {
  outline: 0;
}

.fa-button {
  display: flex;
  align-items: center;
  width: max-content;
  margin-left: 20px;
}

.fa-button h3 {
  margin: 0;
}

.enable-2fa, .disable-2fa {
  display: flex;
  align-self: baseline;
  flex-direction: column;
  width: 100%;
}

#tokenDiv::before {
  content: '';
  height: 1px;
  width: 100%;
  background-color: #ccc;
  margin-top: 30px;
  margin-bottom: 30px;
}

.auth {
  margin-top: 20px;
}

.auth button {
  outline: 0 !important;
}

.auth input {
  outline: 1px !important;
  height: 34px;
  padding-left: 5px;
  border: solid 1px #999;
  border-radius: 5px;
}

#tokenDiv {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

#tokenBody h3 {
  text-align: center;
}

#tokenBody {
  display: contents;
  align-items: center;
}

#tokenBody canvas {
  vertical-align: initial;
  margin-bottom: 20px;
}

#tokenBody .span {
  display: flex;
  align-items: center;
}

.t2fa {
  justify-content: center;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.t2fa span {
  color: #333333;
  font-size: larger;
}

.t2fa a {
  cursor: pointer;
  margin-left: 5px;
}

.t2fa a:hover {
  background-color: transparent;
  color: #337ab7;
}

.confirm-enable {
  margin-top: 20px;
  background-color: #4E4878;
  color: #fff;
  margin-bottom: 5px;
  width: fit-content;
}

#knowmore-2FA-btn {
  background-color: whitesmoke;
  color: black;
}

#tokenBody input {
  color: #26233d;
  font-size: 36px;
  padding-left: 36px;
  letter-spacing: 30px;
  overflow-x: hidden;
}

#upload-btn {
  padding: 4px 8px;
  background-color: rgb(85, 80, 139);
  border: none;
  border-radius: 4px;
  padding: 10px;
  color: white;
}

#upload-modal {
  width: 500px;
  height: 200px;
}

#modal-iframe {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
  height: 100vh;
  width: 100vw;
  padding-left: 4px;
  padding-right: 4px;
  background-color: rgba(0, 0, 0, 0.2);
}

#modal-iframe #overlayer-row {
  height: 100vh;
}

#modal-iframe-basis {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
  height: 100vh;
  width: 100vw;
  padding-left: 4px;
  padding-right: 4px;
  background-color: rgba(0, 0, 0, 0.2);
  min-height: None !important;
}

#modal-iframe-basis #overlayer-row {
  height: 100vh;
}

.upload-excel a:hover {
  background-color: transparent;
  color: #26233d;
}

.upload-excel a:focus {
  background-color: transparent;
  color: #26233d;
}

.upload-curves-div a:hover {
  background-color: transparent;
  color: #26233d;
}

.upload-curves-div a:focus {
  background-color: transparent;
  color: #26233d;
}

.highcharts-menu-wrapper, .highcharts-bindings-wrapper {
  height: fit-content !important;
}

@media (max-width: 1068px) {
  .tfa-disabled .TwoFA-status p {
    font-size: 18px;
    padding: 8px;
  }

  .tfa-disabled .fa-button h3 {
    font-size: 18px;
  }
}

@media (max-width: 860px) {
  .tfa-disabled {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .tfa-disabled .fa-button {
    margin-right: 0;
    margin-top: 10px;
  }
}

@media (max-width: 660px) {
  .TwoFA-status p {
    font-size: 18px;
    padding: 8px;
  }

  .auth {
    display: flex;
    flex-direction: column;
  }

  #password-2Fa-disable {
    margin-bottom: 10px;
  }

  #password-2Fa-btn {
    margin-top: 5px;
  }
}

@media (max-width: 550px) {
  .TwoFA-status p, .tfa-disabled .TwoFA-status p {
    font-size: 14px;
    padding: 5px;
  }
}

@media (max-width: 455px) {
  .tfa-enabled, .tfa-disabled {
    flex-direction: column;
  }

  #disable-2FA-btn {
    margin-top: 10px;
  }

  .fa-button {
    margin-left: 0;
  }

  .tfa-disabled button {
    margin-left: 10px;
    padding: 5px;
  }
}

@media (max-width: 410px) {
  .tfa-disabled .fa-button {
    flex-direction: column;
  }

  .tfa-disabled button {
    margin-left: 0px;
    margin-top: 5px;
  }
}

.inputs-form {
  display: flex;
}

.input-box {
  width: 360px;
  height: 60px;
  color: #26233d;
  font-size: 36px;
  padding-left: 36px;
  letter-spacing: 30px;
  overflow-x: hidden;
}

@media (max-width: 434px) {
  .input-box {
    width: 260px;
    height: 40px;
    font-size: 20px;
    letter-spacing: 25px;
  }

  .confirm-enable {
    margin-left: 176px !important;
  }
}

#disable-token {
  display: flex;
  flex-direction: column;
  margin-top: 30px;
}

.line-btn {
  display: flex;
  flex-wrap: wrap;
  /* margin-left: 20px; */
  align-items: center;
  justify-content: center;
  /* margin: 20px; */
  /* width: 1390px; */
  width: 100%;
}

@media (max-width: 1227px) {
  .line-btn {
    min-width: 670px;
  }

  .account-btn {
    margin-right: 30px;
  }

  /* #personal-info-btn {
    margin-left: 30px;
  } */
}

@media (max-width: 704px) {
  .line-btn {
    min-width: 407px;
  }

  .account-btn {
    margin-right: 10px;
    /* margin-left: 30px; */
  }

  #personal-info-btn {
    margin-left: 0px;
  }
}

@media (max-width: 460px) {
  .line-btn {
    flex-wrap: nowrap;
    flex-direction: column;
    width: 100%;
    padding: 10px;
    margin-left: 0;
  }

  .account-btn {
    margin-left: 0px;
    margin-right: 0px;
  }
}

#how_to_fill {
  margin-left: 5px;
  cursor: pointer;
}

.add-book-account {
  display: flex;
  width: 100%;
  align-items: center;
  align-content: center;
  margin-bottom: 20px;
}

.add-book-account input {
  width: calc(100% - 210px);
  margin-right: 5px;
}

.add-book-account select {
  width: calc(100% - 182px);
  margin-right: 5px;
}

.add-book-account label {
  margin-right: 10px;
}

.add-book-account button {
  background-color: #4E4878;
  color: #fff;
}

#mkt-dataDiv {
  display: flex;
  position: absolute;
  right: 20px;
  flex-direction: column;
}

#mkt-dataDiv button {
  outline: none;
  border: solid 1px #ccc;
  z-index: 3;
  background-color: #fafafa;
}

#mkt-dataDiv button:hover {
  background-color: #ccc;
}

#open-mkt-data {
  border: none;
  text-transform: uppercase;
  color: white;
  background-color: #C6A55A;
  height: fit-content;
  padding: 5px;
  outline: none;
  cursor: pointer;
}

#open-mkt-data:hover {
  background-color: #ad8c3f;
}

#open-mkt-data[disabled] {
  pointer-events: none;
}

.btn7 {
  border: 2px solid rgb(85, 80, 139);
  display: inline-block;
  padding: 5px;
  margin-bottom: 20px;
  position: relative;
  text-align: center;
  transition: background 600ms ease, color 600ms ease;
}

.btn5 {
  border: 2px solid #d9534f;
  display: inline-block;
  padding: 5px;
  margin-bottom: 20px;
  position: relative;
  text-align: center;
  transition: background 600ms ease, color 600ms ease;
}

.toggle5 {
  display: none;
}

.toggle5Div label {
  cursor: pointer;
  min-width: 60px;
}

.toggle5Div label:hover { 
  background: none;
  color: #1a1a1a;
}

.toggle5Div label:after {
  background: none;
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
  width: 100%;
  z-index: -1;
}

.toggle5-left label {
  border-right: 0;
}

.toggle5-left label:after {
  left: 100%
}

.toggle5-right label {
  margin-left: -5px;
}

.toggle5-right label:after {
  left: -100%
}

.toggle5:checked+.btn5 {
  cursor: default;
  color: #fff;
  transition: color 200ms;
  z-index: 2;
}

.toggle5:checked+.btn5:after {
  left: 0;
  background: #d9534f;
}

.btn4 {
  border: 2px solid #d9534f;
  display: inline-block;
  padding: 5px;
  margin-bottom: 20px;
  position: relative;
  text-align: center;
  transition: background 600ms ease, color 600ms ease;
}

.toggle4 {
  display: none;
}

.toggle4Div label {
  cursor: pointer;
  min-width: 60px;
}

.toggle4Div label:hover {
  background: none;
  color: #1a1a1a;
}

.toggle4Div label:after {
  background: #d9534f;
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
  width: 100%;
  z-index: -1;
}

.toggle4-left label {
  border-right: 0;
}

.toggle4-left label:after { 
  left: 100%
}

.toggle4-right label {
  margin-left: -5px;
}

.toggle4-right label:after {
  left: -100%
}

.toggle4:checked+.btn4 {
  cursor: default;
  color: #fff;
  transition: color 200ms;
  z-index: 2;
}

.toggle4:checked+.btn4:after {
  left: 0;
}


.toggle {
  display: none;
}

.toggleDiv label {
  cursor: pointer;
  min-width: 60px;
}

.toggleDiv label:hover {
  background: none;
  color: #1a1a1a;
}

.toggleDiv label:after {
  background: rgb(85, 80, 139);
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
  width: 100%;
  z-index: -1;
}

.toggle-left label {
  border-right: 0;
}

.toggle-left label:after {
  left: 100%
}

.toggle-right label {
  margin-left: -5px;
}

.toggle-right label:after {
  left: -100%
}

.toggle:checked+.btn7 {
  cursor: default;
  color: #fff;
  transition: color 200ms;
  z-index: 2;
}

.toggle:checked+.btn7:after {
  left: 0;
}

.toggle2 {
  display: none;
}

.toggle2Div label {
  cursor: pointer;
  min-width: 60px;
}

.toggle2Div label:hover {
  background: none;
  color: #1a1a1a;
}

.toggle2Div label:after {
  background: #71BF44;
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
  width: 100%;
  z-index: -1;
}

.toggle2-left label {
  border-right: 0;
}

.toggle2-left label:after {
  left: 100%
}

.toggle2-right label {
  margin-left: -5px;
}

.toggle2-right label:after {
  left: -100%
}

.toggle2:checked+.btn7 {
  cursor: default;
  color: #fff;
  transition: color 200ms;
  z-index: 2;
}

.toggle2:checked+.btn7:after {
  left: 0;
}


.toggle3 {
  display: none;
}

.toggle3Div label {
  cursor: pointer;
  min-width: 60px;
}

.toggle3Div label:hover {
  background: none;
  color: #1a1a1a;
}

.toggle3Div label:after {
  background: rgb(85, 80, 139);
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
  width: 100%;
  z-index: -1;
}

.toggle3-left label {
  border-right: 0;
}

.toggle3-left label:after {
  left: 100%
}

.toggle3-right label {
  margin-left: -5px;
}

.toggle3-right label:after {
  left: -100%
}

.toggle3:checked+.btn7 {
  cursor: default;
  color: #fff;
  transition: color 200ms;
  z-index: 2;
}

.toggle3:checked+.btn7:after {
  left: 0;
}

.spaced-left {
  margin-left: 100px;
}

#line {
  width: 100%;
  height: 1px;
  background-color: #ccc;
  transition: all 1s;
}

#informations_div {
  display: flex;
  flex-direction: column;
  transition: all 1s;
}

#informations_div u {
  cursor: pointer;
  padding-left: 48px;
  padding-bottom: 15px;
}

.greeks_div, #merchandise_info {
  display: flex;
  justify-content: space-evenly;
  /* justify-content: space-around; */
}

/* .greeks_div label {} */

.greeks_div #delta, .greeks_div #vega, .greeks_div #theta, .greeks_div #gamma {
  padding-left: 5px;
}

.vol_div, #merchandise_info {
  padding: 10px 48px;
}

.vol_div input {
  width: 85px;
  margin: 0 5px;
  border: none;
  background: #ccc;
  border-bottom: 1px solid #000;
  outline: none;
}

/* .vol_div label {} */

.vol_div button {
  width: 90px;
  border: none;
  margin-bottom: 10px;
  border-radius: 2px;
  /* border-color: #C6A55A; */
  outline: none;
  background: #C6A55A;
  color: #fff;
  padding: 5px 0 5px 0;
  /* text-transform: uppercase; */
  /* right: 0; */
  float: right;
}

/* #unwindButton {
  position: absolute;
  right: 185px;
  border: none;
  text-transform: uppercase;
  color: white;
  background-color: #C6A55A;
  height: fit-content;
  padding: 5px;
  outline: none;
  cursor: pointer;
} */

#convertUnit {
  /* position: absolute;
  right: 100px; */
  z-index: 2;
  cursor: pointer;
}

.convertUnitButton::before {
  content: '';
  background-color: #fff;
  font-weight: normal;
  -webkit-transition: width 0.2s;
  transition: width 0.2s;
  width: 20px;
  height: 20px;
  border: 2px solid #555;
  float: right;
  overflow: hidden;
  margin-top: 8px;
  border-radius: 5px;
  padding: 0px;
}

.convertUnitButton:hover::before {
  width: 125px;
  content: 'Convert Volume';
  font-weight: bold;
  padding: 5px 2.5px 5px 7px !important;
  /* height: fit-content !important; */
  height: 35px;
}

.convertUnitSelected::before {
  background-color: #F58345;
  -webkit-transition: width 0.2s;
  transition: width 0.1s;
  border: 2px solid #F58345;
  float: right;
  color: white;
  overflow: hidden;
  margin-top: 8px;
  border-radius: 5px;
  width: 125px;
  content: 'Convert Volume';
  font-weight: bold;
  padding: 5px 2.5px 5px 7px;
  height: fit-content !important;
}
#unwind {
  /* position: absolute;
  right: 100px; */
  z-index: 2;
  margin-right: 5px;
  cursor: pointer;
}

.unwindButton::before {
  content: '';
  background-color: #fff;
  font-weight: normal;
  -webkit-transition: width 0.2s;
  transition: width 0.2s;
  width: 20px;
  height: 20px;
  border: 2px solid #555;
  float: right;
  overflow: hidden;
  margin-top: 8px;
  border-radius: 5px;
  padding: 0px;
}

.unwindButton:hover::before {
  width: 75px;
  content: 'UNWIND';
  font-weight: bold;
  padding: 5px 2.5px 5px 7px !important;
  height: fit-content !important;
  height: 35px;
  color: black;
}

.unwindButtonSelected::before {
  background-color: #F58345;
  -webkit-transition: width 0.2s;
  transition: width 0.2s;
  border: 2px solid #F58345;
  float: right;
  color: white;
  overflow: hidden;
  margin-top: 8px;
  border-radius: 5px;
  width: 75px;
  content: 'UNWIND';
  font-weight: bold;
  padding: 5px 2.5px 5px 7px;
  height: fit-content !important;
}

#earlyexercise {
  /* position: absolute;
  right: 100px; */
  z-index: 2;
  margin-right: 5px;
  cursor: pointer;
} 

.earlyexerciseButton::before {
  content: '';
  background-color: #fff;
  font-weight: normal;
  -webkit-transition: width 0.2s;
  transition: width 0.2s;
  width: 20px;
  height: 20px;
  border: 2px solid #555;
  float: right;
  overflow: hidden;
  margin-top: 8px;
  border-radius: 5px;
  padding: 0px;
}

.earlyexerciseButton:hover::before {
  width: auto;
  min-width: 90px;
  content: 'EXERCISE';
  font-weight: bold;
  padding: 5px 2.5px 5px 7px !important;
  height: fit-content !important;
  height: 35px;
  color: black;
}

.earlyexerciseButtonSelected::before {
  background-color: rgb(85, 80, 139);
  -webkit-transition: width 0.2s;
  transition: width 0.2s;
  border: 2px solid rgb(85, 80, 139);
  float: right; 
  color: white;
  overflow: hidden;
  margin-top: 8px;
  border-radius: 5px;
  width: auto;
  min-width: 90px;
  content: 'EXERCISE';
  font-weight: bold;
  padding: 5px 2.5px 5px 7px;
  height: fit-content !important;
}

#confirmEarlyExercise {
  background-color: #007bff; 
  border: none;
  color: white;
  border-radius: 5px;
  font-weight: bold;
  text-transform: uppercase;
  height: fit-content !important;
  padding: 5px 10px;
  align-self: flex-end;
  outline: none;
  float: right;
  margin-right: 30px;
  margin-top: 5px;
}

#cancelEarlyExercise {
  background-color: #5a9bf6; 
  border: none;
  color: white;
  border-radius: 3px;
  font-weight: bold;
  text-transform: uppercase;
  height: fit-content !important;
  padding: 5px 10px;
  align-self: flex-end;
  outline: none;
  float: right;
  margin-right: 10px;
  margin-top: 5px;
}

.unwindCheckDiv {
  /* margin: 15px !important; */
  /* height: 20px; */
  width: 50px;
  min-width: 30px !important;
  cursor: pointer;
}

.unwind-checkbox {
  cursor: pointer;
}

#confirmUnwind {
  background-color: #FA6616;
  border: none;
  color: white;
  border-radius: 5px;
  font-weight: bold;
  text-transform: uppercase;
  height: fit-content !important;
  padding: 5px 10px;
  align-self: flex-end;
  outline: none;
  float: right;
  margin-right: 30px;
  margin-top: 5px;
}

#confirmDelete {
  background-color: #242221;
  border: none;
  color: white;
  border-radius: 5px;
  font-weight: bold;
  text-transform: uppercase;
  height: fit-content !important;
  padding: 5px 10px;
  align-self: flex-end;
  outline: none;
  float: right;
  margin-right: 30px;
  margin-top: 5px;
}

#cancelUnwind {
  background-color: #EB8D5A;
  border: none;
  color: white;
  border-radius: 3px;
  font-weight: bold;
  text-transform: uppercase;
  height: fit-content !important;
  padding: 5px 10px;
  align-self: flex-end;
  outline: none;
  float: right;
  margin-right: 10px;
  margin-top: 5px;
}


#cancelDelete {
  background-color: #403f3e;
  border: none;
  color: white;
  border-radius: 3px;
  font-weight: bold;
  text-transform: uppercase;
  height: fit-content !important;
  padding: 5px 10px;
  align-self: flex-end;
  outline: none;
  float: right;
  margin-right: 10px;
  margin-top: 5px;
}

.unwind-confirm button, .delete-confirm button, .unwind-cash button, .unwind-accumulator button, .modal3 button, .add-hedge button, .earlyexercise-confirm button {
  border: none;
  outline: none;
  background-color: #C6A55A;
  width: 190px;
  padding: 5px;
  color: #FFF;
  margin: 10px;
  border-radius: 5px;
}

.cancel-unwind-confirm, .cancel-deleteF-confirm {
  margin-top: 0;
  background-color: #ccb580;
  margin-bottom: 20px;
}

.unwind-cash form div, .add-hedge form div {
  display: flex;
  margin-bottom: 5px;
  justify-content: space-between;
}

.modal3 input {
  outline: none;
}

.unwind-cash form div input, .unwind-cash form div select, .add-hedge form div select {
  outline: none;
  border: solid 1px #888;
  padding-left: 5px;
  background-color: #fff;
  width: 170px;
  border-radius: 3px;
}

.unwind-accumulator label, .unwind-accumulator input, .modal3 label, .modal3 input {
  cursor: pointer;
}

#accumDiv, #clientViewDiv {
  display: flex;
  width: 100%;
  margin-bottom: 15px;
}

#accumDiv button, #clientViewDiv button {
  width: 50%;
  border: none;
  outline: none;
  padding: 5px;
  color: #fff;
  transition: background-color 0.5s;
  text-transform: uppercase;
}

#accumDiv button[select='true'] {
  box-shadow: none !important;
  background-color: #C6A55A !important;
  cursor: default;
}

#accumDiv button[select='false'] {
  background-color: #ccb580;
}

#clientViewDiv button[select='true'] {
  box-shadow: none !important;
  background-color: #534f8b !important;
  cursor: default;
}

#clientViewDiv button[select='false'] {
  background-color: #00b7ce;
}

.checkboxes {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
}

#save-table-portfolio, #save-table-portfolio-collapse {
  background-color: rgb(85, 80, 135);
  color: #fff;
  padding: 8px 24px;
  text-transform: uppercase;
  margin: 20px 0 0 10px;
}

@media (max-width: 818px) {
  .checkboxes {
    display: block;
  }
}

.filter p {
  cursor: pointer;
}

.order-field img {
  cursor: pointer;
}

.filter:hover {
  background-color: rebeccapurple !important;
}

.order-selected {
  background-color: rebeccapurple !important;
}

#unwind_premium {
  color: indianred;
  display: block;
  font-size: inherit;
  text-indent: 5px;
  margin-top: -5px;
}

.riskmapdiv input {
  width: 80px;
  margin-right: 15px;
  justify-content: center;
}

#riskmap-buttons {
  display: flex;
  justify-content: center;
  margin-top: 25px;
  margin-bottom: -20px;
}

#riskmap-buttons button {
  padding: 10px;
  min-width: 100px;
  margin: 0;
  background: lightgrey;
  border: none;
}

.riskmap-button-select {
  background: rebeccapurple !important;
  color: #fff;
}


#histchartbuttons {
  display: flex;
  justify-content: center;
  margin-top: 25px;
}

#histchartbuttons button {
  padding: 10px;
  min-width: 100px;
  margin: 0;
  background: lightgrey;
  border: none;
}

.histchartbutton button {
  background: rebeccapurple !important;
  color: #fff;
}
.histchartbutton-select {
  background: rebeccapurple !important;
  color: #fff;
}

#clock_div img {
  width: 40px;
  float: right;
}

.hover_clock {
  background-color: black;
  color: #fff;
  border-radius: 10px 0 10px 10px;
  padding: 5px;
  margin-right: 25px;
  margin-top: 25px;
}

.hover_clock p {
  margin-bottom: 2px;
  width: 167px;
}

#clock_div {
  margin-left: 15px;
  position: absolute;
  z-index: 9;
  top: 50px;
  right: 15px;
}

.select_button_filter {
  width: 50% !important;
  padding: 3px !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.enabled_solver {
  background-color: rgb(100, 187, 100);
  text-align: center;
  color: #fff;
  width: 300px;
  margin: 0 !important;
} 
.disabled_solver {
  background-color: rgb(219, 105, 105);
  color: #fff;
  text-align: center;
  width: 300px;
  margin: 0 !important;
}

.to_enable {
  background-color: rgb(200, 223, 101);
  color: #000;
}

.to_disable {
  background-color: rgb(223, 130, 101);
  color: #000;
}

#spread_modal, #quote_modal, #equity_instrument_modal, #compos_details, #financial_swap_details, #unwind_details, #strip_of_asian_details, #earlyexercise_details, #spread_details, #spread_details_custom {
  display: flex;
  justify-content: center;
  align-items: center;
}

#spread_modal form, #quote_modal form, #equity_instrument_modal form,#compos_details form, #financial_swap_details form, #strip_of_asian_details form, #spread_details form, #spread_details_custom form{
  background-color: #fff;
  max-width: 1000px;
  width: 50%;
  border-radius: 10px;
  padding: 0;
  overflow: scroll;
  max-height: 80vh;
}

#earlyexercise_details form{
  background-color: floralwhite;
  /* background-color: whitesmoke; */
  width: 80%;
  border-radius: 10px;
  padding: 10px;
  overflow-y: scroll;
  max-height: 90vh;
}

#unwind_details form {
  background-color: floralwhite;
  /* background-color: whitesmoke; */
  width: 80%;
  border-radius: 10px;
  padding: 10px;
  overflow-y: scroll;
  max-height: 90vh;
}
#quotation-btn {
  width: 150px;
  margin-left: 0;
  font-size: small;
  margin-top: 0;
  background-color: rgb(85, 80, 135);
  color: #ffffff;
}

#update-page {
  z-index: 6;
  width: 100%;
  height: 100vh;
  position: absolute;
  background-color: #726c9b;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
}

#update-page img {
  max-height: 300px;
}

@media (max-width: 700px) {
  .upload-excel {
    flex-direction: column;
  }
}

@media (max-width: 400px) {
  #download-templates {
    flex-direction: column;
  }
}

@media (max-width: 655px) {
  #riskmap-buttons {
    flex-direction: column;
  }
}

#toggle_variable {
  margin-bottom: 20px;
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}
#toggle_variable:hover {
  background-color: #5b6268;
  border-color: #5b6268;
}

/* .selected-custom-deal {
  display: flex;
  border: solid #000 1px;
  border-radius: 5px;
  width: fit-content;
  margin-right: 10px;
  margin-top: 4px;
  position: relative;
} */

.selected-custom-deal td {
  text-transform: capitalize;
}
/* .selected-custom-deal p:hover {
  background-color: #dad8d8;
} */
.selected-custom-deal button {
  cursor: pointer;
  border: none;
  background-color: #fff;
}
.selected-custom-deal img {
  width: 20px;
}

#custom-body {
  padding: 20px;
  overflow-y: scroll;
  /* height: calc(100vh - 521px); */
}

#selected-custom {
  display: flex;
}

#selected-custom #custom-structure-infos {
  width: calc(100%-900px) !important;
  overflow-x: scroll;
}

#selected-custom #custom-structure-infos {
  white-space: nowrap;

}

#selected-custom td{
  height: 50px;

}
/* 
#selected-custom {
  overflow-y: scroll;
} */

#calculate-structure, #booking-structure {
  float: right;
  width: fit-content !important;
}

.hover_new_deal {
  position: absolute;
  top: 24px;
  left: 5px;
  background: #111;
  padding: 5px;
  color: #ddd;
  border-radius: 0 10px 10px 10px;
  min-width: 100px;
  width: 100%;
}

.hover_new_deal p:hover {
  background-color: #000 !important;
}

.form-custom {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 1200px;
}

@media (max_width: 1200px) {
  .form-custom {
    min-width: 100%;
  }
}


#custom_structure_modal {
  background-color: #fff;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  top: 71px;
}

/* width */
::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #666;
}

#add_new_custom_deal_modal {
  width: 420px;
  z-index: 6;
  padding: 15px;
  background-color: #EEE;
  box-shadow: 2px 0px #aaa;
  height: calc(100vh - 141px);
  overflow-y: scroll;
  padding-bottom: 50px;
}

#custom-booking {
  /* background-color: #00AEBC; */
  padding: 20px;
  height: 380px;
  display: grid;
  grid-column-gap: 50px;
  grid-template-columns: 48% 48%;	
  border-top: solid 2px #EEE;
}

#currency {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

#currency select {
  text-transform: uppercase;
}

#currency button {
  margin-left: 5px;
  background: none;
  border: solid 1px;
}

#merchandise_hedge input {
  visibility: hidden;
  display: none;
}

#merchandise_hedge input:checked+label {
  background-color: #C6A55A;
  color: white;
  cursor: default;
}

#merchandise_hedge label {
  padding: 5px;
  border: #C6A55A 2px solid;
  cursor: pointer;
  color: #C6A55A;
  font-weight: bold;
}

.radio_box input {
  visibility: hidden;
  display: none;
}

.radio_box input:checked+label {
  background-color: #C6A55A;
  color: white;
  cursor: default;
}

.radio_box label {
  padding: 5px;
  border: #C6A55A 2px solid;
  cursor: pointer;
  color: #C6A55A;
  font-weight: bold;
}

#merchandise_type input:checked+label {
  background-color: #71BF44;
  border-color: #71BF44;
  color: white;
}

#merchandise_type label {
  border-color: #71BF44;
  color: #71BF44;

}

.convert_unit_box input:checked+label {
  background-color: rgb(85, 80, 139);
  border-color: #55508b;
  color: white;
}


.convert_unit_box label {
  border-color: rgb(85, 80, 139);
  color: rgb(85, 80, 139);
  
}
#book_subbook input:checked+label {
  background-color: rgb(85, 80, 139);
  border-color: rgb(85, 80, 139);
  color: white;
}


#book_subbook label {
  border-color: rgb(85, 80, 139);
  color: rgb(85, 80, 139);
  
}
#swap_future input:checked+label {
  background-color: rgb(85, 80, 139);
  border-color: rgb(85, 80, 139);
  color: white;
}


#swap_future label {
  border-color: rgb(85, 80, 139);
  color: rgb(85, 80, 139);
  
}


#merchandise_funded input:checked+label {
  background-color: #d9534f;
  border-color: #d9534f;
  color: white;
}

#merchandise_funded label {
  border-color: #d9534f;
  color: #d9534f;

}

.remove_condition {
  font-size: smaller;
  width: fit-content;
  height: fit-content;
  outline: none;
  border: none;
  border-radius: 3px;
  margin-left: 10px;
}

.admin-manager {
  display: flex;
  width: fit-content;
  background-color: #dadada;
  padding: 10px;
  margin-bottom: 5px;
  align-items: center;
}

.admin-manager label {
  padding: 5px;
}

.admin-manager select{
  display: block;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 5px;
}

.historicalchart {
  position: absolute;
  top: 0;
  width: 100%;
}

.button-container {
  display: none; 
  justify-content: center; 
  align-items: center; 
  margin-top: 20px; 
}


.highcharts-tooltip text {
  font-size: 12px !important;
}

.highcharts-contextmenu {
  font-size: 18px !important; 
}

.highcharts-range-selector-buttons text {
  font-size: 12px !important;
}

.highcharts-legend-item text {
  font-size: 14px !important;
}

.highcharts-xaxis-labels text {
  font-size: 12px !important;
}
.highcharts-yaxis-labels text {
  font-size: 12px !important;
}

.highcharts-axis-title {
  font-size: 14px !important;
}

.locknav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

#diagram {
  width: 100%;
  height: 100vh;
  position: relative;
  margin-top: 15px;
  margin-bottom: 15px;
  border: solid 2px #CCC;
  border-radius: 50px;
}
.node-overlay {
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 12px;
}

.vis-network {
  cursor: pointer;
}

.book-counterparty-checkbox {
  width: 100%;
  align-items: center;
  align-content: center;
  margin-bottom: 20px;
}

#book-update-checkbox-div {
  display: none;
}

#book-add-checkbox-div {
  display: flex;
}

#module-select {
  margin-left: 15px;
  margin-bottom: 20px;
  /* float: right; */
}

#module-select input {
  display: none;
  visibility: hidden;
}

#module-select label {
  padding: 5px 0;
  font-size: medium;
  border-inline: solid 2px #F58345;
  border-bottom: none;
  border-top: none;
  cursor: pointer;
  min-width: 94px;
  color: #F58345;
  margin: 0;
  text-align: center;
  box-sizing: border-box;
}

#module-select input:checked+label {
  background-color: #F58345;
  color: #FFF;
}

/* button.close-modal {
  background-color: transparent;
  font-weight: bolder;
  font-size: x-large;
  z-index: 5;
  position: sticky;
  top: 0;
}
button.close-modal:hover {
  color: #CCC; */
/* } */


.formcontrol3 {display: block;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
  height: 34px;
}

/* Esconde o input padrão */
#mark_to_vol {
  display: none;
}

/* Estiliza o label para parecer um checkbox personalizado */
label[for="mark_to_vol"] {
  display: inline-block;
  cursor: pointer;
  position: relative;
  padding-left: 25px; /* Adiciona espaço para o ícone */
}

/* Estiliza o pseudo-elemento ::before para criar o ícone do checkbox */
label[for="mark_to_vol"]::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #007bff; /* Borda do checkbox */
  position: absolute;
  left: 0;
  top: 0;
}

/* Estiliza o pseudo-elemento ::after para preencher o checkbox */
label[for="mark_to_vol"]::after {
  content: '';
  display: inline-block;
  width: 14px; /* Largura do preenchimento */
  height: 14px; /* Altura do preenchimento */
  background-color: #007bff;
  position: absolute;
  left: 3px; /* Ajuste fino para centralizar o preenchimento */
  top: 3px; /* Ajuste fino para centralizar o preenchimento */
  opacity: 0; /* Por padrão, o preenchimento não é visível */
}

/* Estiliza o checkbox quando está marcado */
#mark_to_vol:checked + label[for="mark_to_vol"]::after {
  opacity: 1; /* Torna o preenchimento visível quando o checkbox está marcado */
}


.hiddenHistChart {
  display: none;
  visibility: hidden;
}


.remove-quality {
  border: none;
  outline: none;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  background: indianred;
  padding: 0;
}
.edit_remove-quality {
  border: none;
  outline: none;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  background: indianred;
  padding: 0;
}

#map-quality-table td{
  border: 1px solid;
}

.sticky-bottom {    
  position: sticky;
  bottom: -1px;
  background-color: rebeccapurple;
  color: white;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 15px;
}
.unwind-header {    
  position: sticky;
  top: -10px;
  background-color: inherit;
  width: 100%;
  padding-top: 2px;
  padding-right: 15px;
  padding-left: 15px;

}

.unwind-header-table {
  position: sticky; 
  top: 128px; 
  background-color: floralwhite;
  box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2)
}

.input_unwind {
  max-width: 150px;
}

#unwind_details input[type="checkbox"] {
  -webkit-appearance: none; /* Remove a aparência padrão no Safari */
  -moz-appearance: none; /* Remove a aparência padrão no Firefox */
  appearance: none; /* Remove a aparência padrão em todos os navegadores */
  width: 20px;
  height: 20px;
  border: 2px solid #bbb; /* Borda clara */
  border-radius: 4px; /* Borda arredondada */
  background-color: #fff; /* Fundo branco */
  cursor: pointer;
  /* transition: all 0.3s ease; */
  /* position: relative; */
}

#unwind_details input[type="checkbox"]:checked {
  background-color: #4CAF50; /* Fundo verde */
  border-color: #4CAF50; /* Borda verde */
}

#unwind_details input[type="checkbox"]:not(:checked) {
  background-color: #fff;
  border-color: #bbb;
}

#earlyexercise_details input[type="checkbox"] {
  -webkit-appearance: none; 
  -moz-appearance: none; 
  appearance: none; 
  width: 20px;
  height: 20px;
  border: 2px solid #bbb; 
  border-radius: 4px; 
  background-color: #fff; 
  cursor: pointer;
}

#earlyexercise_details input[type="checkbox"]:checked {
  background-color: #4CAF50; 
  border-color: #4CAF50; 
}

#earlyexercise_details input[type="checkbox"]:not(:checked) {
  background-color: #fff;
  border-color: #bbb;
}


#cash-chart-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 400px;
  display: none;
}

.excel-btn {
  background-color: rgb(85, 80, 139);; 
  color: #ffffff; 
  border: none;
  padding: 8px 12px; 
  display: block;
  border-radius: 8px;
  font-size: 12px;
  margin-left: 0px;
  cursor: pointer;
}

.excel-btn:hover {
  background-color: #483d8b;
}

/* Contêiner do toggle */
.compos-control-toggle-container {
    display: inline-block;
    position: relative;
    width: 60px; /* Largura total do toggle */
    height: 34px; /* Altura total do toggle */
    margin-bottom: 5px;
}
 
/* Checkbox oculto */
.compos-control-toggle-checkbox {
    display: none; /* Oculta o checkbox nativo */
}
 
/* Estilo do switch (trilho) */
.compos-control-toggle-switch {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc; /* Cor de fundo quando "desligado" */
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px; /* Cantos arredondados */
}
 
/* Estilo do botão (círculo) dentro do switch */
.compos-control-toggle-switch:before {
    position: absolute;
    content: "";
    height: 22px; /* Altura do círculo do "botão" */
    width: 22px; /* Largura do círculo do "botão" */
    left: 4px; /* Posição inicial do círculo */
    bottom: 3px; /* Posição inicial do círculo */
    background-color: white; /* Cor do círculo */
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%; /* Faz o círculo ser redondo */
}
 
/* Estilo quando o checkbox está "checked" (ligado) */
.compos-control-toggle-checkbox:checked + .compos-control-toggle-switch {
    background-color: #2196F3; /* Cor de fundo quando "ligado" */
}
 
/* Move o círculo para a direita quando "checked" */
.compos-control-toggle-checkbox:checked + .compos-control-toggle-switch:before {
    -webkit-transform: translateX(28px);
    -ms-transform: translateX(28px);
    transform: translateX(28px);
}

/* Contêiner do toggle */
.custom_compos-control-toggle-container {
    display: inline-block;
    position: relative;
    width: 60px; /* Largura total do toggle */
    height: 34px; /* Altura total do toggle */
    margin-bottom: 5px;
}
 
/* Checkbox oculto */
.custom_compos-control-toggle-checkbox {
    display: none; /* Oculta o checkbox nativo */
}
 
/* Estilo do switch (trilho) */
.custom_compos-control-toggle-switch {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc; /* Cor de fundo quando "desligado" */
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px; /* Cantos arredondados */
}
 
/* Estilo do botão (círculo) dentro do switch */
.custom_compos-control-toggle-switch:before {
    position: absolute;
    content: "";
    height: 22px; /* Altura do círculo do "botão" */
    width: 22px; /* Largura do círculo do "botão" */
    left: 4px; /* Posição inicial do círculo */
    bottom: 3px; /* Posição inicial do círculo */
    background-color: white; /* Cor do círculo */
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%; /* Faz o círculo ser redondo */
}
 
/* Estilo quando o checkbox está "checked" (ligado) */
.custom_compos-control-toggle-checkbox:checked + .custom_compos-control-toggle-switch {
    background-color: #2196F3; /* Cor de fundo quando "ligado" */
}
 
/* Move o círculo para a direita quando "checked" */
.custom_compos-control-toggle-checkbox:checked + .custom_compos-control-toggle-switch:before {
    -webkit-transform: translateX(28px);
    -ms-transform: translateX(28px);
    transform: translateX(28px);
}

.vol_div input[disabled] {
  background: none !important;
}

#booking-blocked {
    display: flex;
    justify-content: center;
    padding-top: 6px;
    font-weight: bold;
    font-size: 19px;
    text-align: center;
}
 /* choose instrument type */
.common-option, .commodity-option, .fx-option, .equity-optio, .ir-option, .structure_option {
  display: flex;
  flex-direction: row;
  margin-bottom: 0.5em; 
  flex-wrap: wrap;
  gap: 0.5em;
}

.calc_item {
  align-items: center;
  background-color: transparent;
  display: flex;
  flex-direction: row;
  gap: 0.5em;
  justify-content: space-between;
  padding-right: 0.5em;
  width: 232px;
}

.ir_item {
  align-items: center;
  background-color: transparent;
  display: flex;
  flex-direction: row;
  gap: 0.5em;
  justify-content: space-between;
  padding-right: 0.5em;
  width: 436px;
}

.info_icon {
  color: rgb(10, 58, 148);
  font-size: 24px;
}
.structure_item {
  margin-bottom: 0.5em;
  margin-right: 0.5em;
  width: 300px;
}

.add-component {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.component-added {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid;
  width: fit-content;
  padding: 5px;
}

.component-added span {
  color: rgb(50, 231, 255) !important;
  cursor: pointer;
}

.add-component-edit {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.component-added-edit {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid;
  width: fit-content;
  padding: 5px;
}

.component-added-edit span {
  color: rgb(50, 231, 255) !important;
  cursor: pointer;
}

#physical_framingDiv {
  display: flex;
  width: 100%;
  justify-content: center;
}

#physical_framingDiv label {
  padding: 5px;
  cursor: pointer;
  width: 50%;
  text-align: center;
  background-color: #ccb580;
  font-weight: bold;
}
#physical_framingDiv input:checked+label {
  background-color: #a47300;

}