/* Start of style.css content for Water Calculators */
.calculator-area a img {
  border: none;
}
.calculator-area .left {
  float: left;
}
.calculator-area .right {
  float: right !important;
  position: static !important;
}
.calculator-area .clear {
  clear: both;
}

.calculator-area .clearfix {
  zoom: 1;
}

.calculator-area .clearfix:before,
.calculator-area .clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.calculator-area .clearfix:after {
  clear: both;
}

/**** FORM ELEMENTS ****/

.calculator-area fieldset {
  border: none;
}

.calculator-area label {
  line-height: 26px;
  white-space: nowrap;
  outline: none;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 14px;
  text-align: left;
}

.calculator-area input[type="text"],
.calculator-area input[type="password"],
.calculator-area select,
.calculator-area textarea {
  border: 1px solid #dcdcdc;
  border-top-color: #aeaeae;
  border-bottom-color: #e8e8ec;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  padding: 5px 6px 4px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 14px;
  color: #9d9d9d;
  background: #fff;
  width: 100%;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -webkit-box-shadow: inset 0px 1px 2px 0px #ddd;
  box-shadow: inset 0px 1px 2px 0px #ddd;
}

.calculator-area select {
  padding: 4px;
}

.calculator-area textarea {
  resize: vertical;
  overflow: auto;
}

.calculator-area .contact textarea {
  height: 178px;
}

.calculator-area input[type="text"]:focus,
.calculator-area input[type="password"]:focus,
.calculator-area select:focus,
.calculator-area textarea:focus {
  border-color: #29343d;
}

.calculator-area input[type="button"],
.calculator-area input[type="submit"],
.calculator-area button,
.calculator-area .button {
  background: #29343d !important;
  border: none;
  text-decoration: none;
  display: inline-block;
  display: inline;
  padding: 0 14px 2px;
  cursor: pointer;
  outline: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 20px;
  line-height: 28px;
  height: 26px;
  color: #fff;
  text-transform: uppercase;
}

.calculator-area input[type="button"],
.calculator-area input[type="submit"],
.calculator-area button {
  line-height: 30px\9;
}

.calculator-area .no-cssgradients input[type="button"],
.calculator-area .no-cssgradients input[type="submit"],
.calculator-area .no-cssgradients button,
.calculator-area .no-cssgradients .button {
  background: #29343d !important;
}

