/** Shopify CDN: Minification failed

Line 57:18 Unexpected ","

**/
.code-sucess p {
    color: #009C05 !important;
}
div#error-resend-new.code-error span , .api-error span{
    font-family: "HPSimplified" !important;
}
div#error-resend-new.code-error img{left:-10px;}

div#code-inputs {
    justify-content: center;
}
div#error-resend {
    margin-top: 10px;
}
div#code-body-text {
    display: block;
    /* text-align: center; */
    max-width: 300px;
    margin-bottom: 17px;
}
 #code-inputs input.code-digit {
  width: 41px;
  height: 41px;
  font-size: 24px;
  text-align: center;
  border: 1px solid #000;
}
a#resend-code.disabled {
    pointer-events: none;
    opacity: 0.5;
}
#submit-code {
  margin: 25px 0 15px !important;
}

  div#code-verification-section {
    display: inline-block;
}
  .upload-frames-form button:disabled ,#code-verification-section button:disabled {
       background-color: #0171ad;
    opacity: 0.5;
    pointer-events: none;
}


#code-verification-section div#error, #code-verification-section  #error-resend{  margin-bottom: 0 !important;}
.code-error p,.api-error p{ color: #FF0000 !important;}
.code-error p:first-child, #code-body-text p:first-child{font-weight: 400 !important}

.code-error p a{text-decoration: underline !important; font-weight: 400}

  div#error:empty,,#error-resend:empty {
    display: none;
}
  .photobooth-frame-bottom {
  background: #fff;
  margin-top: -20px;
  padding-top: 20px;

}
#code-verification-section #code-body-text{margin-bottom: 0 !important}
 .photobooth-frame-bottom  #additionalSupportOptionsContainer{    padding-left: 18px;
    padding-right: 18px;}
.page-title-sub{
  font-weight: 600 !important;
    margin-top: 40px !important;
}  

#content p, .frame-page-wrap ul li{
    margin: 0;
    text-align: left;
    color: #626262;
    font-size: 16px;
    font-weight: 300;
}
.frame-page-wrap h4 {
  color: #626262 !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  margin-top: 25px !important;
}

.steps-outer {
      display: flex;
    gap: 100px;
}
.steps-outer .steps-right{
  min-width: 392px;
      margin-top: 30px;
}
.steps.upload-frames-section{margin-top:70px; margin-bottom:70px}
.image-step-4 {
    margin-top: 15px;
}
.tips-section {
    margin-top: 15px;
}
.frame-page-wrap h5 {
  font-weight: 400;
  font-size: 16px !important;
  color: #626262 !important;
  margin-top: 25px !important;
}
.large-hide{display:none}
  .frame-page-wrap ul{margin:0; padding-left:25px}
    .frame-page-wrap ul li{list-style: disc !important; margin: 2px 0;}
    #additionalSupportOptionsContainer{
    margin:0 auto;
    max-width:1280px;
  }


/* Meenal container for Feedback */
.container-m {
  display: inline-block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container-m input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
#docFeedbackHolder {
  margin-top: 30px;
}
  #docFeedbackHolder b{font-weight:400}
/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 3px;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container-m:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container-m input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container-m input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container-m .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}
  .input-full
  {
    width:50%;
    height:60px;
  }
  /* Form Styles */
.upload-frames-form {
  display: inline-block;
  margin-bottom: 0;
}

.upload-frames-form input[type="email"] {
  width: 370px;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #000;
  font-size: 16px;
}

.upload-frames-form button ,#code-verification-section button {
  width: 100%;
  max-width: 370px;
  padding: 12px;
  background-color: #0171ad;
  color: white;
  border: none;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display:block;
  margin:0 auto;
  border-radius: 0;
}

.upload-frames-form button:hover,#code-verification-section button:hover {
 background: #075782;
}

/* Upload PNG Area Styles */
.upload-png-area {
  display: inline-block;
  position: relative;
}
.upload-png-area svg{display:block;margin:0 auto;}
.upload-png-area .upload-icon {
  width: 50px;
  margin-bottom: 20px;
}

.custom-file-upload {
  display: inline-block;
  background-color: #0171ad;
  color: white;
  padding: 10px 30px;
  font-weight: 400;
  cursor: pointer;
  margin-top: 10px;
  border-radius: 0;
  font-size: 16px
}
.custom-file-upload:hover {
      background: #075782;
    color: #fff;
}
#imageUpload {
  display: none; /* Hide actual file input */
}

