/*/src/views/html-samples/PoolWaterAnalysis.vue*/
/** snapshot **/

.pool-water-analysis {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  flex-direction: column;
}

.pool-water-analysis__header {
  display: flex;
  justify-content: space-between;
}

.pool-water-analysis__form-container {
  display: flex;
  justify-content: center;
}

.pool-water-analysis__water-test {
  border-radius: 15px;
  border: 1px solid var(--color--dark-gray);
  display: flex;
  flex-direction: column;
  flex: 1 1 80%;
}

.pool-water-analysis__login-message {
  padding-bottom: 24px;
  border-bottom: 1px dashed var(--color--black);
}

.pool-water-analysis__content-divider {
  border-top: 1px dashed var(--color--black);
  margin: 32px 0;
}

.pool-water-analysis__options {
  display: flex;
  justify-content: space-between;
  border-top: 1px dashed var(--color--black);
  border-bottom: 1px dashed var(--color--black);
  margin: 16px 0;
  padding: 16px 0 32px;
}

.pool-water-analysis__options label{
  display: flex;
  flex-direction: column;
  flex-basis: 16%;
}

.pool-water-analysis__options input {
  width: 56%;
  min-width: 100px;
}

.pool-water-analysis__label {
  min-width: 160px;
}

.pool-water-analysis__label--required::after {
  content: "*";
  color: var(--color--alert);
}

.pool-water-analysis input[type="range"] {
  width: 100%;
}

.pool-water-analysis__form .input__error {
  max-width: 136px;
  font-size: 1rem;
  display: none;
}

.pool-water-analysis__form .pool-water-analysis__volume-container .input__error {
  max-width: 192px;
}

.pool-water-analysis__form  .error-show {
  display: block;
}

.pool-water-analysis__form .pool-water-analysis__volume-container .input__error .error-message{
  display: none;
}

.pool-water-analysis__form .pool-water-analysis__volume-container .input__error .msg-show{
  display: inline;
}

.pool-water-analysis__volume-container {
  display: flex;
  align-items: baseline;
}

input.pool-water-analysis__volume {
  width: 200px;
}

.pool-water-analysis__volume-unit {
  max-width: 250px;
}

.input.jq-pool-water-analysis__amount {
  max-width: 100px;
}

.pool-water-analysis__algae-cloudy {
  display: flex;
  justify-content: center;
}

.pool-water-analysis__calculate {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 1 16%;
}

.pool-water-analysis__disclaimer p {
  max-width: none;
}

.pool-water-analysis__email-print {
  display: flex;
  justify-content: center;
}

.pool-water-analysis__profile-unit {
  max-width: 460px;
  width: 100%;
}

/********* Treatment Plan *******/

.pool-water-analysis__treatment-plan__header {
  display: flex;
  align-items: center;
}

.pool-water-analysis__treatment-plan__header-left {
  margin-right: 24px;
}

.pool-water-analysis__treatment-plan__header-right {
  border: 1px solid var(--color--dark-gray);
  border-radius: 15px;
  flex: 0 0 60%;
}

.pool-water-analysis__treatment-plan {
  background: #fafafa;
  width: 100%;
  height: 600px;
  padding: 8px;
  overflow-y: auto;
}

