/* Popup rebate widgets are page-level styles; all other common CSS is loaded by _Layout.cshtml. */
@import "rebates.css";

/* Shared contact-lens color values. Unmapped swatches use the neutral fallback. */
.select_color .swatch {
  &.accent,
  &.naturalsparkle {
    --lens-swatch-color: #b7d9d6;
  }

  &.amethyst {
    --lens-swatch-color: #9258a4;
  }

  &.aqua {
    --lens-swatch-color: #517a75;
  }

  &.blue {
    --lens-swatch-color: #1a5b9f;
  }

  &.bluetopaz {
    --lens-swatch-color: #467089;
  }

  &.brilliantblue {
    --lens-swatch-color: #0292cb;
  }

  &.brown {
    --lens-swatch-color: #76281d;
  }

  &.caribbeanaqua {
    --lens-swatch-color: #208275;
  }

  &.gemstonegreen {
    --lens-swatch-color: #277546;
  }

  &.green {
    --lens-swatch-color: #4c664d;
  }

  &.grey {
    --lens-swatch-color: #6c585b;
  }

  &.hazel {
    --lens-swatch-color: #64353b;
  }

  &.honey {
    --lens-swatch-color: #852a00;
  }

  &.jadegreen {
    --lens-swatch-color: #663;
  }

  &.naturalshimmer {
    --lens-swatch-color: #986429;
  }

  &.naturalshine,
  &.vivid {
    --lens-swatch-color: #996536;
  }

  &.pacificblue {
    --lens-swatch-color: #2f88b4;
  }

  &.purehazel {
    --lens-swatch-color: #d85e2b;
  }

  &.seagreen {
    --lens-swatch-color: #197f29;
  }

  &.sterlinggrey {
    --lens-swatch-color: #7e9399;
  }

  &.truesapphire {
    --lens-swatch-color: #3785ac;
  }

  &.turquoise {
    --lens-swatch-color: #50b0ac;
  }

  &.violet {
    --lens-swatch-color: #474c74;
  }
}

.moneyback {
  .bluebox {
    .cornerseal {
      padding: 20px 0 0 25px;

      #satisfaction {
        .fa-stack {
          .fa-money-bill {
            color: var(--bright_blue);
            font-size: 50px;
          }

          .fa-badge-check {
            bottom: -8px;
            color: var(--yellow);
            font-size: 35px;
            line-height: 35px;
            position: absolute;
            right: -7px;
          }
        }
      }
    }
  }
}

#autorefill_terms_popup {
  h1 {
    margin: 0 0 20px;
  }

  p {
    text-align: left;
  }

  .btn.ghost {
    border: 1px solid var(--blue);
    cursor: pointer;
    font-size: 18px;
    height: 40px;
    line-height: 40px;
    margin: 30px auto 0;
    padding: 0 40px;

    &:hover {
      background: var(--grey-3);
    }
  }
}

html {
  &.popup {
    background: var(--white);

    body {
      background: none;
    }
  }
}

.fancy,
.fancybadges,
.fancyframe {
  color: var(--link);
  cursor: pointer;
  text-decoration: underline;

  &:hover {
    color: var(--link_hover);
  }
}

#overlay-lightbox {
  background: var(--black);
  height: 100%;
  inset: 0 auto auto 0;
  opacity: 0.6;
  position: absolute;
  width: 100%;
  z-index: 999;
}

#body {
  .loading {
    left: 0;
    margin: 0 auto;
    position: absolute;
    text-align: center;
    top: 150px;
    width: 100%;
    z-index: 999;

    img {
      background: var(--white);
      border: 1px solid var(--black);
      padding: 5px;
    }
  }
}

#lightboxpopup {
  height: 100%;
  left: 0;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 999;

  &.loading {
    img {
      background: var(--white);
      border: 5px solid var(--white);
      padding: 0;
    }
  }

  #overlay-lightbox {
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 999;
  }

  #loadingimg {
    border: 10px solid var(--black);
    height: 25px;
    left: 50%;
    margin: -14px 0 0 -69px;
    position: fixed;
    top: 50%;
    width: 138px;
    z-index: 9999;
  }
}

#fancybox-tmp {
  border: 0;
  display: none;
  margin: 0;
  overflow: auto;
  padding: 0;
}

#fancybox-loading {
  cursor: pointer;
  display: none;
  height: 40px;
  left: 50%;
  margin: -20px 0 0 -20px;
  overflow: hidden;
  position: fixed;
  top: 50%;
  width: 40px;
  z-index: 1104;

  div {
    background-image: url("/PublicCommon/include/js/fancybox/fancybox.png");
    height: 480px;
    left: 0;
    position: absolute;
    top: 0;
    width: 40px;
  }
}

#fancybox-overlay {
  background: var(--black);
  display: none;
  inset: 0;
  position: fixed;
  z-index: 1100;
}

#fancybox-wrap {
  display: none;
  left: 50% !important;
  margin: 0;
  max-width: 800px;
  padding: 0;
  position: absolute;
  top: 0;
  transform: translateX(-50%) !important;
  width: 100% !important;
  z-index: 1101;

  @media only screen and (max-width: 863px) {
    max-width: 450px;
  }

  @media only screen and (max-width: 480px) {
    max-width: 280px;
  }
}

#fancybox-outer {
  background: var(--white);
  border: none !important;
  height: 100%;
  position: relative;
  width: 100%;
}

#fancybox-close {
  background: none;
  color: #676767;
  cursor: pointer;
  display: inline-block;
  font-family: "Font Awesome 6 Pro";
  font-size: 20px;
  font-weight: bold;
  height: 30px;
  line-height: 30px;
  position: absolute;
  right: 0;
  text-align: center;
  text-decoration: none;
  text-rendering: auto;
  top: 0;
  width: 30px;
  z-index: 1103;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  &::before {
    content: "\f00d";
  }

  &:hover {
    color: var(--grey3);
  }

  &.reddot {
    background: url("/images/email/btn.close.png") 0 0 no-repeat;
    height: 41px;
    right: 14px;
    top: -240px;
    width: 106px;
  }

  @media only screen and (max-width: 767px), screen and (max-height: 660px) {
    &.reddot {
      top: -120px;
    }
  }
}

#fancybox_error {
  color: #444;
  font: normal 12px/20px Arial;
  margin: 0;
  padding: 7px;
}

#fancybox-content {
  height: auto;
  margin: 0;
  padding: 0;
  width: auto;
}

#fancybox-hide-sel-frame {
  background: transparent;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

#fancybox-img {
  border: 0;
  height: 100%;
  line-height: 0;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: top;
  width: 100%;
}

#fancybox-frame {
  border: 0;
  display: block;
  height: 100%;
  position: relative;
  width: 100%;
}

#fancybox-title {
  bottom: 0;
  font-family: Arial, sans-serif;
  font-size: 12px;
  left: 0;
  position: absolute;
  z-index: 1102;
}

.fancybox-title-inside {
  color: var(--dark-grey);
  padding: 10px 0;
  text-align: center;
}

.fancybox-title-outside {
  color: var(--white);
  font-weight: bold;
  padding-top: 5px;
  text-align: center;
}

.fancybox-title-over {
  color: var(--white);
  text-align: left;
}

#fancybox-title-over {
  background-image: url("/PublicCommon/include/js/fancybox/fancy_title_over.png");
  display: block;
  padding: 10px;
}

#fancybox-title-wrap {
  display: inline-block;

  span {
    float: left;
    height: 32px;
  }
}

#fancybox-title-left {
  background-image: url("/PublicCommon/include/js/fancybox/fancybox.png");
  background-position: -40px -90px;
  background-repeat: no-repeat;
  padding-left: 15px;
}

#fancybox-title-main {
  background-image: none;
  background-position: 0 -40px;
  color: var(--white);
  font-weight: bold;
  line-height: 29px;
}

#fancybox-title-right {
  background-image: url("/PublicCommon/include/js/fancybox/fancybox.png");
  background-position: -55px -90px;
  background-repeat: no-repeat;
  padding-left: 15px;
}

#fancybox-left,
#fancybox-right {
  background-image: url("/PublicCommon/include/js/fancybox/blank.gif");
  bottom: 0;
  cursor: pointer;
  display: none;
  height: 100%;
  outline: 0;
  position: absolute;
  width: 35%;
  z-index: 1102;

  &:hover {
    visibility: visible;
  }
}

#fancybox-left {
  left: 0;

  &:hover span {
    left: 20px;
  }
}

#fancybox-right {
  right: 0;

  &:hover span {
    left: auto;
    right: 20px;
  }
}

.fancy-bg {
  border: 0;
  height: 20px;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 20px;
  z-index: 1001;
}

#fancy-bg-n {
  background-image: none;
  left: 0;
  top: -20px;
  width: 100%;
}

#fancy-bg-ne {
  background-image: url("/PublicCommon/include/js/fancybox/fancybox.png");
  background-position: -40px -162px;
  right: -20px;
  top: -20px;
}

#fancy-bg-e {
  background-image: none;
  background-position: -20px 0;
  height: 100%;
  right: -20px;
  top: 0;
}

#fancy-bg-se {
  background-image: url("/PublicCommon/include/js/fancybox/fancybox.png");
  background-position: -40px -182px;
  bottom: -20px;
  right: -20px;
}

#fancy-bg-s {
  background-image: none;
  background-position: 0 -20px;
  bottom: -20px;
  left: 0;
  width: 100%;
}

#fancy-bg-sw {
  background-image: url("/PublicCommon/include/js/fancybox/fancybox.png");
  background-position: -40px -142px;
  bottom: -20px;
  left: -20px;
}

#fancy-bg-w {
  background-image: none;
  height: 100%;
  left: -20px;
  top: 0;
}

#fancy-bg-nw {
  background-image: url("/PublicCommon/include/js/fancybox/fancybox.png");
  background-position: -40px -122px;
  left: -20px;
  top: -20px;
}