.drop-text {
  margin-top: 3px;
  color: #626262;
  font-size: 16px;
}
.upload-frames-wrapper {
  background-color: #EEFAFF;
  padding: 30px 10px;
  text-align: center;
  margin-top: 15px;
  
}
.mt-25{margin-top:25px !important}
.upload-frames-form {
  display: inline-block;
}

.upload-frames-form input[type="email"] {
  width: 370px;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #000; /* Thin black border */
  outline: none;
  font-size: 16px;
}
  #uploadList .upload-item:first-child{margin-top:25px}
.upload-item {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 10px;
  box-shadow: 0px 2px 2px 0px #00000040;
  max-width: 75%;
  margin: 10px auto 0;
}

.upload-thumb {
    max-width: 46px;
    max-height: 53px;
    object-fit: contain;
    margin-right: 15px;
   min-width:46px;
}
.upload-info {
   flex-grow: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.upload-success {
  color: #009C05 !important;
  width: 50% !important;
  display: flex;
  align-items: center;
  gap: 0 15px;
  text-align:left
}
.error-text {
    color:#FF0000;
    width: 50% !important;
  text-align:left
}
.upload-remove {
  cursor: pointer;
  font-size: 18px;
  color: #999;
  margin-left: 10px;
  display: flex;
  align-items: center;
}
.upload-text {
  color: #626262;
  width: 200px;
  text-align: left;
}
.upload-remove:hover {
    color: red;
}
#code-inputs{margin-top:15px}
.error-text img > br {
    display: none;
}
.error-text {
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 0 15px;
}
  .spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #ddd;
  border-top: 4px solid #333;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 15px auto;
}
  .pl-25{padding-left:25px}

.success {
  text-align: left;
  color: #009c05;
  max-width: 370px;
  margin-bottom: 10px;
  padding-left: 25px;
  font-size: 16px;
  position: relative;
}
  .success strong img{
  position: absolute;
  left: 0;
  top: 4px;
  }

.code-inputerror input {
    border: 1px solid #FF0000 !important;
}
.code-error img ,.api-error img{
    position: absolute;
    left: 0;
    top: 3px;
}
.code-error,.code-sucess{
position: relative;
  padding-left: 25px;
}
  .frame-page-wrap ul li.mobile-img-block {
        list-style-type: none !important;
   
    }
     .mobile-text{display:none}
     div#error.api-error {
    display: block !important;
    padding-left: 25px;
    position: relative;
}
@media screen and (max-width: 767px) {
  .mobile-text{display:inline}
  .desktop-text{display:none}
  .mobile-hide{display:none}
  .large-hide{display:block}
    .frame-page-wrap ul li.mobile-img-block {
        margin-left: -20px;
    }
    .steps.upload-frames-section{margin-top:50px; margin-bottom:50px}
.upload-success {
  width: 100% !important;
  gap: 0 10px;
}
  .upload-info {
    flex-wrap: wrap;
    position: relative;
    padding-right:10px
  }
.upload-item {
  max-width: 100%;
}
  .upload-remove {
  position: absolute;
  right: 0;
    top: 0;
}
.error-text,.upload-success {
  width: 100% !important;
font-size:12px
}
  .input-full {
  width: 100%;

}
  
.upload-frames-wrapper {
  padding: 15px 10px;
}
  .upload-frames-form input[type="email"],.upload-frames-form button {
  width: 100%;
    max-width:370px

}
  .upload-frames-form {
  width: 100%;
}
.error-text {
  gap: 0 10px;
}
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


#code-body-text p{font-family: "HPSimplifiedLight", arial !important;}

#code-body-text p span{font-family: "HPSimplified" !important;}
div#error, #error-resend ,#error-resend-new{max-width: 370px;}
.limit-reached-error{
  text-align: left;
  align-items: self-start !important;
  padding-right: 15px;
  max-width: 370px;
}
.limit-reached-error img{margin-top:3px}

div#error, #error-resend,#error-resend-new {
  color: #FF0000;
  margin-bottom: 10px;
  display: flex;
  align-items: self-start;
  gap: 0 10px;
  padding-left: 15px;
  text-align: left;
  line-height: 18px;
}