#tryon-upload-box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    width: 100%;
    height: -webkit-fill-available;
    padding: 40px 30px 30px;
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
    display: none;
    overflow: auto;
}
#tryon-upload-row label{ font-weight:600; margin-right:6px; }
#tryon_file {
    padding: 6px;
}
#tryon_clear_btn{
    display: none;
    color: #ffffff;
    letter-spacing: 1.2px;
    max-width: unset;
    margin-top: 15px;
    padding-top: 15px;
    height: 60px;
    font-size: 14px;
}
button#tryon_clear_btn:hover {
    background: #000000;
    opacity: 0.6;
}
button#tryon_clear_btn:active,
button#tryon_clear_btn:focus,
button#tryon_upload_image_mob:active,button#tryon_upload_image_mob:focus,
button#tryon_generate_image:active,button#tryon_generate_image:focus,
#tryon_reupload_image:active, #tryon_reupload_image:focus,
#tryon_generate_image:active, #tryon_generate_image:focus,
div#rotate-controls button:active, div#rotate-controls button:focus,
div#rotate-controls button:hover {
    background: #000000;
}
#tryon_upload_btn:hover,div#rotate-controls button:hover{ opacity:0.6 }
#tryon_result {
    margin-top: 14px;
}
.tryon-result-meta{ font-size:13px; color:#333 }
.tryon-container {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin: 40px auto 0;
}

/* Card Layout */
.tryon-product-image, .tryon-wrapper, .tryon_result_container {
    flex: 1;
    padding: 30px 26px;
    border: 1px solid #e6e6e6;
    text-align: center;
}

/* Product image */
.tryon-product-image .image-container img {
    max-width: 500px;
    max-height: 600px;
    width: 100%;
}

/* Upload Box */
#tryon-dropzone {
    margin: 24px auto;
    border: 2px dashed #c8c8c8;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    min-height: 430px;
}

#tryon-dropzone .upload-content {
    text-align: center;
}

#tryon_file {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

#tryon_preview {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: none;
    max-height: 430px;
}

/* Upload Button */
#tryon_upload_image {
    width: 100%;
    background: #1B1D1F;
    color: #fff;
    height: 60px;
    font-weight: 500;
    font-size: 14px;
    display: block;
    border: none;
    margin-top: 20px;
    cursor: pointer;
    max-width: unset;
}

/* Consent text */
.consent-check {
    display: block;
    text-align: left;
    font-size: 14px;
    cursor: pointer;
}

