//TODO Refactor

.is-fluid {
  .order {

    &-summary-section,
    &-billing-section {
      min-height: 174px;
    }

    &-details-section,
    &-summary-section,
    &-billing-section {
      @include padding(16px 0 16px 16px);
      @include margin(0 0 12px 0);
      border: 1px solid $gray-medium;
      border-top: none;

      p,
      ol,
      span {
        @include font-size(13px);
        @include margin(0 0 12px 0);
        word-wrap: break-word;

        li.city,
        li.state {
          display: inline-block;
          float: left;
        }

        li.postalCode1 {
          clear: both;
        }
      }
    }

    &-entries-section {
      border: 1px solid $gray-medium;
      border-top: none;

      .row {
        margin: 0;
      }

      .order-entries-details {
        @include font-size(12px);

        &:last-child {
          border: none;
        }
        .price-font {
          @include font-size(24px);
          color: $red;
          font-weight: $font-weight-bold;

          sup {
            @include font-size(11px);
            font-weight: $font-weight-normal;
          }
        }
        .super {
          vertical-align: top;
          @include font-size(12px);
        }

        .gray-label {
          color: $gray;
          @include font-size(12px);
          font-weight: 400;

          &-sm {
            color: $gray;
            @include font-size(10px);
            font-weight: 500;
          }
        }
        .comment-mobile {
          border-top: 1px solid $gray-medium;
          padding-top: 1rem;
          margin-top: 0.5rem;
        }
        .line-cost-center {
          p {
            display: inline;
            @include font-size(11px);

            &.gray-label-sm {
              color: $black;
              font-weight: bold;
            }
          }
        }
        .order-details-image {
          float: none;
        }

        .view-button {
          font-size: 15px;
          margin-top: 12px;
          display: block;
        }
        .serial-list-container {
          border-top: 0 !important;
          .serial-list {
            margin-top:10px;
            display: none;
          }
          &.expanded {
            .serial-list {
              display: block;
            }
          }
        }
      }
    }

  }

  #orderDetailsParent {
    @media screen and (min-width: $screen-lg) {
      display: table;
      float: none;

      #orderMainDetailsTemplate,
      #sideBarTemplateContainer{
        display: table-cell;
        vertical-align: top;
        float: none;
      }
    }
  }

  #primaryOrderNumber {
    @include breakpoint(xs) {
      margin-top: 0.375rem;
    }
  }

  @media(min-width: $screen-xs-max) {
    .summary-shipping-billing {
      display: table;
      table-layout: fixed;
      border-collapse: collapse;
      width: 100%;
      margin-bottom: 12px;

      .col-summary,
      .col-billing,
      .col-shipping {
        display: table-cell;
      }
    }
  }

  .summary-shipping-billing {
    .col-summary,
    .col-billing,
    .col-shipping {
      border: 1px solid $gray-medium;
      margin-bottom: 12px;
      overflow: hidden;

      .section-header {
        border: none;
      }

      .order-details-section,
      .order-summary-section,
      .order-billing-section {
        border: none;
      }
    }
  }
}

@media all and (min-width:0\0) and (min-resolution: .001dpcm) {
  .ie-inline-fix {
    &::after {
      content: '';
      clear: both;
    }
  }

  #printIcon {
    position: relative;
    top: -7px;
    float: left;
  }

  #printText {
    position: relative;
    bottom: 10px;
  }
}

.order-details-height {
  height: 247px;
}

.section-auto {
  height:inherit;
}

.workflow-section-approver-name {
  margin-left: 30px;
}

.workflow-section-wrap {
  float: left;
  padding: 5px 0 10px 10px;
  font-size: .8125rem;
  width: 100%;
  &.content{
    position: relative;
  }
  &:last-child {
    margin-bottom: 30px;
  }
  &:not(:last-child) {
    .stage-line {
      background: $black;
      position: absolute;
      width: 2px;
      height: 100%;
      float: left;
      left: 20px;
      top: 15px;
      transition: 0.8s;
      animation: animate 2s;
    }
  }
  .workflow-section-header {
    display: none;
    @media(min-width: $screen-xs-max) {
      display: block;
    }
  }
  .workflow-section-data {
    word-wrap: break-word;
    margin-left: 28px;
    padding: 2px 0;
    &:first-child {
      margin-left: 0;
    }
    @media(min-width: $screen-xs-max) {
      margin-left: 0;
      padding: 0;
    }
    span.mobile-head {
      width: 80px;
      display: inline-block;
      @media(min-width: $screen-xs-max) {
        display: none;
      }
    }

    .stage-status {
      width: 16px;
      height: 16px;
      float: left;
      margin: 0px 8px 0px 2px;
      background: $white;
      position: relative;
      z-index: 1;
      &.normal {
        border: 1px solid $gray;
        border-radius: 10px;
      }
      img {
        width: 17px;
      }
    }
  }
}


