@font-face {
  font-family: 'Arial-Rounded';
  src: local('Arial-Rounded'),
    url('https://cdn.shopify.com/s/files/1/0893/7671/9194/files/Arial-Rounded.woff2?v=1728392373') format('woff2'),
    url('https://cdn.shopify.com/s/files/1/0893/7671/9194/files/Arial-Rounded.woff?v=1728392374') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bauhaus';
  src: local('Bauhaus Bold'), local('Bauhaus-Bold'),
    url('https://cdn.shopify.com/s/files/1/0893/7671/9194/files/Bauhaus-Bold.woff2?v=1728393085') format('woff2'),
    url('https://cdn.shopify.com/s/files/1/0893/7671/9194/files/Bauhaus-Bold.woff?v=1728393085') format('woff');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Katana';
  src: local('Katana'),
    url('https://cdn.shopify.com/s/files/1/0893/7671/9194/files/Katana.woff2?v=1728393812') format('woff2'),
    url('https://cdn.shopify.com/s/files/1/0893/7671/9194/files/Katana.woff?v=1728393812') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Yahoo';
  src: local('Yahoo'),
    url('https://cdn.shopify.com/s/files/1/0893/7671/9194/files/Yahoo.woff2?v=1728394067') format('woff2'),
    url('https://cdn.shopify.com/s/files/1/0893/7671/9194/files/Yahoo.woff?v=1728394066') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Waltograph';
  src: local('Waltograph'),
    url('https://cdn.shopify.com/s/files/1/0893/7671/9194/files/Waltograph.woff2?v=1728394356') format('woff2'),
    url('https://cdn.shopify.com/s/files/1/0893/7671/9194/files/Waltograph.woff?v=1728394355') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Brush Hand New';
  src: local('Brush Hand New'), local('BrushHandNew'),
    url('https://cdn.shopify.com/s/files/1/0893/7671/9194/files/BrushHandNew.woff2?v=1728394875') format('woff2'),
    url('https://cdn.shopify.com/s/files/1/0893/7671/9194/files/BrushHandNew.woff?v=1728394875') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.quick-custom-clicks {
  margin: 20px 0;
  display: none;
}

.main-option .quick-custom-clicks p {
  margin: 0;
}

.print-text.txt_box.active {
  display: block !important;
}

.main-product-image .text-wrapper.resizing {
  background-color: rgba(0,0,0,0.5);
  border:2px dotted #666666;
}

/* .main-product-image .text-wrapper.resizing:after {
  background: url(https://cdn.shopify.com/s/files/1/0893/7671/9194/files/Mask_group_2_1.png?v=1731569734);
  content: "";
  height: 311px;
  width: 210px;
  position: absolute;
  margin: auto;
  background-position: center;
} */

.main-product-image .main-imagearea {
  width: 400px;
  height: 400px;
  object-fit: contain;
}

.select-trigger {
  cursor: pointer;
  padding: 10px;
  background-color: transparent;
  font-size: 14px;
  border: 1px solid #ccc;
  text-align: left;
  height: 40px;
  display: flex;
  align-items: center;
}

.custom-options {
  position: absolute;
  top: auto;
  left: auto;
  right: 0;
  background: #fff;
  border: 1px solid #ccc;
  z-index: 10;
  display: none;
  max-height: 200px;
  overflow-y: auto;
  bottom: 70px;
}

.custom-option {
  padding: 10px 10px 0;
  cursor: pointer;
  font-size: 14px;
}

.custom-option:hover {
  background-color: #f0f0f0;
}

.custom-select.open .custom-options {
  display: block;
}

.image-wrapper .dot {
  height: 20px;
  width: 20px;
}

.image-wrapper .dot .icon {
  width: 100%;
  display: block;
}

.image-wrapper .dot .icon img {
  width: 100%;
}

.image-wrapper .dot.left-top {
  top: -15px;
  left: -15px;
}

.textarea-controls {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.textarea-controls .color,
.textarea-controls .font_family {
  flex-basis: 48%;
  margin-bottom: 15px;
}

.textarea-controls input[type="color"] {
  width: 30%;
  height: 40px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 0px;
  box-sizing: content-box;
  padding: 0;
  margin: 0;
  font-family: Causten !important;
}

.textarea-controls #customColorCode {
  width: 100%;
  height: 40px;
  padding: 5px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-family: Causten !important;
}

.textarea-controls #fontFamily {
  width: 100%;
  height: 100%;
  font-size: 14px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: Causten !important;
  max-width: 300px;
}