/* Try-On Result Box */
.tryon-result-cnt {
    padding: 20px;
    background: #FBFBFB;
}
#tryon_result {
    display: flex;
    justify-content: center;
    min-height: 450px;
    align-items: center;
    position: relative;
}
.result-msg-cnt p {
    font-size: 22px;
    line-height: 30px;
    margin-top: 15px;
}
.tryon-result-card img {
    max-height: 450px;
}
#tryon_upload_btn {
    width: 100%;
    background: #0E845A;
    color: #fff;
    height: 60px;
    font-size: 14px;
    border: none;
    margin-top: 15px;
    cursor: pointer;
    max-width: unset;
    letter-spacing: 1.2px;
    padding-top: 15px;
}
#tryon_result .result-cnt p {
    font-size: 22px;
    line-height: 30px;
    font-weight: 500;
    color: #000000;
}
#tryon-dropzone .uploading{
    pointer-events: none;
}
img.tryon-img {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 999;
    cursor: pointer;
}
.image-container {
    background: #F7F7F7;
    padding: 20px;
    border-radius: 5px;
}
.try-zone-cont {
    padding: 20px;
    background: #FBFBFB;
}
.tryon-product-image .title, .tryon-wrapper .title, .tryon_result_container .title {
    font-family: 'GillSans';
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 25px;
}
#tryon-dropzone .upload-content p {
    font-size: 22px;
    font-weight: 500;
    line-height: 36px;
}
.try-on-aggrement {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}
input#tryonagree {
    position: relative;
    height: 20px;
}
input#tryonagree:before {
    content: "";
    width: 20px;
    height: 20px;
    background: #fff;
    border: 1px solid #000000;
    display: inline-block;
    position: absolute;
    top: 2px;
}
input#tryonagree:checked:after {
    content: "";
    display: inline-block;
    left: 8px;
    bottom: -3px;
    width: 5px;
    height: 10px;
    border: solid #000000;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: relative;
}
label.consent-check:before{
    display: none !important;
}
.tryon-title-wrapper h3 {
    font-size: 24px;
    font-weight: 500;
    color: #1B1D1F;
    font-family: 'GillSans';
}
.tryon-title-wrapper p.note {
    font-size: 16px;
    color: #757575;
    margin-top: 5px;
    font-weight: 500;
}
img.close-icon-img {
    position: absolute;
    right: 30px;
    cursor: pointer;
}
.tryon-result-cnt {
    padding: 20px;
    background: #FBFBFB;
}
.try-zone-cont, .image-container{
    padding-bottom: 0;
}
.tryon_result_container .download-image {
    display: none;
    position: absolute;
    top: 0;
    z-index: 999;
    right: 15px;
}
.tryon-result-cnt .result {
    position: relative;
}
button#tryon_upload_image_mob, .tryon-added-preview, button#tryon_reupload_image, button#tryon_generate_image,
.mob-wrapper h3.title, .ajax-loader {
    display: none;
}
.ajax-loader img.loader-icon {
    width: auto;
    margin: auto;
    margin-bottom: 20px;
}
.ajax-loader {
    flex-direction: column
}
.ajax-loader p.loader-text {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
div#rotate-controls {
    display: none;
    gap: 10px;
    margin-top: 15px;
}
div#rotate-controls button {
    color: #ffffff;
    padding-top: 15px;
}
@media only screen and (min-width: 769px) and (max-width: 1200px) {    
    #tryon-dropzone{
        min-height: 275px;
    }
    #tryon_result {
        min-height: 280px;
    }
    .tryon-container {
        gap: 10px;
        margin: 20px auto 0;
    }
    .tryon-result-cnt, .try-zone-cont, 
    .image-container{
        padding: 0;
    }
    .tryon-product-image, .tryon-wrapper, .tryon_result_container{
        padding: 30px 15px;
    }
}
@media only screen and (max-width:768px){
    .tryon-container{
        flex-direction: column;
        margin-top: 20px;
        gap: 10px;
    }
    .tryon_result_container, .tryon-wrapper,
    .tryon-wrapper > h3.title, button#tryon_upload_image, .tryon-added-preview,
    #tryon_reupload_image, button#tryon_upload_btn {
        display: none;
    }
    .tryon-product-image .image-container img{
        width: -webkit-fill-available;
        max-width: unset;
        max-height: 400px;

    }
    button#tryon_upload_image_mob {
        color: #ffffff;
        font-size: 14px;
        padding-top: 15px;
        max-width: unset;
        display: block;
    }
    .tryon-wrapper {
        padding: 0;
        border: 0;
    }
    .tryon-wrapper .try-zone-cont {
        padding: 0;
    }
    div#tryon-dropzone {
        margin-top: 15px;
        max-height: 400px;
        min-height: 400px;
    }
    .mob-wrapper {
        padding: 10px;
        border: 1px solid #e6e6e6;
        background: #ffffff;
    }
    #tryon-dropzone .upload-content p {
        font-size: 16px;
        line-height: 25px;
    }
    .upload-icon img.tryon-upload-icon {
        width: 80px;
        margin-bottom: 10px;
    }
    .tryon-product-image .title, .tryon_result_container .title {
        font-size: 16px;
        margin-bottom: 15px;
    }
    .tryon-product-image {
        padding: 15px;
    }
    .tryon-wrapper .title {
        font-size: 16px;
        margin-top: 10px;
        margin-bottom: 0;
    }
    button#tryon_generate_image,#tryon_reupload_image {
        color: #ffffff;
        font-size: 14px;
        padding-top: 15px;
        margin-top: 20px;
        display: block;
        max-width: unset;
    }
    #tryon-upload-box{
        padding: 40px 20px 10px;
    }
    .tryon_result_container {
        padding: 20px 15px;
    }
    #tryon_result {
        min-height: unset;
    }
    .tryon-result-card img {
        max-height: 400px;
    }
    .tryon-result-cnt {
        padding: 0;
        background: transparent;
    }
    img.close-icon-img {
        right: 15px;
        top: 25px;
    }
    .tryon-added-preview {
        gap: 20px;
        text-align: center;
    }
    .tryon-added-preview img {
        width: 75px;
    }
    button#tryon_clear_btn{
        display: none !important;
    }
    .tryon-added-preview p.title {
        font-size: 10px;
        text-transform: uppercase;
        font-weight: 500;
        letter-spacing: 0.36px;
    }
    .ajax-loader {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        height: -webkit-fill-available;
        background: #ffffff;
        justify-content: center;
    }
    .ajax-loader img.loader-icon {
        margin: 0 auto;
    }
    .ajax-loader p.loader-text {
        font-size: 12px;
    }
    .mob-wrapper h3.title{
        display: block;
    }
    button#tryon_reupload_image {
        margin-top: 5px;
    }
}