/* OVERALL */

body {
	background-color: #ffffff !important;
}

input {
	height: 45px;
}

.boxLabel{
	border:0px solid black !important;
	border-radius: 5% !important;
}

#toolName{
  font-weight: bold !important;
  font-size: 2rem !important;
}

/* SCENARIO TOOGLE */

#flexSwitchCheckDefault {
  width: 3.4rem;
  height: 1.9rem;
  background-color: #fff !important;
  border: 2px solid #333 !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;
  /* transition: background-color 0.3s ease, border-color 0.3s ease; Added transitions for background and border */
}

/* 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: #000 !important;
  background-color: #f60000 !important;
}

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

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

/* 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: #fff !important;
}

/* ACCORDIONS */

/* Set arrow color to black in collapsed state */
.accordion-button::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 1.25rem; /* Default size for collapsed */
transition: transform 0.2s ease-in-out, background-size 0.2s ease-in-out; /* Add background-size to transition */
filter: none !important;
transform: rotate(0deg);
}

/* Rotate the arrow and make it slightly larger and white when expanded (open) */
.accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
transform: rotate(-180deg);
background-size: 1.5rem; /* Larger size for expanded */
}

.accordion-button:focus {
box-shadow: none !important;
outline: none !important;
border-color: transparent !important;
}

/* Styles for collapsed accordion (background white, text black) */
.accordion-button {
color: black !important;
font-size: 1.25rem !important;
font-weight: normal;
background-color: white !important; /* Set collapsed background to white */
box-shadow: none;
}

/* Styles for expanded accordion (background black, text white) */
.accordion-button:not(.collapsed) {
font-weight: bold !important;
color: white !important; /* Set expanded text to white */
font-size: 1.25rem !important;
background-color: black !important; /* Set expanded background to black */
}



/* INPUTS IN ACCORDIONS */
.btnLabel{
  background-color: transparent;
  font-weight: bold;
}

.valueInputs{
  border: 2px solid black !important;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
   box-shadow: none !important;
 outline: none !important;
}

.input02{
  color:#f60000 !important;
  font-size: 1.2rem;
font-weight: bold;
text-align: center;
}



/* ICONS LOWER BUTTONS */

i{
  font-size: 1.75rem !important;
}

#inputButton, #resultsButton, #resetButton01, #resetButton02, #returnInputScreenButton {padding: 0px !important;
}


#resetValues01Button{
  color: #000000!important;
  background-color: transparent !important;
}


#resetValues02Button{
  color: #f60000!important;
  background-color: transparent !important;
}

#resetButton01:focus,
  #resetButton01:active {
    background-color: transparent !important;
    box-shadow: none !important;
  }

  #resetButton01:focus-visible {
    outline: none !important;
  }


#resetButton02:focus,
  #resetButton02:active {
    background-color: transparent !important;
    box-shadow: none !important;
  }

  #resetButton02:focus-visible {
    outline: none !important;
  }

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item.active {
    background-color: black !important;
    color: white !important;
    font-weight: bold;
  }

  .dropdown-item-label {
  font-size: 1rem; /* Or whatever your default is */
  padding-left: 0.5rem  !important;
    
}

/* --- Your Existing iOS Safari .dropdown-item-label Style --- */
html.is-ios-safari .dropdown-item-label {
  font-size: 0.9rem;
  padding-left: 0.5rem !important;

}

/* --- iOS Safari Specific Overrides for Buttons ---
   This block will apply ONLY when the 'is-ios-safari' class is present on the <html> element.
   We'll make the -webkit-tap-highlight-color rule more aggressive. */

/* Target the buttons directly under the iOS Safari context */
html.is-ios-safari #resetButton01,
html.is-ios-safari #resetButton02 {
  /* This is the primary target for the tap highlight */
  -webkit-tap-highlight-color: transparent !important;
  /* Ensure background and shadow are also transparent on all states */
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important; /* Also remove outline here for all cases */
}

/* While the above should cover it, explicitly target active/focus/focus-visible for safety */
html.is-ios-safari #resetButton01:focus,
html.is-ios-safari #resetButton01:active,
html.is-ios-safari #resetButton01:focus-visible,
html.is-ios-safari #resetButton02:focus,
html.is-ios-safari #resetButton02:active,
html.is-ios-safari #resetButton02:focus-visible {
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  /* Re-assert tap highlight, though the direct rule above should catch it */
  -webkit-tap-highlight-color: transparent !important;
}

/* Optional: Global iOS Safari tap highlight removal for ALL interactive elements.
   This is often the most reliable way if specific button rules aren't enough. */
html.is-ios-safari {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Or 'transparent' */
}


  /* RESULTS */

html.is-ios-safari .resultsIosSafari {
	font-size: 130px !important;


}

.result {
	font-size: 150px !important;
	
}


#results01Span{
  color:#000000 !important;

}



#results02Span{
  color:#f60000 !important;

}