.textarea-controls #fontFamily option {
  font-size: 14px;
  font-family: Causten !important;
}

.thumbnail-slide img {
  height: 80px;
  width: 80px;
  border: 1px solid #ddd;
  border-radius: 10px;
}

.upload-section {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;/ Makes the box center vertically within the page /
}

.add-to-cart-btn.active-new:after {
  content: "";
  background-image: url(https://cdn.shopify.com/s/files/1/0893/7671/9194/files/loading.png?v=1729172528);
  height: 40px;
  width: 40px;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  bottom: 0;
}

.upload-box {
  /* width: 300px; / Adjust the size as needed / */
  /* height: 350px; */
  /* border: 2px dashed #cccccc; */
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
  cursor: pointer;
  background-color: #f9f9f9;/ Light background similar to the image / position: relative;
  height: 100%;
  padding: 10px;
  width: 100%;
}

.upload-box input[type="file"] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
}

.upload-box p {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px;
  color: #666666;
}

.upload-box span {
  font-size: 14px;
  color: #999999;
}

.upload-box::before {
  content: '';
  display: block;
  width: 55px;
  height: 55px;
  background: url('https://cdn.shopify.com/s/files/1/0893/7671/9194/files/Group_1000001887.png?v=1727684537') no-repeat center center;
  background-size: contain;
  margin-bottom: 0px;
}

.main-option {
  width: 50%;
}

.main-product-image {
  position: relative;
  width: 400px;
  /* border: 1px solid #ddd;
  padding: 10px; */
  /* border-radius: 10px;
  width: 100%;
  height: 60%;
  max-width: 400px;
  overflow: hidden; */
}

img#uploadedImage {
  width: 100%;
  object-fit: unset;
}

.price-section .text-atc p {
  margin: auto;
}

.image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: contain;
  z-index: 10;
  cursor: move;
}

.image-wrapper .box-wrapper {
  height: 57px;
  width: 57px;
}

.text-wrapper .ui-icon-gripsmall-diagonal-se {
  /* background-position: -61px -295px; */
  /* background-color: red; */
  background-image: url('https://cdn.shopify.com/s/files/1/0893/7671/9194/files/4.png?v=1728461055') !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;
  position: absolute;
  bottom: 0;
  right: -15px;
}

.text-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: contain;
  z-index: 10;
  cursor: move;
  font-size: 16px;
  padding: 5px;
  line-height: normal;
  border-radius: 0px;
  width: 195px;
  height: 88px;
  word-wrap: break-word;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.text-wrapper .cmndrag {
  display: none;
}

.box-wrapper .box-content.img-Box .cmndrag {
  height: 100%;
}

.box-wrapper .box-content.img-Box .cmndrag img {
  height: 100%;
}

.text-wrapper .print-text {
  width: 100%;
}

.text-wrapper .icon {
  position: absolute;
  width: 19px;
  display: flex;
  cursor: pointer;
}

.text-wrapper .icon img {
  width: 100%;
}

.text-wrapper .close-control {
  top: -7px;
  left: -9px;
  border: 1px solid white;
  border-radius: 100px;
}

.text-wrapper .rotate-control {
  top: 0;
  right: 0;
}

.text-wrapper .resize-control-left {
  bottom: 0;
  left: 0;
}

.text-wrapper .resize-control-right {
  bottom: -10px;
  right: -10px;
}

/* General Popup Styles */
.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.popup-content {
  background: #fff;
  padding: 20px;
  width: 90%;
  max-width: 800px;
  border-radius: 10px;
  position: relative;
}

.close-popup {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 20px;
  cursor: pointer;
}

h2 {
  text-align: center;
  margin-bottom: 10px;
}

.note {
  text-align: center;
  color: #888;
  margin-bottom: 20px;
}

.customization-container {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  justify-content: space-around;
}

.image-slider-container {
  flex-direction: column;
}

.popup-content .slick-arrow {
  display: none !important;
}

.product-thumbnails-slider {
  margin-top: 15px;
}

#customMessage::placeholder {
  font-family: 'Causten';
  font-size: 14px;
  font-weight: 500;
  line-height: 16.8px;
  text-align: left;
}

.quick-custom-clicks-0 {
  border-bottom: 1px #BFBFBF solid;
}

