@font-face {
    font-family: 'meetanshi';
    src: url('../fonts/Meetanshi Personalized.eot');
    src: url('../fonts/Meetanshi Personalized.eot?#iefix') format('embedded-opentype'), url('../fonts/Meetanshi Personalized.woff2') format('woff2'), url('../fonts/Meetanshi Personalized.woff') format('woff'), url('../fonts/Meetanshi Personalized.ttf') format('truetype'), url('../fonts/Meetanshi Personalized.svg#meetanshi') format('svg');
    font-style: normal
}

/* --------------------------------

icons

-------------------------------- */
.MP {
    display: inline-block;
    speak: none;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}
.meet-*::after, .meet-*::before {
    box-sizing: border-box;
    color: #f89549;
}
/*------------------------
  font icons
-------------------------*/
[class^="meet-"]:before,
[class*=" meet-"]:before {
    font: normal normal normal 32px/1 'meetanshi';
    color: #f89549;
    vertical-align: middle;
    font-size: 21px;
    font-weight: bold;
}

.item-options:has(.designer-img) dt {
    display: none !important;
}

.meet-shape::before {
    content: "\ea02";
}

.meet-alignright::before {
    content: "\ea03";
}

.meet-tickmark::before {
    content: "\ea04";
}

.meet-texteffect::before {
    content: "\ea05";
}

.meet-filter::before {
    content: "\ea06";
}

.meet-imageupload::before {
    content: "\ea07";
}

.meet-box::before {
    content: "\ea08";
}

.meet-dot::before {
    content: "\ea09";
}

.meet-shadow::before {
    content: "\ea0a";
}

.meet-tickinbox::before {
    content: "\ea0b";
}

.meet-save::before {
    content: "\ea0c";
}

.meet-leftalign::before {
    content: "\ea0d";
}

.meet-scale-2::before {
    content: "\ea0e";
}

.meet-pattern::before {
    content: "\ea0f";
}

.meet-redo::before {
    content: "\ea10";
}

.meet-outline::before {
    content: "\ea11";
}

.meet-opacity::before {
    content: "\ea12";
}

.meet-view::before {
    content: "\ea14";
}

.meet-center-text::before {
    content: "\ea15";
}

.meet-delete::before {
    content: "\ea16";
}

.meet-strike::before {
    content: "\ea17";
}

.meet-underline::before {
    content: "\ea18";
}

.meet-italic::before {
    content: "\ea19";
}

.meet-bold::before {
    content: "\ea1a";
}

.meet-add::before {
    content: "\ea1b";
}

.meet-enter::before {
    content: "\ea1c";
}

.meet-close::before {
    content: "\ea1d";
}

.meet-undo::before {
    content: "\ea1e";
}

.meet-right::before {
    content: "\ea1f";
}

.meet-template::before {
    content: "\ea20";
}

.meet-emoji::before {
    content: "\ea21";
}
.meet-redo::before{
    content: "\ea10";
}
.meet-undo::before{
    content: "\ea1e";
}

.meet-image::before {
    content: "\ea22";
}

.meet-text::before {
    content: "\ea23";
}

.meet-osendback-2::before {
    content: "\ea24";
}

.meet-ohflip::before {
    content: "\ea26";
}

.meet-minus::before {
    content: "\ea27";
}

.meet-left::before {
    content: "\ea28";
}

.meet-down::before {
    content: "\ea29";
}

.meet-rotate::before {
    content: "\ea2a";
}

.meet-up::before {
    content: "\ea2b";
}

.meet-position::before {
    content: "\ea2c";
}

.meet-cross::before {
    content: "\ea2d";
}

.meet-scale::before {
    content: "\ea2e";
}

.meet-clone::before {
    content: "\ea2f";
}

.meet-ohcenter::before {
    content: "\ea30";
}

.meet-ovcenter::before {
    content: "\ea31";
}
.meet-osendfront::before {
    content: "\ea32";
}

.meet-ovflip::before {
    content: "\ea33";
}
.meet-minus{
    content: "\ea27";
}
.meet-plus::before  {
    content: "\ea25";
}
.productdesigner-main{
    display: flex;
    flex-flow: wrap;
}

.text-center {
    text-align: center;
}
.productdesigner-modal-main-popup .modal-title{
    border-bottom: 0;
    font-size: 18px;
    font-family: "Open Sans";
    color: rgb(57, 106, 128);
}
.reference-design, .printable-design {
    display: none;
}
.small-images img {
    cursor: pointer;
}
.active-image {
    border: 2px solid #ff0000;
}
#designing-options {
    width: 53%;
    padding-left: 40px;
    z-index: 1;
    margin-top: 20px;
}
div#design-with-clipart,div#design-with-image{
    margin-top: 23px;
    max-height: 535px;
    overflow-y: scroll;
    scrollbar-color: #7798a7 #e4e2e3;
    scrollbar-width: thin;
}
#modal-content-0 #productdesigner-modal #designing-options .designing-options-content.active {
    display: block;
    max-height: 550px;
}
.modal-popup.modal-slide .modal-footer {
    border: none ;
    margin-top: 0;
    padding-top: 0;
}
.design-area {
    border: 1px dashed #000000;
    position: absolute;
}
.clipart-categories-select{
    width: 60%;
}
#text-to-add {
    width: 60%;
}
.design-part-text-font #text-styles .design-part-text-font-family {
    width: 60%;
}
#update-text {
    display: none;
}
#text-styles ul li, #common-styles ul li {
    background: #eeeeee;
    border: 1px solid #cccccc;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.6rem;
    margin: 0;
    padding: 7px 15px;
    vertical-align: middle
}
#text-styles{
    margin-top: 10px;
    max-height: 300px;
    overflow: auto;
}
.colorpicker {
    z-index: 999;
}
.clipart-images {
    margin-top: 10px;
}
.clipart-images ul, #text-styles ul{
    margin: 0;
    padding: 0;
}
.clipart-image {
    cursor: pointer;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}