#fancybox-inner {
  background: var(--white);
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  padding: 0;
  margin: 0;
  outline: 0;
  overflow-y: scroll !important;
  width: 97% !important;
  @media only screen and (max-width: 480px) {
    width: 94% !important;
  }
  #content {
    #body {
      min-height: 0;
    }
  }
  .black {
    color: var(--grey3);
  }
  .needhelp {
    border-top: 1px solid var(--grey-1);
    margin: 10px 0 0 0;
    padding: 10px 0 0 0;
    text-align: center;
  }
  #intro,
  .callout,
  h2 {
    text-align: left;
  }
  p {
    margin: 0 0 10px 0;
  }
  #passwordtips {
    text-align: left;
  }
  h2 {
    .arrow {
      background: url("/images/icons/h1.bg.png") 0 1px no-repeat;
      line-height: 26px;
      padding: 0 0 0 25px;
    }
  }

  #two-column {
    width: 100%;
    overflow: hidden;
    .leftcontent {
      width: 60%;
      float: left;
      text-align: left;
      .form {
        margin: -4px 0 10px -4px;
      }
      .newaccount {
        cursor: pointer;
        line-height: 26px;
      }
    }
    .rightcontent {
      border-left: 1px dotted var(--grey);
      width: 36%;
      float: right;
      padding: 0 0 220px 2%;
      margin: 0 0 -200px 0;
      .badges {
        width: 100%;
        margin: 0;
        text-align: left;
        h4 {
          background: url("/commonimages/icons/ico.secure.gif") 10px 2px
            no-repeat var(--grey-2);
          padding: 4px 4px 4px 34px;
          color: var(--grey3);
          font-size: 12px;
          margin: 0 0 15px 0;
        }
        .mcafee,
        .verisign {
          margin: 0 0 15px 0;
        }
        .mcafee {
          border-bottom: 1px dotted var(--grey);
          padding: 0 0 15px 0;
          a {
            margin: 0 20px 10px 0;
          }
        }
        p {
          margin: 0;
        }
        a {
          display: block;
          float: left;
          margin: 0 13px 10px 0;
          padding: 0;
        }
      }
    }
  }
  .smsdisclaimer {
    width: 100%;
    max-width: 500px;
    h1 {
      line-height: 30px;
    }
    p {
      font-size: 11px;
    }
  }
  .update-rx {
    @media only screen and (max-width: 863px) {
      padding: 30px 10px;
    }
    span {
      font-weight: normal;
      &.single_variation {
        display: block;
        margin: 9px 0 6px 0;
      }
    }
    .product-display {
      width: 300px;
      @media only screen and (max-width: 863px) {
        display: none;
      }
    }
    #product-image {
      position: relative;
      text-align: center;
      width: 100%;
      height: auto;
      #productimage {
        height: 159px;
      }
      #overlay {
        background: url("/images/product/overlay.png") top left no-repeat;
        height: 70px;
        position: absolute;
        right: 0;
        top: 0;
        width: 70px;
      }
      #overlaydiscontinued {
        color: var(--red);
        font-size: 19px;
        font-weight: bold;
        position: absolute;
        right: 0;
        text-shadow: 1px 1px 1px var(--grey1);
        text-transform: uppercase;
        top: 15px;
        transform: rotate(20deg);
        width: 170px;

        span {
          color: var(--dark-grey);
          display: block;
          font-size: 14px;
          text-transform: none;
        }
      }
      .fancy {
        text-decoration: none;
        line-height: 12px;
      }
      img {
        margin: 0;
        border: 0;
        height: auto;
        width: auto;
        max-height: 156px;
        max-width: 100%;
      }
      .colors {
        background: var(--grey-2);
        border: 1px solid var(--grey-1);
        padding: 5px;
        text-align: left;
        height: 42px;
        img {
          height: 24px;
          width: 24px;
          float: right;
          margin: 0;
        }
        select {
          width: 205px;
          float: left;
        }
      }
      .quantityCount {
        background: url("/images/design/bg.pkoverlay.gif") center top no-repeat;
        color: var(--white);
        margin: 15px 0 0 -31px;
        line-height: 15px;
        left: 50%;
        padding: 0;
        position: absolute;
        text-align: center;
        width: 62px;
        font-size: 12px;
        height: 24px;
      }
      &.rebate {
        float: right;
        position: relative;
        text-align: right;
        width: 242px;
      }
      &.halloween {
        width: 225px !important;
      }
    }
    #productimage {
      text-align: center;
      width: 100%;
      span,
      a {
        text-decoration: none;
      }
      img {
        margin: 0 auto;
        border: 0;
      }
    }
    #product-information {
      float: left;
      max-width: 500px;
      @media only screen and (max-width: 863px) {
        float: none;
      }
      h1 {
        background: none;
        color: var(--text1);
        font-size: 28px;
        font-weight: normal;
        line-height: 30px;
        padding: 0;
        text-align: left;
        @media only screen and (max-width: 863px) {
          text-align: center;
        }
      }
    }
    ul#pricing-details {
      list-style: none;
      margin: 0;
      line-height: 20px;
      text-align: left;
      @media only screen and (max-width: 863px) {
        display: none;
      }
      li {
        background: var(--white);
        border-radius: 0;
        float: left;
        height: 100px;
        min-width: 150px;
        width: auto;
        margin: 0 10px 0 0;
        padding: 0;
        &.active {
          background: #f8fbfe;
          border: 1px solid var(--red);
        }
        .radio {
          display: block;
          font-size: 18px;
          font-weight: normal;
          letter-spacing: -0.03em;
          line-height: 22px;
        }
        .pack {
          display: block;
          font-size: 18px;
          line-height: 22px;
          margin: 0 0 5px 0;
          .number {
            font-size: 24px;
          }
        }
        .supply {
          display: block;
          font-size: 14px;
          line-height: 22px;
        }
        .price {
          font-size: 20px;
          font-weight: normal;
          line-height: 30px;
          float: none;
        }
        .info {
          line-height: 20px;
          strong {
            display: inline;
            font-weight: bold;
          }
        }
        #buymore-widget {
          background: var(--white);
          border: 1px solid #a6a6a6;
          float: left;
          height: auto;
          margin: 0 0 0 35px;
          width: 210px;
          .header {
            background: var(--red);
            color: var(--white);
            height: 28px;
            font-family: "Arial";
            font-size: 17px;
            font-weight: bold;
            letter-spacing: -1px;
            padding: 3px 10px;
            line-height: 26px;
            text-align: center;
            text-transform: uppercase;
            text-indent: 0;
            width: auto;
            .buy {
              font-weight: bold;
              padding: 0 4px 0 0;
            }
          }
          .information {
            background: var(--white);
            font-family: verdana;
            font-size: 13px;
            padding: 8px 12px;
            text-align: left;
            width: auto;
          }
          .bmsmcontents {
            .bmsmprice {
              display: block;
              strong {
                color: var(--red);
                font-size: 20px;
                font-weight: normal;
                width: auto;
              }
            }
            .bmsminfo {
              display: block;
              margin-top: 3px;
              strong {
                width: auto;
              }
            }
          }
        }
      }
    }

    #prescription {
      margin: 0;
      width: 100%;
      text-align: left;
      &.reorder {
        margin: 0 0 10px 0;
      }
      h2 {
        &.enterrx {
          float: left;
          margin: 0 20px 0 0;
          max-width: 525px;
          span {
            font-size: 75%;
          }
        }
        &.updaterx {
          display: none;
          margin: 0;
          font-size: 16px;
          span {
            font-size: 75%;
          }
        }
      }
      .lens-variations {
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        @media only screen and (max-width: 863px) {
          display: flex;
          flex-direction: row;
        }
        &#ShowAddGP {
          width: auto;
          thead,
          tbody {
            tr {
              width: calc(50% - 5px);
              th,
              td {
                height: 50px;
              }
            }
          }
        }
        tr {
          @media only screen and (max-width: 863px) {
            display: flex;
            flex-direction: column;
          }
          th,
          td {
            background: none;
            border: none;
            padding: 0 6px;
            vertical-align: middle;
            @media only screen and (max-width: 863px) {
              border: none !important;
              box-sizing: border-box;
              display: flex;
              align-items: center;
              width: 100%;
              line-height: 40px;
              height: 40px;
              padding: 0 5px;
              &.price {
                display: none;
              }
            }
          }
          th {
            font-weight: bold;
            text-align: left;
          }
        }
        thead {
          @media only screen and (max-width: 863px) {
            min-width: 90px;
            width: 30%;
          }
          tr {
            @media only screen and (max-width: 863px) {
              display: flex;
              flex-direction: column;
            }
            th {
              font-size: 14px;
              font-weight: bold;
              text-align: center;
              padding: 0 10px;
              line-height: 20px;
              @media only screen and (max-width: 863px) {
                text-align: left;
              }
              &.price {
                width: 100px;
                small,
                .mini {
                  display: block;
                  font-size: 9px;
                  font-weight: normal;
                  line-height: 12px;
                }
                small {
                  &#after-rebate {
                    display: none;
                  }
                }
              }
              &#add_header_soper_cone_flange_radiusright,
              &#add_header_soper_cone_flange_radiusleft {
                width: 110px;
              }
            }
          }
        }
        tbody {
          @media only screen and (max-width: 863px) {
            display: flex;
            flex-direction: row;
            width: 70%;
          }
          tr {
            @media only screen and (max-width: 863px) {
              th,
              td {
                text-align: center;
              }
            }
            th {
              padding: 4px 4px;
              text-align: left;
              &.eye {
                border-right: 1px solid var(--grey);
                min-width: 110px;
                text-align: right;
                padding: 10px 10px 10px 0;
                @media only screen and (max-width: 863px) {
                  text-align: center;
                }
              }
            }
            td {
              background: none;
              border-left: 1px solid var(--grey);
              font-weight: normal;
              line-height: 25px;
              text-align: center;
              padding: 10px;
              select {
                border: 1px solid var(--grey1);
                height: 30px;
                @media only screen and (max-width: 863px) {
                  padding: 0;
                  width: 100%;
                }
                &#Right_Color_Select,
                &#Left_Color_Select {
                  display: none;
                  @media only screen and (max-width: 863px) {
                    display: block;
                  }
                }
              }
              .power-selector {
                height: 22px;
                position: relative;
              }
              .select_color {
                box-sizing: border-box;
                cursor: default;
                font-size: 14px;
                text-align: left;
                position: relative;
                user-select: none;
                @media only screen and (max-width: 863px) {
                  display: none;
                }
                .swatch {
                  background: var(--lens-swatch-color, var(--grey)) !important;
                  float: right;
                  width: 20px;
                  height: 20px;
                }
                .options {
                  background: var(--white);
                  border: 1px solid var(--grey1);
                  box-sizing: border-box;
                  min-width: 100%;
                  display: none;
                  position: absolute;
                  top: 100%;
                  padding: 0;
                  line-height: 20px;
                  z-index: 1001;
                  .option {
                    padding: 2px 35px 2px 5px;
                    margin: 0;
                    white-space: nowrap;
                    z-index: 999;

                    .swatch {
                      float: right;
                      margin: 0 -30px 0 0;
                      width: 20px;
                      height: 20px;
                    }

                    &.selected,
                    &:hover {
                      background: #4285f4;
                      color: var(--white);
                    }
                  }
                }
                .selected_color {
                  background: var(--white);
                  border: 1px solid var(--grey1);
                  box-sizing: border-box;
                  height: 30px;
                  padding: 0 15px 0 5px;
                  line-height: 30px;
                  .color {
                    float: left;
                    width: 100%;
                    .swatch {
                      margin: 4px 0 0 5px;
                    }
                  }
                  .fa {
                    line-height: 30px;
                    float: right;
                    margin: 0 -10px 0 0;
                  }
                }
              }
              .power-selector {
                select {
                  position: relative;
                  z-index: 60;
                }
                .select {
                  background: transparent;
                  border: none;
                  display: none;
                  color: var(--black);
                  width: 62px;
                  height: 20px;
                  position: absolute;
                  top: -1px;
                  left: 0;
                  z-index: 90;
                  cursor: pointer;
                }
                .selector {
                  background: var(--white);
                  border: 1px solid var(--grey-10);
                  color: var(--black);
                  width: 62px;
                  height: 20px;
                  font:
                    normal 12px/20px Arial,
                    Helvetica,
                    sans-serif;
                  .label {
                    float: left;
                    height: 20px;
                    width: 45px;
                    text-align: center;
                  }
                  .arrow {
                    background: var(--grey-2);
                    border: 1px solid var(--grey2);
                    float: right;
                    height: 18px;
                    width: 15px;
                    text-align: center;
                  }
                }
                .power-list {
                  background: var(--white);
                  border: 1px solid var(--grey);
                  width: 115px;
                  padding: 5px;
                  height: 300px;
                  overflow-x: hidden;
                  overflow-y: scroll;
                  box-shadow: 0 0 10px var(--grey);
                  position: absolute;
                  top: 20px;
                  left: 0;
                  z-index: 95;
                  ul {
                    list-style: none;
                    margin: 0;
                    padding: 0;
                    li {
                      line-height: 20px;
                      height: 20px;
                      font-weight: normal;
                      .plano {
                        display: block;
                        line-height: 20px;
                        height: 20px;
                        width: 98px;
                        text-align: center;
                        em {
                          font-style: italic;
                        }
                        &:hover {
                          background: var(--red);
                          color: var(--white);
                          cursor: pointer;
                        }
                      }
                      .minus,
                      .plus {
                        height: 20px;
                        width: 42px;
                        cursor: pointer;
                        &:hover {
                          background: var(--red);
                          color: var(--white);
                        }
                      }
                      .nopower {
                        height: 20px;
                        width: 42px;
                        float: left;
                        text-align: right;
                        padding: 0 5px 0 0;
                        border-right: 1px solid var(--grey);
                      }
                      .minus {
                        float: left;
                        text-align: right;
                        padding: 0 5px 0 0;
                        border-right: 1px solid var(--grey);
                      }
                      .plus {
                        float: left;
                        text-align: left;
                        padding: 0 0 0 5px;
                      }
                      .selected {
                        background: var(--grey-1);
                      }
                      &.header {
                        border-bottom: 1px solid var(--grey);
                        span {
                          color: var(--red);
                          font-weight: bold;
                          text-align: center;
                        }
                        .minus,
                        .plus {
                          &:hover {
                            background: var(--white);
                            color: var(--red);
                          }
                        }
                      }
                    }
                  }
                }
              }
              &.color {
                width: 190px;
                @media only screen and (max-width: 863px) {
                  width: auto;
                }
                select {
                  display: block;
                  height: 0;
                  visibility: hidden;
                  width: 175px;
                  @media only screen and (max-width: 863px) {
                    display: block;
                    visibility: visible;
                    width: 100%;
                    height: 30px;
                  }
                }
                img {
                  height: 18px;
                  vertical-align: top;
                  width: 18px;
                  margin: 3px 0 0 0;
                }
              }
              &.price {
                color: var(--red);
                text-align: center;
              }
            }
            &.lefteye {
              @media only screen and (max-width: 863px) {
                width: 50%;
              }
              td,
              th.eye {
                border-top: 1px solid var(--grey-1);
                @media only screen and (max-width: 863px) {
                  border: none;
                }
              }
              td {
                .power-selector {
                  z-index: 50;
                }
              }
            }
            &.righteye {
              @media only screen and (max-width: 863px) {
                width: 50%;
              }
              td {
                .power-selector {
                  z-index: 55;
                }
              }
            }
          }
        }
        &.special {
          margin: 0 0 0 -4px;
          th {
            background: #d1e6f1;
            border: 1px solid var(--dark-grey);
            color: #222;
            font-size: 11px;
            padding: 3px 6px;
            text-align: center;
            .small {
              display: block;
              font-size: 9px;
              font-weight: normal;
              text-align: center;
              line-height: 12px;
            }
            &.noRebate {
              padding: 9px 10px;
            }
          }
          td {
            background: #e7f2f8;
            border: 1px solid var(--dark-grey);
            color: var(--red);
            font-size: 12px;
            padding: 7px 10px;
          }
        }
      }
    }
    #gas-permeable {
      .closetext,
      .addtext {
        text-align: left;
        background: var(--grey-2);
        border: 1px solid var(--grey-1);
        padding: 5px 9px;
        margin: 0 0 10px 0;
        font-size: 11px;
        @media only screen and (max-width: 863px) {
          font-size: 12px;
        }
      }
      .addparam {
        h3 {
          font-size: 14px;
          text-align: left;
        }
      }
    }
    .form-footer {
      text-align: center;
      margin: 0;
      .btn {
        &.color2 {
          background: var(--white);
          border: 1px solid var(--ghost_btn_border);
          color: var(--red);
          height: 40px;
          line-height: 40px;
        }
      }
    }

    .lowprice {
      span.label {
        font-weight: normal;
      }
    }

    /* UPP product layout. */
    &.upp {
      #heading {
        margin: 0 0 10px 0;
        height: auto;
        float: left;
        h1 {
          float: left;
          margin: 0;
          padding: 0 0 0 20px;
        }
        .mfg {
          font-size: 12px;
          font-weight: normal;
          color: var(--grey3);
          float: left;
          height: 26px;
          line-height: 26px;
          width: auto;
          margin: 0 0 0 8px;
          a {
            text-decoration: none;
            color: var(--grey3);
            cursor: text;
          }
        }
        .type {
          padding: 0 0 0 20px;
          text-align: left;
        }
      }
      .label {
        font-weight: normal;
      }
      ul#pricing-details {
        font-size: 12px;
        font-family: Verdana, Geneva, sans-serif;
        width: 360px;
        margin: 0 0 20px 0;
        li {
          border: 1px solid var(--grey);
          width: 157px;
          padding: 7px 10px;
          line-height: 22px;
          strong {
            font-weight: bold;
            margin-right: 3px;
            width: auto;
          }
          .price {
            color: var(--red);
            display: block;
            float: right;
            font-weight: bold;
            .c333 {
              color: var(--grey3);
            }
          }
          &.last {
            margin: 0;
            width: auto;
          }
          &.lowprice {
            line-height: 24px;
            height: 24px;
            margin: 2px 0 10px 0;
            font-size: 11px;
            a {
              font-size: 11px;
            }
            .freeshipping {
              background: url("/images/main-img-sprite.png") -130px -1340px
                no-repeat;
              float: right;
              height: 24px;
              width: 140px;
              text-indent: -999999px;
            }
          }
          &.email {
            width: auto;
            margin: 0 5px 0 0;
          }
        }
      }
      #buymore-widget {
        float: left;
        margin: -23px 0 0 10px;
        .information {
          text-align: center;
          height: auto;
          padding: 5px 0 8px 0;
          .save {
            color: var(--red);
            font-size: 18px;
            font-weight: bold;
          }
          .text {
            line-height: 16px;
          }
        }
      }
      #product-information {
        height: auto;
        float: left;
        width: 100%;
      }
      #product-image {
        margin: -50px 0 0 0;
        width: 220px;
        overflow: hidden;
        img {
          width: 110%;
          margin: 0 0 0 -5px;
        }
      }
      #prescription {
        h2 {
          padding: 0 0 0 20px;
        }
      }
    }
  }

  .email-to-a-friend {
    text-align: left;
    margin: 10px;
    form {
      div {
        margin: 0 0 5px 0;
        &.last {
          margin: 0;
        }
      }
      input {
        width: 219px;
      }
      .tiny {
        display: block;
        font-size: 9px;
        color: var(--grey1);
        padding: 0 0 0 105px;
        margin: 0;
        line-height: 10px;
      }
    }
    label {
      width: 100px;
      display: inline-block;
    }
    .medbtn {
      margin: 20px 40px 0 100px;
    }
    .link {
      display: block;
      float: right;
      font-size: 11px;
    }
  }

  #rafinvalidpatient {
    text-align: left;
    h3 {
      text-align: center;
    }
    a.btn {
      margin: 0 60px 0 230px;
    }
  }

  #body {
    &.shipping {
      p {
        font-size: 12px;
      }
    }
  }

  .editpayment {
    &.full {
      float: left;
      width: 365px;

      #checkout {
        width: 355px;
      }
    }
    .help {
      font-size: 10px;
      margin-left: 4px;
    }
    .icon-question::after {
      content: "\f059";
      font: bold normal normal 14px/1 "Font Awesome 6 Pro";
      padding: 1px 0 1px 16px;
    }
    #checkout {
      td {
        text-align: left;
      }
      th {
        text-align: left;
      }
      .cc_type_image {
        height: 29px;
        select {
          display: none;
        }
        span {
          display: none;
          width: 32px;
          height: 20px;
          margin: 4px 0 0 0;
          text-align: left;
          text-indent: -9999px;
          &.selected {
            display: block;
          }
        }
        .none {
          display: none;
        }
        .visa.selected {
          background: url("/commonimages/logos/visa.svg") 0 0 no-repeat;
          background-size: 32px 20px;
        }
        .mc.selected {
          background: url("/commonimages/logos/mastercard.svg") 0 0 no-repeat;
          background-size: 32px 20px;
        }
        .amex.selected {
          background: url("/commonimages/logos/americanexpress.svg") 0 0
            no-repeat;
          background-size: 32px 20px;
        }
        .disc.selected {
          background: url("/commonimages/logos/discover.svg") 0 0 no-repeat;
          background-size: 32px 20px;
        }
      }
      small {
        font-size: 9px;
      }
      .cc_security_code {
        width: 60px;
      }
    }
  }

  .ccsecuritycode {
    display: none;
    &.full,
    &.only {
      background: var(--grey-3);
      border: 1px solid var(--grey);
      display: block;
      float: right;
      font-size: 11px;
      padding: 5px;
      text-align: left;
      width: 400px;

      img {
        border: 1px solid var(--grey);
        height: auto;
        width: 100%;
      }
    }
    &.only {
      display: block;
      margin: 0 auto;
      float: none;
    }
  }

  #fancybox {
    padding: 10px;
    img.heading {
      text-align: center;
      padding-bottom: 10px;
    }
    h2 {
      margin: 0 0 10px 0;
      text-align: left;
    }
    h3 {
      margin: 0 0 10px 0;
    }
    h4 {
      color: var(--red);
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 14px;
      font-weight: bold;
      margin: 0;
      padding: 0;
      text-align: left;
    }
    p {
      font-size: 12px;
      text-align: left;
      margin: 0 0 10px 0;
      strong span {
        font-size: 13px;
      }
      &.help {
        font-size: 11px;
        margin-top: 10px;
      }
    }
    table p {
      margin: 0;
    }
    span {
      font-weight: bold;
      &.partchanged {
        color: var(--red);
      }
    }
    .floatleft {
      float: left;
    }
    .floatright {
      float: right;
    }
    img.floatleft {
      margin: 0 10px 10px 0;
    }
    img.floatright {
      margin: 0 0 10px 10px;
    }
    .textright {
      text-align: right;
    }
    .textleft {
      text-align: left;
    }
    .textcenter {
      text-align: center;
    }
    .text-red,
    .creditapplied {
      color: var(--red);
    }
    .pointer {
      cursor: pointer;
    }
    .box {
      border: 1px solid #a0a0a0;
      background: var(--white);
      margin: 7px 0;
      padding: 3px;
    }
    table {
      width: 100%;
      td {
        padding: 4px 5px;
        vertical-align: middle;
        text-align: left;
      }
      th {
        font-weight: bold;
        padding: 4px 5px;
        text-align: right;
        vertical-align: middle;
      }
      .checkbox {
        background: var(--white) !important;
        border: 0 !important;
      }
      p.address {
        display: block;
        float: left;
        font-size: 11px;
        width: 200px;
      }
      .edit {
        background: url("/commonimages/icons/ico.change.gif") center left
          no-repeat;
        display: block;
        float: right;
        margin-right: 2px;
        padding-left: 12px;
      }
      .notselected {
        td {
          background: var(--grey-3);
          border: 1px solid #e0e0e0;
          color: #858585;
        }
        th {
          background: #e7e7e7;
          border: 1px solid #c6c6c6;
          color: #858585;
        }
        span.partchanged {
          color: #9aceff;
        }
        a {
          color: #67b5ff;
        }
        .edit {
          background: url("/commonimages/icons/ico.change.gray.gif") center left
            no-repeat;
        }
      }
      &.data {
        th.blank,
        td.blank {
          background: 0;
          border: 0;
          padding: 0;
        }
      }
      &.textcenter {
        * {
          text-align: center;
        }
      }
    }

    &.rxdecline {
      .top {
        margin: 10px auto 0 auto;
      }
      p {
        font-size: 14px;
        text-align: left;
        strong span {
          font-size: 15px;
        }
        span {
          font-size: 11px;
        }
      }
      a.updateorder img {
        margin: 14px 0;
      }
      table {
        border: 1px solid #aeaeae;
        border-collapse: collapse;
        font-size: 12px;
        line-height: 13px;
        margin: 3px auto 18px;
        width: 425px;
        tr {
          td {
            height: 37px;
            padding: 8px 0 0 59px;
            width: 152px;
            &#fax {
              background: url("/images/design/bg.rxdecline.fax.png") top left
                no-repeat;
              border-right: 1px solid #aeaeae;
            }
            &#email {
              background: url("/images/design/bg.rxdecline.email.png") top left
                no-repeat;
            }
          }
        }
      }
    }

    &.addressverification {
      h2 {
        font-size: 24px;
        line-height: 30px;
        float: left;
      }
      img.usps,
      img.fedex {
        float: right;
        display: block;
      }
      .compare {
        float: left;
        width: 360px;
        .box {
          margin: 0 0 10px 0;
        }
        h3 {
          text-align: center;
        }
        table {
          th {
            width: 80px;
          }
          td.checkbox {
            width: 20px;
            padding: 0 3px 0 0;
          }
        }
      }
      .divider {
        background: var(--black);
        width: 2px;
        margin: 28px 17px 0 17px;
        float: left;
        height: 410px;
        position: relative;
        .or {
          background: var(--blue);
          border-radius: 50%;
          color: var(--white);
          position: absolute;
          top: -28px;
          right: -10px;
          padding-top: 4px;
          width: 24px;
          height: 20px;
          text-align: center;
        }
      }
      .newaddress {
        float: left;
        width: 360px;
        .box {
          margin: 0 0 10px 0;
        }
        th {
          width: 80px;
        }
        td {
          input {
            width: 236px;
          }
          select {
            width: 120px;
          }
          &.country {
            select {
              width: 240px;
            }
          }

          &.phone {
            input {
              width: auto;
            }
          }
        }
      }
      .confirm {
        width: 100%;
        h3 {
          text-align: left;
          font-size: 16px;
          margin: 0 0 3px 0;
        }
        .box {
          margin: 0 0 10px 0;
        }
        th {
          width: 100px;
        }
        td {
          input {
            width: 99%;
          }
          select {
            width: 120px;
          }
          &.state {
            width: 216px;

            select {
              width: 216px;
            }
          }

          &.zip {
            width: 160px;

            input {
              width: 160px;
            }
          }

          &.country {
            width: 216px;

            select {
              width: 216px;
            }
          }

          &.phone {
            width: 160px;

            input {
              width: auto;

              &#avphoneareacode {
                width: 68px;
              }
            }
          }
        }
        .box {
          .verify {
            text-align: center;
            font-weight: bold;
            padding: 5px 0;
            line-height: 20px;
            label,
            label:focus,
            label:active {
              border: none;
              outline: none;
              cursor: pointer;
            }
            input {
              outline: none;
            }
          }
        }
      }
      .help {
        border-top: 1px solid var(--grey);
        padding: 10px 0;
        margin: 10px 0 0 0;
        font-size: 12px;
      }
    }

    &.remove-popup {
      .btn {
        margin: 0 10px;
      }
      h1,
      p {
        text-align: left;
      }
      .products {
        background: var(--grey-3);
        border: 1px solid var(--grey-2);
        padding: 0 10px 3px 10px;
        margin: 0 0 20px 0;
        h3 {
          font-size: 16px;
          line-height: 20px;
          height: 20px;
          margin: 3px 0;
          text-align: left;
        }
      }
      table.rx-info {
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        margin: 0 0 1px 0;
        float: left;
        tr {
          th,
          td {
            border: none;
            padding: 0 6px;
            vertical-align: middle;
            &.spacer {
              width: auto;
              background: none;
              border: none;
            }
          }
          th {
            background: none;
            border-top: 1px solid var(--grey-1);
            font-weight: bold;
            line-height: 18px;
            &.eye {
              text-align: left;
            }
          }
          td {
            background: none;
            border-top: 1px solid var(--grey-1);
            font-weight: normal;
            line-height: 25px;
            text-align: center;
            &.twolines {
              width: 120px;
              line-height: 15px;
              padding: 3px;
            }
            &.remove {
              background: #e8f3f9;
              width: 82px;
            }
          }
          &.head {
            th {
              background: var(--grey-3);
              text-align: center;

              &.remove {
                background: #d5e4f2;
                background-image: none;
                width: 82px;
              }

              &.total {
                text-align: right;
              }
            }
          }
          &.additional {
            td {
              h4 {
                color: var(--grey3);
                font-size: 12px;
                line-height: 16px;
                padding: 8px 0 0 0;
                margin: 0 0 0 2px;
                float: left;
                width: 85px;
              }
              table {
                border-spacing: 2px;
              }
              &.inner {
                background: none;
                border: none;
                text-align: left;
                padding: 0;
                .wrapper {
                  background: var(--white);
                  border: 1px solid var(--grey);
                  text-align: left;
                  padding: 2px 6px;
                  display: block;
                  margin: 0 0 0 121px;
                  height: 50px;
                }
              }
            }
          }
        }
      }
    }

    &.update-rx {
      span {
        font-weight: normal;
      }

      .product-display {
        float: left;
        min-height: 156px;
        width: 300px;
      }

      #product-image {
        height: auto;
        margin: 0 0 15px;
        position: relative;
        text-align: center;
        width: 100%;

        #productimage {
          height: 159px;
        }

        #overlay {
          background: url("/images/product/overlay.png") top left no-repeat;
          height: 70px;
          position: absolute;
          right: 0;
          top: 0;
          width: 70px;
        }

        #overlaydiscontinued {
          color: var(--red);
          font-size: 19px;
          font-weight: bold;
          position: absolute;
          right: 0;
          text-shadow: 1px 1px 1px var(--grey1);
          text-transform: uppercase;
          top: 15px;
          transform: rotate(20deg);
          width: 170px;

          span {
            color: var(--dark-grey);
            display: block;
            font-size: 14px;
            text-transform: none;
          }
        }

        .fancy {
          line-height: 12px;
          text-decoration: none;
        }

        img {
          border: 0;
          height: auto;
          margin: 0;
          max-height: 156px;
          max-width: 100%;
          width: auto;
        }

        .colors {
          background: var(--grey-2);
          border: 1px solid var(--grey-1);
          height: 24px;
          padding: 5px;
          text-align: left;

          img {
            float: right;
            height: 24px;
            margin: 0;
            width: 24px;
          }

          select {
            float: left;
            font-size: 12px;
            height: 24px;
            width: 205px;
          }
        }

        &.rebate {
          float: right;
          position: relative;
          text-align: right;
          width: 242px;
        }

        &.halloween {
          width: 225px !important;
        }

        .quantityCount {
          background: url("/images/design/bg.pkoverlay.gif") center top no-repeat;
          color: var(--white);
          font-size: 11px;
          height: 15px;
          left: 50%;
          line-height: 15px;
          margin: 15px 0 0 -31px;
          padding: 0;
          position: absolute;
          text-align: center;
          width: 62px;
        }
      }

      #productimage {
        text-align: center;
        width: 100%;

        span {
          text-decoration: none;
        }

        img {
          border: 0;
          margin: 0 auto;
        }
      }

      #product-information {
        float: left;
        margin: 0 0 10px 20px;
        max-width: 500px;

        h1 {
          background: none;
          color: var(--text1);
          font-size: 28px;
          font-weight: normal;
          line-height: 30px;
          margin: 0 0 15px;
          padding: 0;
          text-align: left;
        }
      }

      ul#pricing-details {
        line-height: 20px;
        list-style: none;
        margin: 0;
        text-align: left;

        ul {
          margin: 0;

          li {
            float: left;
          }
        }

        li {
          background: var(--white);
          border-radius: 0;
          float: left;
          height: 100px;
          margin: 0 10px 0 0;
          min-width: 150px;
          padding: 0;
          width: auto;

          &.active {
            background: #f8fbfe;
            border: 1px solid var(--red);
          }

          .radio {
            display: block;
            font-size: 18px;
            font-weight: normal;
            letter-spacing: -0.03em;
            line-height: 22px;
          }

          .pack {
            display: block;
            font-size: 18px;
            line-height: 22px;
            margin: 0 0 5px;

            .number {
              font-size: 24px;
            }
          }

          .supply {
            display: block;
            font-size: 14px;
            line-height: 22px;
          }

          .price {
            float: none;
            font-size: 20px;
            font-weight: normal;
            line-height: 30px;
          }

          .info {
            line-height: 20px;

            strong {
              display: inline;
              font-weight: bold;
            }
          }
        }
      }

      &.upp {
        ul#pricing-details {
          li {
            border: 1px solid var(--grey);
            padding: 7px 10px;
            width: 157px;

            &.last {
              margin: 0;
              width: auto;
            }
          }
        }
      }
    }

    #productimage {
      a {
        text-decoration: none;
      }
    }

    /* Buy More, Save More widget. */
    &.update-rx {
      ul#pricing-details li #buymore-widget {
        background: var(--white);
        border: 1px solid #a6a6a6;
        float: left;
        height: auto;
        margin: 0 0 0 35px;
        width: 210px;

        .header {
          background: var(--blue);
          color: var(--white);
          font-family: Arial, sans-serif;
          font-size: 17px;
          font-weight: bold;
          height: 28px;
          letter-spacing: -1px;
          line-height: 30px;
          padding: 3px 10px;
          text-align: center;
          text-indent: 0;
          text-shadow: 0 0 5px var(--black);
          text-transform: uppercase;
          width: auto;

          .buy {
            font-weight: bold;
            padding: 0 4px 0 0;
          }
        }

        .information {
          background: var(--white);
          font-family: Verdana, sans-serif;
          font-size: 13px;
          padding: 8px 12px;
          text-align: left;
          width: auto;
        }

        .bmsmcontents {
          .bmsmprice {
            display: block;

            strong {
              color: var(--red);
              font-size: 20px;
              font-weight: normal;
              width: auto;
            }
          }

          .bmsminfo {
            display: block;
            margin-top: 3px;

            strong {
              width: auto;
            }
          }
        }
      }
    }

    &.update-rx {
      .products {
        margin: 0 0 20px;
      }

      #prescription {
        margin: 0;
        text-align: left;
        width: 100%;

        &.reorder {
          margin-bottom: 10px;
        }

        h2 {
          &.enterrx {
            float: left;
            margin: 0 20px 0 0;
            max-width: 525px;
          }

          &.updaterx {
            display: none;
            font-size: 16px;
            margin: 0;
          }

          &.enterrx,
          &.updaterx {
            span {
              font-size: 75%;
            }
          }
        }

        .lens-variations {
          border-collapse: collapse;
          border-spacing: 0;
          margin: 0 0 10px;
          width: 100%;

          th,
          td {
            background: none;
            border: none;
            padding: 0 6px;
            vertical-align: middle;
          }

          th {
            font-weight: bold;
            text-align: left;
          }

          thead {
            th {
              font-size: 14px;
              font-weight: bold;
              line-height: 20px;
              padding: 0 10px;
              text-align: center;

              &.price {
                width: 100px;

                small {
                  display: block;
                  font-size: 9px;
                  font-weight: normal;
                  line-height: 12px;
                }

                .mini {
                  display: block;
                  font-size: 9px;
                  font-weight: normal;
                  line-height: 12px;
                }

                small#after-rebate {
                  display: none;
                }
              }

              &#add_header_soper_cone_flange_radiusright,
              &#add_header_soper_cone_flange_radiusleft {
                width: 110px;
              }
            }
          }

          tbody {
            tr.lefteye {
              td {
                border-top: 1px solid var(--grey-1);
              }

              th.eye {
                border-top: 1px solid var(--grey-1);
              }
            }

            tr.righteye td .power-selector {
              z-index: 55;
            }

            tr.lefteye td .power-selector {
              z-index: 50;
            }

            tr td .power-selector {
              height: 22px;
              position: relative;
            }

            th {
              padding: 4px;
              text-align: left;

              &.eye {
                border-right: 1px solid var(--grey);
                padding: 10px 10px 10px 0;
                text-align: right;
                width: 105px;
              }
            }

            td {
              background: none;
              border-left: 1px solid var(--grey);
              font-weight: normal;
              line-height: 25px;
              padding: 3px 7px;
              text-align: center;

              select {
                border: 1px solid var(--grey1);
                height: 30px;
                padding: 0 3px;
              }

              &.color {
                width: 190px;

                select {
                  width: 175px;
                }

                img {
                  height: 18px;
                  margin: 3px 0 0;
                  vertical-align: top;
                  width: 18px;
                }
              }

              &.price {
                color: var(--red);
                text-align: center;
              }

              #Left_Color_Select,
              #Right_Color_Select {
                display: block;
                height: 0;
                visibility: hidden;
              }
            }
          }
        }
      }
    }
    &.update-rx {
      #prescription .lens-variations tbody td {
        .select_color {
          box-sizing: border-box;
          cursor: default;
          font-family: Arial;
          font-size: 14px;
          position: relative;
          text-align: left;
          user-select: none;

          .swatch {
            background: var(--lens-swatch-color, var(--grey)) !important;
            float: right;
            height: 20px;
            width: 20px;
          }

          .options {
            background: var(--white);
            border: 1px solid var(--grey1);
            box-sizing: border-box;
            display: none;
            line-height: 20px;
            min-width: 100%;
            padding: 0;
            position: absolute;
            top: 100%;
            z-index: 1001;

            .option {
              margin: 0;
              padding: 2px 35px 2px 5px;
              white-space: nowrap;
              z-index: 999;

              .swatch {
                float: right;
                height: 20px;
                margin: 0 -30px 0 0;
                width: 20px;
              }

              &.selected,
              &:hover {
                background: #4285f4;
                color: var(--white);
              }
            }
          }

          .selected_color {
            background: var(--white);
            border: 1px solid var(--grey1);
            box-sizing: border-box;
            height: 30px;
            line-height: 30px;
            padding: 0 15px 0 5px;

            .color {
              float: left;
              width: 100%;

              .swatch {
                margin: 4px 0 0 5px;
              }
            }

            .fa {
              float: right;
              line-height: 30px;
              margin: 0 -10px 0 0;
            }
          }
        }

        .power-selector {
          select {
            position: relative;
            z-index: 60;
          }

          .select {
            background: transparent;
            border: none;
            color: var(--black);
            cursor: pointer;
            display: none;
            height: 20px;
            left: 0;
            position: absolute;
            top: -1px;
            width: 62px;
            z-index: 90;
          }

          .selector {
            background: var(--white);
            border: 1px solid var(--grey-10);
            color: var(--black);
            font:
              normal 12px/20px Arial,
              Helvetica,
              sans-serif;
            height: 20px;
            width: 62px;

            .label {
              float: left;
              height: 20px;
              text-align: center;
              width: 45px;
            }

            .arrow {
              background: var(--grey-2);
              border: 1px solid var(--grey2);
              float: right;
              height: 18px;
              text-align: center;
              width: 15px;
            }
          }

          .power-list {
            background: var(--white);
            border: 1px solid var(--grey);
            box-shadow: 0 0 10px var(--grey);
            height: 300px;
            left: 0;
            overflow-x: hidden;
            overflow-y: scroll;
            padding: 5px;
            position: absolute;
            top: 20px;
            width: 115px;
            z-index: 95;

            ul {
              list-style: none;
              margin: 0;
              padding: 0;

              li {
                font-weight: normal;
                height: 20px;
                line-height: 20px;

                &.header {
                  border-bottom: 1px solid var(--grey);

                  span {
                    color: var(--red);
                    font-weight: bold;
                    text-align: center;
                  }

                  .minus:hover,
                  .plus:hover {
                    background: var(--white);
                    color: var(--red);
                  }
                }

                .plano {
                  display: block;
                  height: 20px;
                  line-height: 20px;
                  text-align: center;
                  width: 98px;

                  &:hover {
                    background: var(--red);
                    color: var(--white);
                    cursor: pointer;
                  }

                  em {
                    font-style: italic;
                  }
                }

                .minus,
                .plus {
                  cursor: pointer;
                  height: 20px;
                  width: 42px;

                  &:hover {
                    background: var(--red);
                    color: var(--white);
                  }
                }

                .nopower {
                  border-right: 1px solid var(--grey);
                  float: left;
                  height: 20px;
                  padding: 0 5px 0 0;
                  text-align: right;
                  width: 42px;
                }

                .minus {
                  border-right: 1px solid var(--grey);
                  float: left;
                  padding: 0 5px 0 0;
                  text-align: right;
                }

                .plus {
                  float: left;
                  padding: 0 0 0 5px;
                  text-align: left;
                }

                .selected {
                  background: var(--grey-1);
                }
              }
            }
          }
        }
      }
    }
    &.update-rx {
      #prescription {
        .lens-variations {
          &.special {
            margin: 0 0 0 -4px;

            th {
              background: #d1e6f1;
              border: 1px solid var(--dark-grey);
              color: #222;
              font-size: 11px;
              padding: 3px 6px;
              text-align: center;

              &.noRebate {
                padding: 9px 10px;
              }

              .small {
                display: block;
                font-size: 9px;
                font-weight: normal;
                line-height: 12px;
                text-align: center;
              }
            }

            td {
              background: #e7f2f8;
              border: 1px solid var(--dark-grey);
              color: var(--red);
              font-size: 12px;
              padding: 7px 10px;
            }
          }

          &#ShowAddGP {
            width: auto;
          }
        }
      }

      #gas-permeable {
        .closetext,
        .addtext {
          background: var(--grey-2);
          border: 1px solid var(--grey-1);
          font-size: 11px;
          margin: 0 0 10px;
          padding: 5px 9px;
          text-align: left;
        }

        .addparam {
          h3 {
            font-size: 14px;
            text-align: left;
          }
        }
      }

      .form-footer {
        margin: 0;
        padding: 0 0 20px;
        text-align: center;
      }

      .lowprice {
        span.label {
          font-weight: normal;
        }
      }
    }

    /* Update Rx UPP variant. */
    &.update-rx.upp {
      #heading {
        float: left;
        height: auto;
        margin: 0 0 10px;

        h1 {
          float: left;
          margin: 0;
          padding: 0 0 0 20px;
        }

        .mfg {
          color: var(--grey3);
          float: left;
          font-size: 12px;
          font-weight: normal;
          height: 26px;
          line-height: 26px;
          margin: 0 0 0 8px;
          width: auto;

          a {
            color: var(--grey3);
            cursor: text;
            text-decoration: none;
          }
        }

        .type {
          padding: 0 0 0 20px;
          text-align: left;
        }
      }

      .label {
        font-weight: normal;
      }

      #product-information {
        float: left;
        height: auto;
        width: 100%;
      }

      ul#pricing-details {
        font-family: Verdana, Geneva, sans-serif;
        font-size: 12px;
        margin: 0 0 20px;
        width: 360px;

        li {
          line-height: 22px;

          strong {
            font-weight: bold;
            margin-right: 3px;
            width: auto;
          }

          .price {
            color: var(--red);
            display: block;
            float: right;
            font-weight: bold;

            .c333 {
              color: var(--grey3);
            }
          }

          &.lowprice {
            font-size: 11px;
            height: 24px;
            line-height: 24px;
            margin: 2px 0 10px;

            a {
              font-size: 11px;
            }

            .freeshipping {
              background: url("/images/main-img-sprite.png") -130px -1340px no-repeat;
              float: right;
              height: 24px;
              text-indent: -999999px;
              width: 140px;
            }
          }

          &.email {
            margin: 0 5px 0 0;
            width: auto;
          }
        }
      }

      #buymore-widget {
        float: left;
        margin: -23px 0 0 10px;

        .information {
          height: auto;
          padding: 5px 0 8px;
          text-align: center;

          .save {
            color: var(--red);
            font-size: 18px;
            font-weight: bold;
          }

          .text {
            line-height: 16px;
          }
        }
      }

      #product-image {
        margin: -50px 0 0;
        overflow: hidden;
        width: 220px;

        img {
          margin: 0 0 0 -5px;
          width: 110%;
        }
      }

      #prescription {
        h2 {
          padding: 0 0 0 20px;
        }
      }
    }

    &.cantoffer {
      text-align: left;
    }

    &.comparerx {
      .correctorder {
        margin-right: 10px;
      }

      table {
        p.address {
          width: 160px !important;
        }

        td,
        th {
          padding: 4px 1px;
          text-align: center !important;
        }

        th {
          &.first {
            width: 180px;
          }

          &.basecurve {
            width: 148px;
          }
        }
      }
    }

    &.rrd {
      h4 {
        font-size: 15px;
      }

      p {
        margin-bottom: 25px;
      }

      img.calimg {
        background: var(--white);
        border: 1px solid #a0a0a0;
        float: right;
        height: 65px;
        margin-bottom: 10px;
        margin-left: 5px;
        padding: 3px;
      }

      .box {
        margin-bottom: 20px;

        .displayerror {
          background: var(--red);
          border: 0;
          color: var(--white);
          margin: 0 2px 2px;
          text-align: left;
        }

        .displayreminder {
          font-weight: bold;
          margin: 10px 0;

          label {
            font-size: 14px;
            font-weight: normal;
          }
        }

        .changedate {
          img {
            margin-top: 10px;
          }
        }

        .calendar {
          td {
            background: 0;
            border: 0;
            padding: 0;
          }

          .calendarheader {
            td {
              background: var(--yellow2);
            }
          }
        }
      }

      table {
        th {
          font-size: 12px;
          padding-right: 10px;
          width: 300px;
        }

        td {
          font-size: 12px;
        }
      }

      .calendar {
        float: none;

        select {
          height: 19px;
        }

        input {
          height: 13px;
        }

        td {
          table {
            border-collapse: collapse !important;
            border-spacing: 0 !important;
          }

          td {
            padding: 4px !important;
            text-align: center;
            vertical-align: middle;
          }
        }
      }

      .skip {
        margin-right: 10px;
      }
    }

    &.productreplacement {
      padding: 10px 20px;
      text-align: left;

      .h1 {
        background: url("/images/icons/h1.bg.png") 0 1px no-repeat;
        color: var(--red);
        display: block;
        font-size: 20px;
        font-weight: bold;
        line-height: 26px;
        margin: 0 0 7px;
        padding: 0 0 0 20px;
        text-align: left;
      }

      span {
        font-weight: normal;
      }

      .uppsavings {
        color: var(--red);
        font-weight: bold;
      }

      .heading {
        h1 {
          text-align: left;
        }
      }

      .top-text {
        margin: 0;

        p {
          font-size: 14px;
          line-height: 22px;
          margin: 0;
          padding: 0;
        }

        img.slash {
          display: block;
          float: right;
          height: 105px;
          margin: -30px 0 10px 10px;
          width: 105px;
        }
      }

      h2 {
        color: var(--grey3);
        font-size: 16px;
        margin: 10px 0;
        padding: 0;
      }

      .product {
        float: left;
        margin: 15px 0 20px;
        position: relative;
        width: 50%;
        z-index: 10;

        .inner {
          padding: 63px 0 10px;
          position: relative;
          text-align: center;
          z-index: 10;
        }

        &.pk24 {
          .inner {
            border: 1px solid var(--grey);
            padding: 0 0 10px;
          }

          .best {
            background: var(--white);
            color: var(--red);
            font-size: 16px;
            font-weight: bold;
            height: 20px;
            left: 50%;
            line-height: 20px;
            margin: 0 0 0 -70px;
            position: absolute;
            text-align: center;
            top: -10px;
            width: 140px;
            z-index: 12;
          }

          .zoom {
            background: url("/images/upp/24-lenses-zoom.png") 0 0 no-repeat;
          }
        }

        &.pk12 {
          .zoom {
            background: url("/images/upp/12-lenses-zoom.png") 0 0 no-repeat;
          }
        }

        .savings {
          background: var(--grey-3);
          border: 1px solid var(--grey-2);
          font-size: 14px;
          line-height: 20px;
          margin: 12px 10px 28px;
        }

        .freeship {
          background: url("/images/main-img-sprite.png") -130px -1250px no-repeat;
          height: 77px;
          left: 8px;
          position: absolute;
          top: 36px;
          width: 77px;
          z-index: 11;
        }

        .zoom {
          height: 97px;
          position: absolute;
          right: 15px;
          top: 33px;
          width: 114px;
          z-index: 11;
        }

        .info {
          margin: 0 0 10px;
          text-align: center;

          .contains {
            display: block;
            font-size: 13px;
            line-height: 22px;
          }

          .priceperbox {
            display: block;
            font-size: 18px;
            line-height: 24px;

            .price {
              color: var(--red);
              font-weight: bold;
            }
          }

          .priceperlens {
            display: block;
            font-size: 14px;
            line-height: 22px;
          }
        }
      }

      .lowestprice {
        float: right;
        font-size: 17px;
        padding: 8px 0 0;
      }

      #btnYes {
        float: right;
      }

      #btnNo {
        float: left;
      }

      #btnGoback {
        float: left;
        font-size: 14px;
        padding: 12px 0;
      }

      #seedetails {
        clear: both;
        padding: 20px 0 0;
      }

      .freeshippingnote {
        border-top: 1px solid var(--grey-1);
        line-height: 20px;
        margin: 20px 0 0;
        padding: 10px 0 0;
        text-align: center;
      }
    }

    &.sixortwentyfour,
    &.sixortwelve {
      position: relative;

      h2 {
        margin: 0 0 20px;
      }

      .pk6 {
        padding-top: 8px;
      }

      .product {
        margin: 0 0 20px;

        .freeship {
          top: -12px;
        }

        .zoom {
          top: 3px;
        }

        &.pk6 {
          padding: 0;

          .inner {
            padding: 0;
          }

          .prodimg {
            padding: 10px 0 3px;
          }
        }

        h2 {
          line-height: 24px;
          margin: 0 0 20px;

          span {
            display: block;
          }
        }
      }

      .bigequals {
        font-size: 46px;
        height: 40px;
        left: 50%;
        line-height: 40px;
        margin: 0 0 0 -20px;
        position: absolute;
        text-align: center;
        top: 130px;
        width: 40px;
        z-index: 1099;
      }

      #seedetails {
        clear: both;
        padding: 20px 0 0;
      }
    }

    &.sixortwentyfour {
      .product.pk24 {
        padding: 0;

        .inner {
          border: none;
          padding: 0;
        }
      }
    }

    &.sixortwelve {
      .product.pk12 {
        padding: 0;

        .inner {
          border: none;
          padding: 0;
        }
      }
    }

    &.productreplacement {
      .toptext {
        margin: 0 0 30px;
        padding: 0 0 0 20px;

        h3 {
          display: block;
          float: left;
          font-size: 13px;
          line-height: 24px;
          width: 140px;
        }

        p {
          display: block;
          font-size: 13px;
          line-height: 24px;

          em {
            color: var(--red);
            font-style: normal;
            font-weight: bold;
          }
        }
      }

      .product {
        margin: 0 0 20px;

        h2 {
          font-size: 18px;
          line-height: 20px;
          margin: 0;
          text-align: center;

          span {
            font-size: 11px;
            font-weight: normal;
          }
        }

        &.pk12 {
          h2 {
            margin: 1px 0 27px;
          }
        }

        .savings {
          margin: 5px 10px 0;
        }

        .inner {
          padding: 12px 0 15px;
        }

        &.pk24 {
          .inner {
            padding: 12px 0 15px;
          }
        }

        .freeship {
          left: 200px;
          top: 64px;
        }

        .info {
          margin: 0 0 15px;

          .priceperlens {
            em {
              color: var(--red);
            }
          }
        }
      }

      #btnNo {
        color: var(--grey3);
        display: inline-block;
        height: 24px;
        line-height: 24px;
        margin: 4px 0 0;

        .icon {
          background: url("/images/upp/x.png") 0 0 no-repeat;
          display: inline-block;
          height: 10px;
          margin: 0 5px 0 0;
          vertical-align: middle;
          width: 10px;
        }
      }

      #btnYes {
        margin: 0 50px 0 0;
      }

      .freeshippingnote {
        margin-top: 0;
      }

      &.alt {
        .a06_react {
          float: left;
          margin: -10px 0 0;
          width: auto;

          .medbtn {
            background: none;
            border: 0;
            color: var(--red);
            font-size: 13px;
            padding: 0;
            text-decoration: underline;
          }
        }
      }
    }

    /* 12- and 24-pack simple popup. */
    &.productreplacement.alt {
      padding: 20px 20px 0;

      h1,
      .original {
        display: none;
      }

      .simple {
        display: block;
        width: 780px;
      }

      .freeshippingnote {
        display: none;
      }
    }

    &.productreplacement .simple {
      display: none;

      h2 {
        color: var(--red);
        font-size: 26px;
        font-weight: bold;
        margin: 0 0 20px;
        text-align: center;

        em {
          font-size: 40px;
          font-style: normal;
          padding: 0 20px;
          vertical-align: bottom;
        }
      }

      img.upsell_img {
        display: block;
        margin: 0 auto;
      }

      p {
        color: var(--grey3);
        font-size: 18px;
        line-height: 24px;
        margin: 0 0 20px;
        text-align: center;
      }

      a.btn.continue {
        margin: 0 50px 0 325px;
      }

      h3 {
        color: var(--grey3);
        font-size: 20px;
        font-weight: normal;
        margin: 0 0 20px;
        text-align: center;

        strong {
          color: var(--red);
          font-weight: bold;
        }
      }

      h4 {
        color: var(--grey3);
        font-size: 16px;
        font-weight: normal;
        height: 20px;
        line-height: 20px;
        margin: 0 0 10px;
      }

      .main-view {
        float: left;
        height: 166px;
        margin: 12px 0 0;
        position: relative;
        width: 320px;

        .product-image {
          height: 166px;
          width: 320px;

          img {
            display: block;
            height: auto;
            max-height: 166px;
            width: 100%;
          }
        }

        .banner_overlay {
          height: 25px;
          left: 38px;
          position: absolute;
          top: 107px;
          width: 244px;
          z-index: 103;

          .left_corner,
          .right_corner {
            height: 0;
            position: absolute;
            top: -10px;
            width: 0;
          }

          .left_corner {
            border: 5px solid;
            border-color: transparent #900 #900 transparent;
            left: 0;
          }

          .right_corner {
            border: 5px solid;
            border-color: transparent transparent #900 #900;
            right: 0;
          }

          .banner {
            background: var(--red);
            color: var(--white);
            font-size: 16px;
            font-weight: bold;
            height: 25px;
            line-height: 24px;
            text-align: center;
            width: 100%;
          }
        }
      }

      .pack-info {
        float: left;
        width: 460px;

        ul.packs {
          list-style: none;
          margin: 0;
          width: 100%;

          li {
            &.pack {
              background: var(--white);
              border: 1px solid var(--grey);
              border-radius: 0;
              display: block;
              float: left;
              height: 145px;
              margin: 0 20px 0 0;
              min-width: 160px;
              padding: 7px;
              width: auto;
            }

            &.last {
              margin: 0;
            }

            label {
              display: block;
              font-weight: normal;

              .pack {
                display: block;
                font-size: 18px;
                line-height: 22px;
                margin: 0 0 5px;

                .number {
                  font-size: 24px;
                }
              }

              .radio {
                display: block;
                font-size: 14px;
                line-height: 22px;

                input {
                  display: none;
                  vertical-align: middle;
                }
              }

              .price {
                color: var(--red);
                display: block;
                font-size: 20px;
                font-weight: normal;
                line-height: 30px;
                margin: 0 0 26px;
              }

              .info {
                display: block;
                line-height: 20px;
                margin: 0 0 5px;
              }
            }

            &.last {
              label .price {
                margin: 0;
              }
            }

            a.btn.color1 {
              margin: 0 40px 0 0;
              padding: 0 0 0 18px;

              .edge {
                right: -40px;
                width: 40px;
              }
            }

            &.clear {
              clear: both;
              height: 0;
              margin: 0;
              padding: 0;
              width: auto;
            }
          }
        }
      }
      }

    &.addressverification.d {
      h2 {
        margin: 0;
      }

      .confirm,
      .newaddress,
      .compare {
        border: 1px solid var(--grey-1);
        float: left;
        margin: 0 0 10px;
        overflow: hidden;
        padding: 0;
        position: relative;
        z-index: 10;

        h3 {
          background: var(--grey-2);
          border-bottom: 1px solid var(--grey-1);
          color: var(--grey3);
          font-size: 15px;
          font-weight: bold;
          height: 25px;
          line-height: 24px;
          margin: 0;
          padding: 0 10px;
        }

        .box {
          border: none;
          margin: 0;
          padding: 10px;

          table {
            border: none;
            border-collapse: collapse;
            border-spacing: 0;
            margin: 0 0 10px;
            width: 100%;

            th,
            td {
              background: none;
              border: none;
              border-bottom: 1px solid var(--grey-1);
              font-size: 12px;
              line-height: 23px;
              padding: 5px 10px;
              text-align: left;
              vertical-align: middle;
            }
          }
        }

        .btn {
          margin: 0 50px 10px 0;
        }
      }

      .confirm,
      .newaddress {
        .box {
          table {
            th {
              width: 100px;
            }
          }
        }

        td {
          input {
            width: 99%;
          }

          &.state,
          &.country {
            width: 160px;

            select {
              width: 160px;
            }
          }

          &.phone {
            input#avphonenumber {
              width: 116px;
            }
          }
        }
      }

      .help {
        border-top: none;
        margin: 10px 0 0;
        padding: 0;
      }

      .newaddress {
        h3 {
          text-align: left;
        }

        td.phone {
          input#avphoneareacode {
            width: 68px;
          }
        }
      }

      .compare {
        h3 {
          text-align: left;
        }

        .box {
          table {
            td {
              position: relative;
            }

            th {
              width: 80px;
            }

            .checkbox {
              border: none !important;
              border-bottom: 1px solid var(--grey-1) !important;
            }

            p.address {
              width: auto;
            }

            .edit {
              position: absolute;
              right: 5px;
              top: 5px;
            }
          }
        }
      }
    }

    /* Gift card popup. */
    &.giftcard {
      border: 2px dashed var(--grey1);
      margin: 0 auto;
      padding: 10px 8px;
      position: relative;
      text-align: center;
      z-index: 10;

      .text {
        width: 100%;

        h2 {
          color: var(--grey3);
          font-family: RobotoCondensed;
          font-size: 52px;
          font-weight: normal;
          height: 50px;
          line-height: 58px;
          margin: 0;
          overflow: visible;
          text-align: center;

          strong {
            font-family: RobotoBoldCondensed;
            font-weight: normal;

            em {
              color: var(--red);
            }
          }
        }

        p {
          font-size: 26px;
          letter-spacing: -0.03em;
          line-height: 33px;
          margin: 0;
          text-align: center;

          strong {
            text-transform: uppercase;
          }
        }
      }

      .graphic {
        margin: 0 0 5px;
        position: relative;
        text-align: center;
        z-index: 1111;

        img {
          display: block;
          margin: 0 auto;
        }
      }

      .order {
        p {
          float: left;
          font-size: 26px;
          line-height: 52px;
          margin: 0 0 0 20px;
        }

        a {
          float: right;
          margin: 0 2px 0 0;

          img {
            display: block;
            margin: 0;
          }
        }
      }

      &.product {
        .text {
          p {
            font-size: 21px;
          }
        }

        .graphic {
          margin: 5px 0 0;

          img.productimg {
            left: 222px;
            margin: 0;
            position: absolute;
            top: 0;
            z-index: 1112;
          }
        }
      }
    }
  }

  #loginpopup {
    h3 {
      color: var(--grey3);
      font-size: 13px;
      font-weight: normal;
      margin: -5px 0 10px 0;
      text-align: left;

      a {
        cursor: pointer;
      }
    }
    #two-column {
      .leftcontent {
        width: 57%;
        #quick-login {
          #signinhelp {
            height: 54px;
          }
        }
      }
      .rightcontent {
        width: 39%;
        padding: 0 0 200px 2%;
      }
    }
    h2 {
      background: url("/images/icons/h1.bg.png") 0 1px no-repeat;
      line-height: 26px;
      padding: 0 0 0 25px;
      margin: 0 0 10px 0;
    }
    table.form-clean {
      border-collapse: collapse;
      border-spacing: 0;
      width: 100%;
      margin: 0 0 20px 0;
      tr {
        th,
        td {
          line-height: 23px;
          text-align: left;
          font-size: 12px;
          padding: 5px 10px;
          border-top: none;
          border-bottom: none;
          vertical-align: middle;
        }
        th {
          font-weight: bold;
          vertical-align: top;
        }
        td {
          input {
            width: 220px;
            margin: 0;
          }
          select {
            margin: 0;
          }
          .displayerror {
            margin: 3px 0 0 0;
            display: block;
          }
          .forgot {
            display: inline-block;
          }
          br {
            display: none;
          }
        }
        &.zip {
          td input {
            width: auto;
          }
        }

        &.phone {
          td input {
            width: auto;
          }
        }
      }
    }

    .changeemailaddress {
      table.form-clean td input {
        width: 185px;
      }
    }
    #quick-login {
      border: none;
      float: none;
      margin: 0;
      padding: 0;
      width: 412px;
      text-align: left;
      h5 {
        color: var(--grey3);
        background: none;
        padding: 0;
        margin: 0 0 2px 0;
      }
      #signinhelp {
        background: var(--grey-2);
        border: 1px solid var(--grey);
        list-style: disc;
        padding: 5px 10px 5px 30px;
        margin: 0;
        li {
          font-size: 12px;
          margin: 5px 0;

          a {
            line-height: 16px;

            &:hover {
              line-height: 16px;
              padding: 0;
            }
          }
        }
      }
    }
    .new-customer {
      margin: 20px 0 0 0;
      h2 {
        float: none;
        margin: 0;
      }
      .newaccount {
        margin: 0 0 0 10px;
      }
    }
    .leftcontent {
      .form-footer {
        margin: 0 0 10px 0;
        text-align: right;

        a.btn {
          margin: 0 50px 0 0;
        }
      }
    }
  }

  .solutionpopup {
    margin: 10px 10px 0 10px;
    text-align: left;
    #prodinfo {
      h2 {
        color: var(--grey3);
        font-size: 14px;
        font-weight: bold;
        margin: 0 0 2px 0;

        del {
          text-decoration: line-through;
        }
      }
      #heading {
        margin: 0;
        overflow: hidden;
        h1 {
          background: url("/images/solutions/biofresh-logo.png") 0 0 no-repeat;
          color: var(--grey3);
          font-size: 30px;
          font-weight: normal;
          line-height: 39px;
          margin: 0;
          padding: 0;
          text-indent: -166px;

          #productname_part {
            color: var(--grey3);
            display: inline-block;
            font-size: 23px;
            text-indent: 120px;
          }

          #solutioncontains {
            font-size: 20px;
          }
        }
      }
      #details_top {
        margin: 0 0 10px 0;
      }
    }

    #prodoffer {
      border: 1px solid var(--grey-1);
      margin: 0;
      padding: 0 10px;
      .offer {
        float: left;
        img.prod {
          float: left;
          margin: 0 20px 0 10px;
        }
        .detail {
          float: left;
          margin: 20px 0 0 0;
          h2 {
            font-size: 24px;
            margin: 0 0 5px 0;

            .save {
              color: var(--grey3);
              font-size: 18px;
            }

            .per {
              color: var(--grey3);
              font-size: 14px;
              font-weight: normal;
            }
          }
          .price {
            font-size: 16px;
            margin: 0 0 10px 0;
          }
          .choose {
            color: var(--text2);
            font-size: 16px;
            font-weight: normal;
            float: left;
            line-height: 20px;
            height: 20px;
            cursor: pointer;
            .radio {
              background: url("/images/rxupload/radio-btn.png") 0 0 no-repeat;
              float: left;
              width: 13px;
              height: 13px;
              margin: 4px 5px 0 0;
            }
            .small {
              font-size: 11px;
              font-weight: normal;
              color: #444;
              margin: 0 0 0 20px;
            }
            &.active {
              .radio {
                background: url("/images/rxupload/radio-btn.png") 0 -14px
                  no-repeat;
              }
            }
            &:hover {
              color: var(--black);
            }
          }
        }

        &.three {
          .choose {
            color: var(--text1);
            font-weight: bold;
          }
        }
      }
      .or {
        background: var(--grey-1);
        float: left;
        width: 1px;
        height: 100px;
        overflow: visible;
        position: relative;
        margin: 25px 25px 0 25px;
        img {
          position: absolute;
          top: 50%;
          left: -14px;
          width: 29px;
          height: 28px;
          display: block;
          margin: -14px 0 0 0;
        }
      }
    }

    .asterisk {
      font-size: 11px;
    }

    .links {
      text-align: right;
      margin: -5px 0 0 0;
      .addtocartwrap {
        float: right;

        a.btn {
          margin: 0 45px 0 0;
        }
      }
      .nothanks {
        float: right;
        margin: 0 40px 0 0;

        a {
          color: var(--grey2);
          font-size: 12px;
          line-height: 36px;
        }
      }
    }

    #prodinfo-wrapper {
      width: 630px;
      height: auto;
      float: right;
      margin: -1px 0 10px 0;
      position: relative;
      z-index: 999;
      padding: 0 0 3px 0;
      .product-image {
        width: 260px;
        height: 284px;
        overflow: hidden;
        position: relative;
        text-align: center;

        img {
          width: auto;
          height: auto;
          margin: 0 auto;
        }
        img.oldprodimage {
          margin: 10px 0 0 0;
        }
      }
      .error {
        background-position: 7px center;
        margin: 10px 10px 0 10px;
        padding: 7px 7px 5px 54px;
        line-height: 14px;
        ul li {
          line-height: 14px;
        }
      }

      ul#pricing-details {
        float: none;
        margin: 0 0 10px 0;
        li.em {
          color: var(--grey3);
        }
        li strong {
          width: 75px;
        }
      }
      .badges {
        float: left;
        margin: 3px 0 5px 15px;
        padding: 0;
        height: auto;
        width: 290px;
        a {
          display: block;
          float: left;
        }
        a.moneyback {
          width: 50px;
          height: 50px;
          margin: 0 20px 0 0;
        }
        a.mcafee {
          width: 115px;
          height: 32px;
          margin: 10px 20px 0 0;
        }
        a.verisign {
          width: 80px;
          height: 44px;
          margin: 2px 0 0 0;
        }
      }
      .addtocartwrap {
        float: right;
        margin: 10px 10px 0 0;
        padding: 0;
        width: 200px;
        height: auto;
        text-align: right;
        a {
          text-decoration: none;
          margin: 0 50px 0 0;
        }
      }
      #prescription {
        #power-help {
          background: url("/images/wide/landingpages/halloween/quick-view/power-bubble-bg.png")
            0 0 no-repeat;
          color: var(--grey2);
          float: right;
          width: 300px;
          height: 23px;
          margin: 10px 10px 0 0;
          font:
            normal 12px/18px Arial,
            Helvetica,
            sans-serif;
          text-align: center;
        }
        .lens-variations {
          border-collapse: collapse;
          border-spacing: 0;
          margin: 0 0 10px 0;
          width: auto;
          th,
          td {
            background: none;
            border: none;
            padding: 0;
          }
          th {
            width: 75px;
            text-align: left;
          }
        }
      }
    }

    &.var1 {
      margin: 0;
      .starburst {
        background: url("/images/main-img-sprite.png") -140px -1000px no-repeat;
        width: 120px;
        height: 120px;
        position: absolute;
        z-index: 9999;
        top: -36px;
        left: -48px;
        text-align: left;
        text-indent: -9999px;
      }
      #prodinfo {
        #heading {
          margin: 0 0 0 80px;
          h1 {
            background: none;
            color: var(--red);
            padding: 0;
            margin: 0;
            font-weight: bold;
            font-size: 24px;
            text-indent: inherit;
            line-height: 30px;
          }
        }
        #details_top {
          margin: 0 0 0 80px;
          p {
            line-height: 20px;
            margin: 0 0 7px 0;
          }
          p .logo {
            background: url("/images/solutions/var1/biofresh-logo-small.png") 0
              0 no-repeat;
            display: block;
            padding: 0;
            width: 56px;
            height: 21px;
            margin: -4px 4px 0 0;
            text-indent: -9999px;
            float: left;
          }
          .free-lens-case {
            float: right;
            margin: -10px 60px 0 0;
          }
          ul {
            list-style: none;
            margin: 0 0 0 20px;
          }
          ul li {
            line-height: 20px;
            padding: 3px 0;
            font-size: 14px;
          }
          ul li .icon {
            background: url("/images/main-img-sprite.png") 0 -1210px no-repeat;
            display: block;
            width: 20px;
            height: 20px;
            float: left;
            margin: 0 0 0 -25px;
          }
          ul li.large {
            font-size: 16px;
            padding: 3px 0 0 0;
          }
          ul li.large del {
            color: var(--grey2);
          }
          ul li.large strong {
            line-height: 30px;
          }
          h2 {
            color: var(--red);
            font-size: 20px;
            margin: -10px 0 5px -80px;
            line-height: 24px;
          }
        }
      }
      #prodoffer {
        .offer {
          .detail {
            .price {
              margin: 0 0 30px 0;
            }
          }

          &.one {
            .detail {
              h2 {
                color: #444;
              }
            }
          }
        }
      }
    }
  }

  #errordisplay {
    padding: 10px;
    ul {
      text-align: left;
    }
    ul li {
      font-size: 14px;
      font-weight: bold;
      margin: 0 0 15px 0;
    }
  }
  #partnerpopup,
  #redirectpopup {
    display: block;
    text-align: center;
    padding: 10px;
    h1 {
      color: var(--red);
    }
    h2 {
      color: var(--grey3);
      font-weight: normal;
      text-align: center;
    }
    p {
      font-weight: normal;
    }
  }
  #partnerpopup {
    h1 {
      margin: 0 0 20px 0;
      font-size: 24px;
    }
    h2 {
      margin: 0 0 40px 0;
      font-size: 20px;
    }
    p {
      margin: 0 0 30px 0;
      font-size: 18px;
      line-height: 30px;
    }
    &.gl {
      h2 .logo {
        background: url("/images/simple-logo-w-tag.png") no-repeat 0 0;
        background-size: contain;
        display: inline-block;
        width: 155px;
        height: 26px;
        margin: 0 0 -9px 5px;
      }
      a.btn {
        border-radius: 4px 0 4px 0;
        display: inline-block;
        font:
          normal 27px/36px LeagueGothicRegular,
          Helvetica,
          Arial,
          sans-serif;
        line-height: 36px;
        height: 36px;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        margin: 0;
        padding: 0 30px 0 30px;
        position: relative;

        &.color1 {
          background: #8dc63f;
          border: 1px solid #598527;
          box-shadow: inset 0 0 5px 2px hsla(0, 0%, 100%, 0.3);
          color: var(--white);
          text-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
        }
      }
    }
  }
  #redirectpopup {
    h1 {
      font-size: 30px;
    }
    h2 {
      font-size: 24px;
      margin: 0 0 25px 0;
    }
    p {
      font-size: 16px;
      line-height: 24px;
      padding: 0 50px;
      margin: 0 0 25px 0;
    }
    a.btn {
      line-height: 40px;
      height: 40px;
      font-size: 18px;
      padding: 0 30px;
    }
  }
  #rebate-detail {
    text-align: left;
    .details {
      h3 {
        font-size: 24px;
        line-height: 36px;
        margin: 0;
      }
      h4 {
        color: var(--grey3);
        font-size: 16px;
        font-weight: normal;
        line-height: 20px;
        margin: 0 20px 20px 0;
      }
      h5 {
        color: var(--grey3);
        font-size: 14px;
        margin: 0 0 5px 0;
        text-transform: uppercase;
      }
      ol {
        font-size: 14px;
        list-style: decimal;
        margin: 0 0 10px 20px;

        li {
          line-height: 18px;
          padding: 0 0 7px 0;
        }
      }
      .text {
        float: right;
        width: 420px;
      }
      .giftcard {
        float: left;
        font-size: 16px;
        width: 300px;
        height: auto;
        line-height: 100px;
        margin: 0 0 10px 0;
        text-align: center;

        img {
          display: block;
          margin: 0;
          width: 100%;
          height: auto;
        }
      }
    }

    .terms_conditions {
      color: var(--grey1);
      font-size: 11px;
      line-height: 14px;
      a {
        color: var(--grey1);
      }
      sup {
        font-size: 70%;
      }
      p {
        font-size: 11px;
        line-height: 14px;
      }
    }
  }

  #rebate_removed {
    text-align: left;
  }

  #popup {
    #content {
      #body.replacement_pop {
        padding: 10px;
        h2 {
          color: var(--red);
          font-size: 26px;
          font-weight: normal;
          text-align: center;
          margin: 0 60px 30px;
        }
        .product-display {
          float: left;
          width: auto;
          position: relative;
          z-index: 10;
          height: auto;
          margin: 0;
          .product-image {
            width: 240;
            height: auto;
          }
        }
        #product-information {
          margin: 0 0 30px 20px;
          width: auto;
          position: relative;
          h3 {
            background: 0 0;
            color: var(--red);
            font-weight: 400;
            line-height: 30px;
            padding: 0;
            margin: 0 0 10px;
            font-size: 24px;
            text-align: left;
          }
          ul#pricing-details {
            margin: 0;
            font-size: var(--font_size1);
            font-family: Verdana, Geneva, sans-serif;
            float: left;
            list-style: none;
            line-height: 20px;
            text-align: left;
            li {
              &.packagesize {
                border-radius: 0;
                float: left;
                padding: 0;
                margin: 0 10px 0 0;
                min-width: 157px;
                width: auto;
                .pack {
                  display: block;
                  font-size: 18px;
                  line-height: 22px;
                  margin: 0 0 5px;
                  .number {
                    font-size: 24px;
                  }
                }
                .supply {
                  display: block;
                  font-size: 14px;
                  line-height: 22px;
                }
                .price {
                  color: var(--red);
                  font-size: 20px;
                  font-weight: 400;
                  line-height: 30px;
                  float: none;
                }
              }
            }
          }
        }
        .reviews {
          clear: both;
          text-align: center;
          position: relative;
          padding: 0 0 20px 0;
          width: 100%;
          .overview {
            display: inline-block;
            margin: 0 auto;
            h3.item {
              line-height: 24px;
              background: 0;
              padding-left: 0;
              border: none;
              color: var(--grey3);
              font-size: 14px;
              font-weight: 700;
              float: left;
              margin: 0;
              padding: 0;
            }
          }
          .starrating {
            float: left;
            .stars {
              float: left;
              height: 24px;
              line-height: 24px;
              margin: 0 5px;
              .img {
                display: block;
                float: left;
                margin: 2px 1px 0 0;
              }
            }
            .text {
              float: left;
              font-size: var(--font_size8);
              height: 20px;
              .review_count {
                display: inline;
              }
            }
          }
        }
        .product-description {
          text-align: left;
          padding: 0 10px;
          font-size: var(--font_size1);
          strong {
            font-size: 14px;
          }
        }
        .action {
          text-align: center;
          vertical-align: middle;
          padding: 20px 0 10px 0;
        }
      }
    }
  }

  #discontinued.replacement {
    padding: 30px;
    .inner {
      display: table-row;
      width: 100%;
      text-align: left;
      h3 {
        display: block;
        text-align: center;
        font-size: 24px;
        margin: 0;
      }
      .prod-img {
        .banner_overlay {
          position: relative;
          z-index: 103;
          left: 167px;
          top: 118px;
          width: 270px;
          height: 25px;
          .right_corner {
            border-top: 5px solid transparent;
            border-left: 5px solid #900;
            border-bottom: 5px solid #900;
            border-right: 5px solid transparent;
            right: 0;
            position: absolute;
            top: -10px;
            width: 0;
            height: 0;
          }
          .left_corner {
            border-top: 5px solid transparent;
            border-left: 5px solid transparent;
            border-bottom: 5px solid #900;
            border-right: 5px solid #900;
            left: 0;
            position: absolute;
            top: -10px;
            width: 0;
            height: 0;
          }
          .right_corner {
            border-top: 5px solid transparent;
            border-left: 5px solid #900;
            border-bottom: 5px solid #900;
            border-right: 5px solid transparent;
            right: 0;
            position: absolute;
            top: -10px;
            width: 0;
            height: 0;
          }
          .banner {
            background: var(--red);
            color: var(--white);
            text-align: center;
            width: 100%;
            height: 40px;
            h3 {
              color: var(--white);
              font-size: var(--font_size2);
              font-weight: 700;
              text-align: center;
              text-transform: uppercase;
              line-height: 10px;
              padding: 8px 0 0;
              margin: 0 0 10px;
            }
            p {
              color: var(--white);
              font-size: 12px;
              font-weight: 400;
              text-align: center;
              line-height: 0;
              margin: 0 0 15px;
            }
          }
        }
      }
      img {
        display: block;
        width: 370px;
        height: auto;
        margin: 0 auto;
      }
    }
    .text {
      margin: 5px 15px 0 25px;
      p {
        text-align: left;
        line-height: 22px;
        color: var(--dark-grey);
        font-size: var(--font_size2);
      }
      ul {
        list-style: disc;
        color: var(--dark-grey);
      }
    }
    .action {
      text-align: center;
      margin: 25px 0 0 0;
    }
  }
}

