/*  PRYANHA NOZZEL CALCULATOR
 DEVELOPED BY JAELYN JACKSON, CARBONX DEVELOPMENT LLC
 WWW.CARBONXDEVELOPMENT.COM
 STARTED 07-18-2020 */

/* -------------------------------------------------- */
/* BEGIN SETUP FOR THE FIRST PAGE (SELECT BARN STYLE) */
/* -------------------------------------------------- */

/* Setup universal body characteristics for ex: font. */

.fullscreen {
  top: 0;
  left: 0;
  right: 0;
  overflow: auto;
}

html {
  width: vw;
}

body {
  font-family: "Roboto", sans-serif;
  width: 100%;
}

/* Accent bar on top of page */
.banner {
  font-weight: bold;
  padding: 20px;
  text-align: center;
  background-color: #fed206;
  font-size: 50px;
}

.banner #header-logo {
  width: 100%;
  object-fit: contain;
  margin-bottom: 12px;
}

.banner .col-md-4 {
  font-size: 33px !important;
  line-height: 36px !important;
  text-align: center !important;
  margin-top: 0 !important;
  font-kerning: normal !important;
  letter-spacing: normal !important;
}

.accent-bar {
  padding: 1rem;
  width: 100%;
  background-color: #3b3b3b;
}

/* Section containing logo at top of page */
.logo-section {
  width: 100%;
  padding: 2.5rem;
  text-align: center;
}

/* Actual logo styling  */
#header-logo {
  max-width: 185px;
}

/* Section containg displayed messages to user throughout process */
.info-section {
  text-align: center;
}

/* Displays page header */
#info-header {
  font-size: 2rem;
  font-weight: 700;
}

/* Displays desc/communication to user */
#info-desc {
  font-size: 1.3rem;
  font-weight: 200;
}

/* Section that contains the various barn options to choose from. */
.options-selection-section {
  width: 100%;
  margin-top: 4rem;
  text-align: center;
}

/* Overide bootstrap card and make it center in column */
.card-special {
  width: 25rem;
  margin: auto; /* Added */
  float: none; /* Added */
  margin-bottom: 10px; /* Added */
}

/* Overide bootstrap card and make it center in column */
.card-special-res {
  width: 20rem;
  margin: auto; /* Added */
  float: none; /* Added */
  margin-bottom: 10px; /* Added */
}

/* Make the entire card a clickable element */
.clickable-tag {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

/* Special case for other image  */
.special-case {
  text-align: center;
  margin: auto;
  max-height: 230px;
  max-width: 230px;
}

/* Configure button that will allow user to choose option */
.option-button {
  background-color: #fed206;
  color: #3b3b3b;
  padding: 10px 50px 10px 50px;
  border: 0px;
  font-weight: 800px;
}
/* Update color when mouse hovers over button */
.option-button:hover {
  background-color: #3b3b3b;
  color: #ffffff;
}

.option-button:visited {
  background-color: #fed206;
  color: #3b3b3b;
  padding: 10px 50px 10px 50px;
  border: 0px;
  font-weight: 800px;
}

.share-section {
  text-align: center;
  margin: auto;
  margin-bottom: 100px;
  height: 90px;
  width: 50%;
  background-color: #3b3b3b;
  border-radius: 40px;
}

.share-section-end {
  text-align: center;
  margin: auto;
  margin-bottom: 100px;
  margin-top: 50px;
  padding: 20px;
  /* height: 100px; */
  width: 80%;
  background-color: #3b3b3b;
  border-radius: 40px;
}

.share-title {
  margin-top: 50px;
  color: white;
  font-size: 1.5rem;
  font-weight: 700;
}

.share-title:hover {
  color: #fed206;
  text-decoration: none;
}

/* iPad/Tablet STYLING */
@media only screen and (max-width: 768px) {
  .card {
    width: 80%;
  }

  .card-title {
    font-size: 2.2rem;
  }

  .card-text {
    font-size: 1.4rem;
  }

  .option-button {
    padding: 20px 90px 20px 90px;
    font-weight: 600;
    font-size: 1.5rem;
  }

  .share-section {
    width: 75%;
  }

  .share-title {
    font-size: 1.5rem;
  }

  .totals-header {
    font-size: 3rem;
  }

  .total-item {
    font-size: 5rem;
  }
}

@media only screen and (max-width: 991px) {
  .share-title {
    font-size: 1.3rem;
    font-weight: 400;
    height: 70px;
  }
}

/* phone STYLING */
@media only screen and (max-width: 450px) {
  #header-logo {
    max-width: 320px;
  }

  .card {
    width: 95%;
  }

  .card-title {
    font-size: 2.1rem;
  }

  .card-text {
    font-size: 1.1rem;
    font-weight: 300;
  }

  .option-button {
    padding: 15px 80px 15px 80px;
    font-size: 1.2rem;
  }

  .share-section {
    width: 75%;
    height: 100px;
    font-weight: 600px;
  }

  .share-title {
    font-size: 1.2rem;
    font-weight: 400;
  }
}

