@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&display=swap");

*,
*::before,
*::after {
  font-family: "Open Sans", sans-serif;
  --dark-text: #333333;
  --yellow-hpc: hsl(44, 99%, 59%);
  --dark-yellow-hpc: hsl(44, 99%, 45%);
  --red-hpc: #ec2030;
  --dark-background: #394045;
  --light-border: #d8d9da;
  --savings-green: #6fbf73;

  --primary-yellow: #fec830;
  --primary-red: #eb1828;
  --secondary-grey: #37424a;
  --secondary-black: #2a2623;

  margin: 0;
  box-sizing: border-box;
  padding: 0;
}

option {
  padding: 0;
}

main {
  margin-top: 0em;
}

@media only screen and (max-width: 600px) {
  main {
    scale: 70%;
    translate: 0 -15%;
  }
}

.noselect {
  -webkit-user-select: none; /* Safari */
  user-select: none;
}

p,
h1 {
  color: var(--secondary-black);
}
h2 {
  color: var(--secondary-black);
}

h2,
h3 {
  font-family: "Montserrat", sans-serif;
}

h1 {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
}

.savings-title {
  text-transform: uppercase;
  background-color: var(--dark-background);
  border: 2px solid var(--dark-text);
  color: white;
  padding: 0.4rem 0.8rem;
  margin-block-end: 0.3rem;
}

.main-title-text {
  font-size: 1.2rem;
  margin-block-end: 1em;
}

@media only screen and (max-width: 600px) {
  .main-title-text {
    width: 145%;
  }
}

.breakdown-savings-title {
  text-transform: none;
}

.main-text {
  max-width: 70ch;
}

.main-title {
  margin-bottom: 0.4em;
  font-weight: bold;
}

.metric-title {
  background-color: var(--primary-yellow) !important;
  font-weight: 600;
}

/** Forms **/

form {
  accent-color: var(--secondary-black);
}

/* .main-form {
  display: grid;
} */

.calculation-form {
  max-width: 45ch;
  padding: 2em;
  border: 2px solid var(--light-border);
}

.calculation-form,
.savings-container {
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.savings-container {
  max-width: 50rem;
}

/* .main-form , */
.techs-form {
  display: grid;
  grid-template-columns: 1fr 15ch;
  row-gap: 1em;
  align-items: center;
  margin: 0 auto;
  padding: 2em;
  width: 100%;
  border: 2px solid var(--light-border);
  border-radius: 5px;
}

:is(.techs-form, .main-form) label {
  font-size: 0.8em;
}

/* .techs-form > input,
.main-form > select {
  margin-inline-start: 1em;
  line-height: 2em;
} */

.techs-form > .checkbox {
  display: grid;
  grid-column: 1 / span 2;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
}

.techs-form > .checkbox label {
  padding-inline-start: 0.8em;
  padding-block: 0.6em;
  width: 100%;
}

.techs-form > .checkbox input {
  margin-inline-end: 0.8rem;
  height: 1.1rem;
  aspect-ratio: 1/1;
}

.calculation-form > .calculation-inputs > select {
  height: 3rem;
}

/** inputs **/

input[type="range"] {
  margin: 0;
}

.input-number,
.calculation-inputs > select {
  outline: none;
  background-color: transparent;
  border: solid 1px var(--secondary-black);
}

.input-button {
  outline: none;
  padding: 1em;
  font-family: "Montserrat", sans-serif;
  font-size: large;
  background-color: var(--secondary-grey);
  color: white;
  border: solid 2px var(--light-border);
  cursor: pointer;
  transition: background-color 0.5s ease;
}

.back-button {
  width: 15rem;
  margin: 0 auto;
  margin-block-start: 2rem;
}

/* .submit-button {
  --submit-colour: var(--red-hpc);
  display: block;
  margin: 0 auto;
  padding: 1.5em 3em;
  width: 100%;
  
  background-color: transparent;
  border: 2px solid var(--submit-colour);
  color: var(--submit-colour);
  cursor: pointer;
  font-size: 1em;
  font-weight: 500;
} */

/* .submit-button:hover {
  --submit-colour: white;
  background-color: var(--red-hpc);
} */

.information-button {
  border: none;
  position: relative;
  background-color: var(--secondary-grey);
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 900;
  color: white;
  min-width: 2em;
  max-width: 2em;
  height: 2em; /* Added height for a perfect circle */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8em;
  cursor: pointer;
}

.energy-saving-modal-close-button,
.auto-modal-close-button {
  border: none;
  background-color: transparent;
  color: var(--dark-background);
  aspect-ratio: 1/1;
  width: 2rem;
  height: 2rem;
  border-radius: 1000vh;
  font-size: 1.2em;
  transition: background-color 0.3s ease;
}

.energy-saving-modal-close-button:hover,
.auto-modal-close-button:hover {
  background-color: var(--light-border);
}

.input-box {
  height: 3rem;
  flex: 1;
  max-width: 100%;
}

.input-box-small {
  margin-inline-start: 1rem;
  height: 2rem;
}

input:is(.input-box, .input-box-small) {
  padding-inline: 0.925em 0.3rem;
}

.input-box-small,
.input-box {
  outline: none;
  background-color: transparent;
  border: 1px solid var(--secondary-black);
  padding-inline-start: 0.5rem;
}

.input-checkbox {
  display: flex;
  line-height: 2em;
  font-size: 1em;
  font-weight: 600;
  background-color: var(--yellow-hpc);
  border: solid 1px var(--secondary-black);
  align-items: center;
  border-radius: 4px;
}

.submit-button {
  border-radius: 1000vh;
  transition: all 0.3s ease-out;
}

.submit-button:hover {
  -webkit-box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.75);
  border: 2px solid var(--secondary-black);
}