body.fluid {
  #footer {
    #top_footer {
      display: block;
    }
  }
  .fancybox-content {
    &.update-rx {
      form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .product-display {
          margin: 0;
          @media only screen and (max-width: 863px) {
            display: block;
          }
          #product-image {
            margin: 0;
          }
        }
        #product-information {
          margin: 0 0 10px 0;
          h1 {
            margin: 0;
          }
          ul {
            display: none;
          }
        }
        #prescription {
          h2.updaterx {
            text-align: center;
          }
          .products {
            background: var(--grey-3);
            border-radius: 4px;
            box-sizing: border-box;
            padding: 10px;
            text-align: center;
            margin: 0 0 20px 0;
            width: 100%;
            .lens-variations {
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: flex-start;
              margin: 0;
              thead,
              tbody {
                box-sizing: border-box;
                tr {
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  @media only screen and (max-width: 863px) {
                    width: 100%;
                  }
                  th,
                  td {
                    border: none;
                    box-sizing: border-box;
                    display: block;
                    padding: 0 0 10px 0;
                    width: 100%;
                    height: auto;
                    &.price {
                      display: none;
                    }
                  }
                }
              }
              thead {
                padding: 0 10px 0 0;
                tr {
                  height: auto !important;
                  th {
                    line-height: 40px;
                    text-align: left;
                    white-space: nowrap;
                    &.blank {
                      line-height: 30px;
                      &::before {
                        content: " ";
                        white-space: pre;
                      }
                    }
                  }
                }
              }
              tbody {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                padding: 0 0 0 10px;
                width: calc(75% - 10px);
                tr {
                  td {
                    select {
                      background: var(--white);
                      border: 1px solid #dbdbdb;
                      border-radius: 4px;
                      box-sizing: border-box;
                      cursor: pointer;
                      line-height: 40px;
                      height: 40px;
                      width: 100%;
                      outline: none;
                      padding: 0 10px;
                      &#Left_Color_Select,
                      &#Right_Color_Select {
                        display: block;
                      }
                    }
                    .select_color {
                      display: none;
                    }
                    span {
                      line-height: 40px;
                      height: 40px;
                    }
                  }
                  th.eye {
                    text-align: center;
                    margin: 0;
                    line-height: 30px;
                    width: auto;
                    white-space: nowrap;
                  }
                  &.righteye,
                  &.lefteye {
                    width: 100%;
                  }
                  &.lefteye {
                    padding: 0 0 0 5px;
                  }
                }
              }
            }
            #gas-permeable {
              h3 {
                color: var(--text2);
                text-align: center;
                font-weight: bold;
              }
              .lens-variations {
                thead tr th.blank,
                tbody tr th.eye {
                  display: none;
                }
              }
            }
          }
          .processing {
            text-align: center;
          }
          .form-footer {
            display: flex;
            justify-content: space-around;
            column-gap: 10px;
            .btn {
              width: 50%;
            }
          }
        }
      }
    }
  }
}

