/********** ALL **********/

html {
  scroll-behavior: smooth;
}

body {
  font-size: 15px;
  line-height: 32px;
  font-family: 'Helvetica', sans-serif;
  font-weight: 300;
  padding: 20px;
}

@media (max-width: 992px) {
  body {
    padding: 8px;
  }
}

.pageContent {
  padding-left: 20px;
}

@media (max-width: 1200px) {
  .pageContent {
    padding-left: 0px;
  }
}

a {
  color: var(--bs-secondary-color);
}

h3{
  text-align: center;
  margin-top: 40px;
  margin-bottom: 50px;
}

h4{
  margin-bottom: 25px;
  text-align: left;
  font-size:20px;
}

h5 {
  margin-bottom: 0px;
}



/********** NAVBAR **********/

.topBar {
  height: 78px;
  padding-right: 30px;
}

#colorSwitch {
  cursor: pointer;
}



/********** FORMS **********/

input {
  padding: 10px;
  line-height: normal;
  margin-bottom: 20px;
}

select {
  padding: 10px;
  margin-bottom: 20px;
}


/* NUMBER INPUTS */
.hideArrows {
  /* Chrome, Safari, Edge, Opera */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  
  /* Firefox */
  input[type=number] {
    -moz-appearance: textfield;
  }
}


/* MODALS */
  .cancel {
    margin-left: 15px;
  }


/* UNIT BUTTONS */
  .unit-btn{
    height: 58px;
  }



/********** MY ACCOUNTS **********/


.bulletOUT{
  padding: 0px;
}

.bullet{
  background-color: var(--bs-dark-bg-subtle);
  border-style: solid;
  border-width: 1px;
  border-color: var(--bs-dark-border-subtle);
  border-radius: 15px;
  margin: 15px;
  padding-right: 20px;
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 10px;
  overflow: hidden;
  position: relative;
  min-height: 105px;
  opacity: 80%;
}

.bulletRed {
  background-color: var(--bs-danger-bg-subtle);
}

.bulletGreen {
  background-color: var(--bs-success-bg-subtle);
}

.bulletBlue {
  background-color: var(--bs-primary-bg-subtle);
}

@media (max-width: 992px) {
  .bullet{
    padding-right: 10px;
  }
}

.bullet:hover{
  opacity: 100%;
  box-shadow: 2px 5px 12px var(--bs-dark-bg-subtle);
}

.firm{
  position: absolute;
  left: -3px;
  top: -5px;
  font-size: 40px;
  font-weight: 900;
  color: var(--bs-tertiary-color);
  opacity: 30%
}

@media (max-width: 992px) {
  .firm{
    font-size: 25px;
  }
}

.balance{
  position: absolute;
  right: 30px;
  top: 50px;
  font-size: 34px;
}

@media (max-width: 992px) {
  .balance {
    right: 15px;
    font-size: 28px;
  }
}

.phase{
  position: relative;
  top: 12px;
  font-size: 24px;
  display: inline;
}

@media (max-width: 992px) {
  .accNumber {
    font-size: 20px;
  }
}

.accNumber{
  position: relative;
  top: 12px;
  margin-left:10px;
  font-size: 24px;
  display: inline;
}

@media (max-width: 992px) {
  .accNumber {
    margin-left:5px;
    font-size: 20px;
  }
}

.newTradeButton {
  position: relative;
  top: 8px;
  margin-left: 6px;
  --bs-btn-padding-y: 1px;
  --bs-btn-padding-x: 8px;
  --bs-btn-font-size: 11px;
}

@media (max-width: 992px) {
  .newTradeButton {
    display:block;
    width: 90px;
    margin-top: 10px;
    margin-left: 0px;
  }
}

a.showMore{
  text-decoration: none;
  text-transform: uppercase;
  font-size: 11px;
  position: relative;
  top: 10px;
}

/* show more/less switch */
[aria-expanded="false"] > .expanded,
[aria-expanded="true"] > .collapsed {
  display: none;
}



/* TREE BUTTONS */
.treeButtons {
  position: absolute;
  top: 7px;
  right: 14px;
}

.treeButton {
  margin-left: 5px;
  opacity: 70%;
}

.treeButton:hover {
  opacity: 100%;
}

.editButton:hover {
  color: #cfa211;
}

.upgradeButton:hover {
  color: #0fa537;
}

.duplicateButton:hover {
  color: #4066ff;
}

.deleteButton:hover {
  color: #c71b1b;
}

.editButton{
  margin-left:15px;
}

.editButton:hover{
  opacity: 100%;
}

@media (max-width: 992px) {
  .editButton{
    margin-left:15px;
  }  
}

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-warning-bg-subtle);
  --bs-tooltip-color: var(--bs-emphasis-color);
  --bs-tooltip-opacity: 1;
}





/********** NEW TRADE **********/


.newTrade {
  border-radius: 15px;
  border-style: solid;
  border-width: 2px;
  border-color: var(--bs-warning);
  background-color: var(--bs-border-color);
  padding: 20px;
  margin-bottom: 15px;
}

.tradeOUT {
  padding: 0px;
}