.ui-dialog {
  /*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none;list-style: none;
  font-size: 14px;
  background: #e9e8e2 url(//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/od/dialog/e9e8e2_40x100_textures_01_flat_0.png) 0 0 repeat-x;
  color: #3b392b;
  border: 4px solid #dddddd;
  position: absolute;
}
.ui-resizable-s {
  cursor: s-resize;
  height: 7px;
  width: 100%;
  bottom: -5px;
  left: 0px;
}
.ui-resizable-se {
  cursor: se-resize;
  width: 13px;
  height: 13px;
  right: 0px;
  bottom: 0px;
  background: url(//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/od/dialog/222222_11x11_icon_resize_se.png) no-repeat 0 0;
}
.ui-dialog-titlebar {
  /*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
  padding: .5em 1.5em .5em 1em;
  color: #ffffff;
  background: #c00 url(//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/od/new/bg_sprite_page.png) repeat-x scroll -630px -150px;
  border-bottom: 1px solid #ddddd0;
  font-size: 1em;
  font-weight: bold;
  position: relative;
}
.ui-dialog-title {}
.ui-dialog-titlebar-close {
  /*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
  background: url(//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/od/dialog/ffffff_11x11_icon_close.png) 0 0 no-repeat;
  position: absolute;
  right: 8px;
  top: .7em;
  width: 11px;
  height: 11px;
  z-index: 100;
}
.ui-dialog-titlebar-close-hover, .ui-dialog-titlebar-close:hover {
  background: url(//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/od/dialog/ffffff_11x11_icon_close.png) 0 0 no-repeat;
}
.ui-dialog-titlebar-close:active {
  background: url(//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/od/dialog/222222_11x11_icon_close.png) 0 0 no-repeat;
}

.ui-dialog-content {
  /*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
  color: #3b392b;

}
.ui-dialog-buttonpane {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: left;
  border-top: 1px solid #dddddd;
  background: #e9e8e2;
}
.ui-dialog-buttonpane button {
  margin: .5em 0 .5em 8px;
  color: #ffffff;
  background: #cc0000 url(//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/od/dialog/cc0000_40x100_textures_04_highlight_hard_50.png) 0 50% repeat-x;
  font-size: 1em;
  border: 1px solid #ddddd0;
  cursor: pointer;
  padding: .2em .6em .3em .6em;
  line-height: 1.4em;
}
.ui-dialog-buttonpane button:hover {
  color: #333333;
  background: #cc0000 url(//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/od/dialog/cc0000_40x100_textures_04_highlight_hard_60.png) 0 50% repeat-x;
  border: 1px solid #dddddd;
}
.ui-dialog-buttonpane button:active {
  color: #3b392b;
  background: #e9e8e2 url(//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/od/dialog/e9e8e2_40x100_textures_04_highlight_hard_65.png) 0 50% repeat-x;
  border: 1px solid #dddddd;
}
.ui-dialog.ui-draggable .ui-dialog-titlebar,
.ui-dialog.ui-draggable .ui-dialog-titlebar {
  cursor: move;
}

.loadingDialog .ui-dialog-titlebar { display: none }
.loadingDialog p {
  color: #555;
  font-size: 10pt;
  padding: 107px 9px 2px;
}

.ui-dialog #shipToDatahdr{height:initial;padding-top:0;width:853px;padding-right:15px;}
.ui-dialog #shipToData{width:869px;}
.ui-dialog #shipToDatahdr th,.ui-dialog #shipToData td{table-layout:fixed;padding:5px 8px 5px 5px;white-space:normal;}

.ui-dialog #shipToData td.td1 {
  width: 110px;
  max-width: 110px;
}
.ui-dialog #shipToData td.td2{width:140px;max-width:140px}
.ui-dialog #shipToData td.td3{width:170px;max-width:170px}
.ui-dialog #shipToData td.td4{width:85px;max-width:85px}
.ui-dialog #shipToData td.td5{width:50px;max-width:50px}
.ui-dialog #shipToData td.td6{width:82px;max-width:82px}
.ui-dialog #shipToData td.td7{width:68px;max-width:68px}
.ui-dialog #shipToData td.last{width:60px;max-width:60px}

.ui-dialog,
.lightModal .ui-dialog {
  background: #fff;
  border: 4px solid #ddd;
}
body .ui-dialog-titlebar-close { background-image: url(//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/bsd/dialog/808080_13x13_icon_close.png); }

.col1,.col2 {
  float: left;
  clear: none;
  width: 48%;
  padding: 0
}
.col2 {
  float: right;
}

#overview-quickViewContent {
  overflow: auto;
}


/* =Quick View To be Reviewed  */
.qv_table td{padding-left:5px;}
.js .jqQuickView .photo, .nojs .jqQuickView .photo, #pageBuilderTabContents .grid_view .photo  { position:relative; }
.js .jqQuickView .quickViewTrigger,
#quickViewContainer .price_breaks tr.trhide ,
#quickViewContainer #qvCustomize,
#quickViewContainer #zoom-quickViewContent,
#quickViewContainer #zoom-quickViewTab,
#quickViewContainer #video-quickViewTab  { display:none; }
.js .jqQuickView .quickViewTrigger .quickViewTriggerBg {
  background-color:#000000;
  height:39px;
  left:0;
  position:absolute;
  top:113px;
  width:158px;
}

.js .jqQuickView .quickViewTrigger .qvbutton {
  left:40px;
  position:absolute;
  top:121px;
}

#quickViewContainer {
  position:relative;
  background-color:#fff;
  font-size:12px;
}

