/* OVERALL */


body {
	background-color: #273474;
}

#toolName, #resultsMetricName{
  color:#fbb811 !important;
}

#resultsMetricName{
  font-weight: bold !important;
}

/* INPUTS */

input, .btn {
	height: 50px;
}

.inputsLabel{
  color: #fff !important;
  font-size: 1.1rem !important;
  font-weight: bold !important;

}

.inputs01{
  background-color: #273474 !important;
  color: #fff !important;
 font-weight: bold !important;
   font-size: 1.25rem !important;
}

.inputs02{
  background-color: #273474 !important;
  color: #fbb811 !important;
  font-weight: bold !important;
  font-size: 1.25rem !important;
}


/* FOOTER BUTTONS */

.btn-sm{
  background-color: #273474 !important;
  color: #fff !important;
  height: 2rem !important ;
  font-weight: bold !important;
}


/* SCENARIO TOOGLE */

.form-switch.vertical {
  display: inline-block;
  transform: rotate(90deg);
}



#flexSwitchCheckDefault {
  width: 3.4rem;
  height: 1.9rem;
  border: 2px solid #fff !important;
  border-radius: 1.9rem;
  position: relative;
  cursor: pointer;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  outline: none !important;
  box-shadow: none !important;

}

/* Eliminate ALL Bootstrap styling on focus and active states */
#flexSwitchCheckDefault:focus,
#flexSwitchCheckDefault:active {
  outline: none !important;
  box-shadow: none !important;
  /* border-color: #333 !important; */
  /* background-color: #fff !important; */
}

#flexSwitchCheckDefault:checked:focus,
#flexSwitchCheckDefault:checked:active {
  outline: none !important;
  box-shadow: none !important;
  /* border-color: red !important; */
  background-color: #fbb811 !important;
}

/* Thumb (circle) */
#flexSwitchCheckDefault::before {
  content: "";
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  transition: transform 0.1s ease, background-color 0.1s ease; /* Added background-color transition */
}

/* Checked */
#flexSwitchCheckDefault:checked {
  background-color: #fbb811 !important;
  transition: background-color 0s ease, border-color 0s ease; /* Added transitions for background and border */
}


/* Thumb when unchecked */
#flexSwitchCheckDefault::before {
  background-color: #273474 !important; /* blue when unchecked */
    border: 2px solid #fff !important;
}






/* Thumb when checked */
#flexSwitchCheckDefault:checked::before {
  /* Use calc() for precise positioning based on container width and thumb width */
  transform: translateX(calc(3.4rem - 1.8rem - 0.15rem*2)); /* 3.4rem (width) - 1.4rem (thumb) - 2 * 0.15rem (left and right padding) */
  background-color: #273474 !important;
  border: 2px solid #fbb811 !important;
}



/* RESULTS */

.resultsMath, #resultsMathDiffernce {
	font-size: 100px !important;
  font-weight: bold !important;
}

#results01Math{
  color:#fff !important;
}

#results02Math{
  color:#fbb811 !important;
}

#resultsMathDifference, #differenceLabel{
  color:#77D9A9 !important;
}









/* RESULTS BUTTON */

.active{
  background-color: #fff!important;
  color: #fbb811 !important;
  border-radius: 5% !important;
}