.submit-email-button {
  background-color: var(--primary-red);
}

/** outputs **/

.calculation-outputs {
  display: flex;
  justify-content: space-between;
  margin-top: 1em;
  margin-inline: 0.2em;
}

/** tables **/

.input-section,
.output-section {
  display: grid;
}

.input-section {
  gap: 2rem;
}

.recommendation:nth-of-type(n + 4) > .recommendation_table {
  border-top: none;
}

.metric-table {
  flex-grow: 1;
  display: grid;
  border: 2px solid var(--light-border);
  background-color: var(--light-border);
  gap: 2px;
  font-size: 0.9rem;
  grid-template-rows: 1fr 1fr;
}

.fad-table {
  grid-template-columns: 9rem 1fr 1fr;
}

.metric-table > * {
  background-color: white;
  padding: 0.5rem;
}

.metric-table + .metric-table {
  /* margin-inline-start: 1em; */
  border-inline-start: none;
}

.metric-table-gap {
  grid-row: 1 / span 2;
}

.compressor-metrics {
  display: flex;
  margin-block: 1rem 2rem;
}

.recommendation_table {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 2px;
  background-color: var(--light-border);
  border: 2px solid var(--light-border);
}

.recommendation_table > * {
  padding: 1em 1em;
  background-color: white;
  font-size: 0.8em;
  display: flex;
  align-items: center;
}

.recommendation_table > label {
  padding-inline-end: 1em;
  font-size: 0.9em;
}

.recommendation_title {
  background-color: var(--yellow-hpc);
  font-weight: 600;
}

.recommendation_table-important {
  background-color: var(--secondary-black);
  border: 2px solid var(--secondary-black);
}

.recommendation_table-important > * {
  background-color: var(--secondary-grey);
  color: white;
}

/**  **/

header {
  border-bottom: 3px solid var(--yellow-hpc);
  display: flex;
  justify-content: center;
  padding: 1em 4em;
}

.text-container {
  margin-inline: 1rem;
  padding-block-start: 2em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
}

.calculation-inputs > *:not(label) {
  width: 100%;
  margin-block: 1em;
}

.techs-form_title {
  text-align: center;
  font-weight: 400;
  font-size: 0.9em;
  margin-block: 0 0.3em;
  padding-inline-start: 1em;
}

.auto-title {
  text-align: center;
  margin-block: 1em;
}

.recommendation {
  display: grid;
  width: 100%;
  /* gap: 1rem; */
}

.recommended-compressor_title {
  margin: 0 auto;
  width: 100%;
  text-align: center;
  color: var(--dark-background);
  font-size: 1.2em;
  font-weight: 500;
  margin-block: 0 0.4em;
}

.auto-main {
  display: grid;
  grid-template-columns: 45% 1fr;
  row-gap: 1.6em;
  column-gap: min(2rem, 10%);
  max-width: 150ch;
  align-content: center;
  margin: 0 auto;
}

.output-section {
  /* place-content: start stretch; */
  grid-column: 2;
  /* grid-row: 1 / span 3; */
}
/*  .auto-main {
    grid-template-columns: 1fr;
  }

  .output-section {
    grid-row: initial;
    grid-column: initial;
  }

  #auto-submit {
    grid-row-start: 2;
  }
}*/

body {
  /* margin-block-end: 10rem; */
}

.hidden {
  display: none;
}

.fad-table > label {
  text-align: center;
}

.slider-output {
  font-size: 0.83333em;
  display: block;
  padding: 1em;
  border: solid 1px var(--dark-background);
  margin: 0;
}

.slider-label-container {
  display: flex;
  gap: 1.5em;
  justify-content: space-between;
}

.slider-label-container > label {
  align-self: center;
  font-size: 1rem;
  font-weight: 600;
}

#energy-saving-calculation-container {
  display: grid;
  justify-content: center;
  gap: 1em;
  grid-template-columns: 45ch max-content;
  column-gap: min(2rem, 10%);
  row-gap: 1.6em;
  /* max-width: 120ch; */
  margin: 0 auto;
}