.pool-water-analysis__treatment-plan--empty {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pool-water-analysis__recommendation {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  margin: 16px auto;
  padding: 8px;
}

.pool-water-analysis__recommendation:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.pool-water-analysis__recommendation .recommendation-title {
  padding: 8px;
  border-bottom: 1px solid var(--color--medium-gray);
}

.pool-water-analysis__treatment-plan__snapshot {
  display: flex;
}

.pool-water-analysis__treatment-plan__snapshot-block {
  flex: 0 0 24%;
  text-align: center;
  border-left: 1px dashed var(--color--black);
  padding: 8px;
}

.pool-water-analysis__treatment-plan__snapshot-block:first-child {
  border-left: none;
}

.pool-water-analysis__treatment-plan__value {
  font-size: 3.8rem;
  font-weight: 300;
}

.snapshot-bottom {
  padding-top: 16px;
}

.snapshot-bottom .pool-water-analysis__treatment-plan__snapshot-block {
  flex: 0 0 15%;
}

.snapshot-bottom .pool-water-analysis__treatment-plan__value {
  font-size: 2.8rem;
}

.pool-water-analysis__treatment-plan__step-title {
  display: flex;
  align-items: middle;
}

.pool-water-analysis__treatment-plan__step-title h3 {
  color: var(--color--brand);
  font-size: 7rem;
  font-weight: 400;
  line-height: 0.6;
}

.pool-water-analysis__treatment-plan__step-header p {
  max-width: none;
}

.product-detail__image {
  margin-right: 16px;
}

.product-detail__image img {
  width: 175px;
}

.product-detail__info {
  padding-right: 16px;
  flex: 0 1 100%;
  min-width: 226px;
}

.product-detail__product-name {
  margin: 16px 0;
}

.product-detail__price-box-quantity {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.product-detail {
  display: flex;
  padding: 8px;
  background-color: var(--color--white);
}

.product-detail__actions {
  display: flex;
  flex: 0 1 60%;
  border: 1px solid var(--color--medium-gray);
  position: relative;
  align-items: center;
  flex-wrap: nowrap;
}

.product-detail__actions:after,
.product-detail__actions:before {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.product-detail__actions:after {
  border-color: rgba(255, 255, 255, 0);
  border-left-color: var(--color--white);
  border-width: 15px;
  margin-top: -15px;
}

.product-detail__actions:before {
  border-color: rgba(204, 204, 204, 0);
  border-left-color: var(--color--medium-gray);
  border-width: 16px;
  margin-top: -16px;
}

.product-detail__list-quote-btns .btn {
  width: 100%;
}

.product-detail__notes {
  display: flex;
  flex-direction: column;
  flex: 0 1 32%;
  background-color: var(--color--brand-light);
  border: 1px solid var(--color--medium-gray);
  border-left: none;
  padding: 16px 24px;
}

.notes__label {
  margin: 8px 0;
}

.notes__entry {
  display: flex;
  border-bottom: 1px solid var(--color--medium-gray);
  padding: 8px 0;
}

.notes__entry:last-child {
  border-bottom: none;
}

.notes__entry > svg {
  margin-right: 8px;
  height: 40px;
  width: 40px;
}

.pool-water-analysis__or {
  line-height: 1em;
  position: relative;
  outline: 0;
  border: 0;
  color: black;
  text-align: center;
  height: 1.5em;
  width: 55%;
}

.pool-water-analysis__or::before {
  content: "";
  background: var(--color--black);
  position: absolute;
  left: 10%;
  top: 50%;
  width: 100%;
  height: 2px;
}

.pool-water-analysis__or::after {
  content: attr(data-content);
  position: relative;
  display: inline-block;
  color: black;
  padding: 0 0.5em;
  line-height: 1.5em;
  background-color: var(--color--white);
  font-weight: bold;
}

.pool-water-analysis__capitalize {
	text-transform: capitalize;
}

@media (max-width: 1300px) {
  .product-detail__notes {
    flex: 0 1 25%;
  }

  .snapshot-bottom .pool-water-analysis__treatment-plan__snapshot-block {
    flex: 0 0 10%;
  }
}


@media (max-width: 1024px) {
  .pool-water-analysis__volume-container {
    flex-wrap: wrap;
  }

  .pool-water-analysis__label {
    width: 100%;
    font-size: 1.4rem;
  }

  .pool-water-analysis__treatment-plan-container {
    max-width: 100%;
    margin-top: 16px;
  }

  .snapshot-bottom .pool-water-analysis__treatment-plan__snapshot-block {
    flex: 0 0 13%;
  }

  .pool-water-analysis__options td:last-of-type {
    display: none;
  }

	.pool-water-analysis__login-message {
    padding-bottom: 24px;
    border-bottom: 1px dashed var(--color--black);
	}

  .product-detail,
  .product-detail__actions {
    display: flex;
    flex-direction: column;
  }

  .product-detail__actions:after,
  .product-detail__actions:before {
    top: calc(100% + 16px);
    left: 46%;
  }

  .product-detail__actions:after {
    border-color: rgba(255, 255, 255, 0);
    border-top-color: var(--color--white);
    border-width: 16px;
    margin-top: -16px;
  }

  .product-detail__actions:before {
    border-color: rgba(204, 204, 204, 0);
    border-top-color: var(--color--medium-gray);
    border-width: 16px;
    margin-top: -15px;
  }

  .product-detail__buttons {
    min-width: 60%;
  }

  .product-detail__list-quote-btns {
    display: flex;
    justify-content: space-between;
  }

  .product-detail__list-quote-btns .pool-water-analysis__add-to-list {
    margin-right: 8px;
  }
  
}

@media (max-width: 767px) {
  .pool-water-analysis__treatment-plan__header {
    flex-direction: column;
  }

  .pool-water-analysis__treatment-plan__header-right,
  .pool-water-analysis__treatment-plan__header-left {
    margin: 16px 0;
    padding: 8px 0; 
  }

  .pool-water-analysis__form .pool-water-analysis__volume-container .input__error {
    max-width: 100%;
  }
  
  .pool-water-analysis__login-message a {
    font-size: 1.4rem;
  }
  
  .pool-water-analysis__disclaimer {
    font-size: 1.3rem;
  }
  
  .pool-water-analysis__profile-unit {
    max-width: none;
    width: 100%;
  }
  .snapshot-bottom .pool-water-analysis__treatment-plan__value {
    font-size: 1.5em;
  }

  .snapshot-bottom .pool-water-analysis__treatment-plan__snapshot-block {
    flex: 0 0 8%;
  }

  .pool-water-analysis__options {
    flex-direction: column;
  }

  .pool-water-analysis__volume-container label,
  .pool-water-analysis__volume-container input {
    width: 100%;
  }

  .pool-water-analysis__volume-unit {
    max-width: none;
    width: 100%;
  }

  .pool-water-analysis__options input {
    width: 100%;
  }

  .pool-water-analysis__calculate {
    flex: 0 0 80%;
    flex-direction: column-reverse;
  }
  
  .pool-water-analysis__calculate button{
    width: 100%;
  }
  
  .pool-water-analysis__calculate form{
    flex-direction: column-reverse;
    display: flex;
  }

  .pool-water-analysis__add-all {
    flex: 0 0 80%;
    display: flex;
    justify-content: center;
    flex-direction: column-reverse;
  }
  
  .pool-water-analysis__add-all form{
    flex-direction: column-reverse;
    display: flex;
  }

  .pool-water-analysis__save-test-results {
    margin-right: 0;
  }

  .pool-water-test-calculate {
    flex: 0 1 80%;
  }

  .pool-water-analysis__treatment-plan__header-right {
    display: none;
  }

  .pool-water-analysis__form .input__error {
    max-width: none;
    font-size: 1.3rem;
  }

  .pool-water-analysis__options label {
    margin-top: 16px;
  }

  .pool-water-analysis__treatment-plan__content {
    margin: 32px 0;
  }

  .pool-water-analysis__treatment-plan__step-title h3 {
    line-height: 0.3;
  }

  .product-detail__buttons {
    min-width: 0;
    width: 100%;
    margin-bottom: 16px
  }

  .product-detail__list-quote-btns  {
    display: flex;
    justify-content: space-between;
  }

  .product-detail__list-quote-btns .btn--small{
    padding: 1.5px 16px;
  }

  .product-detail__list-quote-btns .pool-water-analysis__add-to-list {
    margin-right: 8px;
  }

  .product-detail__price-box-quantity {
    flex-direction: column;
    align-items: flex-start;
  }

  .pool-water-analysis__or::before {
    left: 10%;
    width: 80%;
  }

  .product-detail__image {
    margin-right: 0px;
  }

  .product-detail__notes {
    font-size: 1.4rem;
    border-left: 1px solid var(--color--medium-gray);
  }
}
.pool-profile-results .pool-profile-results__title-container {
  display: flex;
  flex-direction: column;
  margin-top: 16px; 
}
.pool-profile-results .pool-profile-results__title-container .email-print {
  align-self: flex-end;
  z-index: 10;
}
.pool-profile-results .pool-profile-results__title-container .email-print svg {
  display: inline-block;
}
.pool-profile-results .widget-wrapper__header {
  margin-top: -48px;
}
.pool-profile-results .pool-profile-results__scrollable-content {
  overflow-x: hidden;
}
.pool-profile-results .pool-profile-results__summary-container {
  display: flex;
  flex-direction: column;
}
.pool-profile-results .pool-profile-results__filter-profile-results {
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.pool-profile-results .pool-profile-results__filter-profile-results .select-profile-field select {
    width: 300px;
    padding-right: 50px;
}

.pool-profile-results .pool-profile-results__total-profiles {
  align-self: center;
  margin-top: 24px;
  white-space: nowrap;
}
.pool-profile-results .pool-profile-results__default-pool-settings {
  display: flex;
  padding: 8px 24px;
  border-top: 1px solid var(--color--light-gray);
  border-bottom: 1px solid var(--color--light-gray);
}
.pool-profile-results .pool-profile-results__default-pool-values {
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.pool-profile-results__default-pool-values div {
  margin-right: 16px;
  white-space: nowrap;
}
.pool-profile-results .pool-profile-results__default-pool-settings div span{
  font-weight: 700; 
}
.pool-profile-results .col-full-width {
  width: 100%;
  background: var(--color--white);
  padding-top: 16px;
  margin-bottom: 8px;
  overflow: hidden;
  height: 40px;
  padding-right: 8px;
  text-overflow: ellipsis;
}
.pool-profile-results td.pool-tester-name {
  overflow: hidden;
  max-width: 208px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pool-profile-results .col-full-width.table-action {
  font-weight: normal;
  padding-bottom: 8px;
  position: relative;
}
.pool-profile-results .col-full-width.table-action .icon {
  position: absolute;
  right: 16px;
  margin-top: 4px;
}
.pool-profile-results .pool-profile-results__table-container {
	height: 390px;
  overflow-y: scroll;
  border-bottom: 2px solid var(--color--medium-gray);
  overflow-x: visible;
}
.pool-profile-results .pool-profile-results__table-container table th, .pool-profile-results .pool-profile-results__table-container table td {
  white-space: nowrap;
}
.pool-profile-results .pool-profile-results__pagination-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 0;
}
.pool-profile-results__pagination-container .pagination {
  padding: 24px 0 0;
}
.pool-profile-results .pool-profile-results__pagination-container a.jq-list-add--new-test-profile {
  left: 0;
  position: absolute;
  margin-top: 16px;
}
.pool-profile-results .date-field-container__calendar {
  display: flex;
  align-items: center;
}

.pool-profile-results .date-field-container__calendar .icon {
  margin-right: 8px;
}

.pool-profile-results .date-field-container__dates {
  display: flex;
  position: relative;
  border: 1px solid var(--color--dark-gray);
  border-radius: 8px;
}

.pool-profile-results .date-field-container__dates input {
  max-width: 130px;
  border: none;
  border-radius: 8px;
}

.pool-profile-results .date-field-container__dates--range-text {
  display: flex;
  align-items: center;
  padding: 0 8px;
  background-color: var(--color--light-gray);
  border: none;
  border-left: 1px solid var(--color--dark-gray);
  border-right: 1px solid var(--color--dark-gray);
}
.pool-profile-results .table--sortable th.table-sort-down, .pool-profile-results .table--sortable th.table-sort-up {
  border-bottom: 2px solid var(--color--brand);
  padding: 0;
}
@media (max-width:767px) {

  .pool-profile-results .pool-profile-results__title-container {
    margin-top: 0px;
  }
  .pool-profile-results .pool-profile-results__title-container h1 {
    margin-top: 8px;
    display: block;
  }
  .pool-profile-results .pool-profile-results__title-container .email-print svg {
    display: block;
  }
  .pool-profile-results .pool-profile-results__scrollable-content {
    overflow-x: hidden;
  }
  .pool-profile-results .pool-profile-results__filter-profile-results {
    flex-direction: column;
    align-items: center;
  }
  .pool-profile-results .pool-profile-results__filter-profile-results .select-profile-field select {
    width: 100%
  }
  .pool-profile-results .date-field-container__dates input {
    max-width: 120px;
  }
  .pool-profile-results .pool-profile-results__filter-profile-results .select-profile-field {
    margin-right: 0;
    width: 100%;
  }
  .pool-profile-results .date-field-container__calendar {
    margin-right: 0;
  }
  .pool-profile-results .pool-profile-results__default-pool-settings {
    padding: 8px 0;
    flex-direction: column;
  }
  .pool-profile-results .pool-profile-results__default-pool-values {
    margin-top: 8px;
  }
  .pool-profile-results__default-pool-values div {
    white-space: normal;
    margin-right: 0;
  }
  .pool-profile-results .pool-profile-results__table-container {
    margin-top: 16px;
    border-bottom: 0;
    height: auto;
  }
  .pool-profile-results .table--responsive tr {
    border-bottom: 1px solid var(--color--dark-gray);
    margin-bottom: 8px;
    border-top: 1px solid var(--color--dark-gray);
    border-left: none;
    border-right: none;
    background: var(--color--white);
  }
  .pool-profile-results .table--responsive td {
    padding: 4px 0 0;
  }
  .pool-profile-results .table--responsive td.row-grouping {
    border-bottom: 1px solid var(--color--light-gray);
    padding-bottom: 8px;
  }
  .pool-profile-results .table--responsive td:nth-child(-n + 2) {
    background-color: var(--color--white);
  }
  .pool-profile-results .table--responsive span {
    display: inline-flex;
    margin-right: 8px;
  }
  .pool-profile-results .pool-profile-results__pagination-container {
    flex-direction: column-reverse;
    border-top: none;
    margin: 0 0 32px;
  }
  .pool-profile-results .pool-profile-results__pagination-container .pagination{
    width: 100%;
    border-bottom: 1px dashed var(--color--black);
    margin-bottom: 32px;
  }
  .pool-profile-results .pool-profile-results__pagination-container a.jq-list-add--new-test-profile {
    position: relative;
    margin-top: 0;
  }
  .pool-profile-results td.td-table-action {
    flex: 1 1 100%;
    padding-top: 16px;
    display: flex;
    align-items: center;
    border: 0px;
  }
}
.pool-profile-results {
  margin-right: 16px;
}
@media (max-width: 767px) {
  .pool-profile-results {
    margin-right: 0;
  }
}

.list-add__list-title {
  padding-left: 32px;
  border-bottom: 2px solid #000;
  margin-bottom: 8px;
  font-size: 1.4rem;
  font-weight: 700;
  padding-bottom: 8px;
}

.list-add__new-list-title {
  font-size: 1.4rem;
}
.create-new-pool-water-profile input.enter-name--list {
  width: 430px;
}
.create-new-pool-water-profile .input__error {
  max-width: 100%;
  font-size: 1.2rem;
}
.tabs__tab-content .create-new-pool-water-profile  #mobileFloatingFooter {
  height: 130px;
}

.create-new-list .widget-wrapper__header {
  border: 0;
}

.list-add__new-list-pool-settings {
  border-bottom: 2px solid var(--color--light-gray);
  padding: 16px 0;
}

.list-add__new-list-pool-settings-title {
  font-weight: 600;
  font-size: 1.3rem;
}

.list-add__new-list-pool-settings .pool-water-analysis__treatment-plan__snapshot-block:first-child {
  border-left: 1px dashed var(--color--black);
}

.list-add__new-list-pool-settings .pool-water-analysis__treatment-plan__snapshot-block:last-child {
  border-right: 1px dashed var(--color--black);
}
.ui-datepicker {
  width: auto;
  z-index: 1000 !important;
}
.list-add__list .list-add__list-item input[type=radio]{
  position: absolute !important; /* to override global style that sets it as relative, which keeps default radio element as opposed to radio design */
}

@media (max-width:767px) {
  .list-add__new-list-title {
    font-size: 1.2rem;
  }
  .list-add__new-list-pool-settings .pool-water-analysis__treatment-plan__snapshot-block {
    flex: 0 0 50%;
  }
    .create-new-list .widget-wrapper__header {
  font-size: 1.2rem;
  }
  .modal--overflow.my-account__new-profile-modal{
		overflow: auto !important;
		overflow-y: auto !important;
	}
}

/* For desktop IE11 that is defaulting to the mobile media query thus hiding the buttons. */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .create-new-pool-water-profile .list-create .jq-list-add--cancel, .create-new-pool-water-profile .list-create .jq-list-add--create, #saveResultsToProfile {
    display: inline-block !important; 
  }
  .pool-profile-results .date-field-container__dates input {
    padding: 10px 4px;
  }
  .pool-profile-results .date-field-container__dates--range-text {
    width: 40px;
  }
  .pool-profile-results .pool-profile-results__pagination-container a.jq-list-add--new-test-profile {
    margin-top: 0;
  }
}

/* Pool profile calendar */
.ui-datepicker {
	border: 0;
}
.ui-datepicker .ui-datepicker-header {
	border: 1px solid #ccc;
  border-bottom: 0;
}
.ui-datepicker .ui-datepicker-calendar {
	border: 1px solid #ccc;
  border-top: 0;
}
.ui-datepicker tbody tr:nth-child(even) {
	background: #fff;
}
.ui-datepicker .ui-datepicker-title {
	background-color: #eeeeee;
  font-size: 15px;
  color: #000;
}
.ui-datepicker .ui-datepicker-prev {
	background-position: -13px 3px;
}
.ui-datepicker .ui-datepicker-next {
  background-position: -38px 3px;
}
.ui-datepicker tbody .ui-datepicker-current-day {
	border-radius: 9.4px;
  background-color: #4c70bc;
  display: flex;
  justify-content: center;
  padding: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.ui-datepicker tbody td a:hover {
	background-color: #4c70bc;
	color: #fff;
}
.ui-datepicker tbody .ui-datepicker-current-day .ui-state-active {
	color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.ui-datepicker tbody .ui-datepicker-today {
	background: none !important;
}
.ui-datepicker tbody .ui-datepicker-today a {
	position: relative;
  color: var(--color--soft-black);
  font-weight: 500;
}
.ui-datepicker tbody .ui-datepicker-today a::after {
	content: ".";
  color: #4c70bc;
  font-size: 30px;
  left: 5px;
  position: absolute;
  top: -10px;
}
.ui-datepicker tbody .ui-datepicker-today.ui-datepicker-current-day a.ui-state-active {
	color: #fff;
  font-weight: 500;
}
.ui-datepicker tbody .ui-datepicker-current-day{
  border-radius: 9.4px;
  background-color: #4c70bc;
  display: flex;
  justify-content: center;
  padding: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.ui-datepicker tbody .ui-datepicker-today.ui-datepicker-current-day {
	border-radius: 9.4px;
  background-color: #4c70bc !important;
  display: flex;
  justify-content: center;
  padding: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.ui-datepicker tbody .ui-datepicker-today.ui-datepicker-current-day a{
	color: #fff;
}
/* End pool profile calendar */