/* ------------------------------------------------ */
/* END SETUP FOR THE FIRST PAGE (SELECT BARN STYLE) */
/* ------------------------------------------------ */

.barn-table {
  position: relative;
  top: 30%;
  border-collapse: collapse;
  margin: auto;
}

.select-room-section {
  background-color: #f2f2f2;
  position: relative;
  height: 700px;
}

.barn-container {
  position: relative;
  top: 10%;
  width: 80%;
  height: 80%;
  background-color: white;
  margin: auto;
  text-align: center;
}

.breezeway-container {
  position: relative;
  width: auto;
  height: 50px;
  border-top: solid;
  border-bottom: solid;
}
.breezeway-container-front {
  position: relative;
  width: auto;
  height: 50px;
  border-left: solid;
  border-top: solid;
  border-bottom: solid;
}
.breezeway-container-back {
  position: relative;
  width: auto;
  height: 50px;
  border-right: solid;
  border-top: solid;
  border-bottom: solid;
}

.empty-stall-cell-top {
  border-style: solid;
  height: 100px;
  width: 100px;
}

.empty-stall-cell-bottom {
  position: relative;
  display: inline-block;
  top: 35%;
  border-style: solid;
  width: 6%;
  height: 10%;
  margin-right: -7px;
}

.selected-stall-cell {
}

.nozzel-stall-cell {
}

.tubing-stall-cell {
}

/* ------------------------------------- */
/* BEGIN SETUP FOR THE SECOND PAGE (Q/A) */
/* ------------------------------------- */

.questions-section {
  margin-left: 35%;
  margin-right: 35%;
  margin-top: 75px;
  text-align: center;
}

.question-container {
  margin: 0 auto; /* Added */
  float: none; /* Added */
  margin-bottom: 10px; /* Added */
}

.sub-question-container {
  display: none;
  margin: 0 auto;
  float: none;
  /* margin-bottom: 10px; Added */
}

.question-label {
  font-size: 1.2rem;
  text-align: right;
}

.question-label-sub {
  margin-left: 20px;
  font-size: 1rem;
  font-weight: 300;
  text-align: right;
}

.question-button {
  margin-bottom: 20px;
}

.question-input {
  width: 4.5rem;
  margin-left: auto;
  margin-right: 0;
}

/* iPad/Tablet STYLING */
@media only screen and (max-width: 768px) {
  .banner .right.logo {
    margin: 0 auto;
  }

  #info-header {
    font-size: 3rem;
  }

  #info-desc {
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    font-size: 1.8rem;
  }

  .questions-section {
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 75px;
    text-align: center;
  }

  .question-label {
    font-size: 1.4rem;
    text-align: right;
  }

  .question-label-sub {
    margin-left: 30px;
    font-size: 1.2rem;
    font-weight: 300;
    text-align: right;
  }

  h3 {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 991px) {
  .share-title {
    font-size: 1.3rem;
    font-weight: 400;
    height: 70px;
  }
}
/* phone STYLING */
@media only screen and (max-width: 450px) {
  #info-header {
    font-size: 2.2rem;
  }

  #info-desc {
    margin-top: 10px;
    padding-left: 19px;
    padding-right: 19px;
    margin-left: 12px;
    margin-right: 12px;
    font-size: 1.2rem;
  }

  #header-logo {
    max-width: 320px;
  }

  .question-label {
    font-size: 1.3rem;
    text-align: center;
  }

  .question-label-sub {
    margin: 0px;
    margin-bottom: 10px;
    font-size: 1.1rem;
    text-align: center;
  }

  .question-input {
    width: 4.5rem;
    margin: auto;
  }

  .question-button {
    border-radius: 25px;
  }
}

/* ----------------------------------- */
/* END SETUP FOR THE SECOND PAGE (Q/A) */
/* ----------------------------------- */

.results-section {
  width: 100%;
  margin-top: 50px;
  text-align: center;
}

.result-card {
  width: 90%;
}

.totals-container {
  margin-top: 50px;
  padding: 20px;
  width: 100%;
  text-align: center;
  background-color: #3b3b3b;
}

.totals-header {
  padding-top: 20px;
  margin-bottom: 20px;
  color: white;
}

.total-item {
  color: white;
  font-size: 1.5rem;
  font-weight: 100;
  margin-bottom: 5px;
}

.purchase-button {
  font-size: 1.3rem;
  width: 30%;
  font-weight: bold;
  background-color: #ffffff;
  color: #3b3b3b;
  border: none;
}

/* Update color when mouse hovers over button */
.purchase-button:hover {
  background-color: #fed206;
  color: #3b3b3b;
}

/* .option-button:visited {
  background-color: #FED206;
  color: #3B3B3B;
  padding: 10px 50px 10px 50px;
  border: 0px;
  font-weight: 800px;
} */