﻿/* hawksearch */
div.popover.hawk-price-tt {
    max-width:none;
}
.search-vol-title {
    background: #585858;
    color: #fff;
    padding: 6px;

    margin-bottom: 5px;
}
.search-vol-inner {
    padding: 3px 10px;
}
.search-vol-msgs {
    color: #fff;
}
.search-vol-tbl {
    display: table;
    min-width:390px;
    background-color:#fff;
    padding: 4px 0;
}
.search-vol-tbl-row {
    display: table-row;
}
.search-vol-tbl-cell {
    display: table-cell;
    border-right: 1px solid #000;
    width:16.66%;
    color:#000;
}
.search-vol-tbl-cell:last-child {
    border-right:none;
}
.search-vol-msgs, .search-vol-message, .search-vol-message .learn-more, .vol-help i {
    color:#fff;
}
.search-vol-message {
    max-width:270px;
}
.search-vol-message p {
    text-align: center;
}
.vol-help {
    background: #666666;
    border-radius: 50%;
    line-height: 0.5em;
    display: inline-block;
    text-align: center;
    height: 11px;
    width: 11px;
    top: -1px;
    color: #fff;
    position: relative;
    font-size: 10px;
    line-height: 1em;
    margin-left:2px;
}
.vol-help i {
    font-size: 10px;
    position: relative;
    top: 1px;
}
.mp-volprice {
    line-height:1.5em;
}
.search-vol-message a,.learn-more .fa-external-link-square{
    color:#00a7bb;
}

.popover.hawk-price-tt .popover-content {
    padding:10px;
}
.search-vol-msgs p:first-child {
    margin: 5px 0;
}

.popover.hawk-price-tt.top > .arrow-btm {
    width: 100%;
    height: 15px;
    position: absolute;
    bottom: -14px;
}

.hawk-listingControls .hawk-pagination {
    margin: 5px 2px 0 0 !important;
}

.popover.hawk-price-tt.top > .arrow-btm:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    bottom: 0;
    content: " ";
    border-top-color: #000;
    border-width: 10px;
    right: 11px;
    border-bottom-width: 0;
    top: 0;
}


