.affiliate-drag-dimension-wrap{
  display: flex;
  justify-content: center;
  margin: 0 -14px;
  padding: 20px;
}

/* padding */

.affiliate-dimension-padding{
  position: relative;
  height: 60px;
  width: 110px;
  background: white;
}

.affiliate-dimension-padding::before {
  content: attr(data-text);
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 12px;
  transform: translate(-50%, -50%);
  color: rgba(83, 95, 106, 0.57);
  text-transform: capitalize;
}


.affiliate-dimension-padding > .dimension-item > span{
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

/* margin */

.affiliate-dimension-margin-wrap{
  padding: 40px 0;
  display: inline-flex;
  position: relative;
  width: 210px;
  align-items: center;
  justify-content: center;
}

.affiliate-dimension-margin::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  line-height: 20px;
  font-size: 12px;
  left: 25px;
  color: rgba(83, 95, 106, 0.57);
  text-transform: capitalize;
  pointer-events: none;
}
.affiliate-drag-margin-top.affiliate-dimension-margin::after{
  color: #fff;
}


.affiliate-dimension-margin > .dimension-item > span{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}


/* left-right */


.affiliate-dimension-padding > .padding-right > span,
.affiliate-dimension-padding > .padding-left > span,
.affiliate-dimension-margin > .margin-right > span,
.affiliate-dimension-margin > .margin-left > span{
  width: 20px;
  clip-path: polygon(0 4px, 100% 22px, 100% calc(100% - 22px), -4px 100%);
  cursor: w-resize;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='15' viewBox='0 0 8 15' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ADB3BF'%3E%3Cpath d='M6.663.837c.274 0 .499.098.499.219v13.562c0 .12-.225.219-.499.219s-.499-.099-.499-.219v-13.562c0-.121.225-.219.499-.219'/%3E%3Cpath d='M3.663.837c.274 0 .499.098.499.219v13.562c0 .12-.225.219-.499.219s-.499-.099-.499-.219v-13.562c0-.121.225-.219.499-.219'/%3E%3Cpath d='M.663.837c.274 0 .499.098.499.219v13.562c0 .12-.225.219-.499.219s-.499-.099-.499-.219v-13.562c0-.121.225-.219.499-.219'/%3E%3C/g%3E%3C/svg%3E");
}

.affiliate-dimension-padding > .padding-right > span,
.affiliate-dimension-margin > .margin-right > span{
  left: auto;
  right: 0;
  cursor: e-resize;
  clip-path: polygon(0 22px, 100% 4px, 100% calc(100% - 4px), 0 calc(100% - 22px));
}


/*top-bottom*/


.affiliate-dimension-padding > .padding-top > span,
.affiliate-dimension-padding > .padding-bottom > span,
.affiliate-dimension-margin > .margin-top > span,
.affiliate-dimension-margin > .margin-bottom > span{
  height: 20px;
  cursor: n-resize;
  clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 22px 100%);
  background-image: url("data:image/svg+xml,%3Csvg width='15' height='8' viewBox='0 0 15 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ADB3BF'%3E%3Cpath d='M.5 1c0-.274.098-.499.219-.499h13.562c.12 0 .219.225.219.499s-.099.499-.219.499h-13.562c-.121 0-.219-.225-.219-.499'/%3E%3Cpath d='M.5 4c0-.274.098-.499.219-.499h13.562c.12 0 .219.225.219.499s-.099.499-.219.499h-13.562c-.121 0-.219-.225-.219-.499'/%3E%3Cpath d='M.5 7c0-.274.098-.499.219-.499h13.562c.12 0 .219.225.219.499s-.099.499-.219.499h-13.562c-.121 0-.219-.225-.219-.499'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
}

.affiliate-dimension-padding > .padding-bottom > span,
.affiliate-dimension-margin > .margin-bottom > span{
  top: auto;
  bottom: 0;
  cursor: s-resize;
  clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 100%, 0 100%)
}


/*background*/


.affiliate-dimension-padding > .dimension-item > span,
.affiliate-dimension-margin > .dimension-item > span{
  background-color: #DFE1E4;
}

.affiliate-drag-margin-top .dimension-item.margin-top > span,
.affiliate-drag-margin-left .dimension-item.margin-left > span,
.affiliate-drag-margin-right .dimension-item.margin-right > span,
.affiliate-drag-margin-bottom .dimension-item.margin-bottom > span{
  background-color: #0286BA ;
}

