#cat-order-mask{ position: fixed; top:0; right:0; left:0; bottom:0; background: rgba(0,0,0,0.9); opacity:0; display: none; }
#cat-order-mask .loader-center{ left:50%; position: absolute; top:50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
#cat-order-mask .loader-center span{ color:#FFF; left:0; display: block; width:100%; text-align:center; font-size:1em; padding: 0 0.7em; position: absolute; top:50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
#cat-order-loader {
  margin: 60px auto;
  font-size: 1rem;
  position: relative;
  text-indent: -9999em;
  border-top: 0.7em solid rgba(255, 255, 255, 0.2);
  border-right: 0.7em solid rgba(255, 255, 255, 0.2);
  border-bottom: 0.7em solid rgba(255, 255, 255, 0.2);
  border-left: 0.7em solid #ffffff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
#cat-order-loader,
#cat-order-loader:after { border-radius: 50%; width: 10em; height: 10em; }
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
hr.page-seperator{ display: block; width: 100%; height:1.8rem; border-top: 3px dotted #cdc8b2; text-align:center; }
hr.page-seperator:before{ content: attr( data-title ); font-size: 1.2rem; color:#cdc8b2; font-weight:400; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); line-height:1.8rem; }
.hpy-wco-sortable {
  flex: 0 0 25%;
}
.hpy-wco-sortable-main {
  display: flex; flex-wrap: wrap;
}

.hpy-wco-active-icon {
  display: inline-block!important;
  width: 12px!important;
  height: 12px!important;
  border-radius: 50%!important;
  background: #888;
  vertical-align: top;
  margin: 10px 0 0 4px!important;
}
.hpy-wco-active-icon.on {
  background-color: #00ab6b;
}
.hpy-wco-active-icon.off {
  background-color: #9E0B0F;
}

/* The Modal (background) */
.hpy-wco-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.hpy-wco-modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}