#send-rx {
  .options {
    .or {
      background: var(--grey-1);
      float: left;
      height: 65px;
      margin: 0 25px;
      overflow: visible;
      position: relative;
      width: 1px;

      img {
        display: block;
        height: 28px;
        left: -14px;
        margin: -14px 0 0;
        position: absolute;
        top: 50%;
        width: 29px;
      }
    }
  }
}

.rrd-container {
  #fancybox {
    .confirmation {
      border-bottom: 1px dotted var(--grey);
      margin-bottom: 20px;
      padding-bottom: 10px;

      p {
        font-size: 13px;
        font-weight: normal;
        line-height: 20px;
        margin: 0;
        padding: 0;
        text-align: center;
      }

      span.name {
        font-size: 22px;
        font-weight: normal;
        line-height: 27px;
      }

      span.success {
        font-weight: normal;
      }
    }
  }
}

/* AO6 React popup. */
.a06_react {
  margin: 0 auto;
  position: relative;
  top: -25px;
  width: 177px;
  .medbtn.color2 {
    background: #e7e7e7;
    border: 1px solid var(--grey);
    border-radius: 3px;
    color: #444;
    padding: 5px 10px;
    &:hover {
      background: #d7d7d7;
    }
  }
}

#colorbox {
  background: var(--white);
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.3);
  box-sizing: content-box;
  z-index: 9999;

  #cboxContent {
    button#cboxClose {
      box-shadow: none;
    }
  }
}
#cboxOverlay {
  background: var(--black);
  height: 100%;
  left: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9998;
}

