.manual-order-container .portlet-title {
    font-size: 1em;
}
.portlet .padding-lg {
    padding: 2em 2rem;
}
.portlet .portlet-title {
    font-size: 1.125rem;
    font-weight: 600;
    position: relative;
    background: #EDF1F2;
    color: #00334D;
    padding: 1rem;
}
.portlet {
    width: 100%;
    margin-bottom: 2em;
}
.portlet {
    background: #fff;
    border: 1px solid #EDF1F2;
}
.portlet .padding-lg .actions {
    right: 2rem;
}
.portlet .portlet-title .actions {
    position: absolute;
    top: 0;
    right: 1rem;
    bottom: 0;
    display: flex;
    align-items: center;
}
.manual-order-container .product-price {
    color: #039BE5;
    font-size: 1.625em;
}
.icon-right {
    margin-left: .5em;
}
.manual-order-container .product-details {
    display: block;
    margin-top: .5em;
    color: #039BE5;
}
.portlet .portlet-body:not(:first-of-type) {
    border-top: 1px solid #EDF1F2;
}

.portlet .padding-lg {
    padding: 2em 2rem;
}
.text-bold {
    font-weight: 700;
}
.colors-preview-container {
    max-width: 20.625rem;
    border: none;
}
.colors-preview-container {
    display: flex;
    flex-wrap: wrap;
    border-radius: 5px;
}
.colors-preview-container .color-box {
    position: relative;
    height: 2.625rem;
    width: 2.625rem;
    margin: .5em .25em 0;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,.2);
    background-clip: border-box;
    overflow: hidden;
    border-radius: 4px;
}
.sizes-container.nowrap {
    flex-wrap: nowrap;
}
.sizes-container {
    display: flex;
}
.sizes-container .size-item p {
    font-size: .875em;
    color: #333;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0;
}
.project-title-edit .description {
    color: #6B8896;
    font-size: .875em;
    font-weight: 400;
}
.project-title-edit input {
    border-radius: 3px;
    border-color: #E4E8EB;
    margin-bottom: 1em;
}
.sizes-container .size-item {
    background: #F6F7F8;
    text-align: center;
    padding: .5em 0 1em;
    border-right: 1px solid #fff;
}
.sizes-container .size-item .title {
    color: #6B8896;
    font-size: .875em;
    font-weight: 600;
    padding: 0 1em;
}
.c-input-wrapper {
    position: relative;
    display: flex;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}
.c-input {
    height: 42px !important;
    padding-top: 12px !important;
    border: 1px solid #dde3e6 !important;
    border-radius: 3px !important;
    box-shadow: inset 1px 0 3px 0 rgba(0,0,0,.05) !important;
    -webkit-transition: all .2s ease;
    transition: all .2s ease !important;
    color: #3f4c59 !important;
    font-size: 16px !important;
}
.c-input.stepper {
    text-align: center;
}
.c-input, .c-input-suffix__input {
    margin-bottom: 0;
    padding-bottom: 12px !important;
    font-weight: 300 !important;
}
.c-stepper__btn-right:hover {
    border-color: #dde3e6;
    border-left-style: none;
    background-color: #f4fbff;
    color: #039be5;
}
.c-input:hover {
    border-color: #039be5 !important;
    box-shadow: 0 0 6px 0 #d0f0ff, inset 1px 0 3px 0 rgba(0,0,0,.05) !important;
}
.c-stepper__btn-left:hover {
    border-color: #dde3e6;
    border-right-style: none;
    background-color: #f4fbff;
    color: #039be5;
}
.w-input, .w-select {
    width: 100% !important;
    padding: 8px 12px !important;
}
.w-input, .w-input-sort, .w-select, .w-select-sort {
    font-family: 'Nunito Sans',sans-serif;
    display: block;
    height: 38px;
    line-height: 1.42857143;
    color: #333;
    vertical-align: middle;
    background-color: #fff !important;
    border: 1px solid #ccc;
    font-size: 14px;
}
.w-inline-block {
    max-width: 100%;
}
.c-dropdown__arrow, .c-stepper__btn-left {
    -webkit-box-align: center;
}
.c-stepper__btn-left {
    left: 0;
    right: auto;
    display: flex;
    padding: 6px 12px;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border-style: solid none solid solid;
    border-color: transparent;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    color: #6e7c8a;
    font-size: 20px;
}
.c-stepper__btn-right {
    left: auto;
    right: 0;
    display: flex;
    padding: 6px 12px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border-style: solid solid solid none;
    border-color: transparent;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    color: #6e7c8a;
    font-size: 20px;
}
.c-stepper__btn-left, .c-stepper__btn-right {
    border-width: 1px;
    font-family: 'Nunito Sans',sans-serif;
    font-weight: 700;
    text-decoration: none;
    position: absolute;
    top: 0;
    bottom: 0;
}
.colors-preview-container .color-box.color-check {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-shadow: #000 0 0 1px;
    overflow: hidden;
}
.colors-preview-container .color-box.color-check:after {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f00c";
    transition: transform ease .2s,opacity ease .2s;
    z-index: 2;
}
.colors-preview-container .color-box.active {
    border: 1px solid #039BE5;
    box-shadow: inset 0 0 0 2px #fff;
}
.colors-preview-container .color-box.color-express::before {
    content: '';
    display: block;
    position: absolute;
    top: -.5em;
    right: -.5em;
    width: .95em;
    height: .95em;
    background: #fff;
    transform: rotate(45deg);
    outline: rgba(0,0,0,.2) solid 1px;
}
.btn-primary.disabled, .btn-primary:disabled {
    background-color: #039BE5;
    border-color: #039BE5;
}
.btn.disabled, .btn:disabled {
    cursor: not-allowed;
    opacity: .65;
}
.btn-block {
    width: 100% !important;
}
.design-nav {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    text-align: center;
    margin-top: 6em;
}
.design-nav a.active {
    background: #6B8896;
    color: #fff;
    font-weight: 700;
}
.design-nav a:first-child {
    border-radius: 4px 0 0 4px;
}
.design-nav a:last-child {
    border-radius: 0 4px 4px 0;
}
.design-nav a {
    display: block;
    width: 7rem;
    font-size: .75em;
    padding: .25em 2em;
}
.sidebar-caption, .sidebar-coupon, .sidebar-legal {
    color: #6B8896;
    margin-top: 1.25rem;
    font-size: .875em;
    font-weight: 400;
}
.design-edit {
    margin-bottom: 2em;
}
.mockup-preview img:not(.active) {
    display: none;
}