.tradeIN {
  margin-left: 15px;
  margin-right: 15px;
}

.tradeCol{
  padding-left: 5px;
  padding-right: 5px;
}

.tradeTitle{
  font-weight: 400;
  color: var(--bs-emphasis-color); 
}

.tradeLabel {
  font-size: 13px;
  margin-left: 3px;
}

.tradeInput{
  background-color: var(--bs-border-color);
  border-color: var(--bs-tertiary-bg);
  padding: 5px;
  padding-left: 10px;
}


.tradeInput:focus {
  background-color: var(--bs-border-color);
} 




/********** CALCULATOR **********/


.calculatorSubtitle {
  text-align: center;
  display:block;
  position: relative;
  top: -50px;
  font-style: italic;
  font-size: 20px;
}

.calcOUT{
  padding: 0px;
}

.calculator {
  border-style: solid;
  border-width: 1px;
  border-color: var(--bs-dark-bg-subtle);
  border-radius: 15px;
  background-color: var(--bs-secondary-bg);
  margin: 15px;
  overflow: hidden;
}

@media (max-width: 992px) {
  .calculator {
    margin: 5px;
    margin-bottom: 25px;
  }
}

.calculator:hover {
  border-color: var(--bs-tertiary-color);
  box-shadow: 2px 5px 12px var(--bs-dark-bg-subtle);
}
  
.calculatorTitle {
  padding: 12px;
  background-color: var(--bs-border-color);
  border-bottom-style: solid;
  border-width: 1px;
  border-color: var(--bs-dark-bg-subtle);
}

.titleText {
  font-weight: 100;
  font-size: 30px;
} 

.calculatorInputs {
  position: relative;
  padding: 20px;
}

.calculatorResults {
  background-color: var(--bs-tertiary-bg);
  padding: 20px;
  margin-top: 15px;
  border-top-style: solid;
  border-width: 1px;
  border-color: var(--bs-dark-bg-subtle);
}

.resultsTitle {
  margin-top: -15px !important;
  margin-bottom: 25px;
  margin-left: -10px;
  font-weight: 100;
  font-size: 30px;
}

.infoVariables {
  font-size: 14px
}

label {
  margin-top: 0px;
  line-height: normal;
}

label:after {
  background-color: transparent !important;
}

h5.resultsTitle:first-child {
  margin-top: 0px;
  width: 100%;
}

.calculateParent{
  width: 100%;
  padding-top: 0px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
}

.calculatorButton{
  width: 100%;
}

.mainResults{
  font-size: 18px;
}

.secondaryResults{
  font-size: 13px;
}

.loss {
  color:var(--bs-danger);
}

.profit{
  color:var(--bs-success);
}

.resultCol{
  padding-right:0px;
}

.resultValue{
  font-weight: 500;
}

.fakeInput {
  height: 57px;
  border-style: solid;
  border-radius: 5px;
  border-width: 1px;
  border-color: var(--bs-tertiary-color);
  margin-bottom: 21px;
  padding-left: 12px;
  position: relative;
}

.fakeTitle {
  font-size: 13px;
  color: var(--bs-secondary-color);
}

.fakeMessage{
  font-size: 13px;
  font-style: italic;
  filter: invert(1);
  color: var(--bs-primary-border-subtle);
  margin-left: 8px;
}

.fakeValue{
  font-weight: 400;
  display: block;
  margin-top: -13px;
}


/* Ready Variables */
.ready{
  font-size: 16px;
}

.readyValue{
  font-weight: 700;
  margin-left: 4px;
}

.readyMessage{
  font-size: 13px;
  font-style: italic;
  filter: invert(1);
  color: var(--bs-primary-border-subtle);
  margin-left: 8px;
}


/* SWAP BUTTONS */

.oneButton[type=number]::-webkit-inner-spin-button {
  margin-right: 86px;
}

.twoButtons[type=number]::-webkit-inner-spin-button {
  margin-right: 176px;
}

.btn-custom {
  width: 80px;
  height: 36px;
  --bs-btn-padding-y: 1px;
  --bs-btn-padding-x: 8px;
  --bs-btn-font-size: 11px;
  color: var(--bs-secondary-color);
  border-color: var(--bs-secondary-color);
}

.firstButton {
  position: absolute;
  top: 11px;
  right: 23px;
}

.firstButtonEdit {
  position: absolute;
  top: 10px;
  right: 9px;
}

.secondButton {
  position: absolute;
  top: 11px;
  right: 113px;
}

.secondButtonEdit {
  position: absolute;
  top: 10px;
  right: 99px;
}



/* CALC INFOS */

.infoButton {
  color: var(--bs-body-color);
}

.infoButton:hover {
  opacity: 70%;
}

.inputInfo {
  margin-top: 10px;
}

.infoTooltip {
  --bs-tooltip-bg: var(--bs-secondary-bg);
  --bs-tooltip-color: var(--bs-emphasis-color);
  --bs-tooltip-opacity: 1 !important;
}

.tooltip-inner {
  text-align: left;
}

.tooltip.show {
  opacity: 1 !important;
}

.infoMethodPips{
  position: absolute;
  top: -9px;
  left: 160px;
}