/* UPP exclusive popup. */
#popup {
  width: 100%;
  margin: 0;
  padding: 0;
  max-width: unset;
  .form-footer {
    margin: 10px auto;
    text-align: center;
  }
  #content {
    background: var(--white);
    padding: 0;
    text-align: left;
    width: auto;
    blockquote {
      font-size: 11px;
    }
    h3 {
      border: 0;
      color: var(--red);
      font-size: 16px;
      font-weight: bold;
      margin: 10px 0 1px 0;
    }
    p {
      font-size: var(--font_size2);
      margin-bottom: 10px;
    }
    ul li {
      font-size: 11px;
      margin-bottom: 5px;
    }
    dl {
      font-size: 11px;

      dt {
        padding-bottom: 4px;
      }
    }

    table.promo {
      td {
        vertical-align: top;
      }
    }

    .lowestprice {
      h1 {
        background: none;
        padding: 0;
      }

      h4 {
        color: var(--grey3);
        margin: 0 0 10px;
      }

      p .price {
        color: var(--red);
      }
    }

    #rx_help {
      img {
        display: block;
        margin: 0 auto 20px;
        width: auto;
      }
    }

    #body {
      padding: 10px;
      overflow-x: hidden;
      ul.square {
        list-style: square;
        margin-left: 20px;

        li {
          font-size: 11px;
          margin-bottom: 5px;
        }
      }

      ol.decimal {
        list-style: decimal;
        margin-left: 20px;
      }

      .centertable {
        margin: 0 auto;

        td {
          margin: 0 auto;
          vertical-align: top;
        }
      }

      .table {
        border-spacing: 2px;

        th {
          background: var(--grey-2);
          border: 1px solid #dbdcca;
          font-size: 11px;
          font-weight: bold;
          padding: 4px;
          text-align: left;

          &.ca {
            background: var(--yellow2);
            color: var(--dark-grey);
          }
        }
      }

      .pricecompare {
        td {
          font-size: 11px;
          line-height: 30px;
          padding-left: 10px;
          text-align: right;
          width: 110px;
        }

        .ca {
          color: var(--red);
          font-weight: bold;
        }
      }
      .border-bottom {
        border-bottom: 1px solid var(--black);
      }

      &.get_your_rx {
        background: none;
        padding: 0;
        text-align: left;
        h1 {
          background: none;
          font-size: 23px;
          padding: 0;
        }
        h4 {
          color: var(--grey3);
          font-size: 18px;
          font-weight: normal;
          line-height: 24px;
        }
        p {
          line-height: 20px;
        }

        .close {
          text-align: center;
          a.btn {
            margin: 0 20px 0 0;
          }
        }
      }
      &.lowestprice {
        background: var(--white);
        padding: 10px;
        text-align: left;
        h1 {
          background: none;
          padding: 0;
        }
        h4 {
          color: var(--grey3);
        }
        p .price {
          color: var(--red);
        }
        .data {
          td {
            line-height: 14px;
            padding: 5px;
            text-align: center;
            vertical-align: middle;
          }
        }
      }
      &.moneyback {
        max-width: 800px;
        padding: 0 10px;
        width: 100%;

        h1 {
          margin: 0;
        }

        p {
          font-size: 12px;
          line-height: 20px;
          margin-bottom: 10px;
          padding: 0;

          &.tiny {
            font-size: 9px;
            margin: 0;
            padding: 10px 10px 0;
          }
        }

        h2 {
          color: var(--grey3);
          font-size: 13px;
          margin: 0 0 0 76px;
        }

        .bluebox {
          margin: 10px;
        }

        .warning {
          margin: 0 10px;

          &.important {
            background: url("/images/icons/no-mail.png") 10px center no-repeat;
          }

          p {
            margin: 0;
          }
        }
      }

      &.smsdisclaimer {
        padding: 0;

        h1 {
          line-height: 30px;
          margin: 0;
        }
      }

      &.shipping {
        h2 {
          color: var(--grey3);
          font-size: 15px;
          margin: 0;

          .normal {
            font-weight: normal;
          }
        }

        table.data {
          margin: 0;

          tr.logos td {
            background: var(--white);
            padding: 5px 0;
            text-align: center;

            img {
              display: block;
              height: 45px;
              margin: 0 auto;
              width: auto;
            }
          }
        }
      }

      &.terms {
        p {
          font-size: 12px;
          margin-bottom: 15px;
        }

        ul li {
          font-size: 12px;
          margin-bottom: 15px;
        }

        h4 {
          margin: 0;
        }
      }

      &.giftcard {
        h1 {
          background: none;
          font-size: 22px;
          padding: 0;

          .altcolor {
            color: var(--grey3);
          }
        }

        h2 {
          color: var(--grey3);
          font-size: 17px;
          margin: 0 0 5px;
        }

        p {
          font-size: 12px;
          line-height: 20px;
          margin: 0 0 15px;

          &.nopad {
            margin-bottom: 5px;
          }
        }

        img.steak {
          display: block;
          float: right;
          margin: 0 0 10px 10px;
        }

        ol {
          font-weight: bold;

          li {
            line-height: 22px;

            .normal {
              font-weight: normal;
            }
          }
        }

        .disclaimer {
          border-top: 1px solid var(--grey);
          margin: 15px 0 0;
          padding: 15px 0 0;

          p {
            font-size: 11px;
          }
        }

        .detailtext {
          background: var(--white);
          font-size: 12px;
          left: 10px;
          padding: 0 30px 0 0;
          position: absolute;
          top: 86px;
        }
      }
    }

    #info {
      border: 0;
    }

    #promo-detail {
      .promogifts {
        margin-top: 10px;

        td img {
          float: left;
          margin: 0 10px 10px 0;
        }
      }

      h4 {
        color: var(--red);
        font-size: 14px;
        font-weight: bold;
      }
    }

    #doctor-info {
      border-collapse: collapse;
      width: 100%;

      td {
        background: var(--grey-2);
        border: 1px solid var(--grey);
        padding: 4px;
        vertical-align: middle;
      }

      th {
        background: var(--yellow2);
        border: 1px solid var(--grey);
        font-size: 11px;
        font-weight: bold;
        padding: 4px;
        text-align: left;
      }
    }

    #doctor-search-results {
      border-collapse: collapse;
      width: 100%;

      td {
        background: var(--grey-2);
        border: 1px solid var(--grey);
        font-size: 11px;
        padding: 4px;
        vertical-align: middle;
      }

      th {
        background: var(--yellow2);
        border: 1px solid var(--grey);
        font-size: 11px;
        font-weight: bold;
        padding: 4px;
        text-align: left;
      }
    }
  }

  #remote-login {
    background: var(--white);
    margin: 20px;
    padding: 30px;
    text-align: left;

    .service {
      font-size: 18px;
      font-weight: bold;
    }

    p {
      font-size: 11px;
      padding: 20px 0 0;
    }

    input[type="button"] {
      cursor: pointer;
      font-size: 14px;
      font-weight: bold;
      padding: 5px 10px;
    }

    ul li {
      padding: 0 0 4px;

      label {
        display: inline-block;
        width: 80px;
      }
    }
  }
}