.calculator-area .cssgradients input[type="button"],
.calculator-area .cssgradients input[type="submit"],
.calculator-area .cssgradients button,
.calculator-area .cssgradients .button {
  background: -moz-linear-gradient(
    top,
    #ff2163 0%,
    #fa205a 25%,
    #dd1c3d 82%,
    #d81b38 100%
  );
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, #ff2163),
    color-stop(25%, #fa205a),
    color-stop(82%, #dd1c3d),
    color-stop(100%, #d81b38)
  );
  background: -webkit-linear-gradient(
    top,
    #ff2163 0%,
    #fa205a 25%,
    #dd1c3d 82%,
    #d81b38 100%
  );
  background: -o-linear-gradient(
    top,
    #ff2163 0%,
    #fa205a 25%,
    #dd1c3d 82%,
    #d81b38 100%
  );
  background: -ms-linear-gradient(
    top,
    #ff2163 0%,
    #fa205a 25%,
    #dd1c3d 82%,
    #d81b38 100%
  );
  background: linear-gradient(
    to bottom,
    #ff2163 0%,
    #fa205a 25%,
    #dd1c3d 82%,
    #d81b38 100%
  );
}

.calculator-area input[type="button"]:hover,
.calculator-area input[type="submit"]:hover,
.calculator-area button:hover,
.calculator-area .button:hover {
  background: #29343d;
}

.calculator-area input[type="checkbox"],
.calculator-area input[type="radio"] {
  vertical-align: middle;
  margin-right: 4px;
  position: relative;
  top: -2px;
  top: 0;
}

.calculator-area td button,
.calculator-area li button {
  height: 25px;
  line-height: 23px;
  line-height: 26px\9;
}

.calculator-area .cssgradients td button,
.calculator-area .cssgradients li button {
  background: -moz-linear-gradient(
    top,
    #cc4800 0%,
    #ef5200 4%,
    #ff5700 8%,
    #f43d00 67%,
    #f03200 100%
  );
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, #cc4800),
    color-stop(4%, #ef5200),
    color-stop(8%, #ff5700),
    color-stop(67%, #f43d00),
    color-stop(100%, #f03200)
  );
  background: -webkit-linear-gradient(
    top,
    #cc4800 0%,
    #ef5200 4%,
    #ff5700 8%,
    #f43d00 67%,
    #f03200 100%
  );
  background: -o-linear-gradient(
    top,
    #cc4800 0%,
    #ef5200 4%,
    #ff5700 8%,
    #f43d00 67%,
    #f03200 100%
  );
  background: -ms-linear-gradient(
    top,
    #cc4800 0%,
    #ef5200 4%,
    #ff5700 8%,
    #f43d00 67%,
    #f03200 100%
  );
  background: linear-gradient(
    to bottom,
    #cc4800 0%,
    #ef5200 4%,
    #ff5700 8%,
    #f43d00 67%,
    #f03200 100%
  );
}

.calculator-area .no-cssgradients td button,
.calculator-area .no-cssgradients li button {
  background: #ed3410 url(../../images/site/table-button-bg.gif) left top
    repeat-x;
}

.calculator-area td button:hover,
.calculator-area li button:hover {
  background: #f54708;
}

/**** TYPOGRAPHY ****/

.calculator-area h1,
.calculator-area h2,
.calculator-area h3,
.calculator-area h4,
.calculator-area h5,
.calculator-area h6,
.calculator-area .list .title,
.calculator-area .h5 {
  font-family: Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  font-weight: normal;
}

.calculator-area h1 {
  text-transform: none;
  font-size: 30px;
  line-height: 30px;
}

.calculator-area h1 span {
  display: block;
  font-size: 20px;
  color: #29343d;
  line-height: 26px;
}

.calculator-area .orange h1,
.calculator-area .productDesc h1 {
  color: #fe5a00;
}

.calculator-area h2 {
  color: #29343d;
  font-size: 22px;
  line-height: 22px;
}

.calculator-area .button,
.calculator-area .button:visited {
  padding: 4px 14px;
  height: auto;
}

.calculator-area .arrow span {
  display: block;
  padding-right: 16px;
  padding-right: 6px;
  background: url(../../images/site/arrow-white.png) right center no-repeat;
}

.calculator-area .calc span {
  display: block;
  background: #29343d !important;
  color: #acacac !important;
}

.calculator-area .calc:hover span {
  color: #fff !important;
}

.calculator-area {
  width: 80%;
  margin-top: 30px !important;
  margin-bottom: 20px !important;
  padding: 50px;
  margin: 0 auto;
}
@media only screen and (max-width: 660px) {
  .calculator-area {
    width: 100%;
    margin-top: 30px !important;
    margin-bottom: 20px !important;
    padding: 10px;
    margin: 0 auto;
  }
}

.calculator-area .head {
  line-height: 36px;
  padding: 0 23px 2px;
}

.calculator-area .head h3 {
  color: #002532;
  line-height: 36px;
}

.calculator-area .head .link {
  float: right;
}

.calculator-area .contentHolder {
  /*padding:23px;*/
  background: #fff;
  color: #5f5f5f;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 18px;
}

.calculator-area .contentHolder .tabs {
  margin: 0 !important;
  padding: 0 !important;
}

.calculator-area .contentHolder .tabs li {
  padding-bottom: 0 !important;
  padding-left: 0 !important;
}

.calculator-area .tabs {
  list-style: none;
  font-family: Arial, Helvetica, sans-serif;
  overflow: hidden;
  text-transform: uppercase;
  margin-bottom: -6px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
  z-index: 2;
}

.calculator-area .tabs li {
  float: left;
  margin-left: 1px;
  padding-bottom: 8px;
}

.calculator-area .tabs li:first-child {
  margin: 0;
}

.calculator-area .tabs a,
.tabs a:visited {
  text-decoration: none;
  outline: none;
}

.calculator-area .tabs li span {
  display: block;
  text-align: center;
  width: auto; /* Adjusted for longer tab titles */
  padding: 0 12px; /* Adjusted padding */
  line-height: 34px;
  cursor: pointer;
  background: #29343d;
  color: #acacac;
  -webkit-border-top-left-radius: 6px;
  -webkit-border-top-right-radius: 6px;
  -moz-border-radius-topleft: 6px;
  -moz-border-radius-topright: 6px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.calculator-area .tabs .active {
  background: url(../../images/site/activeTab.png) center bottom no-repeat;
}

.calculator-area .tabs .active span {
  color: #fff;
  background-color: #05827d;
  line-height: 40px;
}

.calculator-area .cssgradients .tabs .active span {
  background: -moz-linear-gradient(top, #ff5900 0%, #fc5700 24%, #dd4300 100%);
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, #ff5900),
    color-stop(24%, #fc5700),
    color-stop(100%, #dd4300)
  );
  background: -webkit-linear-gradient(
    top,
    #ff5900 0%,
    #fc5700 24%,
    #dd4300 100%
  );
  background: -o-linear-gradient(top, #ff5900 0%, #fc5700 24%, #dd4300 100%);
  background: -ms-linear-gradient(top, #ff5900 0%, #fc5700 24%, #dd4300 100%);
  background: linear-gradient(to bottom, #ff5900 0%, #fc5700 24%, #dd4300 100%);
}

.calculator-area .no-cssgradients .tabs .active span {
  background: url(../../images/site/activeTab-bg.gif) left bottom repeat-x;
}

.calculator-area .tabContent {
  padding: 22px 0 10px;
  min-height: 221px;
  overflow: hidden;
  z-index: 1;
  position: relative;
} /* min-height adjusted */

.calculator-area .tabContent p {
  margin-bottom: 18px;
}

.calculator-area .cssgradients .tabContent {
  background: -moz-linear-gradient(
    top,
    #e2e2e2 0%,
    #e9e9e9 10%,
    #fcfcfc 67%,
    #ffffff 100%
  );
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, #e2e2e2),
    color-stop(10%, #e9e9e9),
    color-stop(67%, #fcfcfc),
    color-stop(100%, #ffffff)
  );
  background: -webkit-linear-gradient(
    top,
    #e2e2e2 0%,
    #e9e9e9 10%,
    #fcfcfc 67%,
    #ffffff 100%
  );
  background: -o-linear-gradient(
    top,
    #e2e2e2 0%,
    #e9e9e9 10%,
    #fcfcfc 67%,
    #ffffff 100%
  );
  background: -ms-linear-gradient(
    top,
    #e2e2e2 0%,
    #e9e9e9 10%,
    #fcfcfc 67%,
    #ffffff 100%
  );
  background: linear-gradient(
    to bottom,
    #e2e2e2 0%,
    #e9e9e9 10%,
    #fcfcfc 67%,
    #ffffff 100%
  );
  background-size: auto 22px;
  background-repeat: repeat-x;
}

.calculator-area .no-cssgradients .tabContent,
.no-backgroundsize .tabContent {
  background: #fff url(../../images/site/tabContent-bg.gif) left top repeat-x;
}

.calculator-area table {
  margin: 12px 0;
}

.calculator-area th,
.calculator-area td {
  padding: 4px 12px 4px 6px;
  font-size: 13px;
  font-weight: normal;
  text-align: left;
  border-bottom: 1px solid;
  border-left: 1px dotted;
  border-color: #d9dbde;
}

.calculator-area th {
  font-family: Arial, Helvetica, sans-serif;
  border-bottom: none;
  background: #ededed;
}

.calculator-area td {
  font-family: Arial, Helvetica, sans-serif;
}
.calculator-area td strong {
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
}

.calculator-area th:first-child,
.calculator-area .product th:last-child,
.calculator-area td:first-child,
.calculator-area .product td:last-child,
.calculator-area td.noborder,
.calculator-area th.noborder {
  border-left: none;
}

.calculator-area th:first-child {
  -webkit-border-top-left-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.calculator-area th:last-child {
  -webkit-border-top-right-radius: 3px;
  -webkit-border-bottom-right-radius: 3px;
  -moz-border-radius-topright: 3px;
  -moz-border-radius-bottomright: 3px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.calculator-area td select,
.calculator-area li select {
  width: 54px;
  margin-right: 6px;
}

.calculator-area li select {
  width: 60px;
}

.calculator-area td.noresize {
  width: 1%;
  padding-right: 0;
  white-space: nowrap;
}

.calculator-area .center {
  text-align: center;
}

.calculator-area td.thumb {
  padding: 4px 0 !important;
}

/**** CALCULATOR *****/

.calculator-area .calculator h5 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-transform: none;
}

.calculator-area .calculator h5 {
  margin-bottom: 6px;
}

.calculator-area .calculator .tabs {
  margin: 30px 0 0;
  font-size: 14px;
  float: left;
}

.calculator-area .cssgradients .calculator .tabs {
  background: -moz-linear-gradient(
    top,
    #e2e2e2 0%,
    #e9e9e9 10%,
    #fcfcfc 67%,
    #ffffff 100%
  );
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, #e2e2e2),
    color-stop(10%, #e9e9e9),
    color-stop(67%, #fcfcfc),
    color-stop(100%, #ffffff)
  );
  background: -webkit-linear-gradient(
    top,
    #e2e2e2 0%,
    #e9e9e9 10%,
    #fcfcfc 67%,
    #ffffff 100%
  );
  background: -o-linear-gradient(
    top,
    #e2e2e2 0%,
    #e9e9e9 10%,
    #fcfcfc 67%,
    #ffffff 100%
  );
  background: -ms-linear-gradient(
    top,
    #e2e2e2 0%,
    #e9e9e9 10%,
    #fcfcfc 67%,
    #ffffff 100%
  );
  background: linear-gradient(
    to bottom,
    #e2e2e2 0%,
    #e9e9e9 10%,
    #fcfcfc 67%,
    #ffffff 100%
  );
  background-size: auto 22px;
  background-repeat: repeat-x;
  background-position: bottom;
}

.calculator-area .no-cssgradients .calculator .tabs,
.calculator-area .no-backgroundsize .calculator .tabs {
  background: #fff url(../../images/site/tabContent-bg.gif) left bottom repeat-x;
}

.calculator-area .calculator .tabs li {
  padding-bottom: 23px;
}

.calculator-area .calculator .tabs .active {
  background: url(../../images/site/activeTab-red.png) center 34px no-repeat;
}

/* This rule makes tabs wider to accommodate longer text */
.calculator-area .calculator .tabs li span {
  width: auto;
  padding: 0 12px;
}

.calculator-area .cssgradients .calculator .tabs .active span {
  background: -moz-linear-gradient(
    top,
    #d91c39 0%,
    #df1b40 23%,
    #f62056 69%,
    #fe205e 88%,
    #ff2161 100%
  );
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, #d91c39),
    color-stop(23%, #df1b40),
    color-stop(69%, #f62056),
    color-stop(88%, #fe205e),
    color-stop(100%, #ff2161)
  );
  background: -webkit-linear-gradient(
    top,
    #d91c39 0%,
    #df1b40 23%,
    #f62056 69%,
    #fe205e 88%,
    #ff2161 100%
  );
  background: -o-linear-gradient(
    top,
    #d91c39 0%,
    #df1b40 23%,
    #f62056 69%,
    #fe205e 88%,
    #ff2161 100%
  );
  background: -ms-linear-gradient(
    top,
    #d91c39 0%,
    #df1b40 23%,
    #f62056 69%,
    #fe205e 88%,
    #ff2161 100%
  );
  background: linear-gradient(
    to bottom,
    #d91c39 0%,
    #df1b40 23%,
    #f62056 69%,
    #fe205e 88%,
    #ff2161 100%
  );
}

.calculator-area .no-cssgradients .calculator .tabs .active span {
  background: #ff2161 url(../../images/site/activeTab-red-bg.gif) left top
    repeat-x;
}

.calculator-area .calculator .tabContent {
  clear: both;
  background: none;
  padding: 0 0 0 8px;
  height: auto;
}

.calculator-area .calculator .tabContent .left {
  width: 374px;
}

.calculator-area .summary {
  float: right;
}

.calculator-area .calculator th,
.calculator td {
  padding: 4px 12px;
}

.calculator-area .summary td:last-child {
  text-align: right !important;
  color: #29343d;
}

.calculator-area .calculator h2 {
  text-transform: none;
  font-size: 24px;
  color: #29343d;
}

.calculator-area .calculator h4 {
  /* Added style for h4 for "Minimum Tank Size" */
  font-size: 18px;
  color: #29343d;
  margin-top: 15px; /* Adjust as needed */
  margin-bottom: 5px;
}

.calculator-area .calculator .minimum_tank_size_output,
.calculator-area .calculator .total_litres_per_annum_output {
  font-size: 20px; /* Adjust size for output numbers */
  font-weight: bold;
  color: #05827d; /* A distinct color for results */
  display: block; /* Ensures it takes full width for clear display */
  margin-bottom: 15px;
}

.calculator-area .calculator fieldset {
  border-bottom: 1px solid #d9dbde;
}

.calculator-area .calculator .left table {
  margin-bottom: 0;
}

.calculator-area .calculator #tab02 table {
  border-bottom: 1px solid #d9dbde;
}

.calculator-area .calculator table + h2 {
  margin-top: 20px;
}

.calculator-area .calculator .left th,
.calculator-area .calculator .left td {
  border: none;
  padding: 6px 4px;
}

.calculator-area .calculator .left th:first-child {
  width: 186px;
}

.calculator-area .calculator .left th:first-child,
.calculator-area .calculator .left td:first-child {
  padding-left: 0;
}

.calculator-area .calculator .left th {
  background: none;
  font-size: 18px;
  white-space: nowrap;
  border-bottom: 1px solid #d9dbde;
}

.calculator-area .calculator .left th small {
  font-size: 11px;
  display: block;
  font-weight: normal;
  margin-top: 2px;
  color: #5f5f5f;
} /* Adjusted small tag for units */

.calculator-area .calculator #tab02 .left tr:first-child + tr td {
  padding-top: 12px;
}
.calculator-area .calculator .left tr:last-child td {
  padding-bottom: 12px;
}

.calculator-area .calculator input {
  color: #5f5f5f;
  width: 100px;
}

/* Specific width for inputs in catchment calculator */
.calculator-area .calculator #tab01 input {
  width: 208px;
}

.calculator-area .calculator .left td:first-child {
  font-size: 11px;
  line-height: 15px;
}

.calculator-area .calculator .left td:first-child strong {
  font-family: Arial, Helvetica, sans-serif;
  display: block;
  font-size: 14px;
  font-weight: normal;
  color: #29343d !important;
}

/* Adjusting alignment for numerical output in tables */
.calculator-area .calculator .left td + td,
.calculator-area .calculator .left td:last-child {
  text-align: right; /* Aligning numbers to the right */
  color: #29343d;
  vertical-align: middle; /* Center vertically if needed */
}

.calculator-area .calculator .total {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 34px;
  color: #29343d;
  font-size: 18px;
}

.calculator-area .calculator .total .amount {
  float: right;
  color: #29343d;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 24px;
}

.calculator-area .calculator table + .total .amount {
  padding-right: 10px;
}

.calculator-area .buttonsHolder {
  margin: 20px 0;
  overflow: hidden;
}

.calculator-area .buttonsHolder .arrowLink {
  margin: 5px 12px;
}

/* Specific styling for usage calculator input fields to make them smaller */
.calculator-area #tab02 input[type="text"] {
  width: 60px; /* Adjust width as needed */
  display: inline-block; /* Keep it inline with text */
  vertical-align: middle;
  margin-right: 5px;
}

.calculator-area #tab02 td {
  white-space: nowrap; /* Prevents wrapping in table cells */
}

/* Style for small text under activity names */
.calculator-area #tab02 small {
  display: block;
  font-size: 10px;
  color: #888;
  margin-top: 2px;
}
/* End of style.css content */