:root {
  --gray-0: #f8f9fa;
  --gray-1: #f1f3f5;
  --gray-2: #e9ecef;
  --gray-3: #dee2e6;
  --gray-4: #ced4da;
  --gray-5: #adb5bd;
  --gray-6: #868e96;
  --gray-7: #495057;
  --gray-8: #343a40;
  --gray-9: #212529;
  --gray-10: #16191d;
  --gray-11: #0d0f12;
  --gray-12: #030507;
  /* Surfaces */
  --text-1: var(--gray-12);
  --text-2: var(--gray-10);
  --text-3: var(--gray-8);
  --text-4: var(--gray-7);
  --surface-1: var(--gray-0);
  --surface-2: var(--gray-1);
  --surface-3: var(--gray-2);
  --surface-4: var(--gray-3);
}

.svg_holder {
  margin: 0 auto;
  text-align: center;
  position: relative;
  background-color: #fff;
  margin-bottom: 10px;
}

.svg_holder svg {
  /* width: 80vmin; */
  width: 300px;
  overflow: visible;
  /* filter: brightness(0%); */
  filter: saturate(0) brightness(0.7) contrast(3);
}

.svg_holder path {
  opacity: var(--show, 0);
  transition: opacity 0.2s;
}

.svg_holder svg image {
  width: 50%;
  height: 50%;
  transform: translate(25%, 25%);
}

.svg_holder .dg :is(.cr.string, .cr.number) input[type=text] {
  color: white;
  line-height: 1;
}

#logo_text {
  margin: 10px 0 25px 0;
  outline: 0;
}

#logo_textarea {
  position: absolute;
  font-size: 16px;
  font-weight: 600;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 150px;
  height: 150px;
  color: #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  white-space: pre-line;
  line-break: anywhere;
}


/* rectangle */
#rectangle {
  width: 300px;
  height: 89px;
  border: 1px solid #000;
  padding: 0 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
#rectangle[data-size="2"] {
  height: 89px;
}
#rectangle[data-size="3"] {
  height: 91.8px;
}
#rectangle[data-size="4"] {
  height: 105.2px;
}
#rectangle[data-size="5"] {
  height: 114.3px;
}
#rectangle[data-size="6"] {
  height: 157.1px;
}
#rectangle[data-size="q40"] {
  height: 300px;
}
#rectangle[data-size="melon2"] {
  height: 118.6px;
}
#rectangle[data-size="melon3"] {
  height: 116.3px;
}
#rectangle[data-size="melon4"] {
  height: 300px;
}
#rectangle[data-size="melon5"] {
  height: 137.7px;
}
#rectangle[data-size="melon6"] {
  height: 300px;
}

#rectangle #text_1,
#rectangle #text_2,
#rectangle #text_3,
#rectangle #text_4 {
  
}

#rectangle #text_1 {
  font-size: 16px;
  line-height: 16px;
  font-weight: 600;
  flex-grow: 4;
  white-space: pre-line;
}

#rectangle .bottom {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: calc(100% - 10px);
  bottom: 0;
  left: 0;
  margin-left: 5px;
  margin-bottom: 1px;
  background-color: #fff;
  gap: 2px;
}


#rectangle #text_2 {
  position: relative;
  overflow: hidden;
  text-align: left;
  font-size: 10px;
  line-height: 10px;
}
#rectangle #text_2::after {
  content: "";
  position: absolute;
  bottom: 1px;
  width: 100%;
  margin-left: 5px;
  border-bottom: 1px solid #000;
}

#rectangle #text_3 {
  position: relative;
  overflow: hidden;
  text-align: right;
  font-size: 10px;
  line-height: 10px;
  border-bottom: 1px solid #000;
}
#rectangle #text_3::after {
  content: "20";
  position: absolute;
  left: 60%;
}

#rectangle #text_4  {
  font-size: 10px;
  line-height: 10px;
}


.shop_table .variation-Design,
.shop_table .variation-Text1,
.shop_table .variation-Text2,
.shop_table .variation-Text3,
.shop_table .variation-Text4,
.shop_table .variation-Outertext,
.shop_table .variation-Innertext,
.shop_table .variation-LogoText {
  display: none !important;
}