#designing-fee {
    display: none;
}
.modal-popup._inner-scroll.productdesigner-modal-main-popup .modal-inner-wrap{
    background-color: #f6f6f6;
    border-radius: 10px;
}
.image-design-area{
    width: 50%;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    margin-top: 20px;
}
.img-area{
    position: relative;
    top: 0;
    width: 500px;
    height: 500px;
    float: right;
}
.common-style-content{
    position: fixed;
    bottom: 0;
    width: 500px;
    margin: 0 auto;
    padding-top: 20px;
}
.common-style-content-area{
    margin: 0 auto;
    width: 77%;
}
.common-style-content .common-style-list{
    border: 1px solid rgb(183, 206, 206);
    border-radius: 5px;
    padding: 5px !important;
    background: #FFFFFF;
    display: flex;
}
#common-styles.common-style-content ul.common-style-list li{
    background: #FFFFFF;
    border: 0;
    margin: 0 -1px;
    border-right: 3px solid rgb(183, 206, 206);
}
#common-styles.common-style-content ul.common-style-list li:last-child{
    border-right: 0;
}
.productdesigner-modal-main-popup h2 {
    margin-bottom: 33px;
    margin-top: 15px;
    font-weight: bold;
}
.design-part-text-font h2{
    margin-top: 20px;
}
.designing-options-nav-tabs{
    padding-left: 0;
    list-style: none;
    display: inline-block;
    border-radius: 5px;
    border: 1px solid rgb(183, 206, 206);
    margin-bottom: 0px;
    line-height: 10px;
    background: #ffffff;
}
.designing-options-nav-tabs li{
    display: inline-block;
    padding: 5px 0;
    margin-bottom: 0px;
    line-height: 25px;

}
.designing-options-nav-tabs li > a {
    float: left;
    display: flex;
    align-items: center;
    text-align: center;
//padding: 5px 5px;
    text-decoration: none;
    border-right: 2px solid #eeeeee;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
    padding: 1px 7px;
    color: rgb(22, 65, 98);
    padding-right: 15px;
}
.designing-options-nav-tabs li > a:before{
    padding-right: 5px;
    margin-top: -5px;
    padding-top: 3px;
}
.designing-options-nav-tabs li:last-child > a{
    border-right: 0px;
}
.designing-options-content{
    display: none;
}
.designing-options-nav-tabs li.active{
    border-bottom: 2px solid #f89549;
    padding-bottom: 3px;
    padding-right: 0;
    padding-left: 0;
}
.designing-options-nav-tabs li.active:last-child{
    border-bottom: 2px solid #f89549;
    border-bottom-right-radius: 5px;
}
.designing-options-nav-tabs li.active:first-child{
    border-bottom: 2px solid #f89549;
    border-bottom-left-radius: 5px;
    padding-right: 0;
}
.designing-options-nav-tabs li.meet-undo-redo.active{
    border-bottom: none;
}
.designing-options-content.active{
    display: block;
}
.designing-options-content .action.primary{
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-weight: 600;
    padding: 0px 0px;
    box-sizing: border-box;
    vertical-align: middle;
}
.designing-options-content .input-text{
    border-radius: 10px;
    border-color: rgb(228, 227, 227);
    height: 41px;
    font-size: 13.294px;
    font-family: 'meetanshi';
    color: rgb(89, 136, 132);
}
.designing-options-content .action.primary .meet-enter:before,
.designing-options-content .action.primary .meet-delete:before{
    font-size:32px;
    vertical-align: unset;
}
.designing-options-content .action.primary.new-text{
    border: 1px solid rgb(247, 148, 75);
    font-size: 13.294px;
    font-family: "Lato";
    color: rgb(247, 148, 75);
    font-weight: bold;
    border-radius: 25px;
    padding: 8px;
    margin-top: 30px;
    padding-right: 13px;
}
.designing-options-content .action.primary.new-text .meet-add:before{
    padding-right: 8px;
}
.designing-options-content .action.primary.new-text span.MP.meet-add{
    font-size: 14px;
}
.design-part-title{
    border-bottom: 1px solid rgb(119, 152, 166);
    padding: 5px;
    font-weight: 600;
    font-size: 16px;
    font-family: "Open Sans";
    color: rgb(22, 65, 98);
}
.pattern-pro img{
    cursor: pointer;
}
/* --------------------------------
    Advance Property
-------------------------------- */
.shadow-pro{
    width: 100%;
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.dimensions-pro{
    width: 100%;
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.shadow-pro-title{
    padding: 5px;
    font-weight: 600;
    font-size: 16px;
    font-family: "Open Sans";
    color: rgb(22, 65, 98);
    min-width: 23% !important;
    float: left;
}
._keyfocus *:focus, input:not([disabled]):focus, textarea:not([disabled]):focus, select:not([disabled]):focus{
    box-shadow: 0 0 0 0;
}
input[type='range'] {
    -webkit-appearance: none;
    width: 85%;
    height: 7px;
}
.shadow-por-control-range {
    background: linear-gradient(to right, #f89549 0%, #f89549 50%, #e0e0e0 50%, #e0e0e0 100%);
    border: solid 1px #e0e0e0;
    border-radius: 8px;
    height: 7px;
    width: 85%;
    outline: none;
    transition: background 450ms ease-in;
    -webkit-appearance: none;
}
input[type=range]::-moz-range-thumb {
    width: 30px;
    -webkit-appearance: none;
    height: 30px;
    background: #ffffff;
    border-radius: 100%;
    border: 1px solid #00699d;
}
input[type='range']::-webkit-slider-thumb {
    width: 30px;
    -webkit-appearance: none;
    height: 30px;
    background: #ffffff;
    border-radius: 100%;
    border: 1px solid #00699d;
}
.shadow-por-control{
    width: 79%;
    float: left;
}
input[type='number']{
    width: 85%;
    border-radius: 7px;
    text-align: center;
    color: #588986;
    font-weight: 600;
    font-size: large;
}
.dimensions-height-width{
    width: 17%;
}
.dimensions-x{
    width: 6.4%;
}
/* pattern Start */
.pattern-pro{
    max-width: 83%;
    height: max-content;
    margin-top: 15px;
    display: flex;
    gap: 19px;
    flex-wrap: wrap;
}
.pattern-pro img{
    margin-left: 6px;
}
.pattern-pro-image{
    margin-top: 15px;
    width: 100%;
}
/* Patter Over*/
/* Effect Start */
.effect-effect{
    color: #588986;
    border-radius: 8px;
    width: 48%;
}
/* Hide the browser's default checkbox */
.container {
    display: 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 checkbox */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: -7px;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #fff;
    border: 2px solid #f89549;
    border-radius: 4px;
    cursor:pointer;
    border-bottom-width: 3px;
    border-top-width: 3px;
}

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

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: #fff;
}

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

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
    left: 6px;
    top: 0;
    width: 8px;
    height: 14px;
    border: solid #f89549;
    border-width: 0 5px 5px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
/* Effect Over */
/* Switch start */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 25px;
    border: 2px solid #bebebe;
    border-radius: 15px;
}
.switch-active:before {
    background-color: #f7954a !important;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f6f6f6;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 15px;
    width:15px;
    left: 10px;
    bottom: 5px;
    background-color: #bebebe;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #f6f6f6;
}
input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* Switch over */
/* -------------------- */
.shadow-color-wheel{
    background-image: url("../images/color-wheel.png");
    width: 42px;
    height: 42px;
    background-size: contain;
    vertical-align: middle;
}
#text-styles ul li{
    background: transparent;
    border: none;
}
.design-part-text-font-family select{
    width: 50%;
    margin-top: 0px;
    border: 1px solid rgb(228, 227, 227);
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
    line-height: normal;
}
.design-part-text-font-family,
.design-part-text-font-style{
    margin-bottom: 41px;
}
#text-styles ul li:before {
    color: #0a0a0a !important;
    font-weight: 600;
}
#text-styles ul li:nth-child(3){
    border-right: 2px solid rgb(228, 227, 227);
}
.productdesigner-modal-main-popup .modal-footer > button{
    background-color: rgb(67, 74, 86);
    border: none;
    font-size: 13.294px;
    color: rgb(181, 217, 214);
    font-family: "Lato";
    border-radius: 30px;
    text-transform: uppercase;
    float: right;
}
.productdesigner-modal-main-popup .modal-footer .productdesigner-save span{
    vertical-align: middle;
}
.productdesigner-modal-main-popup .modal-footer .productdesigner-save.meet-save::before{
    color: #ffffff;
    padding-right: 5px;
}
.clipart-image:hover{
    width: 68px;
    border: 1px solid rgb(224, 106, 38);
    overflow: hidden;
}
.design-clipart-category .clipart-images{
    margin-top: 32px;
}
.design-clipart-category .clipart-images .clipart-image{
    padding: 0 5px;
}
.design-clipart-category .clipart-categories-select select,
.design-part-text-font .design-part-text-font-family select{
    width: 100%;
    border: 1px solid rgb(228, 227, 227);
    border-radius: 10px;
    height: 40px;
    font-size: 13.294px;
    font-family: "Lato";
    color: rgb(89, 136, 132);
}
.design-part-text-advance-pro h2{margin-bottom: 25px}
.advance-pro .meet-lock:before{
    color: rgb(22, 65, 98);
    padding-left: 5px;
}
.hr-row{

}
.advance-pro-nav .designing-options-nav-tabs li > a{
    text-transform: capitalize;
}