.popup {
  background: var(--white);
  h1,
  h2,
  h3,
  h4 {
    text-align: left;
  }
  h2 {
    color: var(--red);
    font-size: 20px;
    margin: 10px 0;
  }
  p {
    padding: 0 0 15px 0;
    text-align: left;
  }
  a.submit-feedback {
    background: url("/images/buttons/btn.iwanttoprovidemyfeedback.png")
      no-repeat scroll 0 0 transparent;
    display: block;
    height: 23px;
    margin: 0 auto;
    overflow: hidden;
    text-indent: -9999px;
    width: 205px;
  }
  .close {
    text-align: center;
  }
  .red {
    color: var(--red);
  }
  .btn.red {
    color: var(--white);
  }
  .creditdetail {
    h2 {
      font-size: 14px;
      font-weight: bold;
    }
    p {
      padding-bottom: 7px;
    }
    table {
      border-collapse: collapse;
      width: 100%;
      th,
      td {
        border: 1px solid var(--grey);
        padding: 6px 10px;
        font-size: 12px;
        text-align: center;
        vertical-align: middle;
      }
      th {
        background: var(--grey-3);
        font-weight: bold;
      }
      td {
        background: var(--white);
      }
    }
  }
  .callout {
    background: var(--yellow2);
    border: 2px solid var(--black);
    color: var(--black);
    font-size: 10pt;
    margin: 10px 5px;
    padding: 20px;
  }
  .banner-popup {
    background: url("/images/bg-header.jpg") 0 0 repeat-x var(--white);
    height: 70px;
    text-align: left;
    text-indent: -9999px;
  }
  .form-footer {
    text-align: center;
    margin: 0 auto;
  }

  #content {
    background: var(--white);
  }
  #container {
    text-align: left;
    padding: 10px;
    margin: 0;
  }

  &.d {
    #ttd {
      #shiptable {
        margin: 10px 0;

        &.table {
          border: none;
          border-collapse: collapse;
          border-spacing: 0;
          margin: 0;
          width: 100%;

          th,
          td {
            border: none;
            border-top: 1px solid var(--grey-1);
            padding: 0 6px;
            text-align: center;
            vertical-align: middle;
          }

          th {
            background: var(--grey-3);
            border-top: 1px solid var(--grey-1);
            font-weight: bold;
            line-height: 18px;
            top: 0;
          }

          td {
            background: none;
            font-weight: normal;
            line-height: 25px;
          }

          th.textleft,
          td.textleft {
            text-align: left;
          }

          th.textright,
          td.textright {
            text-align: right;
          }

          .tr_hover {
            td {
              background: var(--grey-3);
              cursor: pointer;
            }
          }

          &.form-clean {
            th,
            td {
              text-align: left;
            }

            th.cost {
              width: 70px;
            }
          }
        }
      }
    }
  }

  &.availablecredit {
    padding: 20px;

    table {
      border-spacing: 2px;

      th {
        background: var(--yellow2);
        border: 1px solid var(--grey);
        font-size: 11px;
        font-weight: bold;
        line-height: 15px;
        padding: 4px;
        text-align: center;
        vertical-align: middle;
      }

      td {
        background: var(--grey-2);
        border: 1px solid var(--grey);
        font-size: 11px;
        padding: 4px;
        text-align: center;
        vertical-align: middle;

        input {
          text-align: center;
        }

        &.apply {
          background: 0;
          border: 0;
          text-align: right;
        }
      }
    }
    #content {
      background: var(--white);
      background-image: none;
    }
  }
  &#insurance-handling {
    #container {
      padding: 0;
      p.text {
        margin: 0 0 20px 0;
        padding: 0;
        line-height: 18px;
      }
    }
  }
}

/* Gmail tabs popup. */
#crucialinfo {
  padding: 0 20px 63px 20px;
  h1 {
    background: var(--main_bar);
    color: var(--white);
    font-size: 24px;
    text-align: center;
    padding: 10px 0;
    margin: 0 -20px 0 -20px;
  }
  h4 {
    display: block;
    font-size: 20px;
    font-weight: normal;
    line-height: 24px;
    height: auto;
    margin: 0;
  }
  p {
    font-size: 14px;
    line-height: 24px;
    margin: 0;
  }
  #step-1,
  #step-2,
  #step-3,
  #step-4,
  #step-5,
  #step-6,
  #step-7,
  #step-8 {
    display: none;
    height: auto;
    padding: 10px 20px 10px 0;
    margin: 0 -20px 0 0;
  }
  #step-1 {
    display: block;
  }
  #step-2 {
    h3 {
      margin: 20px 0 40px 0;
      text-align: center;
    }
  }

  #step-8 {
    .links {
      margin: 20px 0 0 0;
    }
  }
  #step-1,
  #step-2,
  #step-3 {
    .heading {
      .steps {
        background: url("/images/gmail/3-steps-sprite.png") 0 0 no-repeat;
      }
    }
  }
  #step-4,
  #step-5 {
    .heading {
      .steps {
        background: url("/images/gmail/3-steps-sprite.png") 0 -30px no-repeat;
      }
    }
  }

  #step-6.steps {
    .heading {
      .steps {
        background: url("/images/gmail/3-steps-sprite.png") 0 -60px no-repeat;
      }
    }
  }

  #step-7,
  #step-8 {
    .heading {
      .steps {
        background: url("/images/gmail/3-steps-sprite.png") 0 -60px no-repeat;
      }
    }
  }

  .heading {
    margin: 0;
    width: 740px;
    h2 {
      color: var(--grey3);
      font-size: 20px;
      font-weight: normal;
      float: left;
    }
    .steps {
      background: url("/images/gmail/steps-sprite.png") 0 0 no-repeat;
      float: right;
      width: 343px;
      height: 30px;
      margin: 0 0 10px 0;
    }
    h3 {
      color: var(--grey3);
      font-size: 20px;
      line-height: 24px;

      &.aligncenter {
        text-align: center;
      }
    }
  }

  .step {
    margin: 0 0 20px 0;
    p,
    ul {
      font-size: 13px;
    }
    ul {
      list-style: none;
      text-align: left;
      margin: 0 0 0 34px;
      font-size: 15px;

      li {
        line-height: 24px;
      }
    }
    .step-heading {
      margin: 0 0 10px 0;
      padding: 0 0 0 34px;
      .icon {
        background: var(--main_bar);
        border-radius: 12px;
        color: var(--white);
        display: block;
        float: left;
        font-size: 14px;
        font-weight: bold;
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        margin: 0 0 0 -34px;
        padding: 0;
      }
      h4 {
        float: left;
      }
    }
    .step-image {
      margin: 0;

      img {
        display: block;
      }
    }
  }
  .step-1 {
    p {
      margin: 0 0 0 34px;
    }
  }
  .links {
    padding: 0 0 20px 0;
    width: 740px;
    .btn.left {
      float: left;
    }
    .btn.right {
      float: right;
    }
  }

  .need-help {
    background: url("/images/gmail/chat-gradient.png") 0 0 repeat-x #e4e4e4;
    border-top: 1px solid var(--grey1);
    width: 760px;
    height: 30px;
    padding: 10px;
    position: absolute;
    bottom: 0;
    left: 0;
    img {
      display: none;
      float: left;
      margin: 0 10px 0 0;
    }
    .text {
      float: left;
      margin: 0;
      h5 {
        color: var(--grey3);
        font-size: 14px;
        display: inline;
        text-align: left;
        line-height: 30px;
        margin: 0;
      }
      p {
        color: var(--grey3);
        display: inline;
        font-size: 11px;
        text-align: left;
        line-height: 30px;
        padding: 0;
      }
    }
    .email {
      float: right;
      display: block;
      line-height: 30px;
      height: 30px;
      width: auto;
    }
  }
}