/* Search Page Multi Attribute styles */
.mp-hawksearch-attrlist {
  font-size: 14px;
  color: #6B6B6B;
  margin-bottom: 5px;
  margin-left: -5px;
  display: block;
}
.mp-hawksearch-attrlist .color-attr {
  display: block;
  float: left;
  margin: 10px 10px 5px 10px;
  padding: 3px;
  cursor: pointer;
}
.mp-hawksearch-attrlist .color-attr.selected {
  border: 3px solid #c8c8c8 !important;
  border-radius: 2em;
  margin: 7px 10px 2px 10px !important;
  cursor: default;
}
.mp-hawksearch-attrlist .color-attr.na {
  border: 1px solid #c8c8c8;
  border-radius: 2em;
  margin: 9px 10px 4px 10px;
  position: relative;
}
.mp-hawksearch-attrlist .color-attr > span {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 8px;
}
.mp-hawksearch-attrlist .color-attr.white > span {
  border: 1px solid #C8C8C8;
}
.mp-hawksearch-attrlist .color-attr.yellow > span {
  background: #FFC700 !important;
}
.mp-hawksearch-attrlist .color-attr.blue > span {
  background: #1367CA !important;
}
.mp-hawksearch-attrlist .color-attr.green > span {
  background: #036C5D !important;
}
.mp-hawksearch-attrlist .color-attr.orange > span {
  background: #FE7E1B !important;
}
.mp-hawksearch-attrlist .color-attr.purple > span {
  background: #565493 !important;
}
.mp-hawksearch-attrlist .color-attr.red > span {
  background: #D00217 !important;
}
.mp-hawksearch-attrlist .color-attr.multi-color > span {
  border: 1px solid #C8C8C8;
  background-image: -moz-linear-gradient( left top, right bottom, from(red), color-stop(40%, yellow), color-stop(60%, blue), to(violet));
  background-image: -webkit-gradient(linear,  left top,  left bottom, color-stop(0.00, red), color-stop(40%, yellow), color-stop(60%, blue), color-stop(1.00, violet));
  background: linear-gradient(to bottom, red 0%, yellow 40%, blue 60%, violet 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='red', endColorstr='blue',GradientType=0 );
}
.mp-hawksearch-attrlist .color-attr.brown > span,
.mp-hawksearch-attrlist .color-attr.wood > span {
  background: #bb7e2b !important;
}
.mp-hawksearch-attrlist .color-attr.blonde > span,
.mp-hawksearch-attrlist .color-attr.natural > span {
  background: #f7db91 !important;
}
.mp-hawksearch-attrlist .color-attr.goldtop > span {
  background: #C29337 !important;
}
.mp-hawksearch-attrlist .color-attr.chrome > span {
  background: silver !important;
}
.mp-hawksearch-attrlist .color-attr.smoke > span,
.mp-hawksearch-attrlist .color-attr.carbonfiber > span {
  background: #454548 !important;
}
.mp-hawksearch-attrlist .color-attr.sunburst > span {
  border: 1px solid #C8C8C8;
  background-image: -moz-linear-gradient( left top, right bottom, from(#252527), color-stop(50%, #86461B), to(#CD8500));
  background-image: -webkit-gradient(linear,  left top,  left bottom, color-stop(0.00, #252527), color-stop(50%, #86461B), color-stop(1.00, #CD8500));
  background: linear-gradient(to bottom, #252527 0%, #86461B 50%, #CD8500 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#252527', endColorstr='#CD8500',GradientType=0 );
}
.mp-hawksearch-attrlist .color-attr.cherrymarble > span,
.mp-hawksearch-attrlist .color-attr.cherryredburst > span {
  border: 1px solid #C8C8C8;
  background-image: -moz-linear-gradient( left top, right bottom, from(#252527), color-stop(50%, #703236), to(#A33537));
  background-image: -webkit-gradient(linear,  left top,  left bottom, color-stop(0.00, #252527), color-stop(50%, #703236), color-stop(1.00, #A33537));
  background: linear-gradient(to bottom, #252527 0%, #703236 50%, #A33537 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#252527', endColorstr='#A33537',GradientType=0 );
}
.mp-hawksearch-attrlist .color-attr.photocolor > span {
  border: 1px solid #C8C8C8;
  background-image: -moz-linear-gradient( left top, right bottom, from(#000), color-stop(50%, pink), to(cyan));
  background-image: -webkit-gradient(linear,  left top,  left bottom, color-stop(0.00, #000), color-stop(50%, pink), color-stop(1.00, cyan));
  background: linear-gradient(to bottom, #000 0%, pink 50%, cyan 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='pink', endColorstr='cyan',GradientType=0 );
}
.mp-hawksearch-attrlist .color-attr.glossoptimizer > span {
  border: 1px solid #C8C8C8;
  background-image: -moz-linear-gradient( left top, right bottom, from(#fff), color-stop(50%, #C5E5D4), to(#25A561));
  background-image: -webkit-gradient(linear,  left top,  left bottom, color-stop(0.00, #fff), color-stop(50%, #C5E5D4), color-stop(1.00, #25A561));
  background: linear-gradient(to bottom, #fff 0%, #C5E5D4 50%, #25A561 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#25A561',GradientType=0 );
}
.mp-hawksearch-attrlist .color-attr.clear { /* overwrite */
  clear: none;
  font-size: 14px;
  height: 28px;
}
.mp-hawksearch-attrlist .color-attr.clear > span {
  background: #e8e8e8 !important;
}
.mp-hawksearch-attrlist .color-attr.na .slash {
  display: block;
  width: 24.0px;
  height: 1.2px;
  border: none;
  background-color: #c8c8c8 !important;
  -webkit-transform: translateY(22px) translateX(22px) rotate(-45deg);
  transform: translateY(22px) translateX(22px) rotate(-45deg);
  position: absolute;
  top: -11px;
  left: -23.0px;
}
.mp-hawksearch-attrlist .size-attr {
  display: block;
  font-size: 14px;
  text-align: center;
  float: left;
  margin: 7px;
  padding: 0 7px;
  height: 25px;
  line-height: 25px;
  color: #686868;
  border: 1px solid #C8C8C8;
  cursor: pointer;
}
.mp-hawksearch-attrlist .size-attr.na {
  border: none;
  background: #f2f2f2;
  color: #989898;
}
.mp-hawksearch-attrlist .size-attr.selected {
  border: 3px solid #C8C8C8;
  height: 29px;
  margin-top: 5px;
  margin-bottom: 5px;
  cursor: default;
}
.mp-hawksearch-attrlist .color-attr + .tooltip > .tooltip-inner,
.mp-hawksearch-attrlist .size-attr + .tooltip > .tooltip-inner {
  background-color: #FFF; 
  color: #BB1A00; 
  border: 1px solid #C8C8C8;
  border-radius: 0;
  padding: 0.5em;
  font-size: 12px;
}
.mp-hawksearch-attrlist .color-attr + .tooltip.top > .tooltip-arrow,
.mp-hawksearch-attrlist .size-attr + .tooltip.top > .tooltip-arrow {
  border-top: 5px solid #C8C8C8;
}
.mp-hawksearch-attrlist .fa { /* Overwrite hawksearch.css */
  font-family: FontAwesome !important;
}
/* End of SearchPage Multi Attribute styles */

/**
  SearchPage Responsive (Not redesign)
*/

/**Mobile Search Filters*/
.selected_filters.clearfix {
      display:none;
  }
/**Mobile Search Filters*/

#mobileSearchFilter {
  z-index: 9;
  width: 295px;
  box-shadow: 0 800px 0 800px rgba(0,0,0,0.4);
  background-color: #f3f3f3;
}
@media (min-width: 991px) {
  #mobileSearchFilter {
    display: none;
  }
  #mp-page-wrap {
    transform: translate(0) !important;
  }
}
.search-filter-link, .search-filter-link:hover, .search-filter-link:active, .search-filter-link:focus {
  font-weight: 600;
  color: #181818;
}
.search-result-item-title {
  font-size: 14px;
}
.search-result-item-pid {
  font-size:12px;
  color:#c8c8c8;
  margin-bottom: 7px;
}
.search-result-item-price {
  color: #07A6BB;
  font-size: 16px;
  font-weight: 500;
  line-height: 34px;
}
@media (max-width: 991px) {
  div#page-content {
    min-width: 336px;
    padding: 0 7px;
  }
  .search-result-item-title {
    font-size: 16px;
  }
  #hawkitemlist .mp-cta-cart .btn {
    height: 34px;
    line-height: 23px;
  }
  #hawkitemlist .itemWrapper {
    width: 90% !important;
  }
  /**Display Mobile Search Filters*/
  .selected_filters.clearfix {
    float: left;
    display: inline;
    height: auto;
    margin: 10px 0px 10px 10px;
  }
  .filter_options {
    display: inline;
    float: left;
    height: auto;
  }
  .filter_options h4 {
    font-size: 14px;
    font-weight: bold;
    display: inline;
    float: left;
    margin-top: 2px;
    margin-right:10px;
  }
  ul.filter_options {
    color: #888;
    float: right;
  }
  .filter_options ul li {
    display: inline;
    margin-right: 5px;
    font-weight: normal;
    font-size: 14px;
    vertical-align: middle;
  }
  .filter_options ul li span {
    font-weight: 600;
    margin-right: 3px;
    font-size: 10px;
    vertical-align: middle;
  }
  .clear_filters {
    display: inline;
    float: right;
    margin-left: 20px;
    margin-right: 5px;
  }
  a.clear_filter {
    float: right;
    text-decoration: underline;
  }
  .hawk-viewbannermobile {
    display: block;
  }
  .hawk-viewbannerpc {
    display: none;
  }
}
@media (min-width: 992px) {
  .hawk-viewNumber {
    margin-left: 20px;
  }
  .hawk-viewbannermobile {
    display: none;
  }
  .hawk-viewbannerpc {
    display: block;
  }
}