.diycard-wrapper {
    padding: 4px 0;
    overflow-x: hidden;
    background: #fff;
  }

  .diycard-wrapper .diycard-content .animed {
    transition: 384ms ease;
    -webkit-transition: 384ms ease;
    -moz-transition: 384ms ease;
    -ms-transition: 384ms ease;
    -o-transition: 384ms ease;
  }

  .diycard-wrapper #dc-html-content {
    margin-top: 6px;
  }

  .diycard-wrapper .list-search-wrap {
    padding: 0 8px !important;
  }

  #dc-html-content .dc-no-result{
    margin: 24px 16px;
    border-radius: 4px;
    background: #fff;
    padding: 16px;
    border: 1px solid #ccc;
  } 

  .diycard-wrapper .diycard-content {
    padding: 12px 8px;
    margin: 0 12px;
    background: #fff;
    border-bottom: 2px solid #eeeeee;
  }
  .diycard-wrapper .diycard-content:last-child {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 12px;
  }

  .diycard-wrapper .diycard-content .dc-icon {
    float: left;

    width: 56px;
    height: 56px;
    background: transparent;
  }

  .diycard-wrapper .diycard-content .dc-icon.offseted {
    position: relative;
    top: 4px;
  }

  .diycard-wrapper .diycard-content .dc-icon.dc-named {
    background: #051e3c;
    border-radius: 50%;
    transform: translate(.5px, 0);
    text-align: center;
    position: relative;
    left: -2px;
  }

  .diycard-wrapper .diycard-content .dc-icon-name {
    color: #fff;
    text-align: center;
    line-height: 48px;
    font-size: 1.35em;
    white-space: nowrap;
    position: relative;
    top: 4px;

  }
  .diycard-wrapper .diycard-content .dc-icon-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
  }

  .diycard-wrapper .diycard-content .dc-icon.dc-icond {
    background: transparent !important;
  }

  .diycard-wrapper .diycard-content .dc-header {
    margin-left: 56px;
    line-height: 29px;
    vertical-align: top;
    min-height: 60px;

    padding-left: 8px;

    margin-top: 2px;
  }

  .diycard-wrapper .diycard-content .dc-title-tag {
    height:22px;
    line-height: 22px;
  }

  .diycard-wrapper .diycard-content .dc-title {
    display: inline-block;

    font-size: 15px;
    font-weight: bold;

    width: 13em;
    white-space: nowrap;
    word-break: keep-all;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 18px;
    vertical-align: top;
  }

  .diycard-wrapper .diycard-content .dc-tag {
    float: right;

    white-space: nowrap;
    word-break: keep-all;
    text-overflow: ellipsis;
    overflow: hidden;

    max-width: 6em;

    opacity: 0.6;
  }

  .diycard-wrapper .diycard-content .dc-desc{
    white-space: nowrap;
    word-break: keep-all;
    overflow-x: hidden;
    text-overflow: ellipsis;

    opacity: 0.8;

    height: 22px;
    line-height: 22px;
  }

  .diycard-wrapper .diycard-content .dc-extra{
    white-space: nowrap;
    word-break: keep-all;
    overflow-x: hidden;
    text-overflow: ellipsis;

    opacity: 0.8;

    height:22px;
    line-height:22px;
  }

  .diycard-wrapper .diycard-content .dc-extra .dc-extra-tag{
    margin-right: 8px;
  }

  .diycard-wrapper .diycard-content .dc-progress-bar {
    width:100%;
    height: 2px;
    background: #c2c2c2;

    margin: 8px 8px 20px 0;
  }
  .diycard-wrapper .diycard-content .dc-progress-bar .dc-pb-dot {
    position: relative;
    width: 8px;
    height: 8px;
    top: -3px;
    background: #c2c2c2;
    border-radius: 50%;
    float:left;
  }
  .diycard-wrapper .diycard-content .dc-progress-bar .dc-progress {
    height: 2px;
    position: absolute;
    background: #c2c2c2;
  }
  .diycard-wrapper .diycard-content .dc-progress-bar .dc-current-label {
    position: relative;
    margin-top: 4px;
    top: 4px;
  }