.main-option .quick-custom-clicks p,
.customizable-design p,
.quick-custom-clicks-2-1 p {
  color: #5F6368;
  margin-bottom: 5px;
  font-weight: 600;
}

.quick-custom-clicks-2-1 p {
  margin: 0;
}

.quick-custom-clicks-2,
.quick-custom-clicks-3 {
  display: flex;
  gap: 39px;
  margin-top: 15px;
}

.quick-custom-clicks-2-1 {
  display: flex;
  gap: 80px;
  margin-top: 20px;
}

.quick-custom-clicks-3 {
  gap: 10px;
}

.quick-custom-clicks-2 .custom-label,
.quick-custom-clicks-3 .custom-label {
  padding: 8px 18px;
  cursor: pointer;
  border-radius: 100px;
  border: 1px solid #BFBFBF;
  font-family: Causten;
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  text-align: left;
  display: flex;
  justify-content: center;
  align-items: center;
}

.quick-custom-clicks-3 .custom-label {
  border: 0 !important;
}

.customizable-design textarea:focus-visible {
  box-shadow: none;
}

.upload-section {
  flex: 1;
  border: 2px dashed #ddd;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 10px;
  width: 100%;
  height: 22%;
  max-width: 400px;
  overflow: hidden;
  margin: 15px 0;
}

.upload-section p {
  font-weight: bold;
  margin: 0px;
  color: #26548A;
}

.options-section {
  /* display: flex; */
  justify-content: space-between;
  margin-bottom: 20px;
}

.custom-btn {
  /* background: #26548a; */
  color: black;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  margin-right: 5px;
  border-radius: 5px;
}

.price-section .text-atc {
  padding: 5px 10px;
  font-size: 14px;
}

.customizable-design textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  outline: none;
  border-radius: 5px;
}

.add-to-cart-btn {
  background: #26548a;
  color: white;
  padding: 10px 13px;
  border: none;
  cursor: pointer;
  position: relative;
  border-radius: 5px;
}

.price {
  font-size: 20px;
  margin-left: 20px;
}

/* Main Product Image and Thumbnail Slider */
.image-slider-container {
  display: flex;
  flex-direction: column;
}

.custom-btn.active {
  background: #26548a;
  color: white;
}

.quick-custom-clicks-2 input[type=radio],
.quick-custom-clicks-3 input[type=radio] {
  height: 16px;
  width: 16px;
  position: relative;
  margin: 0;
  margin-right: 8px;
}

.price-section {
  display: flex;
  align-items: center;
}

.add-to-cart-btn {
  display: flex;
  align-items: center;
}

p#fileName {
  font-size: 16px;
  line-height: normal;
}

#mian-text-div {
  transform-origin: center center;
  position: absolute;
  display: flex;
  align-items: center;
  padding: 0px;
  height: 60px !important;
}

.rotate-text {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 5px;
}

.box {
  border: 1px dotted;
  border-color: #dfdfdf87;
  position: relative;
  user-select: none;
  height: -webkit-fill-available;
}

.text-wrapper .box-wrapper .box {
  width: 100px;
  margin: auto;
}

.box-wrapper {
  position: absolute;
  transform-origin: center center;
  user-select: none;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-content: center;
  height: 88px;
  justify-content: center;
  align-items: center;
}

.dot {
  height: 10px;
  width: 10px;
  background-color: #1E88E5;
  position: absolute;
  border-radius: 100px;
  border: 1px solid white;
  user-select: none;
}

.dot:hover {
  background-color: #0D47A1;
}

.dot.left-top {
  top: -5px;
  left: -5px;
  /* cursor: nw-resize; */
}

.dot.left-bottom {
  bottom: -5px;
  left: -5px;
  /* cursor: sw-resize; */
}

.dot.right-top {
  top: -5px;
  right: -5px;
  /* cursor: ne-resize; */
}

