// !!! Warning !!! CSS files are generated from their associated SCSS files. Don't modify the CSS files directly,
// modify the SCSS files and then compile them using compass. This will generate the CSS file for you.

/* ==========================================================================
   Media Queries
   ========================================================================== */
@media only screen and (max-width: 767px) {
  #buttonBarTop {
    #nextOrderLabel {
      button {
        margin: -.3em -.5em 0 0;
      }
    }
  }
  #mainContent .checkoutSection .promo-table .tableSaveControls {
    width: 100%;
  }
  #nextOrderLabel {
    width: 105%;
    float: none;
    right: 15px;
    text-align: left;
    padding-top: 0.9em;
    position: relative;
    margin-bottom: 5px;
    height: auto;
  }
  .orderDate {
    .orderDateLabel {
    }
  }
  #costBreakdown .reviewOrderDetails {
    tr:not(.orderTotal) {
      font-size:18px;
      line-height:2em;
    }
  }

  #orderedProducts {
    span, td {
      font-size:14px;
    }
    td {
      width: 22%;
      &.itemQuantity, &.itemSubtotal, &.itemPSVSubtotal {
        width: 76.5%;
        float: right;
      }
    }
    table {
      margin-left:15px;
      width:90%;
    }
  }

  #mainContent .reviewOrderDetails {
    width:100%;
  }

  #orderConfirmation {
    #orderedProducts {
      .product-row {
        padding-top: 1em;
        .small-6 {
          &.product-details {
            width: 100%;
          }
          &.totals.grid.columns {
            width: 50%;
            float: left;
            margin-left: 24%;

            div {
              float: none;
              line-height: 1.5;
              width: 100%;
              margin-top: 0;
            }
          }
        }
      }
    }
    .reviewOrderDetails {
      td {
        text-align: right;
      }
    }
  }

  #mainContent{
    .checkoutSection{
      header{
        .summary{
          .summaryColumn {
            float:none;
            clear:both;
            display:block;
            width: auto;
            min-width: inherit;

            &:not(:first-child) {
              padding-top:2em;
            }
          }
        }
      }
      .payment-summary-view {
        .pay-sum-left, .pay-sum-right {
          width: 100%;
        }
        .pay-sum-right {
          padding-top: 20px;
        }
      }
    }
    label.shipToSelection {
      ul {
        max-width: 100%;

        li {
          max-width: 100%;
        }
      }

    }
    label.billingSelection {
      &.wired {
        height: 200px;
      }
    }
  }
  .container {
    padding: 0;
  }
  .checkoutSection {
    &.completed {
      header {
        .summary {
        }
      }
    }
    header {
      .ordinal {
        width: 26px;
        height: 26px;
        line-height: 26px;
        margin-right: 5px;
      }
    }
    section {
    }
    tr {
      position: relative;
      padding: 10px;
    }
    .errorDialogue, .infoDialogue {
      margin: 10px 0;
    }
  }
  .section #mainContent #orderConfirmation {
    .responsiveTable .productRow .productThumb {
      padding-left:0;
      margin-bottom: 5px;
    }
    > div {
      width: 100%;
      margin-right: 0;
		}
    table.reviewOrderDetails {
      float: right;
    }
  }
  .three-col {
    > div {
      width: 100% !important;
      margin-bottom: 10px;
    }
  }
  #shippingMethod {
    border: none;
    clear: both;
  }

  #mainContent label.shipToSelection,
  #mainContent label.billingSelection {
    border-top:lightgray dashed 1px;
    width: 93%;
    font-size: 14px;
    line-height: 1.5;
  }

  label.shipToSelection.selected button,
  label.billingSelection.selected button {
    margin: 5px 0 5px -20px;
  }
  label.billingSelection {
    margin: 0 0 5% 0;
    &:nth-child(3n+2) {
      clear: none;
    }
    &:nth-child(even) {
      clear: left;
      margin-right: 5%;
    }
  }
  .promoTrigger {
    float: none !important;
  }
  .section #mainContent table.reviewOrderDetails, .responsiveTable {
    position: static;
    width: auto;
    margin-top: 20px;
  }

  div.cq-colctrl-city-state-zip-c0 {
    padding-right: 5px;
  }
  div.cq-colctrl-city-state-zip-c1 {
    padding-right: 5px;
  }
  div.cq-colctrl-city-state-zip-c2 {
    width: 10%;
  }
  .editPayment, .newPayment {
    width: 100%;
  }
  .paymentMessage {
    width: 90%;
  }
  .firstCol {
    &.addressReadOnly {
      width: 100%;
      padding-bottom: 15px;
    }
  }
  .shippingAddressSummary {
    &.summaryColumn {
      li {
        word-wrap: break-word;
      }
    }
  }
  #promoCodesTable {
    tr {
      &.promo-header {
        display: none;
      }
      &.promo-details {
          display: table;
          cursor: pointer;

        .code-select-container {
          width: 100%;
          padding-bottom: 30px;
          padding-left: 8px;
          padding-top: 5px;
        }

        td {
          display: inline-block;
          width: 50%;
          &.promo-desc {
            display: block;
            width: 75%;
            float: left;
          }
          &:first-child {
            align-self: stretch;
            width: 100%;
            padding: 0;
          }
          label {
            display: block!important;
          }
        }
      }
    }
  }
  #content {
    .checkoutSection {
      .checkout_items {
        .prod_numbers {
          float: left;
          clear: both;
          margin-left: 94px;
        }
      }
    }
  }
  #print_btn {
    display: none;
  }
  .errorDialogue {
    &.sticky-header {
      max-height: 2em;
      overflow: hidden;
      ul {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
@media only screen and (max-width: 767px) and (orientation:landscape) {

  label.shipToSelection,
  label.billingSelection {
    width: 93%;
  }
}
@media screen and (max-width: 710px) and (min-width: 481px) {
  #nextOrderLabel {
    span {
      display: inline-block;
      width: 50%;
    }
  }
}
@media only screen and (max-width: 480px) {
  i.icon-info {
    height: 24px;
    width: 24px;

    &:before {
      height: 1.5em;
      width: 1.5em;
      top: .4em;
    }
  }
  #mainContent {
    label.shipToSelection,
    label.billingSelection {
      ul {
        padding: 10px 10px 30px;
      }
    }
    #orderConfirmation {
      table.reviewOrderDetails {
        margin-right: 4%;
      }
    }
  }
  .billingReadOnly {
    .ccv i.icon-info {
      span p img {
        left: -80px;
        position: absolute;
        top: -185px;
      }
    }
  }
  #mainContent {
    .checkoutSection {
      section {
				padding-left: 0;
        &.mobile {
          padding-left: 0;

          label.shipToSelection {
            width: 100%;
          }
        }
      }
      header {
        h1 {
          //width: 50%;
        }
        button {
          font-size: .8em;
        }
        .summary {
          overflow: hidden;
					margin-left: 0;
          .summaryColumn {
            width: 90%;
            overflow: auto;
            padding-bottom: 15px;
          }
        }
      }
      &.reviewOrder {
        div.reviewOrderDetails {
          button.continue {
            width: 94%;
          }
        }
      }
      .promo-table {
        margin-left: 0;
        .tableContainer {
          width: 100%;
        }
				.tableSaveControls {
   				width: 50%;
 				 }
      }
      .payment-summary-view {
        label {
          .promo-label {
            display: block;
            clear: both;
            padding-top: 20px;
          }
        }
      }
      .checkout_items {
        .productThumb {
          width: 70px;
          margin-left: 30px;
        }
        .badge {
          left: 0;
        }
      }
    }
    #buttonBar {
      float: none;
      margin: 0 auto;
      width: 94%;
      button {
        margin: 5px 0;
      }
    }
    label.billingSelection, label.shipToSelection {
      &.selected {
        height: auto;
      }
      button {
        position: relative;
        bottom: -10px;
        clear: both;
        width: 100%;
      }
    }
    label.billingSelection {
      height: auto;
      width: 100%;

      button {
        margin-bottom: 10px;
      }
    }
    label.shipToSelection {
      padding-bottom: 0;
      height: auto;
    }
    .errorDialogue ul {
      padding-left: 1em;
    }
  }

  #buttonBarTop {
    #nextOrderLabel {
      height: auto;
      span {
        clear: both;
        display: inline-block;
        padding-bottom: 20px;
      }
      button {
        width: 100%;
        margin: 0;
      }
    }
  }

  #orderedProducts {
    td {
      &.productThumb {
        width: 35%;
        background-position: 3px 0 !important;
        margin-bottom: 0;
        margin-top: 15px;
      }
      &.itemQuantity, &.itemSubtotal, &.itemPSVSubtotal {
        float: left;
      }
    }
  }
  #orderConfirmation {
    table.responsiveTable {
      #product_title, .itemQuantity, .itemSubtotal, .itemPSVSubtotal {
        width: 100%;
      }
      #product_title {
        padding-bottom: 10px;
      }
      .itemQuantity, .itemSubtotal, .itemPSVSubtotal {
        padding-left: 10px;
        line-height: 1;
      }
    }
    .itemPrice {
      clear: both;
      margin-left: 0;
    }
    #orderedProducts {
      .product-row {
        .small-6.totals.grid.columns {
          margin-left: 23%;
        }
      }
    }
  }
  .paymentMessage {
    width: 90%;
  }
  #content {
    .checkoutSection {
      .checkout_items {
        .prod_numbers {
          margin-left: 109px;
        }
      }
    }
  }
  #content {
    #mainContent {
      .container {
        .agelocme-agree {
          .agree-to-terms {
            width: auto;
            padding-right: 2em;
          }
        }
      }
    }
  }
}
@media only screen and (max-width: 449px) {
  #signupConfirmation {
    .distributorID, #orderNumbers h1 {
      font-size:22px;
    }
    .signupDetails td{
        width:100%;
    }
  }
  #orderedProducts {
    td {
      width:auto;
    }
  }
  #mainContent
	{
		padding: 0;
    .checkoutSection{
      .summary {
        span, li, .productTitle {
          font-size:14px;
        }
      }
      .summaryCartItem .productTitle {
        max-width:225px;
      }
      header{
        .summary{
        }
      }
    }
    .reviewOrderDetails tr:not(.orderTotal) {
      font-size:14px;
    }
    .webSavings {
      float:left;
    }
  }// END #mainContent
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  div.cq-colctrl-city-state-zip-c0 { padding-right: 5px; }
  div.cq-colctrl-city-state-zip-c1 { padding-right: 5px; }
  div.cq-colctrl-city-state-zip-c2 { width: 10%; }
}

@media only screen and (max-width: 440px) {
  #mainContent {
    .checkoutSection {
      .promo-table {

      }
    }
  }
}
@media screen and (max-width: 350px) {
  #mainContent {
    label.shipToSelection {
      ul {
        li {
          white-space: normal;
        }
      }
    }
  }
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}