.base-template {
  position: absolute;
  left: 0;
  bottom: 0;
  /*left: 10%;*/
  width: 100%;
  height: 100%;
}

#shoes-outsole {
  z-index: 1;
  background: #e8eaed;
  -webkit-mask-image: url(../../assets/img/fans-template_alas-sepatu.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100%;
  mask-image: url(../../assets/img/fans-template_alas-sepatu.svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100%;
}

#shoes-designare {
  z-index: 3;
  height: 100%;
  width: 100%;
  -webkit-mask-image: url("../../assets/img/fans-template_design-area.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100%;
  mask-image: url("../../assets/img/fans-template_design-area.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100%;
  background-image: url("../../assets/img/sample.webp");
  /*background-position: 10% 50%;*/
  background-size: 100%;
  background-repeat: no-repeat;
}

#shoes-marker {
  z-index: 4;
  background: #928c8c;
  -webkit-mask-image: url(../../assets/img/fans-template_jahitan.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100%;
  mask-image: url(../../assets/img/fans-template_jahitan.svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100%;
}

#shoes-basecolor {
  z-index: 2;
  background: var(--bs-emphasis-color);
  -webkit-mask-image: url(../../assets/img/fans-template_basecolor.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100%;
  mask-image: url(../../assets/img/fans-template_basecolor.svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100%;
}

.setting-pane {
  z-index: 10000;
}

#design-info {
  display: none;
}

@media print {
  #panel-setting {
    display: none;
  }
}

@media print {
  * {
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

@media print {
  @page {
    size: A4 !important;
    size: landscape !important;
  }
}

#design-info {
  display: none;
}

@media print {
  #design-info {
    display: block;
  }
}

.flipImage {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}