.diycard-wrapper .diycard-content .dc-progress-bar-wrapper {
  width: 100%;
  height: 13px;
  line-height: 13px;
  background-color: transparent;
  border-radius: 4px;
  position: relative;
  margin-top: 8px;
  text-align: center;
}
.diycard-wrapper .diycard-content .dc-progress-bar-wrapper .bar{
  position: inherit;
  width: 0;
  max-width: 100%;
  height: 13px;
  border-radius: 4px;
  text-align: right;
  background-color: #ffffff;
  border: 2px solid #09BB07;
  transition: all .618s;
  -webkit-transition: all .618s;
  transform: skewX(-25deg);
  float: left;
}
.diycard-wrapper .diycard-content .dc-progress-bar-wrapper .bar:last-child{
  margin-right:0 !important;
}
.diycard-wrapper .diycard-content .dc-progress-bar-wrapper .bar .text {
  line-height: 1rem;
  padding: 0 0.25rem;
  color: #fff;
  font-size: 1rem;
  white-space: nowrap;
  word-break: keep-all;
  text-align: center;
  display: block;
  overflow-x: hidden;
  text-overflow: ellipsis;
  transform: skewX(25deg);
}

  #op_items{
    z-index: 1000;
    width: 100%;
    height:40px;
    background:#fff;
  }
  #order_items{
    margin: 5px 12px 0 12px;
    list-style-type: none;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-flex-wrap:nowrap;
    -ms-flex-wrap:nowrap;
    flex-wrap:nowrap;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;
    padding:0;
    overflow:auto;
    float:left;
  }
  #order_items li{
      -webkit-box-flex:1;
      -webkit-flex:1 0 auto;
      -ms-flex:1 0 auto;
      flex:1 0 auto;
      padding:0 5px;
      padding:5px;
      margin-right:8px;
      white-space: nowrap;
      padding-right:16px;
  }
  #search_items{
      display:inline-block;
      float:right;
      margin-right:16px;
      margin-top:8px;
      font-size:14px;
  }
  #search_items.active{
      color:green;
  }
  .sorting,.sorting_asc,.sorting_desc {
      cursor: pointer;
      background-repeat: no-repeat;
      background-position: center right;
  }
  .sorting {
      background-image: none !important;
  }
  .sorting_asc {
      background-image: url(/static/images/sort_asc.png);
  }
  .sorting_desc {
      background-image: url(/static/images/sort_desc.png);
  }
  #search_div{
      display:none;
  }

  #dc-search-modal {
    display: none;
    width: 100%;
    height: 88%;
    background: rgba(0,0,0,0.3);
    z-index: 9999999;
    position: fixed;
    top: 86px;
    z-index: 999997;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-x: hidden;
    outline: 0;
    overflow-y: auto;
    pointer-events: auto;
  }

  #dc-search-modal .modal-wrapper {
    height: 63%;
    background: #ffffff;
    padding-bottom:32px;

    z-index: 999998;
  }

  #dc-search-modal .modal-wrapper .modal-content {
    height: 100%;
    overflow-y: scroll;
    padding: 16px;
    z-index: 999999;
  }

  #dc-search-modal .modal-wrapper .modal-content .dc-filter-field {
    margin: 16px 0;
  }

  #dc-search-modal .modal-wrapper .modal-content .dc-filter-field:first-child {
    margin-top: 0;
  }

  #dc-search-modal .modal-wrapper .modal-content .dc-filter-field:last-child {
    margin-bottom: 0;
  }

  #dc-search-modal .modal-wrapper .modal-content .dc-filter-field-label{
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 4px;
    margin-left: 5px;
  }

  #dc-search-modal .modal-wrapper .modal-content .dc-filter-field-label .dc-filter-field-label-more {
    font-weight: normal;
    font-size: 2rem;
    float: right;
    line-height: 2rem;
  }

  #dc-search-modal .modal-wrapper .modal-content .dc-filter-field-value {
    width: 100%;
    height: 100%;
  }

  #dc-search-modal .modal-wrapper .modal-content .dc-filter-field-value .dc-filter-field-value-data { 
    border: 1px solid grey;
    border-radius: 4px;
    padding: 6px 4px;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 16px;
    margin-top: 8px;
    display: inline-block;
    margin: 6px;
    height: 16px;
    white-space: nowrap;
  }
  #dc-search-modal .modal-wrapper .modal-content .dc-filter-field-value .dc-filter-field-value-data.ellipsisd { 
    display:none;
  }
  #dc-search-modal .modal-wrapper .modal-content .dc-filter-field-value .dc-filter-field-value-data.ellipsisd.shown { 
    display:inline-block;
  }
  #dc-search-modal .modal-wrapper .modal-content .dc-filter-field-value .dc-filter-field-value-data.choosen { 
    border: 1px solid #237ae9;
    color: #fff;
    background: #237ae9;
  }
  #dc-search-modal .modal-action .confirm,#dc-search-modal .modal-action .reset {
    width: 50%;
    float: left;
    text-align: center;
    height: 40px;
    line-height: 40px;
    border-top: 1px solid #33333333;
    font-size: 1.1rem;
  }
  #dc-search-modal .modal-action .confirm {
    background: #237ae9;
    color: #fff;
  }
  #dc-search-modal .modal-action .reset {
    background: #fff;
    color: #333;
  }

  .diycard-wrapper #load-more {
    display: none;
    text-align: center;
    text-align: center;
    padding-top: 1px;
    margin: 0 16px;
    background: #eee; 
  }
  .diycard-wrapper #load-more p {
    height: 48px;
    line-height: 48px;
    background: #fff;
  }

  .diycard-wrapper .remote-img-loading {
    color: #cccccc;
    font-size: 0.8rem;
    position: relative;
    bottom: 37px;
  }