.affiliate-drag-padding-top .dimension-item.padding-top > span,
.affiliate-drag-padding-left .dimension-item.padding-left > span,
.affiliate-drag-padding-right .dimension-item.padding-right > span,
.affiliate-drag-padding-bottom .dimension-item.padding-bottom > span{
  background-color: #0286BA ;
}


.affiliate-drag-padding-right .dimension-item.padding-right > span,
.affiliate-drag-padding-left .dimension-item.padding-left > span,
.affiliate-drag-margin-right .dimension-item.margin-right > span,
.affiliate-drag-margin-left .dimension-item.margin-left > span{
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='15' viewBox='0 0 8 15' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff'%3E%3Cpath d='M6.663.837c.274 0 .499.098.499.219v13.562c0 .12-.225.219-.499.219s-.499-.099-.499-.219v-13.562c0-.121.225-.219.499-.219'/%3E%3Cpath d='M3.663.837c.274 0 .499.098.499.219v13.562c0 .12-.225.219-.499.219s-.499-.099-.499-.219v-13.562c0-.121.225-.219.499-.219'/%3E%3Cpath d='M.663.837c.274 0 .499.098.499.219v13.562c0 .12-.225.219-.499.219s-.499-.099-.499-.219v-13.562c0-.121.225-.219.499-.219'/%3E%3C/g%3E%3C/svg%3E");
}


.affiliate-drag-padding-top .dimension-item.padding-top > span,
.affiliate-drag-padding-bottom .dimension-item.padding-bottom > span,
.affiliate-drag-margin-top .dimension-item.margin-top > span,
.affiliate-drag-margin-bottom .dimension-item.margin-bottom > span{
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='8' viewBox='0 0 16 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff'%3E%3Cpath d='M.913 1.114c0-.274.1-.499.223-.499h13.805c.122 0 .223.225.223.499s-.1.499-.223.499h-13.805c-.123 0-.223-.225-.223-.499'/%3E%3Cpath d='M.913 4.114c0-.274.1-.499.223-.499h13.805c.122 0 .223.225.223.499s-.1.499-.223.499h-13.805c-.123 0-.223-.225-.223-.499'/%3E%3Cpath d='M.913 7.114c0-.274.1-.499.223-.499h13.805c.122 0 .223.225.223.499s-.1.499-.223.499h-13.805c-.123 0-.223-.225-.223-.499'/%3E%3C/g%3E%3C/svg%3E");
}

/*item value*/
.qubley-drag-dimension-popover {
  padding: 5px;
}
.dimension-item > input {
  position: absolute;
  line-height: 20px;
  font-size: 12px;
  color: #535F6A;
  background: transparent;
  padding: 0;
  border: none;
  width: 26px !important;
}
#wpwrap .affiliate-drag-dimension-wrap .dimension-item > input{
  padding: 0 !important;
  &[type="number"]::-webkit-outer-spin-button,
  &[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  &[type="number"] {
    -moz-appearance: textfield;
  }
  border: none;
  text-align: center;
  height: 16px;
  background: transparent;
  text-indent: 0;
  border-radius: 2px;
  font-size: 11px;
  box-shadow: 0 0 0 1px #DFE1E4;
  margin: 2px;
  &:hover{
    color: #0286BA;
  }
  &:focus{
    box-shadow: 0 0 0 1px #0286BA;
  }
}

.dimension-item.padding-left > input,
.dimension-item.margin-left > input{
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
  padding: 0 5px;
}

.dimension-item.padding-right > input,
.dimension-item.margin-right > input{
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 5px;
}


.dimension-item.padding-top > input,
.dimension-item.margin-top > input{
  left: 50%;
  transform: translateX(-50%);
  top: -20px;
}
.dimension-item.padding-bottom > input,
.dimension-item.margin-bottom > input{
  left: 50%;
  transform: translateX(-50%);
  bottom: -20px;
}


.affiliate-dimension-padding > .padding-top > span{
  cursor: s-resize;
}

.affiliate-dimension-padding > .padding-bottom > span{
  cursor: n-resize;
}

.affiliate-dimension-padding > .padding-left > span{
  cursor: e-resize;
}

.affiliate-dimension-padding > .padding-right > span{
  cursor: w-resize;
}