#quickViewContainer .smTxt {
  font-size: 11px;
  color: #72777C;
}

#quickViewContainer .col1 {
  width:250px;
  height:315px;
  overflow:hidden;
  padding:0;
}

#quickViewContainer .col2 {
  width:295px;
  height:315px;
  overflow:hidden;
  position:relative;
}

#quickViewContainer div.zoomShown{margin-left:0;width:554px;height:357px;*height:400px;}
#quickViewContainer div.videoShown { margin-left:0; width:554px; }
#quickViewContainer div.zoomShown .viewSlider{height:336px;}
#quickViewContainer div.zoomShown .flashObjContainer { width:554px; height:445px; }
#quickViewContainer div.zoomShown .flashObjContainer object { left:29px;position:relative;top:-41px; }
#quickViewContainer div.zoomShown #zoom-quickViewContent { width:554px; height:420px; display:block; overflow:hidden; }
#quickViewContainer div.videoShown .videoObjContainer { width:554px; height:445px; }
#quickViewContainer div.videoShown .videoObjContainer object { left:-6px;position:relative;top:-41px; }
#quickViewContainer div.videoShown #sundayskyDiv object { left:37px;position:relative; }
#quickViewContainer div.videoShown #video-quickViewContent { width:554px; display:block; overflow:hidden; }
#quickViewContainer #quickViewContent {
  border:1px solid #ccc;
  padding:10px 5px;
}

#quickViewContainer #quickViewContent.loadingSku {
  background:url(//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/od/new/loading-white.png) no-repeat scroll center center
}

#quickViewContainer #quickViewTabs {
  margin-bottom:12px;
}

#quickViewContainer .quickViewTab {
  height:30px;
  line-height:30px;
  width:105px;
  position:relative;
  text-align:center;
  top:1px;
  float:left;
  margin-right:5px;
  cursor:pointer;
  color:#1e5a99;
  background-color: #f3f3f3;
  font-size:12px;
  font-weight: bold;
  border: solid 1px #ccc;
}

#quickViewContainer .qvSelectedTab {
  background:#FFFFFF;
  border-color:#eb9700 #ccc #fff #ccc;
  border-width: 2px 1px 1px;
  color:#000000;
  height: 29px;
  line-height: 28px;
}

#quickViewContainer #details-quickViewContent div { padding-left:3px; font-size:11px; }
#quickViewContainer .qvTitle { font-weight:bold; background-color:#ddd; margin-top:3px; }
#quickViewContainer .viewSlider { position:absolute; width:1230px; }
#quickViewContainer .qvView {
  height:315px;
  padding-right:10px;
  width:300px;
  float:left;
  clear:none;
}

#overview-quickViewContent {
  overflow:auto;
}

#quickViewContainer #qvAvail img {
  clear:left;
  float:left;
  padding-bottom:3px;
}