.dot.right-mid {
  background-image: url(https://cdn.shopify.com/s/files/1/0893/7671/9194/files/4.png?v=1728461055);
  object-fit: contain;
  background-size: contain;
  height: 20px;
  width: 20px;
  display: block;
  right: -10px !important;
  top: unset !important;
  bottom: -10px !important;
}

.dot.top-mid {
  top: -5px;
  left: calc(50% - 5px);
  /* cursor: n-resize; */
}

.dot.left-mid {
  left: -5px;
  top: calc(50% - 5px);
  /* cursor: w-resize; */
}

.dot.right-mid {
  right: -5px;
  top: calc(50% - 5px);
  /* cursor: e-resize; */
}

.dot.bottom-mid {
  bottom: -5px;
  left: calc(50% - 5px);
  /* cursor: s-resize; */
}

.dot.rotate {
  top: -30px;
  left: calc(50% - 5px);
  background-image: url(https://cdn.shopify.com/s/files/1/0893/7671/9194/files/2.png?v=1728461056);
  object-fit: contain;
  background-size: contain;
  height: 20px;
  width: 20px;
  display: block !important;
}

.rotate-link {
  position: absolute;
  width: 1px;
  height: 15px;
  background-color: #1E88E5;
  top: -20px;
  left: calc(50% + 0.5px);
  z-index: -1;
}

.box-wrapper .box {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.box-wrapper .box.box-content {
  border: 0;
  overflow: hidden;
  z-index: 0;
}

.color-main {
  display: flex;
  gap: 10px;
}

@media (max-width: 1440px) {
  .popup-content {
    width: 90%;
    max-width: 800px;
    height: 530px;
    overflow-y: scroll;
  }
}

@media only screen and (max-width: 768px) {
  .product-form__input {
    margin: 25px 0 1.2rem !important;
  }

  p.product__text.inline-richtext {
    margin-top: 23px;
    margin-bottom: 15px;
  }

  .popup-content {
    width: 75%;
    max-width: 600px;
    height: 530px;
    overflow-y: scroll;
  }

  .popup-content p.note br {
    display: none;
  }

  .textarea-controls input[type="color"] {
    width: 45px;
  }

  img#mainImage {
    width: 100%;
  }

  .font_family {
    position: relative;
  }

  .textarea-controls #fontFamily {
    max-width: 100% !important;
    height: 300px !important;
    margin: 0;
  }

  .custom-options {
    max-height: unset;
    bottom: 80px;
  }
}

@media only screen and (max-width: 480px) {
  .popup-content {
    width: 90%;
  }

  .font_family {
    position: static;
  }

  .textarea-controls {
    position: relative;
  }

  .custom-options {
    bottom: 110px;
  }
}

@media only screen and (max-width: 390px) {
  .textarea-controls {
    flex-direction: column;
  }

  .custom-btn {
    font-size: 12px;
    margin-right: 2px;
  }

  .quick-custom-clicks-2,
  .quick-custom-clicks-3 {
    gap: 9px;
  }

  .quick-custom-clicks-3 .custom-label {
    padding: 0 5px;
  }
}

#printText.Font-Arial {
  font-family: Arial !important;
}

#printText.Font-Arizonia {
  font-family: 'Arizonia', sans-serif !important;
}

#printText.Font-Arial-Rounded {
  font-family: "Arial Rounded", sans-serif !important;
}

#printText.Font-Bauhaus {
  font-family: Bauhaus, sans-serif !important;
}

#printText.Font-Brush-Hand-New {
  font-family: "Brush Hand New", cursive !important;
}

#printText.Font-Courier-New {
  font-family: "Courier New", monospace !important;
}

#printText.Font-Georgia {
  font-family: Georgia, serif !important;
}

#printText.Font-Hamelin {
  font-family: "Hamelin", sans-serif !important;
}

#printText.Font-Katana {
  font-family: Katana, sans-serif !important;
}

#printText.Font-Lato {
  font-family: "Lato", sans-serif !important;
}

#printText.Font-Merriweather {
  font-family: "Merriweather", serif !important;
}

#printText.Font-Montserrat {
  font-family: "Montserrat", sans-serif !important;
}

#printText.Font-Mr-Dafoe {
  font-family: "Mr Dafoe", cursive !important;
}

#printText.Font-Nunito {
  font-family: "Nunito", sans-serif !important;
}

#printText.Font-Open-Sans {
  font-family: "Open Sans", sans-serif !important;
}

#printText.Font-Poppins {
  font-family: "Poppins", sans-serif !important;
}

#printText.Font-Raleway {
  font-family: "Raleway", sans-serif !important;
}

#printText.Font-Roboto {
  font-family: "Roboto", sans-serif !important;
}

#printText.Font-Times-New-Roman {
  font-family: "Times New Roman", serif !important;
}

#printText.Font-Verdana {
  font-family: Verdana, sans-serif !important;
}

#printText.Font-Waltograph {
  font-family: Waltograph, cursive !important;
}

#printText.Font-Yahoo {
  font-family: Yahoo, sans-serif !important;
}