.small-images{
    width: 90px;
    float: right;
    text-align: center;
}
.clera-both{clear: both}
.productdesigner-modal-main-popup .modal-footer{
    padding-bottom: 15px;
    padding-top: 15px;
}
.design-part-text-font-family,.design-part-text-font-size{
    display: inline-block;
}
.color-wheel{
    background-image: url("../images/color-wheel.png");
    width: 21px;
    height: 21px;
    background-size: contain;
    vertical-align: middle;
    background-repeat: no-repeat;
}
.productdesigner-main-image{
    border: 1px solid rgb(119, 152, 166);
    width: 100%;
}
.modal-popup.productdesigner-modal-main-popup .modal-header{
    padding-top: 1rem;
}
.small-image-thumb .item{
    width: 70px;
    height: 70px;
    border: 1px solid rgb(230, 230, 230);
    background: #FFFFFF;
    margin: 5px;
}
.small-image-thumb .item img{
    width: 100%;
    height: 100%;
}
.active-image ~ .item{
    border: 2px solid #ff0000;
}
.small-image-thumb .item.hidden {
    display: none;
}
.small-images-previous .meet-left::before,
.small-images-previous .image-upload .meet-up::before,
.small-images-next .meet-down::before,
.small-images-next .meet-right::before{
    color: #396a80;
}
.image-upload{
    border: 1px dashed rgb(190, 190, 190);
    border-radius: 5px;
    background-color: rgb(255, 255, 255);
    text-align: center;
    padding: 10px;
    width: 95%;
}
.image-upload:hover{
    border: 1px dashed rgb(224, 106, 38);
    cursor: pointer;
}
.image-upload p{
    color: rgb(62, 87, 106);
    font-size: 16px;
}
.image-upload-ins{
    text-align: center;
    padding: 10px 0;
}
.image-upload-ins a{
    color: #5a53e9;
    font-size: 12px;
    padding-bottom: 5px;
}
.image-upload-ins p{
    font-size: 12px;
    color: rgb(175, 175, 175);
}
.image-upload .meet-imageupload::before{
    font-size: 38px;
}
.image-upload img{
    display: none;
}
.loading {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    padding-left: 40px;
    background-image: url('../../web/images/loader-2.gif');
    background-repeat: no-repeat;
    background-size: contain;
    display: none;
}
.image-filter-left .shadow-pro, .image-filter-right .shadow-pro {
    justify-content: space-between !important;
}
.image-filter-left .shadow-pro, .image-filter-right .shadow-pro {
    float: none !important;
}
.image-filter-left .shadow-pro .shadow-por-control ,.image-filter-right .shadow-pro .shadow-por-control{
    float: none !important;
    width: auto;
}
.image-filter-range{
    margin-left: 20px;
    margin-top: 16px;
}
input.shadow-por-control-range.image-filter-range {
    width: 225%;
}
input.shadow-por-control-range.image-filter-color-range {
    width: 218%;
}
#image-filter-invert-range,#image-filter-emboss-range{
    margin-left: 80px;
}
.image-filter-effect{
    display: flex;
}
.image-filter-effect .shadow-pro{
    justify-content: space-between;
}
.image-filter-effect .shadow-pro .shadow-pro-title {
    float: none;
}
.image-filter-effect .shadow-pro .shadow-por-control{
    width: auto;
    float: none;
}
.image-filter-effect .shadow-pro:first-child {
    max-width: 207px;
}
.image-filter-effect .image-filter-space {
    flex-basis: 200px;
    margin-inline: auto;
}
.image-filter-effect .shadow-pro input.shadow-por-control-range {
    width: 220%;
    margin-left: 20px;
}
#image-filter-tint-range{
    width: 216%;
    margin-left: 0;
}
.image-filter-shape .pattern-pro img.image-shape{
    width: 7%;
    height: 7%;
}
.image-filter-shape .pattern-pro{
    max-width: 83%;
    height: max-content;
    margin-top: 15px;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.image-filter-shape .pattern-pro img{
    margin-left: 18px;
    margin-top: 15px;
}
.image-filter-shape .shadow-pro{
    margin-top: 40px;
}
#undo-list,#redo-list{
    display: none !important;
}
span#increase, span#decrease {
    cursor: pointer;
}
/* mobile-view css start */
.mobile-button-main{
    display: none;
}
.mobile-enter-text-button{
    display: none;
}
.design-text-part, .enter-text-new-text-field{
    display: none;
}
.design-part-text.mobile-text-properties {
    display: none;
}
.mobile-design-part-text-font-style{
    display: none;
}
.mobile-text-advanced-properties {
    display: none;
}
.advanced-properties-option{
    display: none;
}
#mobile-image-upload{
    display: none;
}
#mobile-image-advanced-properties-options{
    display: none;
}
#mobile-clipart-property{
    display: none;
}
#mobile-clipart-advanced-properties-options{
    display: none;
}
.mobile-back-option{
    display: none;
}
footer.modal-footer {
    border-top: none !important;
}
.small-images{
    z-index: 99999;
}
#design-with-text {
    max-height: 550px;
    overflow-y: auto;
    margin-top: 8px;
    scrollbar-color: #7798a7 #e4e2e3;
    scrollbar-width: thin;
}
#design-with-text::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 60px;
    background-color: #e4e2e3;
}
#design-with-text::-webkit-scrollbar {
    width: 8px;
    background-color: #e4e2e3;
}

#design-with-text::-webkit-scrollbar-thumb {
    border-radius: 60px;
    background-color: #7798a7;
    height: 5px;
}
#design-with-image::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 60px;
    background-color: #e4e2e3;
}
#design-with-image::-webkit-scrollbar {
    width: 8px;
    background-color: #e4e2e3;
}

#design-with-image::-webkit-scrollbar-thumb {
    border-radius: 60px;
    background-color: #7798a7;
    height: 5px;
}
.designing-options-nav-tabs li.meet-undo-redo.active{
    padding: 5px 0;
}
/* mobile-view css over */
.switch:checked{
    border-color: #f7954a;
}
.modal-popup._inner-scroll .modal-content {
    overflow-y: hidden;
}
div#modal-content-0{
    padding: 10px;
}
h4#designing-fee {
    margin: 0;
    width: max-content;
    margin-left: auto;
    margin-right: 15px;
    line-height: 33px;
    float: right;
}
.modal-popup.modal-slide .modal-footer {
    border-top: 1px solid #c1c1c1;
    display: inline-block;
    align-items: center;
}
@media (max-width: 1750px) {
    .image-filter-effect .shadow-pro input.shadow-por-control-range{
        width: 186%;
    }
    #image-filter-tint-range{
        width: 180%;
    }
}
@media (max-width:1600px){
    @-moz-document url-prefix() {
        .small-images{
            padding-top: 80px !important;
        }
        .common-style-content{
            position: relative;
        }
    }
    .small-images {
        width: 45% !important;
        clear: both;
        text-align: center;
        margin: 0 auto;
        height: auto;
        float: none;
        overflow-x: hidden;
        overflow-y: hidden;
        padding-top: 10px;
    }
    .small-image-thumb{
        height: auto;
        width: 500px;
    }
    .small-image-thumb .item{
        float: left;
    }
    .small-images-previous{
        cursor: pointer;
        position: absolute;
        height: 80px;
    }
    .small-images-previous span
    {
        left: -20px;
        position: absolute;
        top: 30px;
        width: 100%;
    }
    .small-images-next span{
        right: -246px;
        position: absolute;
        top: 30px;
        width: 100%;
    }
    .small-images-next{
        cursor: pointer;
        position: absolute;
        height: 80px;
    }
    .img-area{
        margin: 0 auto;
        float: none;
    }
    .shadow-pro-title{
        min-width: 28% !important;
    }
    .dimensions-height-width{
        width: 19%;
    }
    .dimensions-x{
        width: 6.5%;
    }
    .image-filter-effect .shadow-pro input.shadow-por-control-range{
        width: 175%;
    }
    #image-filter-tint-range{
        width: 165%;
    }
}
@media (max-width: 1558px) {
    .image-filter-effect .shadow-pro input.shadow-por-control-range{
        width: 160%;
    }
    #image-filter-tint-range{
        width: 144%;
    }
}
@media (max-width: 1530px) {
    .image-filter-effect .shadow-pro input.shadow-por-control-range{
        width: 140%;
    }
    #image-filter-tint-range{
        width: 125%;
    }
}
@media (max-width:1440px){
    .productdesigner-modal-main-popup h2{
        margin-bottom: 15px;
        margin-top: 15px;
        padding-bottom: 10px;
    }
    .modal-popup.productdesigner-modal-main-popup .modal-content{
        padding-left: 1rem;
        padding-right: 1rem;
    }
    #image-filter-tint-range{
        width: 120%;
    }
    #designing-options{
        width: 43.5%;
    }
}
@media (max-width:1350px){
    .productdesigner-modal-main-popup .modal-inner-wrap{
        width: 85%;
    }
}

.small-image-thumb::-webkit-scrollbar {
    display: none;}