.mockup-preview .add-design-button-front.active, .mockup-preview .add-design-button-back.active {
    display: flex;
    align-items: center;
}
.mockup-preview .add-design-button-back, .mockup-preview .add-design-button-front {
    display:none;
}
.printarea-box {
    /*display: flex;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 21%;
    border: 2px dashed transparent;
    width: 197px;
    height: 300px;
    box-sizing: content-box;
    transition: transform ease .3s,border ease .2s;
    transform: translateY(0) translateX(-34%);*/
}
.btn-white {
    border-color: #fff !important;
    color: #039BE5 !important;
    text-align: center;
}
.btn, .custom-select {
    vertical-align: middle !important;
}
#upload-demo-front, #upload-demo-back {
    display: none;
}
#upload-demo-front.design-uploaded, #upload-demo-back.design-uploaded {
    /*margin-top: 30px;*/
}
.add-design-button-front .btn, .add-design-button-back .btn {
    padding: 0px 10px;
}
.mayurcls {
    /*width: auto !important;
    position: relative;
    top: 13px;
    margin-left: 90px;*/
}
.edit_icons, .edit_icons_back { 
    float: left;
    color: red;
    z-index: 9999999999;
    cursor: pointer;
    position: absolute;
    width: 100%;
    margin-left: 13px;
}
.cr-slider-wrap {
    margin-top: 70%;
    width: 100%;
}
.croppie-container .cr-slider-wrap {
    width: 75%;
    margin: 160px 0px 0 30px !important;
    text-align: center;
}
.mm-box-wrapper {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    text-align: center;
    float: left;
    position: absolute;
    width: 100%;
    margin-top: 206%;
}
.rotate_val_div {
    width: 37%;
    position: absolute;
    margin-top: 61px;    
}
.mm-box-right {
    float: none;
    width: auto;
}
.design_btn {    
    font-weight: 600;
    color: #ffffff;
    font-family: 'Open Sans', sans-serif;
    /* background-color: #3B4E71; */
    background-color: #1EC6B5;
    text-transform: none;
    border: 0px;
    outline: none;
    text-align: center;
    padding: 12px 24px;
    font-size: 16px;
    /* line-height: 24px; */
    height: 52px;
    min-width: 47px;
    width: 160px;
    border-radius: 6px;
    display: inline-block;
    vertical-align: top;
    display: block;
    position: relative;
    margin-top: 160px;
    margin-left: 185px;
    top: 0;
    left: 0;
}
.rotate_txt {
    border: 1px solid !important;
    width: 60px !important;
    margin-top:7px !important;
    height: 29px !important;
    text-align: center !important;
    color: #000 !important;
}
.size_dtl {
    float: left;
}
.desinger-sale_product {
    float: right;
    font-weight: 700;
    background: #3eb38d;
    padding: 7px 7px 5px 7px;
    color: #FFF;
    border-radius: 6px;
}
.desinger-sale_product:hover {
    color: #ececec8f
}
.pd-box-desc-link {
    color: #00b2a5;
    font-weight: 800;
    font-size: 14px;
    line-height: 32px;
}
.pd-box-title-main {
    font-size: 20px;
    line-height: 36px;
    font-weight: 700;
    color: #394E71;
    margin: 0px 0px 4px 0px;
    padding: 0px;
    display: inline-block;
    vertical-align: top;
    width: 100%;
}
.pod_user_upload_image {
    width: 150px;
    padding: 10px;
}
.pod_user_upload_image:hover {
    background-color: #d9d9d9;
    border-color: #d9d9d9;
    cursor: pointer;
    border: 5px solid green;
}
.upload-tags {
    width: 100%;
    max-width: 30%;
    flex: 0 0 30%;
    height: auto;
    overflow-y: auto;
    /*max-height: 450px;*/
    max-height: 555px;
    border-right: 2px solid #1d2d2673;
    margin: 2px;
    float: left;
    position: relative;
}
.upload-tags-details {
    width: 100%!important;
}
.input-with-icon {
  position: relative;
  width: 326px;
  height: 3.2rem;
  box-sizing: border-box;
}
.upload-tags-details.input-with-icon {
    width: 100% !important;
    height: auto !important;
}

