.hpm-group {
  margin: 10px 0px;
}
.hpm-clearfix {
  clear: both;
}
.hpm-title {
   display: block;
   font-size: 1.4rem;
   line-height: 1.2;
   font-weight: 500;
   margin: 0 0 1rem;
}
.hpm-type-images {
  margin: 0 -3px;
  width: 100%;
}
.hpm-type-images .hpm-item {
  margin: 3px;
  cursor: pointer;
  border-radius: 4px;
  /*border: 2px solid #d3d3d3;*/
  float: left;
  padding: 1rem 1.5rem;
  text-align: center;
  max-width: 100px;
  color: #666;
}
.hpm-type-images .hcol-image img {
  width: 100%;
}
.hpm-type-images .hpm-item > div:not(.hcol-image) {
  padding: 3px 5px;
  min-width: 30px;
}
.hpm-type-images .hpm-item.active {
  box-shadow:0 0 0 2px var(--theme-primary-color);
  color: #343434;
}
.hpm-type-images .hpm-item:hover {
  /*box-shadow: 0 0 5px rgba(33, 153, 198, 0.5);*/
  color: var(--theme-primary-color);
}
.hpm-type-images .hpm-item.disabled, .hpm-type-html-select .hpm-item.disabled {
  opacity: .3;
}
.hpmodel-type-select .hpm-item.disabled {
  color: #ccc;
}
.hpm-type-html-select .hpm-select-item img  {
    border-radius: 0;
    padding: 0;
    margin: 2px;
}
.hpm-select {
    width: 100%;
    font: 400 1.6rem / 2.4rem "Roboto", Arial, Helvetica, sans-serif;
    border: 1px solid #F7F8FB;
    border-radius: 5px;
    padding: 1rem 1.5rem;
    -webkit-appearance: none;
    appearance: none;
    background-color: #F7F8FB;
    background-image: url(data:image/svg+xml,%3Csvg width='11' height='7' viewBox='0 0 11 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.284143 1.91713L4.77096 6.66853C4.86819 6.77356 4.98386 6.85693 5.11131 6.91382C5.23876 6.97071 5.37547 7 5.51353 7C5.6516 7 5.7883 6.97071 5.91575 6.91382C6.0432 6.85693 6.15888 6.77356 6.25611 6.66853L10.6906 1.91713C10.7887 1.81296 10.8665 1.68902 10.9196 1.55246C10.9727 1.4159 11 1.26943 11 1.1215C11 0.973565 10.9727 0.827095 10.9196 0.690537C10.8665 0.553981 10.7887 0.43004 10.6906 0.325864C10.4947 0.11715 10.2296 -8.86323e-07 9.95329 -8.62168e-07C9.67698 -8.38012e-07 9.4119 0.11715 9.21594 0.325864L5.51353 4.29283L1.81113 0.325865C1.61632 0.118839 1.35339 0.00212611 1.07901 0.000888261C0.941366 3.56885e-05 0.804918 0.0283026 0.677491 0.0840692C0.550063 0.139836 0.434163 0.222006 0.336436 0.325865C0.234908 0.426292 0.152959 0.54728 0.095324 0.681838C0.0376887 0.816396 0.00551076 0.961857 0.000647984 1.10982C-0.00421384 1.25778 0.0183358 1.4053 0.0669951 1.54387C0.115654 1.68244 0.189458 1.8093 0.284143 1.91713Z' fill='%23343434'/%3E%3C/svg%3E%0A);
    background-position: right 14px center;
    background-repeat: no-repeat;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 4.6rem;
    margin: 0;
}
.hpm-select .selected {
  background: url(select.png) right center no-repeat;
  display: block;
  border: 1px solid #cecece;
  background-color: #F6F6F6;
  padding: 3px 25px 3px 3px;
  color: #444;
  overflow: auto;
}
.hpm-select.open .selected {
}
.hpm-select .hpm-select-item {
  overflow: auto; padding: 3px;
}
.hpm-select .hcol-image {
  float: left; margin-right: 10px; padding: 2px; background: #fff; border: 1px solid #ddd;
}
.hpm-select .drop-down {
  margin: -1px 0 0 0;
  padding: 0;
  width: 100%;
  border: 1px solid #cecece;
  position: absolute;
  background: #fff;
  max-height: 300px;
  overflow-y: auto;
  background: #fff;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.hpm-select .drop-down > div {
  padding: 2px 5px;
  border-bottom: 1px solid #cecece;
}
.hpm-select .drop-down > div:last-child {
  border-bottom: none;
}
.hpm-select .drop-down > div.active {
  background: #F6F6F6;
}
.hpm-select .drop-down > div:hover {
  background-color: #e8e8e8;
  color: #222;
}


.hpm-cat-box {
  margin-bottom: 5px;
}
.hpm-cat-box .hpm-type-images .hpm-cat-item {
  display: inline-block;
  text-align: center;
  vertical-align: top;
  cursor: pointer;
  margin: 4px;
  padding: 2px;
  box-shadow: 0 0 5px rgba(33, 153, 198, 0.0);
  border: 2px solid #d3d3d3;
}
.hpm-cat-box .hpm-type-images .hpm-cat-item .hpm-col-image img {
  width: 100%;
}
.hpm-cat-box .hpm-type-images .hpm-cat-item.active {
  box-shadow: 0 0 5px rgba(33, 153, 198, 0.45);
  border: 2px solid rgb(33, 153, 198);
  background-color: #f9f9f9;
}
.hpm-cat-box select {
  width: 100%;
}
.hpm-cat-box .hprice, #hpmodel .hprice {
  font-weight: bold;
}
.hpm-cat-box .hprice-new, #hpmodel .hprice-new {
  font-weight: bold;
}
.hpm-cat-box .hprice-old, #hpmodel .hprice-old {
  color: #E12C31;
  text-decoration: line-through;
}
.hpm-cat-content.hpm-type-html-select .hpm-select .selected {
    padding: 0;
}
.hpm-cat-content.hpm-type-html-select .hpm-select .selected .hpm-col-none {
    padding: 2px 5px;
}
.hpm-type-html-select .hpm-select .hpm-select-item img  {
    border-radius: 0;
    padding: 0;
    margin: 2px;
}
.hpm-cat-content.hpm-type-html-select .hpm-cat-item{
    border-radius: 0;
    padding: 2px 5px !important;
}