.small-image-thumb {
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
}
@media (min-width:1336px){
    .small-image-thumb{
        left: 0;
        overflow-x: hidden;
        overflow-y: hidden;
        height: 240px;
    }
    .small-images-next span{
        padding-right: 10px;
    }
    .small-images{
        top: 50%;
        transform: translateY(20%);
        -ms-transform: translateY(20%);
        -moz-transform: translateY(20%);
        -webkit-transform: translateY(20%);
        -o-transform: translateY(20%);
    }
    @-moz-document url-prefix() {
        .common-style-content{
            position: sticky;
        }
    }
}
@media (max-width:1200px){
    .productdesigner-modal-main-popup .modal-inner-wrap{
        width: 95%;
    }

}

@media (max-width:1023px){
    @-moz-document url-prefix() {
        .small-images{
            padding-top: 0px !important;
        }
    }
    .modal-popup._inner-scroll .modal-content{
        overflow-y: scroll;
        overflow-x: hidden;
    }
    .modal-popup._inner-scroll .modal-content::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 60px;
        background-color: #e4e2e3;
    }
    .modal-popup._inner-scroll .modal-content::-webkit-scrollbar {
        width: 6px;
        background-color: #e4e2e3;
    }
    .modal-popup._inner-scroll .modal-content::-webkit-scrollbar-thumb {
        border-radius: 60px;
        background-color: #7798a7;
        height: 5px;
    }
    .productdesigner-modal-main-popup .modal-inner-wrap{
        width: 90%;
    }

    .image-design-area{
        width: 100%;
        position: relative;
        text-align: -webkit-center;
    }
    #designing-options{
        width: 100%;
        padding-top: 10px;
        padding-right: 14px;
    }
    .img-area{
        float: none;
    }
    .common-style-content{
        position: relative;
        float: left;
    }
    .design-part-text-font-family{
        width: 50%;
    }
    .small-images{
        margin-top: 90px;
    }
    .shadow-pro-title{
        font-size: 16px;
        min-width: 15% !important;
    }
    .shadow-por-control{
        width: 53%;
    }
    input[type="range"]{
        min-width: 50%;
        height: 0.85vw !important;
        margin-bottom: 7px;
    }
    .dimensions-height-width{
        width: 10%;
    }
    .dimensions-x{
        width: 4%
    }
    .pattern-pro{
        width: 63%;
    }
}
@media (max-width: 968px) {
    .shadow-pro-title{
        min-width: 16%;
    }
}
@media (max-width: 900px) {
    .shadow-pro-title{
        min-width: 21% !important;
    }
    .shadow-por-control{
        width: 59%;
    }
    .dimensions-height-width{
        width: 15%;
    }
    .dimensions-x{
        width: 4%;
    }
}
@media (max-width:768px) {
    .modal-popup.modal-slide {
        width: 100%;
        margin: 0 auto;
        left: 0;
    }

    .modal-popup._inner-scroll.productdesigner-modal-main-popup .modal-inner-wrap {
        border-radius: 0;
    }

    .design-clipart-category .clipart-categories-select,
    .design-part-text-font .design-part-text-font-family {
        width: 60%
    }
    input[type="range"] {
        height: 9px;
    }

    input[type='number'] {
        font-size: 20px;
    }

    .dimensions-height-width {
        width: 15%
    }

    input.shadow-por-control-range.image-filter-range {
        width: 225%;
    }

    .image-filter-effect .shadow-pro input.shadow-por-control-range {
        width: 235%;
    }

    #image-filter-tint-range {
        width: 203%;
        margin-left: 0;
    }

    .mobile-view {
        width: 35vw !important;
    }

    .small-images {
        position: absolute;
        top: 10px;
        margin-top: 0;
        width: 10vw !important;
    }

    .small-image-thumb .item {
        float: none;
        width: 7vw;
        height: 7vw;
    }

    .small-images-previous {
        transform: rotate(90deg);
        position: initial;
        height: auto;
    }

    .small-images-previous span {
        position: initial;
    }

    .small-images-next {
        transform: rotate(90deg);
        position: initial;
        height: auto;
    }

    .small-images-next span {
        position: initial;
    }

    .mobile-view::-webkit-slider-thumb {
        width: 25px !important;
        height: 25px !important;
        border: 1px solid #fff !important;
    }
    .common-style-content {
        position: absolute;
        top: 0;
    }

    .common-style-content .common-style-list {
        position: absolute;
        top: 11px;
        right: -9.5vw;
        z-index: 999;
        list-style: none;
        padding: 0 !important;
        border: none;
        width: 6vw;
        display: flex;
        flex-direction: column;
    }

    .common-style-list > li > [class^="meet-"]:before, [class*=" meet-"]:before {
        font: normal normal normal 32px/1 'meetanshi';
        color: #f89549;
        /* vertical-align: middle; */
        font-size: 21px;
        font-weight: bold;
        margin-top: 50%;
        display: block;
        transform: translateY(-25%);
    }

    #common-styles.common-style-content ul.common-style-list li {
        list-style: none;
        display: block;
    }
    .common-style-content-area ul.common-style-list {
        z-index: 99999;
    }
    /* select font style */
    /*increase,decrease,font-color*/
    /*font-style-bold-italci etc*/
    /* Advanced Property*/
    .designing-options-nav-tabs, .designing-options-nav-tabs, .design-part-text, .design-part-text-font h2, #text-styles, #increase, #decrease, #color, .design-part-text-advance-pro {
        display: none;
    }

    #text-styles ul li, #common-styles ul li {
        border: 1px solid #cccccc70 !important
    }

    #undo-list, #redo-list {
        display: block !important;
    }

    .modal-slide._inner-scroll .modal-footer {
        text-align: center;
    }

    .productdesigner-modal-main-popup .modal-footer > button {
        float: none;
        background-color: transparent;
        border: none;
        font-size: 20.294px;
        color: #000000;
        font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        border-radius: 0;
        text-transform: uppercase;
        font-weight: normal;
        padding-bottom: 0;
    }

    button:not(.primary) {
        box-shadow: none;
    }

    /* mobile-view css start */
    .mobile-enter-text-button {
        display: grid;
        margin-inline: auto;
        width: 100%;
        margin-top: 40px;
        border-top: 1px solid rgba(0, 0, 0, .05);
        z-index: 99999;
    }

    .mobile-enter-text-button-item {
        text-align: center;
        font-size: 10px;
        padding-block: 4px;
        margin-block: 7px
    }

    .mobile-enter-text-button .mobile-enter-text-button-item a {
        color: rgb(22, 65, 98);
        font-size: 12px;
        text-decoration: none;
        border-right: 1px solid rgba(0, 0, 0, .1);
        padding-right: 5px;
        display: block;
        height: 23px;
    }

    .meet-lock::after {
        content: "\ea13";
    }

    .mobile-button-main {
        margin-top: 25px;
        display: grid;
        grid-template-columns: auto auto auto;
        width: 250px;
        margin-inline: auto;
        grid-column-gap: 20px;
        z-index: 99999;
    }

    .mobile-button-icon-text::before {
        content: "\ea23";
    }

    .mobile-button-icon-image::before {
        content: "\ea22";
    }

    .mobile-button-icon-clipart::before {
        content: "\ea21";
    }

    .mobile-button-text {
        text-align: center;
        margin-inline: 0 auto;
        margin-bottom: 7px;
    }

    .mobile-button-icon {
        font: normal normal normal 32px/1 'meetanshi';
        color: #f89549;
        vertical-align: middle;
        font-size: 40px;
        font-weight: bold;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        border: 1px solid #989ba0;
        text-align: center;
        line-height: 1.8;
        margin: 0 auto;
        margin-inline: auto;
    }

    .mobile-button-child a {
        color: rgb(22, 65, 98);
        text-decoration: none;
        font-size: 17px;
    }

    .mobile-enter-text-button .mobile-enter-text-button-item:last-child a {
        border: none;
    }

    .mobile-enter-text-button-item.active:after {
        content: '';
        height: 2px;
        width: 100%;
        background: #fe0000;
        display: block;
        margin-top: 7px;
    }
    .mobile-enter-text-button-item.active a {
        font-weight: bold;
    }
    .mobile-enter-text-button-item:after {
        content: '';
        height: 1px;
        width: 105%;
        background: rgba(0, 0, 0, .05);
        display: block;
        margin-top: 8px;
    }

    .modal-popup.modal-slide .modal-footer {
        border-bottom: 3px solid #f89549;
        padding-bottom: 0;
        width: 30%;
        margin: 0 auto;
    }

    .productdesigner-main-image {
        border: none;
    }
    .design-area{
        z-index: 9999;
    }
    .mobile-enter-text-button .mobile-enter-text-button-item a {
        font-size: 17px;
    }

    .modal-popup.modal-slide .modal-inner-wrap[class] {
        background: #fff;
        width: 100vw !important;
        height: auto;
        margin: 0 !important;
        min-height: 100vh !important;
    }

    .design-text-part {
        display: none;
        grid-template-columns: 75% 7% 7%;
        width: 100%;
        margin-inline: auto;
        padding-left: 8vw;
        z-index: 99999;
    }

    input#mobile-text-to-add {
        width: 98%;
        padding: 0 12px;
        border: 1px solid #e3e3e3;
        border-radius: 5px;
        color: #598784;
        font-weight: bold;
    }

    #enter-text-control button#mobile-add-text, #enter-text-control button.mobile-delete, #mobile-clipart-property .design-clipart-category button.action.primary.mobile-delete { /* add-text button design*/
        background: none;
        border: none;
        color: #fff;
        cursor: pointer;
        display: inline-block;
        font-weight: 600;
        padding: 0px 0px;
        box-sizing: border-box;
        vertical-align: middle;
        width: 20px;
    }

    #enter-text-control button#mobile-update-text { /* update button design*/
        background: none;
        border: none;
        color: #fff;
        cursor: pointer;
        display: none;
        font-weight: 600;
        padding: 0px 0px;
        box-sizing: border-box;
        vertical-align: middle;
        width: 20px;
    }

    span.MP.meet-enter, span#delete {
        padding: 0; /* add-text button icon*/
        width: 17px;
    }

    span.MP.meet-enter::before, span#delete::before {
        font-size: 28px;
    }

    .enter-text-new-text-field {
        border: 1px solid #f69449;
        border-radius: 10px;
        cursor: pointer;
        height: auto;
        width: auto;
        margin-left: 8%;
        margin-top: 2%;
    }

    .enter-text-new-text-field button {
        padding-left: 5px;
        background-color: transparent;
        border: none;
        font-size: 15.294px;
        color: #f9924b;
        font-weight: normal;
    }
    .enter-text-new-text-field span.MP.meet-add::before{
        font-size: 3rem;
        height: 18px;
        margin-top: 15%;
    }
    .enter-text-new-text-field span.MP.meet-add {
        padding-left: 10px;
    }
    .design-part-text-font-family, .design-part-text-font-style{
        margin-bottom: 0;
    }
    .design-clipart-category .clipart-categories-select select, .design-part-text-font .design-part-text-font-family select{
        border-radius: 5px;
        font-size: 14px;
        height: 31px;
    }
    #design-with-text .design-part-text-font #text-styles{
        position: absolute;
        top: 53%;           /* style for text property */
        width: 100%;
        left: 8%;
    }
    .design-part-text.mobile-text-properties{   /* enter text properties */
        grid-template-columns: 65% 20% 15%;
        padding-left: 8vw;
        width :100%;
        z-index: 99999;
        gap:5px;
        margin-bottom: 12px;
        margin-top: 8%;
    }
    .mobile-text-properties select.input-text.text-style {
        width: 98%;
        padding: 0 12px;
        border: 1px solid #e3e3e3;
        border-radius: 5px;
        color: #598784;
        font-weight: bold;
    }
    .mobile-text-properties select#font-size {
        width: 100%;
        padding: 0 12px;
        border: 1px solid #e3e3e3;
        border-radius: 5px;
        color: #598784;
    }
    .mobile-text-properties .mobile-text-color span.MP.color-wheel {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        margin-left: 5px;
    }
    .mobile-design-part-text-font-style{
        padding-left: 8vw;
        margin-top: 0;
        z-index: 99999;
    }
    .mobile-design-part-text-font-style ul{
        margin-bottom: 0;
        padding-left: 0;
    }
    .mobile-design-part-text-font-style ul li{
        margin-bottom: 0;
    }
    .mobile-design-part-text-font-style ul li::before {
        color: #0a0a0a !important;
        font-size: 25.5px;
        padding-right: 2vw;
    }
    .meet-alignright {
        border-left: 1px solid #e3e3e3;
        padding-left: 1vw;
    }
    .mobile-text-advanced-properties-options{
        width: 100%;
        position: relative;
        padding-top: 15%;
        z-index: 99999;
    }
    .mobile-text-advanced-properties {
        width: 100%;
        grid-template-columns: auto auto auto auto auto auto;
        gap: 25px;
        background: #fff;
        text-align: center;
        z-index: 99999;
        font-weight: bold;
        color: #164163;
        margin-top: 20%;
    }
    .advanced-properties-fonts::before {
        font-size: 35px;
    }
    .advanced-properties-option{
        position: relative;
    }
    .advanced-properties-option {
        transform: translateY(-100%);
        position: absolute;
        width: 100%;
        z-index: 99999;
        margin-top: 15%;
        padding-left: 25px;
    }
    .shadow-pro {
        display: flex;
        align-items: center;
        text-align: left;
    }
    .shadow-pro-title {
        font-size: 17px;
        font-family: "Open Sans";
        color: #006bb4;
        min-width: 19% !important;
        padding: 0;
    }
    .shadow-por-control {
        width: 100%;
    }
    input[type="range"] {
        height: 0.8vw !important;
        margin-bottom: 6px;
    }
    input[type='range']::-moz-range-thumb {
        width: 23px;
        -webkit-appearance: none;
        height: 23px;
        background: #ffffff;
        border-radius: 100%;
        border: 0.5px solid #7c9ca9;
    }
    input[type='range']::-webkit-slider-thumb {
        width: 23px;
        -webkit-appearance: none;
        height: 23px;
        background: #ffffff;
        border-radius: 100%;
        border: 0.5px solid #7c9ca9;
    }
    #mobile-text-shadow .shadow-pro .mobile-text-color span.MP.color-wheel,#mobile-text-outline .shadow-por-control .mobile-text-color span.MP.color-wheel, #mobile-image-shadow .shadow-por-control .mobile-text-color span.MP.color-wheel, #mobile-image-filters .image-filter-effect .shadow-pro.image-filter-tint-control .shadow-pro-title .mobile-text-color span.MP.color-wheel, #mobile-image-shape .shadow-pro .shadow-por-control .mobile-text-color span.MP.color-wheel,#mobile-clipart-shadow .shadow-por-control .mobile-text-color span.MP.color-wheel, #mobile-clipart-filters .shadow-pro-title .mobile-text-color span.MP.color-wheel,#mobile-clipart-shape .shadow-pro .shadow-por-control .mobile-text-color span.MP.color-wheel {
        width: 30px;
        height: 30px;
    }
    .pattern-pro{
        width: 100%;
        max-width: 100%;
        height: max-content;
        margin-top: 15px;
        display: flex;
        gap: 30px;
        flex-wrap: wrap;
    }
    .dot-active:after {
        content: '';
        display: block;
        height: 10px;
        width: 10px;
        background: #e16a26;
        border-radius: 50%;
        margin-inline: auto;
        margin-bottom: 10px;
    }
    #mobile-image-upload{
        width: 90%;
        margin: 0 auto;
        z-index: 99999;
    }
    #mobile-image-filters , #mobile-image-shape, #mobile-clipart-filters{
        display: none;
    }
    #design-image-shape{
        display: block;
    }
    div#mobile-image-advanced-properties-options{
        z-index: 99999;
    }
    #mobile-image-advanced-properties-options #mobile-image-filters,#mobile-clipart-advanced-properties-options #mobile-clipart-filters{
        position: absolute;
        transform: translateY(-13vh);
    }
    .image-filter-effect{
        display: grid;
        width: 92vw;
        grid-template-columns: 50% 50%;
        grid-column-gap: 15px;
        justify-content: space-between;
    }
    .image-filter-effect .shadow-pro input.shadow-por-control-range{
        margin-left: 0;
    }
    .image-filter-shape .pattern-pro img.image-shape {
        width: 6%;
        height: 6%;
    }
    .image-filter-shape .pattern-pro img {
        margin-left: 18px;
        margin-top: 5px;
    }
    div#mobile-image-shape {
        transform: translateY(-50%);
        position: absolute;
    }
    #mobile-image-advanced-properties-options #mobile-image-shape .image-filter-shape .shadow-pro{
        margin-top: 25px;
        margin-left: 18px;
    }
    .design-clipart-category .clipart-categories-select, .design-part-text-font .design-part-text-font-family{
        width: 80%;
        margin-left: 18px;
    }
    #mobile-clipart-property .design-clipart-category .clipart-images {
        margin-left:18px;
        width: 90%;
    }
    .clipart-filter-shape .pattern-pro img.image-shape {
        width: 6%;
        height: 6%;
    }

    .clipart-filter-shape .pattern-pro img {
        margin-left: 18px;
        margin-top: 5px;
    }
    .clipart-filter-shape .pattern-pro {
        width: 83%;
        max-width: 100%;
        height: max-content;
        margin-top: 15px;
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
    }
    .clipart-categories-select{
        display: flex;
    }
    div#mobile-clipart-shape {
        transform: translateY(-50%);
        position: absolute;
    }

    #mobile-clipart-advanced-properties-options #mobile-clipart-shape .clipart-filter-shape .shadow-pro {
        margin-top: 25px;
        margin-left: 18px;
    }
    #mobile-clipart-property .design-clipart-category .clipart-images {
        max-height: 135px;
        overflow-y: scroll;
    }
    div#mobile-clipart-advanced-properties-options {
        z-index: 99999;
    }
    #mobile-clipart-property #delete::before {
        font-size: 40px !important;
        margin-top: 5px !important;
    }
    .mobile-back-option {
        width: 100%;
        margin-bottom: 15px;
    }
    span.Mp.meet-left {
        display: flex;
        font-size: 20px;
        color: #376980;
        font-weight: bold;
        align-items: center;
    }
    span.meet-left::before{
        margin: 0;
        transform: none;
        padding-right: 20px;
        font-size: 30px;
        color: #376980;
    }
    #mobile-clipart-property .design-clipart-category .clipart-images::-webkit-scrollbar{
        width: 3px;
        height: 0;
        background-color: #e4e2e3;
    }
    #mobile-clipart-property .design-clipart-category .clipart-images::-webkit-scrollbar-thumb{
        background: #7898a5;
    }
    div#mobile-clipart-property {
        margin-top: 0;
    }
    .design-clipart-category .clipart-images{
        margin-top: 10px;
    }
    .mobile-back-option{
        display: block;
    }
    .colorpicker{
        left: 0 !important;
    }
    .productdesigner-modal-main-popup .modal-footer .productdesigner-save.meet-save::before{
        color: #010101;
        padding-right: 5px;
        float: left;
        margin-top: 4px;
        font-size: 30px;
        font-weight: normal
    }
    footer.modal-footer {
        text-align: center !important;
    }
    .modal-popup._inner-scroll .modal-content{
        overflow-x: hidden;
    }
    #text-styles ul li, #common-styles ul li{
        padding: 0;
    }
    div#enter-text-control{
        margin-top: 5%;
    }
    .design-part-text.mobile-text-properties{
        margin-top: 5%
    }
    .modal-inner-wrap {
        overflow-x: hidden;
    }
    #enter-text-control,.enter-text-new-text-field,#text-menu{
        z-index: 99999;
    }
    div#mobile-image-upload{
        margin-top: 5%;
    }
    div#mobile-image-shadow,div#mobile-image-opacity,div#mobile-image-dimension {
        margin-top: 30%;
    }
    div#mobile-image-filters {
        margin-top: 12%;
    }
    div#mobile-image-shape{
        margin-top: 17%;
    }
    #mobile-clipart-advanced-properties-options #mobile-clipart-filters{
        transform: translateY(-22vh);
    }
    .small-images{
        z-index: 99999;
    }
}
@media (max-width: 668px) {

    input.shadow-por-control-range.image-filter-range {
        width: 200%;
    }
    #image-filter-tint-range{
        width: 185%;
    }
    .image-filter-effect .shadow-pro input.shadow-por-control-range{
        width: 202%;
    }
    #image-filter-tint-range{
        width: 203%;
        margin-left: 0;
    }
    .common-style-content .common-style-list{
        right: -4.4vw;
        top: 0;
    }
    .shadow-pro-title {
        font-size: 17px;
        font-family: "Open Sans";
        color: #006bb4;
        min-width: 19% !important;
        padding: 0;
    }
    #mobile-text-dimension .shadow-pro-title{
        min-width: 21% !important;
    }
    .dimensions-height-width {
        width: 17%
    }
    #mobile-image-advanced-properties-options #mobile-image-filters, #mobile-clipart-advanced-properties-options #mobile-clipart-filters{
        transform: translateY(-14vh);
    }
    #mobile-image-advanced-properties-options #mobile-image-shape{
        transform: translateY(-55%);
    }
    #mobile-clipart-advanced-properties-options #mobile-clipart-shape {
        transform: translateY(-55%);
    }
    div#enter-text-control{
        margin-top: 5%;
    }
    .design-part-text.mobile-text-properties{
        margin-top: 5%;
    }
    .mobile-text-advanced-properties-options {
        padding-top: 20% !important;
    }
    div#mobile-image-filters {
        margin-top: 14%;
    }
    div#mobile-image-shape{
        margin-top: 22%;
    }
    #mobile-clipart-advanced-properties-options #mobile-clipart-filters {
        transform: translateY(-25vh);
    }
}
@media (max-width: 648px) {
    .dimensions-x{
        width: 4.8%;
    }
    .checkmark{
        height: 20px;
        width: 20px;
        top: -7px;
    }
    .container .checkmark:after{
        left: 6px;
        top: 0px;
        width: 4px;
        height: 11px;
        border-width: 0 1vh 1vh 0;
    }
    input.shadow-por-control-range.image-filter-range {
        width: 175%;
    }
    .mobile-enter-text-button .mobile-enter-text-button-item a{
        font-size: 15px;
    }
    .design-text-part{
        padding-left: 10vw;
    }
    .enter-text-new-text-field{
        margin-left: 10%;
    }
    .design-part-text.mobile-text-properties{
        padding-left: 10vw;
        margin-bottom: 15px;
    }
    .mobile-design-part-text-font-style{
        padding-left: 10vw;
    }
    #mobile-image-advanced-properties-options #mobile-image-filters, #mobile-clipart-advanced-properties-options #mobile-clipart-filters{
        transform: translateY(-16vh);
    }
    div#mobile-image-advanced-properties-options{
        margin-top: 5%;
    }
    #mobile-clipart-advanced-properties-options #mobile-clipart-filters {
        transform: translateY(-27vh);
    }
}
@media (max-width:620px){
    .productdesigner-modal-main-popup.modal-slide .action-close{
        margin: 5px;
    }
    input.shadow-por-control-range.image-filter-range {
        width: 150%;
    }
    #image-filter-invert-range,#image-filter-emboss-range{
        margin-left: 10px;
    }
    .image-filter-effect .shadow-pro input.shadow-por-control-range{
        width: 175%;
    }
    #image-filter-tint-range{
        width: 155%;
    }
    #mobile-text-dimension .shadow-pro-title{
        min-width: 23% !important;
    }
    .dimensions-height-width {
        width: 19%
    }
    div#mobile-image-advanced-properties-options {
        margin-top: 10%;
    }
}
@media (max-width:584px){
    .productdesigner-modal-main-popup.modal-slide .action-close{
        margin: 5px;
    }
    .modal-inner-wrap .modal-content .image-design-area .img-area{
        width: 98%;
    }
    .common-style-content{
        width: 98%;
    }
    input[type='number']{
        font-size: 17px;
    }
    input.shadow-por-control-range.image-filter-range {
        width: 140%;
    }
    .image-filter-effect .shadow-pro input.shadow-por-control-range{
        width: 150%;
    }
    #image-filter-tint-range{
        width: 135%;
    }
    .mobile-view::-webkit-slider-thumb {
        width: 22px !important;
        height: 22px !important;
        border: 1px solid  #fff !important;
    }
    .common-style-content .common-style-list{
        top: 15px;
    }
    .shadow-pro-title {
        font-size: 16px;
        font-family: "Open Sans";
        color: #006bb4;
        min-width: 20% !important;
        padding: 0;
    }
    div#enter-text-control{
        margin-top: 18%;
    }
    .design-part-text.mobile-text-properties{
        margin-top: 18%;
    }
    .mobile-text-advanced-properties-options {
        padding-top: 35% !important;
    }
    div#mobile-image-upload{
        margin-top: 15%;
    }
    div#mobile-image-filters {
        margin-top: 25%;
    }
    div#mobile-image-shape{
        margin-top: 23%;
    }
    #mobile-clipart-advanced-properties-options #mobile-clipart-filters {
        transform: translateY(-25vh);
    }
}
@media (max-width:573px) {
    .design-area {
        height: 429px;
    }

    .modal-inner-wrap .modal-content .image-design-area .img-area {
        width: 98%;
        height: max-content;
    }

    .dimensions-x {
        width: 5%;
    }

    .input[type='number'] {
        font-size: x-small;
    }

    .effect-effect {
        width: 55%;
    }

    .design-text-part {
        padding-left: 11vw;
        grid-template-columns: 67% 7% 7%;
    }

    .enter-text-new-text-field {
        margin-left: 11%;
    }

    .design-part-text.mobile-text-properties {
        padding-left: 11vw;
    }

    .mobile-design-part-text-font-style {
        padding-left: 11vw;
    }

    div#enter-text-control {
        margin-top: 6%;
    }

    .design-part-text.mobile-text-properties {
        margin-top: 5%;
    }
    .mobile-text-advanced-properties-options {
        padding-top: 25% !important;
    }
    div#mobile-image-upload{
        margin-top: 7%;
    }
    div#mobile-image-shadow,div#mobile-image-opacity,div#mobile-image-dimension{
        margin-top: 32%;
    }
    div#mobile-image-filters {
        margin-top: 15%;
    }
}
@media (max-width: 552px) {
    .dimensions-x {
        width: 5.5%;
        font-size: medium;
    }

    .effect-effect {
        width: 60%;
        font-size: 15px;
    }

    input.shadow-por-control-range.image-filter-range {
        width: 120%;
    }

    .image-filter-effect .shadow-pro input.shadow-por-control-range {
        width: 125%;
    }

    #image-filter-tint-range {
        width: 100%;
    }

    .design-text-part {
        grid-template-columns: 69% 7% 7%;
        padding-left: 8vw;
    }

    .enter-text-new-text-field {
        margin-left: 8%;
    }

    .design-part-text.mobile-text-properties {
        padding-left: 8vw;
    }

    .mobile-design-part-text-font-style {
        padding-left: 8vw;
    }

    .shadow-pro-title {
        font-size: 15px;
        font-family: "Open Sans";
        color: #006bb4;
        min-width: 21% !important;
        padding: 0;
    }

    #mobile-text-dimension .shadow-pro-title {
        min-width: 25% !important;
    }

    #mobile-image-advanced-properties-options #mobile-image-filters, #mobile-clipart-advanced-properties-options #mobile-clipart-filters {
        transform: translateY(-16vh);
    }
    div#mobile-image-shadow,div#mobile-image-opacity,div#mobile-image-dimension{
        margin-top: 37%;
    }
    div#mobile-image-filters {
        margin-top: 15%;
    }
    #mobile-clipart-advanced-properties-options #mobile-clipart-filters {
        transform: translateY(-30vh);
    }
}
@media (max-width: 500px) {
    #mobile-text-effect .shadow-pro-title {
        font-size: 17px;
    }

    .image-filter-effect .shadow-pro input.shadow-por-control-range {
        width: 150%;
    }

    #design-image-filter .image-filter-effect {
        display: block;
    }

    #design-image-filter .shadow-pro {
        max-width: 50vw !important;
        margin-inline: auto;
    }

    #image-filter-tint-range {
        width: 150%;
    }

    .shadow-pro-title {
        font-size: 15px;
        font-family: "Open Sans";
        color: #006bb4;
        min-width: 23% !important;
        padding: 0;
    }

    #mobile-text-dimension .shadow-pro-title {
        min-width: 25% !important;
    }

    .dimensions-height-width {
        width: 20%;
    }

    #mobile-image-advanced-properties-options #mobile-image-filters, #mobile-clipart-advanced-properties-options #mobile-clipart-filters {
        transform: translateY(-14vh);
    }

    #mobile-image-advanced-properties-options #mobile-image-shape {
        transform: translateY(-62%);
    }

    #mobile-clipart-advanced-properties-options #mobile-clipart-shape {
        transform: translateY(-62%);
    }
    div#mobile-image-shadow,div#mobile-image-opacity,div#mobile-image-dimension {
        margin-top: 40%;
    }
    #mobile-clipart-advanced-properties-options #mobile-clipart-filters {
        transform: translateY(-30vh);
    }
}
@media (max-width: 476px) {
    input.shadow-por-control-range.image-filter-range {
        margin-top: 21px;
    }

    .image-filter-right .shadow-pro .shadow-pro-title #image-filter-color {
        margin-top: 10px;
    }

    .image-filter-right .shadow-pro .shadow-por-control .image-filter-color-range {
        margin-top: 20px;
    }

    input.shadow-por-control-range.image-filter-range {
        width: 100%;
    }

    .design-text-part {
        grid-template-columns: 75% 10% 10%;
        padding-left: 6vw;
    }

    .enter-text-new-text-field {
        margin-left: 6%;
    }

    .design-part-text.mobile-text-properties {
        padding-left: 6vw;
    }

    .mobile-text-advanced-properties-options {
        flex-direction: row;
        justify-content: space-between;
    }

    .mobile-text-advanced-properties::-webkit-scrollbar {
        width: 0; /* Mobile view Advanced Properties Scrollbar */
        height: 3px;
        background-color: #e4e2e3; /* or add it to the track */
    }

    /* Add a thumb */
    .mobile-text-advanced-properties::-webkit-scrollbar-thumb {
        background: #7898a5;
    }

    .mobile-design-part-text-font-style {
        padding-left: 6vw;
    }

    .shadow-pro-title {
        font-size: 15px;
        font-family: "Open Sans";
        color: #006bb4;
        min-width: 23% !important;
        padding: 0;
    }

    .shadow-por-control {
        width: 68%;
    }

    input[type="range"] {
        height: 1vw !important;
        margin-bottom: 8px;
    }

    input[type='range']::-moz-range-thumb {
        width: 23px;
        -webkit-appearance: none;
        height: 23px;
        background: #ffffff;
        border-radius: 100%;
        border: 0.5px solid #7c9ca9;
    }
    input[type='range']::-webkit-slider-thumb {
        width: 23px;
        -webkit-appearance: none;
        height: 23px;
        background: #ffffff;
        border-radius: 100%;
        border: 0.5px solid #7c9ca9;
    }

    .mobile-text-advanced-properties {
        margin-top: 25%;
    }

    .advanced-properties-option {
        margin-top: 20%;
    }

    .image-filter-effect .shadow-pro input.shadow-por-control-range {
        width: 137%;
    }

    .mobile-text-advanced-properties-options {
        margin-top: 8%;
    }
    .mobile-text-advanced-properties-options {
        padding-top: 23% !important;
    }
    div#mobile-image-shadow,div#mobile-image-opacity,div#mobile-image-dimension {
        margin-top: 42%;
    }
    div#mobile-image-filters{
        margin-top: 16%;
    }
    #mobile-clipart-advanced-properties-options #mobile-clipart-filters {
        transform: translateY(-27vh);
    }
}
@media (max-width: 440px) {
    .dimensions-x {
        width: 5.5%;
    }

    input[type='number'] {
        font-size: 15px;
    }

    .effect-effect {
        width: 66%;
        height: 5vh;
    }

    .image-filter-right .shadow-pro .shadow-por-control .image-filter-color-range {
        margin-left: -10px;
    }

    input.shadow-por-control-range.image-filter-range {
        width: 90%;
    }

    #image-filter-invert-switch, #image-filter-emboss-switch {
        margin-left: 0;
    }

    .image-filter-effect .shadow-pro input.shadow-por-control-range {
        width: 152%;
    }

    #image-filter-tint-range {
        width: 130%;
    }

    .modal-popup.modal-slide .modal-footer {
        width: 32%;
    }

    .shadow-pro-title {
        min-width: 24% !important;
    }

    #mobile-text-dimension .shadow-pro-title {
        min-width: 28% !important;
    }

    .dimensions-height-width {
        width: 22%;
    }

    #mobile-image-advanced-properties-options #mobile-image-filters, #mobile-clipart-advanced-properties-options #mobile-clipart-filters {
        transform: translateY(-13vh);
    }

    .image-filter-effect .shadow-pro {
        margin-top: 12px;
    }

    .mobile-text-advanced-properties-options {
        margin-top: 15%;
    }
    .mobile-text-advanced-properties-options {
        padding-top: 30% !important;
    }
    div#mobile-image-shadow,div#mobile-image-opacity,div#mobile-image-dimension {
        margin-top: 48%;
    }
    div#mobile-image-filters{
        margin-top: 16%;
    }
    #mobile-clipart-advanced-properties-options #mobile-clipart-filters {
        transform: translateY(-22vh);
    }
}
@media (max-width: 400px) {
    .shadow-pro-title {
        min-width: 29% !important;
    }

    .dimensions-x {
        width: 8%;
    }

    .dimensions-height-width {
        width: 19%;
    }

    .effect-effect {
        width: 76%;
    }

    .checkmark {
        top: -4px;
        height: 15px;
        width: 15px;
    }

    .container .checkmark:after {
        left: 4px;
        top: 0px;
        width: 3px;
        height: 7px;
        border-width: 0 0.8vh 0.8vh 0;
    }

    .image-filter-right .shadow-pro .shadow-por-control .image-filter-color-range {
        margin-left: -30px;
    }

    input.shadow-por-control-range.image-filter-range {
        width: 60%;
    }

    .image-filter-effect .shadow-pro input.shadow-por-control-range {
        width: 100%
    }

    .mobile-view::-webkit-slider-thumb {
        width: 18px !important;
        height: 18px !important;
        border: 1px solid #fff !important;
    }

    .modal-popup.modal-slide .modal-footer {
        width: 45%;
    }

    .mobile-enter-text-button .mobile-enter-text-button-item a {
        font-size: 13px;
    }

    .mobile-design-part-text-font-style {
        z-index: 99999;
        margin-top: 0;
    }

    .advanced-properties-option {
        margin-top: 40%;
    }

    .mobile-text-advanced-properties {
        margin-top: 45%;
    }

    #mobile-text-dimension .shadow-pro-title {
        min-width: 30% !important;
    }

    .advanced-properties-option {
        padding-left: 0;
    }

    .design-part-text.mobile-text-properties {
        margin-bottom: 13px;
    }

    #mobile-image-advanced-properties-options #mobile-image-filters, #mobile-clipart-advanced-properties-options #mobile-clipart-filters {
        transform: translateY(-4vh);
    }

    .slider:before {
        height: 12px;
        width: 12px;
        bottom: 4px;
        left: 3px
    }

    .switch {
        width: 45px;
        height: 20px;
    }

    .shadow-pro-title {
        font-size: 13px
    }

    #mobile-image-advanced-properties-options #mobile-image-shape {
        transform: translateY(-30%);
    }

    .image-filter-shape .pattern-pro img.image-shape {
        width: 7%;
        height: 7%;
    }

    .image-filter-shape .pattern-pro img {
        margin-left: 18px;
        margin-top: 20px;
    }

    #mobile-clipart-advanced-properties-options #mobile-clipart-shape {
        transform: translateY(-30%);
    }

    .clipart-filter-shape .pattern-pro img {
        margin-left: 18px;
        margin-top: 20px;
    }

    #mobile-image-upload {
        padding-top: 3%;
    }

    .mobile-text-advanced-properties-options {
        margin-top: 10%;
    }
    .mobile-text-advanced-properties-options {
        padding-top: 15% !important;
    }
    div#mobile-image-shadow,div#mobile-image-opacity,div#mobile-image-dimension {
        margin-top: 55%;
    }
    div#mobile-image-filters{
        margin-top: 10%;
    }
    div#mobile-image-shape{
        margin-top: 5%;
    }
    #mobile-clipart-advanced-properties-options #mobile-clipart-filters {
        transform: translateY(-10vh);
    }
}
@media (max-width: 350px) {
    .effect-effect {
        width: 87%;
    }

    input.shadow-por-control-range.image-filter-range {
        width: 20%;
    }

    .mobile-enter-text-button .mobile-enter-text-button-item a {
        font-size: 12px;
    }

    .mobile-design-part-text-font-style {
        margin-top: 0;
        z-index: 99999;
    }

    .design-part-text.mobile-text-properties {
        padding-bottom: 0;
        margin-bottom: 10px;
    }

    .design-text-part {
        margin-top: 10%;
    }

    .design-part-text.mobile-text-properties {
        margin-top: 10%;
    }

    #mobile-image-upload {
        padding-top: 10%;
    }

    .shadow-pro-title {
        min-width: 33% !important;
    }

    .advanced-properties-option {
        margin-top: 55%;
    }

    .mobile-text-advanced-properties {
        margin-top: 65%;
    }

    .mobile-text-advanced-properties-options {
        padding-bottom: 1px;
        margin-top: 10%;
    }

    .pattern-pro {
        gap: 10px;
    }

    #mobile-text-dimension .shadow-pro-title {
        min-width: 35% !important;
    }

    #mobile-image-advanced-properties-options #mobile-image-advanced-properties {
        margin-top: 60%;
    }

    #mobile-image-advanced-properties-options #mobile-image-filters, #mobile-clipart-advanced-properties-options #mobile-clipart-filters {
        transform: translateY(-1vh);
    }

    #mobile-image-shape .image-filter-shape .shadow-pro .shadow-por-control input.shadow-por-control-range.image-shape-range {
        width: 85%;
    }

    .image-filter-shape .pattern-pro {
        gap: 0px;
    }

    .image-filter-shape .pattern-pro img.image-shape {
        width: 8%;
        height: 8%;
    }

    .image-filter-shape .pattern-pro img {
        margin-left: 15px;
        margin-top: 15px;
    }

    #mobile-image-advanced-properties-options #mobile-image-shape {
        transform: translateY(-15%);
    }

    .clipart-filter-shape .pattern-pro {
        gap: 0;
    }

    #mobile-clipart-advanced-properties-options #mobile-clipart-shape {
        transform: translateY(-15%);
    }

    .clipart-filter-shape .pattern-pro img.image-shape {
        width: 8%;
        height: 8%;
    }

    .clipart-filter-shape .pattern-pro img {
        margin-left: 15px;
        margin-top: 15px;
    }

    #mobile-clipart-shape .clipart-filter-shape .shadow-pro .shadow-por-control input.shadow-por-control-range.image-shape-range {
        width: 85%;
    }
    .design-part-text.mobile-text-properties{
        margin-top: 5%;
    }
    .modal-popup._inner-scroll .modal-content{
        margin-left: 10px;
    }
    .mobile-text-advanced-properties-options {
        padding-top: 8% !important;
    }
    div#mobile-image-shadow,div#mobile-image-opacity,div#mobile-image-dimension {
        margin-top: 65%;
    }
    div#mobile-image-filters{
        margin-top: 0%;
    }
    #mobile-clipart-advanced-properties-options #mobile-clipart-filters {
        transform: translateY(-6vh);
    }
    #mobile-clipart-advanced-properties-options,#mobile-imaget-advanced-properties-options{
        margin-left: -11px;
    }
}