.input-with-icon .icon {
    position: absolute;
    right: 0.0rem;
    top: 0.2rem;
    width: 2.6rem;
    height: 3.8rem;
    border-radius: 0.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 0px 11px;
    width: auto;
    min-width: auto;
}
.tag_name {
    border: 2px solid #8e585873;
    padding: 3px 9px 2px 9px;
    border-radius: 5px;
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    list-style:none;
    }
    .mask_image {
        height: 498px;
        width: 466px;
    }

/****** new css add form product details balde page 05-02-2021 ******/
    .bangers-font {
        font-family: 'Bangers', cursive !important;
    }
    .boogaloo-font {
        font-family: 'Boogaloo', cursive !important;
    }
    .caveat-font {
        font-family: 'Caveat', cursive !important;
    }
    .caveat-brush-font {
        font-family: 'Caveat Brush', cursive !important;
    }
    .chela-one-font {
        font-family: 'Chela One', cursive !important;
    }
    .cherry-swash-font {
        font-family: 'Cherry Swash', cursive !important;
    }
    .coiny-font {
        font-family: 'Coiny', cursive !important;
    } 
    .concert-one-font {
        font-family: 'Concert One', cursive !important;
    } 
    .creepster-font {
        font-family: 'Creepster', cursive !important;
    } 
    .fredoka-one-font {
        font-family: 'Fredoka One', cursive !important;
    }
    .germania-one{
        font-family: 'Germania One', cursive !important;
    }
    .graduate-font {
        font-family: 'Graduate', cursive !important;
    }
    .knewave-font {
        font-family: 'Knewave', cursive !important;
    }
    .Montserrat-font {
        font-family: 'Montserrat', sans-serif !important;
    }
    .open-sans-font {
        font-family: 'Open Sans', sans-serif !important;
    }
    .oswald-font{
        font-family: 'Oswald', sans-serif !important;
    }
    .pacifico-font {
        font-family: 'Pacifico', cursive !important;
    }
    .permanent-marker-font {
        font-family: 'Permanent Marker', cursive !important;
    }
    .rammetto-one-font {
        font-family: 'Rammetto One', cursive !important;
    }
    .shrikhand-font {
        font-family: 'Shrikhand', cursive !important;
    }
    .spicy-rice-font {
        font-family: 'Spicy Rice', cursive !important;
    }
    .vampiro-one-font {
        font-family: 'Vampiro One', cursive !important;
    }
    .vollkorn-font {
        font-family: 'Vollkorn', serif !important;
    }
    .wendy-one-font {
        font-family: 'Wendy One', sans-serif !important;
    }

    .font-weight-100 {
        font-weight: 100 !important;
    }
    .font-weight-200 {
        font-weight: 200 !important;
    }
    .font-weight-300 {
        font-weight: 300 !important;
    }
    .font-weight-400 {
        font-weight: 400 !important;
    }
    .font-weight-500 {
        font-weight: 500 !important;
    }
    .font-weight-600 {
        font-weight: 600 !important;
    }
    .font-weight-700 {
        font-weight: 700 !important;
    }
    .font-weight-800 {
        font-weight: 800 !important;
    }
    .font-weight-900 {
        font-weight: 900 !important;
    }
    .font-weight-1000 {
        font-weight: 1000 !important;
    }
    .font-weight-1100 {
        font-weight: 1100 !important;
    }

    .italic{
        font-style: italic !important;
    }
    .normal{
        font-style: normal !important;
    }

    canvas {
        max-width: 100%;
        max-height: 100%;
    }
    .svg.designer-border {
        overflow: visible !important;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .designer-border-shape-2 {
        stroke: #fff;
        stroke-width: 2px;
        fill: transparent;
        stroke-opacity: 1;
        opacity: 1;
        fill-opacity: 1;
    }
    .designer-border-shape {
        stroke: #4affa5;
        stroke-width: 2px;
        fill: transparent;
        stroke-opacity: 1;
        opacity: 1;
        fill-opacity: 1;
        stroke-dasharray: 5;
        animation: designer-border-dash 1s linear infinite;
    }

    .design-area {
        border: 1px dashed #FFFF;
        position: absolute;
        z-index: 1000;
    }
    
    .tag_name {
        border: 2px solid #88878773 !important;
        width: fit-content !important;
        margin-top: 2px;
        display: inline-block;
    }
    .tag-result {
        margin-left: -17px !important;
        margin-top: 10px !important;
    }