#quickViewContainer #qvDesc a { color:#000; }
#quickViewContainer #qvRating { padding:10px 0; }
#quickViewContainer #qvRating img { margin-left:-20px; }
#quickViewContainer #qvPrice { font-weight:bold; padding-bottom:10px; }
#quickViewContainer #qvPrice span{ color:#c00; font-size:21px; float:left; padding-top:4px;}
#quickViewContainer #qvPrice span.priceSup {float:left; font-size:12px;}
#quickViewContainer #qvPrice span.dollar, #quickViewContainer #qvPrice span.decPrice {padding-top:0;}
#quickViewContainer #qvPrice .pricing_block { width:100%; font-size:11px; }
#quickViewContainer #qvPrice .pricing_block tr td{text-align:right!important;}
#quickViewContainer #qvPrice .pricing_block .f_left { float:none !important; }
#quickViewContainer #qvPrice .pricing_block .your_price th,
#quickViewContainer #qvPrice .pricing_block .your_price td,
#quickViewContainer #qvPrice .price{ font-weight:bold; font-size:11px;}
#quickViewContainer #qvPrice .pricing_block .your_price .main_price a { color:#c00; }
#quickViewContainer #qvPrice .bundleSavingsprice{text-align:right;font-weight:normal;}
#quickViewContainer #qvPrice .savings_title{font-weight:normal;}
#quickViewContainer .price_breaks { width:100%;float:left;}
#quickViewContainer table.breaks{width:100%;font-size:11px}
#quickViewContainer table.breaks .tr0 th { background-repeat:repeat-x; }
#quickViewContainer #skuNavigation .qvNavElement {
  width:190px;
  float:left;
  font-size:11px;
  font-weight:bold;
  height:21px;
  line-height:21px;
}
#quickViewContainer #skuNavigation {
  background:#f3f3f3;
  clear:both;
  float:left;
  line-height: 44px;
  height: 44px;
}

#quickViewContainer #skuNavigation .qvNavElement {
  height: inherit;
  line-height: 44px;
  font-size: 14px;
  color: #1e5a99;
}
#quickViewContainer #skuNavigation #qvPrev,
#quickViewContainer #skuNavigation #qvNext {
  background:transparent url(//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/od/new/arrows.png) no-repeat scroll 0 0;
  cursor:pointer;
}
#quickViewContainer #skuNavigation #qvPrev { background-position:6px -1457px; padding-left:14px; text-align:left; height:28px;}
#quickViewContainer #skuNavigation #qvPrev[disabled="disabled"]{color:#72777C;}
#quickViewContainer #skuNavigation #qvCenterInfo { text-align:center; color:#72777C; width: 192px;}
#quickViewContainer #skuNavigation #qvNext { background-position:100% -1492px; padding-right:14px;height:28px;text-align:right;}
#quickViewContainer #skuNavigation #qvNext[disabled="disabled"]{color:#72777C;}
#quickViewContainer #lbTable {width:100%;font-weight:bold;}
#quickViewContainer #lbTable th {padding:3px 0;}
#quickViewContainer #lbTable img {vertical-align:bottom;}

#qvSkuLink {
  line-height: 29px;
  text-transform: capitalize;
}
#qvSaveToList .button {
  color: #1e5a99!important;
  text-transform: capitalize;
}
#qvQty {
  height: 25px;
  width: 25px;
}
#qvAvail div {
  float: left;
  margin-right:10px;
}

#quickViewContainer .availibilityText {line-height:14px;}

.closeLink {
  float: right;
  cursor: pointer;
  color: #666;
  font-weight: 700
}

.closeLink span {
  color: #72777c;
  padding: 0 .25em;
  font-size: 20px;
  font-weight: 400
}

.hide-title-bar .ui-dialog-titlebar {
  display: none
}

.ui-widget-overlay {
  background: #000;
  -moz-opacity: .5;
  -khtml-opacity: .5;
  -webkit-opacity: .5;
  opacity: .5;
  filter: alpha(opacity=50);
  position: fixed;
  top: 0;
  left: 0
}

.ui-dialog {
  margin: 0;
  padding: 0;
  outline: none;
  line-height: 1.3em;
  text-decoration: none;
  list-style: none;
  font-size: 14px;
  background: #fff;
  color: #3b392b;
  position: absolute;
  border: 1px solid #a4a4a4;
  box-shadow: 0 0 10px 2px rgba(0,0,0,.3)
}