ol {
  img.pd_ruler {
    display: block;
    float: right;
    margin: 0 0 0 20px;
    height: auto;
    width: 330px;
    max-width: 100%;
  }
  li.rx {
    height: 110px;
    position: relative;
    img {
      display: block;
      margin: 0;
      height: auto;
      width: 396px;
      max-width: 100%;
      position: absolute;
      top: 25px;
      right: 0;
      z-index: 10;
    }
    p {
      position: relative;
      z-index: 11;
    }
  }
}
@media only screen and (max-width: 1200px) {
  ol {
    img.pd_ruler {
      float: none;
      margin: 0;
    }
    li.rx {
      height: auto;
      img {
        position: relative;
        top: 0;
      }
      p {
        position: relative;
      }
    }
  }
}

.measure_pd {
  .pd_scanner {
    display: inherit;
    width: 100%;
    img {
      max-width: 125px;
      float: right;
    }
  }
  ol {
    li {
      p {
        line-height: 22px;
        margin: 0;
      }
      .btn.color1 {
        float: none;
        display: block;
        max-width: 275px;
      }
    }
  }
}

#cboxContent {
  #cboxLoadedContent {
    #address_verification {
      padding: 20px 20px 65px 20px;
      h1 {
        font-size: 24px;
        line-height: 30px;
        float: left;
      }
      p {
        font-size: 12px;
        text-align: left;
        margin: 0 0 5px 0;
        line-height: 20px;
      }
      img.usps,
      img.fedex {
        float: right;
        display: block;
      }
      .compare {
        float: left;
        width: 100%;
        padding: 10px 0;
        > .box {
          margin: 0 0 10px 0;
          float: left;
          width: 50%;
          text-align: left;
          .styled_checkbox {
            display: block;
            margin: 0 0 10px 0;
          }
          p.address {
            margin: 0 0 10px 0;
          }
        }
        h3 {
          text-align: center;
        }
        table {
          th {
            width: 80px;
          }
          td.checkbox {
            width: 20px;
            padding: 0 3px 0 0;
          }
        }
        .links {
          padding: 20px 0 0 0;
          .btn {
            background: var(--main_btn);
            color: var(--main_btn_text);
          }
        }
        > .divider {
          background: var(--grey1);
          height: 2px;
          margin: 28px 0 10px 0;
          float: none;
          width: 100%;
          position: relative;
          .or {
            background: var(--white);
            color: var(--black);
            position: absolute;
            top: 50%;
            right: 50%;
            width: 44px;
            height: 20px;
            margin: -10px -22px 0 0;
            text-align: center;
            font-size: 20px;
          }
        }
      }
      #new_address {
        float: left;
        width: 100%;
        text-align: left;
        .box {
          margin: 0 0 10px 0;
        }
        h3 {
          text-align: center;
        }
        .form {
          div {
            width: 78%;
            text-align: left;
          }
          input {
            width: 100%;
            display: inline-block;
            border: 1px solid var(--grey1);
            color: var(--black);
          }
          select {
            width: 150px;
            border: 1px solid var(--grey1);
            color: var(--black);
            &#avstate {
              width: 100%;
            }
          }
          .label {
            background: var(--grey-3);
            border: 1px solid var(--grey1);
            border-radius: 4px 0 0 4px;
            box-sizing: border-box;
            font-weight: normal;
            width: 120px;
            padding: 10px;
            text-align: right;
            line-height: 20px;
            @media only screen and (max-width: 620px) {
              width: 168px;
              display: block;
              text-align: left;
            }
          }
          .field {
            border: solid var(--grey1);
            border-width: 1px 1px 1px 0;
            border-radius: 0 4px 4px 0;
            box-sizing: border-box;
            width: calc(100% - 120px);
            @media only screen and (max-width: 620px) {
              display: block;
              width: 100%;
            }
            input,
            select {
              border: none;
              box-sizing: border-box;
              line-height: 40px;
              height: 40px;
              padding: 0 10px;
              width: 100%;
            }
          }
          .clear {
            display: none;
          }
          li {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            width: 100%;
            margin: 0 0 10px 0;
            @media only screen and (max-width: 620px) {
              margin: 0 0 5px 0;
              padding: 0;
            }
            &.group {
              justify-content: space-between;
              @media only screen and (max-width: 620px) {
                margin: 0;
                flex-direction: column;
              }
              .left {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-start;
                margin: 0;
                width: 49%;
                @media only screen and (max-width: 620px) {
                  float: none;
                  width: 100%;
                  margin: 0 0 5px 0;
                }
                .field {
                  width: 180px;
                  @media only screen and (max-width: 620px) {
                    width: 100%;
                  }
                }
                &.first {
                  @media only screen and (max-width: 620px) {
                    margin: 0 0 5px 0;
                  }
                }
                &.last_name {
                  .label {
                    margin: 0;
                  }
                }
              }
              &::after {
                content: "\0020";
                clear: both;
                display: block;
                float: none;
                overflow: hidden;
                visibility: hidden;
                width: 0;
                height: 0;
                margin: 0;
                padding: 0;
              }
            }
            &.phone {
              .field {
                justify-content: flex-start;
                width: fit-content;
                input {
                  width: auto;
                  &#avphoneareacode {
                    width: 50px;
                    order: 2;
                  }
                  &#avphonenumber {
                    width: 140px;
                    order: 4;
                  }
                }
                &::before {
                  content: "(";
                  order: 1;
                  font-size: 18px;
                  padding: 0 0 0 10px;
                }
                &::after {
                  content: ")";
                  order: 3;
                  font-size: 18px;
                }
              }
            }
            &.divider {
              margin: 0;
            }
            &.submit {
              padding: 10px 0;
              justify-content: center;
              .btn {
                background: var(--main_btn);
                color: var(--white);
                box-shadow: 0 3px 2px -2px rgba(0, 0, 0, 0.4);
                @media only screen and (max-width: 620px) {
                  width: 100%;
                  margin: 0;
                }
              }
            }
          }
        }
      }
      #confirm_address {
        width: 100%;
        h3 {
          text-align: left;
          font-size: 16px;
          margin: 0 0 3px 0;
        }

        .form {
          div {
            width: 78%;
            text-align: left;
          }
          input {
            width: 100%;
            display: inline-block;
            border: 1px solid var(--grey1);
            color: var(--black);
          }
          select {
            width: 150px;
            border: 1px solid var(--grey1);
            color: var(--black);
            &#avstate {
              width: 100%;
            }
          }
          .label {
            background: var(--grey-3);
            border: 1px solid var(--grey1);
            border-radius: 4px 0 0 4px;
            box-sizing: border-box;
            font-weight: normal;
            width: 120px;
            padding: 10px;
            text-align: right;
            line-height: 20px;
            @media only screen and (max-width: 620px) {
              width: 168px;
              display: block;
              text-align: left;
            }
          }
          .field {
            border: solid var(--grey1);
            border-width: 1px 1px 1px 0;
            border-radius: 0 4px 4px 0;
            box-sizing: border-box;
            width: calc(100% - 120px);
            @media only screen and (max-width: 620px) {
              display: block;
              width: 100%;
            }
            input,
            select {
              border: none;
              box-sizing: border-box;
              line-height: 40px;
              height: 40px;
              padding: 0 10px;
              width: 100%;
            }
          }
          .clear {
            display: none;
          }
          li {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            width: 100%;
            margin: 0 0 10px 0;
            @media only screen and (max-width: 620px) {
              margin: 0 0 5px 0;
              padding: 0;
            }
            &.group {
              justify-content: space-between;
              @media only screen and (max-width: 620px) {
                margin: 0;
                flex-direction: column;
              }
              .left {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-start;
                margin: 0;
                width: 49%;
                @media only screen and (max-width: 620px) {
                  float: none;
                  width: 100%;
                  margin: 0 0 5px 0;
                }
                .field {
                  width: 180px;
                  @media only screen and (max-width: 620px) {
                    width: 100%;
                  }
                }
                &.first {
                  @media only screen and (max-width: 620px) {
                    margin: 0 0 5px 0;
                  }
                }
                &.last_name {
                  .label {
                    margin: 0;
                  }
                }
              }
              &::after {
                content: "\0020";
                clear: both;
                display: block;
                float: none;
                overflow: hidden;
                visibility: hidden;
                width: 0;
                height: 0;
                margin: 0;
                padding: 0;
              }
            }
            &.phone {
              .field {
                justify-content: flex-start;
                width: fit-content;
                input {
                  width: auto;
                  &#avphoneareacode {
                    width: 50px;
                    order: 2;
                  }
                  &#avphonenumber {
                    width: 140px;
                    order: 4;
                  }
                }
                &::before {
                  content: "(";
                  order: 1;
                  font-size: 18px;
                  padding: 0 0 0 10px;
                }
                &::after {
                  content: ")";
                  order: 3;
                  font-size: 18px;
                }
              }
            }
            &.divider {
              margin: 0;
            }
            &.submit {
              padding: 10px 0;
              justify-content: center;
              .btn {
                background: var(--main_btn);
                color: var(--white);
                box-shadow: 0 3px 2px -2px rgba(0, 0, 0, 0.4);
                @media only screen and (max-width: 620px) {
                  width: 100%;
                  margin: 0;
                }
                i.fa {
                  display: none;
                }
              }
            }
          }
        }
        .verify {
          text-align: center;
          font-weight: bold;
          padding: 5px 0;
          line-height: 20px;
          label,
          label:focus,
          label:active {
            border: none;
            outline: none;
            cursor: pointer;
          }
          input {
            outline: none;
          }
        }
      }
      .need_help {
        padding: 8px 0 0 0;
        font-size: 12px;
      }
    }
  }
  button#cboxClose {
    background: none;
    color: #676767;
    cursor: pointer;
    display: inline-block;
    font: bold normal normal 14px/1 "Font Awesome 6 Pro";
    font-size: 20px;
    line-height: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
    text-decoration: none;
    text-rendering: auto;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1103;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    .fa-lg {
      font-size: 20px;
    }
    &:hover {
      color: var(--grey3);
    }
    &:focus {
      outline: none;
    }
  }
}

/* Email capture popup. */
#signuppopup-container {
  color: var(--white);
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -333px 0 0 -333px;
  z-index: 1001;
  width: 667px;
  height: 667px;

  #signuppopup {
    background: url("/images/email/circle1.png") left top no-repeat;
    position: relative;
    padding: 60px 90px;
    text-align: center;
    height: 550px;
    font-family: Arial, Helvetica, sans-serif;

    h1 {
      background: none;
      text-align: center;
      color: var(--white);
      font-family: Arial, Helvetica, sans-serif;
      font-size: 62px;
      font-weight: normal;
      text-transform: uppercase;
      padding: 0;
      line-height: 60px;
      margin: 120px 0 30px 0;
    }
    h2 {
      color: var(--white);
      font-family: Arial, Helvetica, sans-serif;
      font-weight: normal;
      font-size: 25px;
      text-align: center;
      line-height: 30px;
      margin: 0 0 30px 0;
      padding: 0;
    }
    a.submit {
      background: var(--black);
      color: var(--white);
      display: block;
      width: 250px;
      height: 40px;
      line-height: 40px;
      font-weight: bold;
      text-transform: uppercase;
      font-size: 24px;
      margin: 20px auto 10px auto;
      text-decoration: none;
    }
    p.legal {
      font-size: 12px;
      text-align: center;
    }
    p.legal a {
      color: var(--white);
    }
    .center {
      display: none;
    }
    .close {
      display: block;
      margin: 0 auto 80px auto;
    }
    .email {
      background: var(--white);
      border: 1px solid var(--grey2);
      box-shadow: inset 3px 3px 10px rgba(0, 0, 0, 0.2);
      line-height: 40px;
      height: 40px;
      padding: 0 10px;
      margin: 0 0 5px 0;

      input {
        background: none;
        border: none;
        color: var(--grey2);
        display: block;
        font-size: 20px;
        height: 40px;
        margin: 0;
        padding: 0;
        width: 100%;
      }
    }
    .error {
      background: url("/images/icons/alert.png") 10px center no-repeat var(--white);
      border: 1px dashed var(--red);
      color: #c03;
      margin: 0;
      padding: 5px 10px 5px 35px;
      text-align: left;
    }

    @media only screen and (max-width: 767px), screen and (max-height: 660px) {
      background-position: center center;
      background-size: cover;
      padding: 40px 40px;
      width: 320px;
      height: 320px;
      h1 {
        font-size: 32px;
        line-height: 30px;
        margin: 60px 0 10px 0;
      }
      h2 {
        font-size: 15px;
        line-height: 20px;
        margin: 0 0 10px 0;
      }
      a.submit {
        font-size: 20px;
        margin: 20px auto;
        height: 30px;
        line-height: 30px;
      }
      p.legal {
        padding: 0 20px;
      }
      .email {
        line-height: 30px;
        height: 30px;
        margin: 0 0 5px 0;

        input {
          font-size: 16px;
          height: 30px;
        }
      }
    }
  }
}

@media only screen and (max-width: 767px), screen and (max-height: 660px) {
  #fancybox-inner {
    #signuppopup-container {
      height: 400px;
      margin: -200px 0 0 -200px;
      width: 400px;
    }
  }
}

body.ie {
  #fancybox-wrap {
    #fancybox-outer {
      #fancybox-inner {
        .newaddress {
          input {
            height: 30px;
          }
        }
        .editpayment {
          input {
            height: 30px;
          }
          .visa.selected {
            background: url("/commonimages/logos/visa.svg") 0 0 no-repeat;
            background-size: 155px 97px;
          }
          .mc.selected {
            background: url("/commonimages/logos/mastercard.svg") 0 0 no-repeat;
            background-size: 155px 97px;
          }
          .amex.selected {
            background: url("/commonimages/logos/americanexpress.svg") 0 0
              no-repeat;
            background-size: 155px 97px;
          }
          .disc.selected {
            background: url("/commonimages/logos/discover.svg") 0 0 no-repeat;
            background-size: 155px 97px;
          }
        }
      }
    }
  }
}