@media only screen and (max-width: 1100px) {
  #energy-saving-calculation-container {
    grid-template-columns: max-content;
  }

  .calculation-form {
    max-width: none;
  }

  #energy-saving-calculation-container > #calculate-button {
    grid-row: 2;
  }
}

.fad-container {
  display: flex;
}

.savings-section {
  display: flex;
  padding: 1em;
  justify-content: space-between;
  gap: 1.5em;
  border: 2px solid var(--light-border);
  width: 40ch;
}

.savings-section-important {
  background-color: var(--yellow-hpc);
}

.total-savings-section {
  background-color: var(--dark-text);
  color: white;
  display: flex;
  gap: 2px;
  border: 2px solid var(--dark-text);
  min-width: 40ch;
  margin-block-end: 1.2rem;
}

.total-savings-section > * {
  padding: 0.8em;
  background-color: var(--dark-background);
  width: 100%;
}

.total-savings-section-heading {
  font-weight: 700;
  font-size: 1em;
  margin-block-end: 0.5rem;
}

.breakdown-savings-section {
  display: flex;
}

.breakdown-savings-container {
  display: grid;
  grid-template-columns: max-content repeat(3, minmax(14ch, 1fr));
  background-color: var(--light-border);
  border: 2px solid var(--light-border);
  gap: 2px;
  flex-shrink: 0;
  font-size: 0.85rem;
}

@media only screen and (max-width: 1100px) {
  .breakdown-savings-container {
    grid-template-columns: min-content repeat(3, minmax(14ch, 1fr));
  }
}

/** Need to update **/
/* @media screen and (max-width: 900px) {
  .breakdown-savings-container {
    grid-template-columns: minmax(min-content, 2fr) repeat(3, minmax(9ch, 1fr));
  }
} */

.breakdown-savings-container > * {
  background-color: white;
  padding: 1em 0.5em;
}

.breakdown-savings-container > h4 {
  background-color: var(--primary-yellow);
  color: var(--secondary-black);
  font-family: "Montserrat", sans-serif;
  display: flex;
  gap: 1em;
  /* align-items: center; */
  justify-content: space-between;
  padding-inline-end: 0.8em;
}

.energy-saving-modal,
.auto-modal {
  max-width: 70ch;
  margin: auto;
  padding: 2rem;
  border: 2px solid var(--red-hpc);
}

.energy-saving-modal-heading,
.auto-modal-heading,
.email-modal-heading {
  display: flex;
  justify-content: space-between;
  margin-block-end: 1em;
}

.email-modal-heading {
  margin-block-end: 1.5em;
}

.breakdown-savings-gap,
.breakdown-savings-border-bottom,
.breakdown-savings-border-top {
  grid-column: span 4;
}

.breakdown-savings-gap {
  outline: 2px solid white;
}

.breakdown-savings-border-bottom,
.breakdown-savings-border-top {
  padding: 0;
}

.email-form {
  display: grid;
  grid-template-columns: min-content 1fr;
  align-items: center;
  row-gap: 1rem;
  column-gap: 1rem;
}

@media only screen and (max-width: 500px) {
  .email-form {
    grid-template-columns: min-content;
  }
}

.email-form-label {
  text-align: right;
  font-weight: bold;
}

.email-form-input {
  padding: 1em 1.7em;
  background-color: #ebebec;
  border: none;
  border: 1px solid #ebebec;
  border-radius: 4px;
  position: relative;
}

.thankyou-container {
  margin-block-start: 2rem;
  display: grid;
  justify-content: center;
  text-align: center;
  row-gap: 1em;
}

.modal-submit-button {
  text-transform: uppercase;
  background-color: #1abc9c;
  color: white;
  border: none;
  border-radius: 4px;
  max-width: max-content;
  padding: 0.8em 1.2em;
  font-size: 0.9em;
}

.modal-submit-button:hover {
  cursor: pointer;
}

.email-input-wrapper {
  position: relative;
}

.email-input-wrapper::after {
  content: "*";
  position: absolute;
  top: 5px;
  left: 10px;
  color: var(--red-hpc);
}

.asterisk-info {
  color: var(--red-hpc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  cursor: help;
  padding-inline: 0.2rem;
}

.slider-label-container-with-info {
  gap: 0.5em;
  align-items: center;
}

.slider-label-container-with-info > label {
  flex: 1;
}

.slider-label-container-with-info > .information-button {
  font-size: 0.7rem;
}

.tooltip {
  position: absolute;
  visibility: hidden;
  padding: 1rem;
  background-color: white;
  border: 2px solid var(--red-hpc);
}

#shift-operation-asterisk:hover #shift-operation-tooltip {
  visibility: visible;
}

.modal-smaller-text {
  margin-block-start: 0.3em;
  font-size: 0.8em;
}

.hpc-tick {
  display: block;
  width: 40%;
  height: auto;
  margin: 0 auto;
}