.ui-resizable-s {
  cursor: s-resize;
  height: 7px;
  width: 100%;
  bottom: -5px;
  left: 0
}

.ui-resizable-se {
  cursor: se-resize;
  width: 13px;
  height: 13px;
  right: 0;
  bottom: 0;
  background: url(//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/od/dialog/222222_11x11_icon_resize_se.png) no-repeat 0 0
}

.ui-dialog-titlebar {
  position: relative;
  outline: none;
  line-height: 1.3em;
  text-decoration: none;
  list-style: none;
  margin: 0;
  font-weight: 400;
  background: #f3f3f3 none;
  box-shadow: none;
  border-bottom: 1px solid #e8e8e8;
  padding: .7em 1em .7em .9em;
  font-size: 1.1em;
  color: gray
}

.ui-dialog-titlebar-close {
  position: absolute;
  z-index: 100;
  background: transparent url(//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/od/dialog/808080_13x13_icon_close.png) no-repeat 50% 50%;
  right: 10px;
  top: 10px;
  width: 17px;
  height: 17px;
  padding: 3px;
  text-align: right;
  line-height: 18px
}

.no-close .ui-dialog-titlebar-close {
  display: none
}

.ui-dialog-titlebar-close-hover,.ui-dialog-titlebar-close:hover,.ui-dialog-titlebar-close:active {
  background: #ddd url(//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/od/dialog/808080_13x13_icon_close.png) no-repeat 50% 50%
}

.ui-dialog-titlebar-close span {
  display: none
}

.ui-dialog-content {
  margin: 0;
  padding: 0;
  outline: none;
  line-height: 1.3em;
  text-decoration: none;
  font-size: 100%;
  list-style: none;
  color: #3b392b
}

.ui-dialog-content h2 {
  font-size: 16px
}

#product #galleryView.ui-dialog-content {
  padding: 20px 0
}

.ui-dialog-buttonpane {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: left;
  border-top: 1px solid #ddd;
  background: #e9e8e2
}

.ui-dialog-buttonpane button {
  margin: .5em 0 .5em 8px;
  color: #fff;
  background: #c00 url(//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/od/dialog/cc0000_40x100_textures_04_highlight_hard_50.png) repeat-x 0 50%;
  font-size: 1em;
  border: 1px solid #ddd;
  cursor: pointer;
  padding: .2em .6em .3em;
  line-height: 1.4em
}

.ui-dialog-buttonpane button:hover {
  color: #333;
  background: #c00 url(//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/od/dialog/cc0000_40x100_textures_04_highlight_hard_60.png) repeat-x 0 50%;
  border: 1px solid #ddd
}

.ui-dialog-buttonpane button:active {
  color: #3b392b;
  background: #e9e8e2 url(//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/od/dialog/cc0000_40x100_textures_04_highlight_hard_50.png) repeat-x 0 50%;
  border: 1px solid #ddd
}

.ui-dialog.ui-draggable .ui-dialog-titlebar {
  cursor: move
}

.loadingDialog .ui-dialog-titlebar {
  display: none
}

.loadingDialog p {
  color: #555;
  font-size: 10px;
  padding: 107px 9px 2px
}
.p12, .iContent {
  padding: 12px;
}

.ui-dialog, .lightModal .ui-dialog {
  background: #fff;
  border: 4px solid #ddd;
}

#quickViewContainer #quickViewContent {
  border: 1px solid #ccc;
  padding: 10px;
}

.fleft, .f_left {
  float: left!important;
}

.fright, .f_right {
  float: right!important;
}

#quickViewContainer #quickViewTabs {
  margin-bottom: 12px
}

#quickViewContainer .clear {
  height: 0!important
}

#quickViewContainer .quickViewTab {
  height: 30px;
  line-height: 30px;
  width: 105px;
  position: relative;
  text-align: center;
  top: 1px;
  float: left;
  margin-right: 5px;
  cursor: pointer;
  color: #3379c2;
  background-color: #f3f3f3;
  font-size: 12px;
  font-weight: 700;
  border: solid 1px #ccc
}

#quickViewContainer .qvSelectedTab {
  background: #fff;
  border-color: #eb9700 #ccc #fff;
  border-width: 2px 1px 1px;
  color: #000;
  line-height: 28px
}

.section {
  float: left;
  clear: both;
  padding-bottom: 12px;
  width: 100%;
}

.tight {
  padding-bottom: 6px;
}