.fancybox-content {
  &.moneyback {
    width: 100%;
    max-width: 800px;
    h1 {
      margin: 0;
    }
    p {
      font-size: 12px;
      margin-bottom: 10px;
      padding: 0;
      line-height: 20px;
    }
    h2 {
      color: var(--grey3);
      font-size: 13px;
      margin: 0 0 0 76px;
      @media only screen and (max-width: 863px) {
        margin: 0 0 20px 0;
        line-height: 16px;
      }
    }
    .bluebox {
      margin: 10px;
    }
    .warning {
      margin: 0 10px;

      &.important {
        background: url("/images/icons/no-mail.png") 10px center no-repeat;
      }

      p {
        margin: 0;
      }
    }
    p.tiny {
      font-size: 9px;
      padding: 10px 10px 0 10px;
      margin: 0;
    }
  }
  &.smsdisclaimer {
    width: 100%;
    max-width: 500px;
    h1 {
      line-height: 30px;
    }
    p {
      font-size: 11px;
    }
  }
  &#frame_size_help {
    width: 100%;
    max-width: 800px;
  }
  &#rebate-detail {
    text-align: left;
    width: 100%;
    max-width: 350px;
    @media only screen and (max-width: 863px) {
      width: auto;
    }
    .details {
      h3 {
        font-size: 24px;
        line-height: 36px;
        margin: 0;
      }
      h4 {
        color: var(--grey3);
        font-size: 16px;
        font-weight: normal;
        line-height: 20px;
        margin: 0 20px 20px 0;
      }
      h5 {
        color: var(--grey3);
        font-size: 14px;
        margin: 0 0 5px 0;
        text-transform: uppercase;
      }
      ol {
        font-size: 14px;
        list-style: decimal;
        margin: 0 0 10px 20px;

        li {
          line-height: 18px;
          padding: 0 0 7px 0;
        }
      }
      .text {
        float: right;
        width: 60%;
        @media only screen and (max-width: 863px) {
          width: 100%;
        }
      }
      .giftcard {
        float: left;
        font-size: 16px;
        width: 40%;
        height: auto;
        line-height: 100px;
        margin: 0 0 10px 0;
        text-align: center;
        padding: 0 10px 0 0;
        box-sizing: border-box;
        @media only screen and (max-width: 863px) {
          width: 100%;
          padding: 0;
        }
        img {
          display: block;
          margin: 0;
          width: 100%;
          height: auto;
          @media only screen and (max-width: 863px) {
            max-width: 150px;
          }
        }
      }
    }

    .terms_conditions {
      color: var(--grey1);
      font-size: 11px;
      line-height: 14px;
      a {
        color: var(--grey1);
      }
      sup {
        font-size: 70%;
      }
      p {
        font-size: 11px;
        line-height: 14px;
      }
    }
    #info {
      .top_bar {
        background: var(--grey-3);
        color: var(--grey2);
        font-size: 14px;
        font-weight: bold;
        line-height: 40px;
        margin: -30px -30px 20px -30px;
        text-align: center;
      }
      .heading {
        text-align: center;
        margin: 0 0 15px 0;
        h3 {
          color: var(--black);
          font-size: 20px;
          line-height: 30px;
        }
        h4 {
          color: var(--grey2);
          font-size: 14px;
          font-weight: normal;
          text-align: center;
        }
      }
      .rebate_card {
        width: 200px;
        height: auto;
        margin: 0 auto 25px auto;
        img {
          display: block;
          width: 100%;
          height: auto;
        }
      }
      .divider {
        border-top: 1px solid var(--grey);
        text-align: center;
        position: relative;
        margin: 0 0 30px 0;
        .text {
          background: var(--white);
          box-sizing: border-box;
          color: var(--grey2);
          display: inline-block;
          line-height: 30px;
          position: absolute;
          top: -15px;
          left: 50%;
          margin: 0 0 0 -45px;
          padding: 0 5px;
          height: 30px;
          width: 90px;
        }
      }
      ol {
        list-style: none;
        margin: 0;
        li {
          padding: 0 0 0 75px;
          margin: 0 0 15px 0;
          position: relative;
          font-size: 14px;
          line-height: 20px;
          .icon {
            position: absolute;
            top: 0;
            left: 0;
            height: 40px;
            width: 40px;
            .number {
              color: var(--grey);
              font-size: 42px;
              font-weight: bold;
              line-height: 40px;
            }
            i.fas {
              font-size: 32px;
              color: var(--bright_blue);
              position: absolute;
              top: 0;
              left: 30px;
              line-height: 40px;
            }
          }
        }
      }
    }
  }
  &#autoship-detail {
    text-align: left;
    width: 100%;
    max-width: 460px;
    background-color: var(--grey-3);
    padding: 0 0 30px 0;
    @media only screen and (max-width: 863px) {
      width: auto;
    }
    #info {
      .heading {
        text-align: center;
        display: flex;
        padding: 30px;
        background: #e8f6ff;
        align-items: center;
        flex-direction: column;
        .title {
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 0 10px 0;
          column-gap: 10px;
          .icon {
            width: 70px;
            height: 70px;
            min-width: 70px;
            @media only screen and (max-width: 863px) {
              width: 50px;
              height: 50px;
              min-width: 50px;
            }
            #autoship_logo {
              width: 70px;
              height: 70px;
              margin: 0;
              @media only screen and (max-width: 863px) {
                width: 50px;
                height: 50px;
                margin: 0;
              }
            }
          }
          h1 {
            font-family: "Futura PT", sans-serif;
            color: var(--black);
            font-size: 44px;
            font-weight: bold;
            line-height: 44px;
            margin: 0;
            @media only screen and (max-width: 863px) {
              text-align: center;
              font-size: 35px;
              line-height: 35px;
              max-width: 600px;
            }
            span {
              position: relative;
              color: var(--bright_blue);
              font-weight: bold;
              &:after {
                content: "";
                position: absolute;
                bottom: 0;
                height: 1px;
                width: 75px;
                border-bottom: 2px solid var(--yellow);
                left: 50%;
                transform: translate(-50%, -50%);
                @media only screen and (max-width: 863px) {
                  bottom: 0;
                  width: 50px;
                }
              }
            }
          }
        }
        h4 {
          color: var(--black);
          font-size: 14px;
          font-weight: normal;
          text-align: center;
          line-height: 16px;
          @media only screen and (max-width: 863px) {
            font-size: 12px;
            line-height: 14px;
          }
        }
      }
      .divider {
        border-top: 1px solid var(--grey);
        text-align: center;
        position: relative;
        margin: 30px auto;
        width: 200px;
        .text {
          background-color: var(--grey-3);
          box-sizing: border-box;
          color: #696969;
          font-weight: bold;
          display: inline-block;
          line-height: 30px;
          position: absolute;
          top: -16px;
          left: 50%;
          margin: 0 0 0 -51px;
          padding: 0 5px;
          height: 30px;
          width: 100px;
        }
      }
      ol {
        list-style: none;
        margin: 0 auto;
        max-width: 330px;
        padding: 0 30px;
        li {
          padding: 0 0 0 70px;
          margin: 0 0 25px 0;
          position: relative;
          font-size: 14px;
          line-height: 20px;
          color: #696969;
          .icon {
            position: absolute;
            top: 0;
            left: 0;
            height: 40px;
            width: 40px;
            display: flex;
            align-items: center;
            .number {
              color: var(--white);
              font-size: 42px;
              font-weight: bold;
              line-height: 12px;
              margin: 10px 5px 0 0;
              border-radius: 50%;
              width: 50px;
              height: 50px;
              padding: 20px 20px 20px 14px;
              background: var(--bright_blue);
            }
          }
        }
      }
    }
  }
  &#ttd {
    text-align: left;
    @media only screen and (max-width: 863px) {
      text-align: center;
      padding: 10px 10px 20px 10px;
    }
    h1 {
      border-bottom: 1px solid var(--black);
      margin: 0 0 20px 0;
      @media only screen and (max-width: 863px) {
        font-size: 17px;
        margin: 0 0 10px 0;
      }
    }
    h2 {
      font-size: 16px;
      font-weight: bold;
    }
    .form-footer {
      text-align: center;
    }
    #delivery_schedule_schematic {
      background: url("/commonimages/ttd/ttd-bg.png") 0 0 no-repeat;
      width: 660px;
      height: 160px;
      margin: 0 0 10px 0;
      padding: 15px 25px 25px 20px;
      @media only screen and (max-width: 863px) {
        background: var(--grey-3);
        border: 1px solid var(--grey-1);
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px;
        height: auto;
        width: 100%;
      }
      .heading {
        padding: 0 0 20px 0;
        width: 100%;
        height: 20px;
        @media only screen and (max-width: 863px) {
          display: none;
        }
        .lborder,
        .rborder {
          padding: 8px 0;
          float: left;
          width: 215px;
          .inner {
            background: var(--grey2);
            height: 3px;
            line-height: 3px;
          }
        }
        .lborder {
          border-left: 3px solid var(--grey2);
        }
        .text {
          font-size: 18px;
          float: left;
          margin: 0 10px;
        }
        .rborder {
          border-right: 3px solid var(--grey2);
        }
      }
      .placed {
        float: left;
        width: 60px;
        font-size: 11px;
        font-weight: bold;
        text-align: center;
        line-height: 12px;
        margin: 0 10px 0 0;
        @media only screen and (max-width: 863px) {
          background: var(--grey);
          float: none;
          margin: 0 0 5px 0;
          width: 100%;
        }
        .icon {
          background: url("/commonimages/ttd/ttd-pc-icon.png") 0 0 no-repeat;
          width: 60px;
          height: 50px;
          @media only screen and (max-width: 863px) {
            background: url(/siteimages/main-sprite.png) 0 4px no-repeat;
            display: inline-block;
            width: 26px;
            height: 30px;
            padding: 0;
            margin: 0 10px 0 0;
            vertical-align: top;
          }
        }
        .text {
          @media only screen and (max-width: 863px) {
            display: inline-block;
            color: var(--white);
            height: 30px;
            line-height: 30px;
            margin: 0;
            font-weight: bold;
            vertical-align: top;
            text-align: center;
            font-size: 15px;
          }
        }
      }
      .text {
        font-size: var(--font_size1);
      }
      .verify,
      .processing,
      .shipping {
        color: var(--grey3);
        float: left;
        height: 44px;
        font-size: 12px;
        padding: 7px 0 0 10px;
        font-weight: normal;
        line-height: 16px;
        @media only screen and (max-width: 863px) {
          float: none;
          height: auto;
          line-height: 20px;
        }
        strong {
          display: block;
          font-size: 15px;
          font-weight: normal;
          @media only screen and (max-width: 863px) {
            display: inline;
            font-weight: bold;
          }
        }
      }
      .verify {
        background: url("/commonimages/ttd/ttd-verify.png") 0 0 no-repeat;
        width: 120px;
      }
      .processing {
        background: url("/commonimages/ttd/ttd-processing.png") 0 0 no-repeat;
        width: 142px;
        padding: 7px 0 0 20px;
      }
      .shipping {
        background: url("/commonimages/ttd/ttd-ship-animate.gif") 0 0 no-repeat;
        width: 162px;
        padding: 7px 0 0 20px;
        margin: 0 10px 0 0;
        @media only screen and (max-width: 863px) {
          margin: 0 0 10px 0;
        }
      }
      @media only screen and (max-width: 863px) {
        .verify,
        .processing,
        .shipping {
          background: none;
          width: 100%;
          padding: 0;
        }
      }
      .plus {
        color: var(--grey2);
        font-weight: bold;
        font-size: 28px;
        float: left;
        width: 17px;
        height: 43px;
        line-height: 42px;
        text-align: center;
        margin: 0 0 0 6px;
        @media only screen and (max-width: 863px) {
          margin: 0;
          font-size: 24px;
          text-align: center;
          height: 15px;
          line-height: 15px;
        }
      }
      .delivered {
        float: left;
        width: 60px;
        font-size: 11px;
        font-weight: bold;
        text-align: center;
        line-height: 12px;
        @media only screen and (max-width: 863px) {
          background: var(--grey);
          float: none;
          margin: 0;
          width: 100%;
        }
        .icon {
          background: url("/commonimages/ttd/ttd-box.png") 0 0 no-repeat;
          width: 51px;
          height: 56px;
          margin: 0 0 -5px 0;
          @media only screen and (max-width: 863px) {
            background: url(/siteimages/main-sprite.png) 0 -466px no-repeat;
            display: inline-block;
            width: 26px;
            height: 30px;
            padding: 0;
            margin: 0 10px 0 0;
            vertical-align: top;
          }
        }
        .text {
          @media only screen and (max-width: 863px) {
            display: inline-block;
            color: var(--white);
            height: 30px;
            line-height: 30px;
            margin: 0;
            font-weight: bold;
            vertical-align: top;
            text-align: center;
            font-size: 15px;
          }
        }
      }
      &.no-verify {
        width: 456px;
        padding: 15px 105px 25px 100px;
        .verify {
          display: none;
        }
        .plus.first {
          display: none;
        }
        .heading {
          .lborder,
          .rborder {
            float: left;
            padding: 8px 0;
            width: 145px;
          }
        }
        .processing {
          background: url("/commonimages/ttd/ttd-verify.png") 0 0 no-repeat;
          width: 111px;
          padding: 7px 0 0 10px;
        }
      }
    }
    #delivery_schedule_description {
      font-size: 14px;
      width: 660px;
      margin: 0 auto 20px auto;
      @media only screen and (max-width: 863px) {
        font-size: 12px;
        margin: 0 0 10px 0;
        width: 100%;
        text-align: left;
      }
    }
    #shiptable {
      width: 660px;
      margin: 0 auto;
      padding: 0 0 20px 0;
      @media only screen and (max-width: 863px) {
        width: 100%;
        padding: 0 0 10px 0;
      }
      table {
        border-spacing: 2px;
        width: 100%;
        float: left;
        margin: -4px 0 0 -2px;
        th {
          background: var(--yellow2);
          border: 1px solid var(--grey);
          font-size: 12px;
          font-weight: bold;
          padding: 4px;
          text-align: center;
          position: relative;
        }
        td {
          background: var(--grey-2);
          border: 1px solid var(--grey);
          font-size: 12px;
          padding: 4px;
          text-align: center;
          vertical-align: middle;
          &.textleft {
            text-align: left;
          }
          &.textright {
            text-align: right;
          }
        }
        .tr_hover {
          td {
            background: var(--grey);
            cursor: pointer;
          }
        }
      }
    }
    .confirmed {
      display: block;
      width: 147px;
      height: 23px;
      margin: 10px auto 0 auto;
    }
  }
  &.postordersurvey {
    padding: 60px 30px;
    max-width: 620px;
    width: 100%;
    @media only screen and (max-width: 863px) {
      padding: 20px 10px;
      width: calc(100% - 20px);
    }
    .content {
      text-align: center;
      h2 {
        color: var(--text1);
        font-size: 28px;
        font-weight: normal;
        text-align: center;
        margin: 0 0 40px 0;
        @media only screen and (max-width: 863px) {
          font-size: 22px;
          margin: 10px 0 20px 0;
        }
      }
      .question {
        margin: 0 0 40px 0;
        @media only screen and (max-width: 863px) {
          margin: 0 0 20px 0;
        }
        p {
          border-bottom: 1px solid #707070;
          display: block;
          font-size: 18px;
          font-weight: bold;
          line-height: 24px;
          padding: 0 0 20px 0;
          margin: 0 0 20px 0;
          text-align: left;
          @media only screen and (max-width: 863px) {
            font-size: 16px;
            padding: 0 0 15px 0;
            margin: 0 0 15px 0;
          }
        }
        &.score {
          .rating_score {
            #reviewScoreGroup {
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              align-items: center;
              list-style: none;
              margin: 0;
              padding: 0;
              li {
                width: calc(10% - 10px);
                position: relative;
                @media only screen and (max-width: 863px) {
                  width: calc(10% - 4px);
                }
                input[type="radio"] {
                  visibility: hidden;
                  position: absolute;
                  top: 0;
                  left: 0;
                  &:checked + label {
                    background: #62ae3c;
                    border: none;
                    color: var(--white);
                  }
                }
                label {
                  background: var(--grey-3);
                  border: 1px solid #707070;
                  border-radius: 4px;
                  cursor: pointer;
                  display: block;
                  font-size: 18px;
                  line-height: 40px;
                  height: 42px;
                  width: 100%;
                  text-align: center;
                  @media only screen and (max-width: 863px) {
                    width: 100%;
                  }
                  &:hover {
                    background: var(--grey-1);
                    box-shadow:
                      0 3px 3px 0 rgba(0, 0, 0, 0.14),
                      0 1px 7px 0 rgba(0, 0, 0, 0.12),
                      0 3px 1px -1px rgba(0, 0, 0, 0.2);
                  }
                }
              }
            }
            .scrore_caption {
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              align-items: center;
              .caption {
                color: #707070;
                font-size: 16px;
                line-height: 20px;
                @media only screen and (max-width: 863px) {
                  font-size: 12px;
                }
              }
            }
          }
        }
        &.response {
          margin: 0 0 20px 0;
          p {
            border: none;
            padding: 0;
            margin: 0 0 10px 0;
          }
          textarea {
            width: 100%;
            height: 120px;
            font-size: 16px;
          }
        }
      }
      button.btn {
        margin: 0 auto;
        font-size: 22px;
        line-height: 50px;
        height: 50px;
        padding: 0 30px;
        &.disabled {
          background: var(--grey1);
          cursor: default;
        }
      }
      &#leave-a-review {
        @media only screen and (max-width: 863px) {
          max-width: 100%;
        }
        h2 {
          margin: 0 0 20px 0;
        }
        #review-wrapper {
          .trustpilot-widget {
            iframe {
              width: 100% !important;
            }
          }
        }
      }
      &.thanks-for-completing {
        p {
          display: block;
          font-size: 18px;
          font-weight: bold;
          padding: 0 0 20px 0;
          margin: 0 0 20px 0;
          text-align: left;
        }
      }
    }
  }
}

.smsdisclaimer {
  h1 {
    background: none;
    font-size: 24px;
    padding: 0;
  }
}

@font-face {
  font-family: "RobotoBoldCondensed";
  src: url("/include/font/roboto/Roboto-BoldCondensed-webfont.eot");
  src:
    url("/include/font/roboto/Roboto-BoldCondensed-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("/include/font/roboto/Roboto-BoldCondensed-webfont.woff") format("woff"),
    url("/include/font/roboto/Roboto-BoldCondensed-webfont.ttf")
      format("truetype"),
    url("/include/font/roboto/Roboto-BoldCondensed-webfont.svg#RobotoBoldCondensed")
      format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "RobotoCondensed";
  src: url("/include/font/roboto/Roboto-Condensed-webfont.eot");
  src:
    url("/include/font/roboto/Roboto-Condensed-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("/include/font/roboto/Roboto-Condensed-webfont.woff") format("woff"),
    url("/include/font/roboto/Roboto-Condensed-webfont.ttf") format("truetype"),
    url("/include/font/roboto/Roboto-Condensed-webfont.svg#RobotoCondensed")
      format("svg");
  font-weight: normal;
  font-style: normal;
}

/* These icon selectors stay flat because native CSS cannot concatenate selector names. */
#fancybox-left-ico,
#fancybox-right-ico {
  position: absolute;
  top: 50%;
  left: -9999px;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  cursor: pointer;
  z-index: 1102;
  display: block;
}

#fancybox-left-ico {
  background-image: url("/PublicCommon/include/js/fancybox/fancybox.png");
  background-position: -40px -30px;
}

#fancybox-right-ico {
  background-image: url("/PublicCommon/include/js/fancybox/fancybox.png");
  background-position: -40px -60px;
}