/* ==== CSS for styling the page ==== */
/* TODO: replace this styling with real styling. */
/* NOTE: I ran into some issues trying to use bootstrap with this double-accordion.
/*   col-md-X were floating, which cause the element to remain visible when the
/*   accordion closed. */

.quiz_builder {
  /* The default background color of Drupal is a light gray. */
  background-color: #ffffff;
}

.accordion_group {
  border: solid 1px #cccccc;
  margin-bottom: 30px;
}

.accordion_group_title {
  border-bottom: solid 1px #cccccc;
}

.accordion_group_title a {
  padding: 25px 30px;
}

.accordion_group_title a:focus,
.accordion_group_title a:active,
.accordion_group_title a:hover {
  /* Hide that it's a hyperlink. */
  text-decoration: none;
}

/* Using these both, to make sure the
/*   fonts don't change on hover. */
.accordion_group_title a,
.accordion_group_title a:hover,
.accordion_group_title a:focus {
  font-size: 22px;
  font-weight: normal;
  line-height: 1.36;
  letter-spacing: normal;
  text-align: left;
  color: #333333;
}

.accordion_answer_individual {
  padding: 1em;
}

.accordion_calculator_question {
  padding: 30px 30px 0px;
}

.accordion_calculator_question:last-of-type {
  padding-bottom: 30px;
}

.accordion_calculator_answer {
  padding: 12px 30px;
}

.accordion_calculator_answer {
  border-bottom: 1px solid #ccc;
}

.accordion_calculator_answer:last-of-type {
  border-bottom: none;
}

.accordion_calculator_question p,
.accordion_calculator_answer p  {
  font-size: 16px;
  font-weight: normal;
  line-height: 1.63;
  letter-spacing: normal;
  text-align: left;
  color: #333333;
}

/* Counter bootstrap.css */
.accordion_calculator_answer p {
  margin-bottom: 0;
}

.accordion_calculator_answer span.number {
  width: 40px;
  height: 20px;
  font-family: BentonSans;
  font-size: 20px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: normal;
  text-align: right;
  color: #666666;
}
.group_outputs {
  background-color: #efefef;
}

.accordion_right_rail .inside_box {
  border: solid 1px #f0ab00; /* SAP Gold */
}
.accordion_right_rail .outside_box {
  padding: 30px;
  text-align: center;
}
.lowerRightRail {
  text-align: center;
}

.lowerRightRail > div {
  padding-top: 30px;
  padding-bottom: 30px;
}

.lowerRightRail .title {
  font-size: 22px;
  font-weight: normal;
  color: #333333;
}

.lowerRightRail .button_container {
  padding-top: 36px;
}

.lowerRightRail .number {
  font-size: 50px;
  font-weight: bold;
  color: #f0ab00;
}

/* Please, please, please, remove these before going to production. */
.temp_border_right { border-right: 1px dotted; }

/* ==== CSS FOR THE ACCORDION ==== */

/* ---- SHOW/HIDE OF ACCORDION ELEMENTS ---- */
/* This dual-accordion will show one of two sections. */
.group_inputs,
.group_outputs {
  /* height: "defined via AccordionGroup.componentDidMount()" */
  opacity: 1;
  transition: all 0.5s ease-in-out;

  /* We want "overflow-y: hidden" to always be applied to this element.
  /* By default it has no effect... only when we specify a height. */
  overflow-y: hidden;
}

.hide_inputs .group_inputs,
.hide_outputs .group_outputs {
  /* We use !important here to override the inline element's height. */
  height: 0 !important;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

/* ---- CLICKABLE TITLE ---- */
a.trigger_accordion {
  /* Lets you click anywhere within the title. */
  display: block;
  /* Needed to "catch" the hanging button. */
  position: relative;
}

/* ---- HANGING BUTTON ---- */
/* Responsible for building the hanging "+" and "-" buttons.
/*   If "show_toggle_button" is not present, then this app
/*   is in non-editable mode, so don't show the button. */
a.trigger_accordion.show_toggle_button:after {
  position: absolute;
  line-height: 30px;
  top: 50%;
  transform: translateY(-50%);
  right: -15px;
  width: 30px;
  height: 30px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 1px;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  color: #f0ab00;
}

/* That's right, these aren't images. */
.hide_outputs a.trigger_accordion.show_toggle_button:after {
  content: "-";
}
.hide_inputs a.trigger_accordion.show_toggle_button:after {
  content: "+";
}

/* ---- STICKY ---- */
/* Not sure where this came from, whether it's custom, or whether
/*   this is a feature from a future version of Bootstrap. */

.sticky {
  position: -webkit-sticky;
  position: sticky;
  /* Originally 10px; changed to 85px as a workaround for allowing
  /*   sticky to play well with the menu (which disappears when
  /*   you scroll down, and reappears when you scroll up. */
  top: 85px;
}

.sticky:before,
.sticky:after {
  content: "";
  display: table;
}

.main_section_row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: row;
  /* flex-wrap: wrap; do not use */
}

@media (max-width: 767px) {
  .main_section_row {
    flex-wrap: wrap;
    /* display: block needed for Safari */
    display: block;
  }

  .main_section_col_right {
    width: 100%;
    max-width: 645px; /* eyeballed to match left rail */
  }
}

@media (min-width: 768px) {
  .main_section_row .main_section_col_left {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
  }

  .main_section_row .main_section_col_right {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
  }
}

/* Helps right rail align with bottom of left rail
/*   when scrolling down page with form open. */
.accordion_group:last-of-type {
  margin-bottom: 0;
}

/* ---- REMOVE NUMBER SPINNER ---- */
/* Remove the up/down arrows inside of input fields. */
/* https://stackoverflow.com/a/40189766 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
  margin: 0;
}

/* ---- BUTTONS ---- */
/* We rely on the website's button styling. */
/* These are workarounds for bugs. */

.accordion_calculator_container a.btn:focus {
  /* Bug solved: when clicking on button, if the visitor is sent
  /*   to the bottom of the page to fill out the form, the text
  /*   on the button turns blue. It should stay white. */
  color: #fff;
}

/* ---- MISCELLANEOUS ---- */
/* TODO: sort these better. */

.disclaimer_row {
  margin-top: 60px;
}

.disclaimer_row p {
  font-size: 12px;
  line-height: 19.5px;
}

/* TODO: change to ".share_this_row" */
.accordion_calculator_footer {
  margin-top: 60px;
}

/* TODO: change to ".hidden_form_row" */
#hidden_form_section.show_form {
  /* Extra specificity needed because if an element
  /*   has a margin, the margin is still visible. */
  margin-top: 60px;
}

.accordion_calculator_question input[type="number"],
.accordion_calculator_question input[type="text"] {
  font-size: 50px;
  font-weight: bold;

  display: block;
  border: none;
  width: 100%; /* needed for numbers like 50,000 */
}

.accordion_calculator_question input[type="number"]:focus,
.accordion_calculator_question input[type="number"]:hover {
  color: #f0ab00; /* SAP Gold */
}

.accordion_calculator_question .units {
  font-size: 16px;
}

/* Can't use just ".tooltip" because it collides with bootstrap. */
.accordion_calculator_question .tooltip_container {
  padding-left: 0.5em;
}

.new_roi_calculation a {
  background: url(../png/arrow-outline-circle-left.png);
  background-repeat: no-repeat;
  background-position: center left;
  padding-left: 30px;

  color: #008fd3; /* SAP Blue */
  font-size: 18px;
  height: 26px;
}

.debugging_menu {
  display: none;
}

.debugging_menu.show {
  display: block;
}